ScrollableBlock background colour appears incorrect when used in MenuFullscreen and menuType is either 'black' or 'white'.

[johnb-sage]

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.

[DipperTheDan]

@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 😄

[johnb-sage]

@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, are you able to advise on the correct colours here?

[harpalsingh]

@nicktitchmarsh @ljemmo I can take a look at this, must have missed my call out on it and check whats happened and expected

[harpalsingh]

@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.

[harpalsingh]

@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.

[nicktitchmarsh]

FE-5290