Skip to content

Comments

feat(breadcrumbs): align with Fusion DS#7752

Open
nuria1110 wants to merge 1 commit intomasterfrom
breadcrumbs-audit
Open

feat(breadcrumbs): align with Fusion DS#7752
nuria1110 wants to merge 1 commit intomasterfrom
breadcrumbs-audit

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
@nuria1110 nuria1110 force-pushed the breadcrumbs-audit branch 2 times, most recently from 2c01f88 to 43ba2f4 Compare February 9, 2026 15:30
DipperTheDan
DipperTheDan previously approved these changes Feb 9, 2026
edleeks87
edleeks87 previously approved these changes Feb 10, 2026
@nuria1110 nuria1110 marked this pull request as ready for review February 11, 2026 10:03
@nuria1110 nuria1110 requested review from a team as code owners February 11, 2026 10:03
@designerlisa
Copy link

Hi @nuria1110 ! I’ve reviewed the Git ticket — the component looks all good to me.
Just one small request: could you please update the link in the document? It’s currently pointing to the old DS library, and it should now link to the Fusion library instead.
Thanks!

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.

5 participants