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

• 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

https://www.figma.com/design/gmNQdGRWOfyR1tVrnU7sz6/SXP-Task-Service---Dev-ready-phase-1?node-id=239-113650&t=YnCOXOkk7o9Jeg82-0

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 :)