Breadcrumbs component should have a color / backgroundcolor prop

[sagemihir]

Description

Breadcrumbs component should have a color / backgroundcolor prop for the dark background screens

Suggested solution

Additional prop for color/background color

For example:

Demo URL

No response

Alternatives

No response

Additional context

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[nineteen88]

@ljemmo Breadcrumbs don't have a dark variant like links do but effectively they are just links, right? Should we make changes to Breadcrumbs to follow suit?

[ljemmo]

@nineteen88 Makes sense on my side!

@clairedenning FYI we should probably support on dark breadcrumbs in the fusion DS.

[clairedenning]

Can I ask to see an example of somewhere that needs breadcrumbs on a dark bg please, I'm available on slack or teams? @sagemihir

[edleeks87]

I think it would still be good to get some examples of what's wanted here, @sagemihir would you mind sharing them with the carbon and DS teams on slack please? We currently omit certain props from the LinkProps interface before extending them in the CrumbProps interface which we can make changes to to free up support for rendering on dark backgrounds. However, there are other elements rendered as part of this component so we would need to know if they also need styles updated in this scenario

[emmswalker]

Can I ask to see an example of somewhere that needs breadcrumbs on a dark bg please, I'm available on slack or teams? @sagemihir

@clairedenning currently this would be on the onboarding tasks only

[ask Ed for figma link]

Let me know if you need to go through anything :)

[sagemihir]

@edleeks87 I guess we just need a prop to Breadcrumbs component to have a different color for the darker backgrounds (something like a white or green), exactly how @emmswalker has mentioned in the above comment, currently the breadcrumbs has a green color but for the current page link gets merged into the dark background. Let us know if you need any more inputs

Thanks

[clairedenning]

@nineteen88 Makes sense on my side!

@clairedenning FYI we should probably support on dark breadcrumbs in the fusion DS.

@ljemmo adding that to our FUsion kanban now. FYI @edleeks87 and @emmswalker our breadcrumbs on light bgs are changing to black (not green). So we'd recommend breadcrumbs on dark bgs are white.

[emmswalker]

@clairedenning Can I ask why the breadcrumbs are moving away from the colour we use for actionable elements?

[clairedenning]

Hi @emmswalker. Not all actionable elements are green. We tend to keep green for the more prominent actions. Do you have a use-case where black (or white) won't work for you?

[emmswalker]

@clairedenning Just wondering if you could share the reasoning behind the change?

[clairedenning]

@emmswalker because we want to keep green for more prominent actions :)

[nicktitchmarsh]

So just to clarify here @clairedenning, we do need to add dark background support for breadcrumbs and they should be white? or should we follow the Link styling in our current version of the DS?

[clairedenning]

I think for the moment you can user the subtle link on dark (ie white link). We will create on-dark variant of breadcrumbs in the new figma library, and that will also address the colour of the slash between each breadcrumb. If you need a token for the slash right now, then replace yin with yang and that should work :)

[Parsium]

Thanks everyone 👍🏼 Sounds like we have the requirements to get started. I've raised a ticket on our side now:

FE-6760

[Parsium]

@clairedenning regarding the new green colour for the selected link, we won't be using this since it's part of the new FusionDS and not the frozen one. For now, we'll add support for a dark background similar to what we have for the Carbon Link component and use the existing green colour for the selected link.

[carbonci]

:tada: This issue has been resolved in version 142.6.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: