carbon
carbon copied to clipboard
Sage
ScrollableBlock background colour appears incorrect when used in MenuFullscreen and menuType is either 'black' or 'white'.
Current behaviour
ScrollableBlock (variant alternative) background colour when used in MenuFullscreen (menuType 'black') renders menu items with a different background colour than expected.
This issue affects both black and white menu types.
Expected behaviour
For menu items within the ScrollableBlock to be rendered without a different background colour to similar menu items not contained within a ScrollableBlock.
CodeSandbox or Storybook URL
https://codesandbox.io/s/menufullscreen-6lx87y
JIRA Ticket (Sage Only)
SBS-36740
Suggested Solution
No response
Carbon Version
107.1.7
Design Tokens Version
2.30.0
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
@harpalsingh I cannot see anything in the Design System that states that a ScrollableBlock in Menu should be the same colour as the other menu items. Could you confirm if they are any designs in Figma that support @johnb-sage expected behaviour please and thank you 😄
@DipperTheDan You'll notice in my codesandbox that when you are fullscreen (> 1200px) that the ScrollableBlock's background colour does match the regular menu items (Result 1 & Result 2).
The ScrollableBlock's background colour was changed as part of #5133 but reverts when contained by MenuFullScreen.
@nicktitchmarsh @ljemmo I can take a look at this, must have missed my call out on it and check whats happened and expected
@johnb-sage Having looked at this, its clear me to me that the assigned colors are incorrect, either in the block or the standard icons, but I believe this is because when these new colors were added it was no clarified the color the UI should look, the screens I have in design are for the Light / Dark themes, so I will mockup the actual visual that was expected and share it here to clarify which colors are incorrect.
@johnb-sage An update, I'm doing a full visual on this, because realised the impact is not only the colors but also the scrollblock itself, as in full menu we should only have a single scrollbar and I am fixing those too for accessibility.