feat(Breadcrumb): correct gap between items and fix overlapping focus…

… ring (#2917) * Distance between breadcrumbs increased to match design * Fixed the left padding in collapsed mode. [Slack Thread](https://dnb-it.slack.com/archives/CMXABCHEY/p1699349835359029).
dnbexperience · Nov 24, 2023 · 6252458 · 6252458
1 parent f5a5382
commit 6252458
Show file tree

Hide file tree

Showing 10 changed files with 4 additions and 11 deletions.
diff --git a/...hots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-collapse-opened.snap.png b/...hots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-collapse-opened.snap.png
diff --git a/...napshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-focus-state.snap.png b/...napshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-focus-state.snap.png
diff --git a/...breadcrumb-for-sbanken-have-to-match-breadcrumb-multiple-with-children.snap.png b/...breadcrumb-for-sbanken-have-to-match-breadcrumb-multiple-with-children.snap.png
diff --git a/...e_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-multiple.snap.png b/...e_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-multiple.snap.png
diff --git a/...snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-collapse-opened.snap.png b/...snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-collapse-opened.snap.png
diff --git a/...age_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-focus-state.snap.png b/...age_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-focus-state.snap.png
diff --git a/...ts__/breadcrumb-for-ui-have-to-match-breadcrumb-multiple-with-children.snap.png b/...ts__/breadcrumb-for-ui-have-to-match-breadcrumb-multiple-with-children.snap.png
diff --git a/..._image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-multiple.snap.png b/..._image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-multiple.snap.png
diff --git a/...es/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/...es/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -720,6 +720,7 @@ button.dnb-button::-moz-focus-inner {
   list-style: none;
   flex-flow: row wrap;
   align-items: center;
+  gap: 1.5rem;
 }
 .dnb-breadcrumb__item__span {
   display: flex;
@@ -728,12 +729,8 @@ button.dnb-button::-moz-focus-inner {
   padding: 0.5rem 0;
 }
 .dnb-breadcrumb__item__span__icon {
-  margin-left: calc(var(--button-icon-size) / 2);
   margin-right: 0.5rem;
 }
-.dnb-breadcrumb__item:not(:first-of-type) .dnb-button.dnb-button--has-text {
-  padding-left: 0.5rem;
-}
 .dnb-breadcrumb__animation {
   display: flex;
   flex-direction: column;
@@ -755,5 +752,6 @@ button.dnb-button::-moz-focus-inner {
   align-items: flex-start;
   margin: 0.5rem 0;
   margin-left: 1.5rem;
+  gap: 0;
 }"
 `;
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss b/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss
@@ -25,6 +25,7 @@
 
     flex-flow: row wrap;
     align-items: center;
+    gap: 1.5rem;
   }
 
   &__item {
@@ -36,18 +37,11 @@
 
       // To match the other tertiary buttons
       &__icon {
-        margin-left: calc(var(--button-icon-size) / 2);
         margin-right: 0.5rem;
       }
     }
   }
 
-  &__item:not(:first-of-type) {
-    .dnb-button.dnb-button--has-text {
-      padding-left: 0.5rem;
-    }
-  }
-
   &__animation {
     display: flex;
     flex-direction: column;
@@ -76,5 +70,6 @@
 
     margin: 0.5rem 0;
     margin-left: 1.5rem;
+    gap: 0;
   }
 }