feat: center chefron with content

ocean-ds · Sep 1, 2023 · b2a7f78 · b2a7f78
1 parent b757d3a
commit b2a7f78
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/packages/ocean-core/src/components/breadcrumb.scss b/packages/ocean-core/src/components/breadcrumb.scss
@@ -7,7 +7,7 @@
     color: $color-interface-dark-up;
   }
 
-  div {
+  &__item {
     align-items: center;
     display: flex;
     gap: 4px;

diff --git a/packages/ocean-react/src/Breadcrumb/Breadcrumb.tsx b/packages/ocean-react/src/Breadcrumb/Breadcrumb.tsx
@@ -22,11 +22,11 @@ const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
         );
 
         return typeof item === 'string' ? (
-          <div key={`string-item-${item}`}>
+          <div className="ods-breadcrumb__item" key={`string-item-${item}`}>
             <span>{item}</span> {showIcon}
           </div>
         ) : (
-          <div key={`tag-item-${index + 1}`}>
+          <div className="ods-breadcrumb__item" key={`tag-item-${index + 1}`}>
             {item} {showIcon}
           </div>
         );

diff --git a/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/ocean-react/src/Breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -21,7 +21,9 @@ test('renders breadcrumb with array elements', () => {
       class="ods-breadcrumb custom-class"
       data-testid="breadcrumb-test"
     >
-      <div>
+      <div
+        class="ods-breadcrumb__item"
+      >
         <span>
           item 1
         </span>
@@ -40,7 +42,9 @@ test('renders breadcrumb with array elements', () => {
           />
         </svg>
       </div>
-      <div>
+      <div
+        class="ods-breadcrumb__item"
+      >
         <span>
           item 2
         </span>
@@ -65,7 +69,9 @@ test('renders breadcrumb with array string', () => {
       class="ods-breadcrumb custom-class"
       data-testid="breadcrumb-test"
     >
-      <div>
+      <div
+        class="ods-breadcrumb__item"
+      >
         <span>
           item 1
         </span>
@@ -84,7 +90,9 @@ test('renders breadcrumb with array string', () => {
           />
         </svg>
       </div>
-      <div>
+      <div
+        class="ods-breadcrumb__item"
+      >
         <span>
           item 2
         </span>
@@ -103,7 +111,9 @@ test('renders breadcrumb with array string', () => {
           />
         </svg>
       </div>
-      <div>
+      <div
+        class="ods-breadcrumb__item"
+      >
         <span>
           item 3
         </span>