fix(breadcrumbs): align icon

abelflopes · Jan 21, 2025 · 3cbade4 · 3cbade4
1 parent 45225bd
commit 3cbade4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git 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
@@ -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<typeof Breadcrumbs>;
 
@@ -27,6 +29,9 @@ export const Component: Story = {
     items: [
       <Breadcrumbs.Item key="1" as={<a href="/"> {faker.lorem.word()}</a>} />,
       <Breadcrumbs.Item key="2" as={["a", { href: "../" }]}>
+        <Icon size="text">
+          <IconCog />
+        </Icon>
         {faker.lorem.word()}
       </Breadcrumbs.Item>,
       <Breadcrumbs.Item key="3" active>