Skip to content

Conversation

@nuria1110
Copy link
Contributor

@nuria1110 nuria1110 commented Feb 4, 2026

Proposed behaviour

Aligns Breadcrumbs component to Fusion DS.:

  • Updates styles using fusion-tokens.
  • Adds new inverse prop.
  • Deprecates isDarkBackground prop from Breadcrumbs.
  • Deprecates hasFocus, underline, linkSize and bold props from Crumb.
image image

Current behaviour

Breadcrumbs component is not aligned with Fusion DS.

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

There is a bug in react-docsgen-typescript where the props table will not generate in storybook when a variable is declared outside of the scope of a component exported as default, so I've had to add a named export for Crumb to fix this.

Testing instructions

Copy link
Contributor

@edleeks87 edleeks87 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work @nuria1110, some minor suggestions from me


export interface CrumbProps
extends Omit<
extends Pick<
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

const { isDarkBackground } = useBreadcrumbsContext();
const { inverse } = useBreadcrumbsContext();

if (rest.hasFocus && !deprecatedHasFocusWarn) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comment: I think as these props weren't likely to have been used simply annotating the interface will be enough

<li>
<StyledCrumb
ref={ref}
isCurrent={isCurrent}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
isCurrent={isCurrent}
$isCurrent={isCurrent}

@DipperTheDan DipperTheDan self-requested a review February 6, 2026 16:02
Aligns Breadcrumbs component to Fusion DS. Updates styles using fusion-tokens and adds new `inverse`
prop. Deprecates `isDarkBackground` prop from Breadcrumbs and `hasFocus`, `underline`, `linkSize`
and `bold` props from Crumb.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants