feat: reduce focus effect overlap. Fixed collapsed alignement

dnbexperience · Nov 17, 2023 · 270279d · 270279d
1 parent ef83713
commit 270279d
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 8 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/...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/...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: 0.5rem;
 }
 .dnb-breadcrumb__item__span {
   display: flex;
@@ -728,11 +729,13 @@ 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__item .dnb-button.dnb-button--has-text::before {
+  --button-tertiary-focus-right: -0.5rem;
+}
+.dnb-breadcrumb__item:not(:first-of-type) .dnb-button.dnb-button--has-text::before {
+  --button-tertiary-focus-left: -0.25rem;
 }
 .dnb-breadcrumb__animation {
   display: flex;
@@ -755,5 +758,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: 0.5rem;
   }
 
   &__item {
@@ -36,15 +37,16 @@
 
       // 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;
+    .dnb-button.dnb-button--has-text::before {
+      --button-tertiary-focus-right: -0.5rem;
+    }
+
+    &:not(:first-of-type) .dnb-button.dnb-button--has-text::before {
+      --button-tertiary-focus-left: -0.25rem;
     }
   }
 
@@ -76,5 +78,6 @@
 
     margin: 0.5rem 0;
     margin-left: 1.5rem;
+    gap: 0;
   }
 }