diff --git a/packages/components/_provisional/src/breadcrumbs/styles/item.module.scss b/packages/components/_provisional/src/breadcrumbs/styles/item.module.scss index 4cee1f76..50934413 100644 --- a/packages/components/_provisional/src/breadcrumbs/styles/item.module.scss +++ b/packages/components/_provisional/src/breadcrumbs/styles/item.module.scss @@ -1,8 +1,14 @@ @use "@react-ck/text"; +@use "@react-ck/theme"; .root { @include text.text-base; + display: inline-flex; + align-items: center; + justify-content: center; + gap: theme.get-spacing(0.5); + &.active { @include text.text-skin(bold); } diff --git a/packages/docs/stories/src/generic-breadcrumbs.stories.tsx b/packages/docs/stories/src/generic-breadcrumbs.stories.tsx index c2249b82..dca018e4 100644 --- a/packages/docs/stories/src/generic-breadcrumbs.stories.tsx +++ b/packages/docs/stories/src/generic-breadcrumbs.stories.tsx @@ -4,6 +4,8 @@ import { Manager } from "@react-ck/manager"; import { configureStory } from "@react-ck/story-config"; import { Breadcrumbs } from "@react-ck/provisional/src"; import { faker } from "@faker-js/faker"; +import { Icon } from "@react-ck/icon/src"; +import { IconCog } from "@react-ck/icon/icons/IconCog"; type Story = StoryObj; @@ -27,6 +29,9 @@ export const Component: Story = { items: [ {faker.lorem.word()}} />, + + + {faker.lorem.word()} ,