diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-collapse-opened.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-collapse-opened.snap.png index e2c81c3bb6b..4caf0603b02 100644 Binary files a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-collapse-opened.snap.png and b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-collapse-opened.snap.png differ diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-focus-state.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-focus-state.snap.png index eba0276f7e2..57af982f0d2 100644 Binary files a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-focus-state.snap.png and b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-sbanken-have-to-match-breadcrumb-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-collapse-opened.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-collapse-opened.snap.png index 683daa95d77..c3b32bb45d6 100644 Binary files a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-collapse-opened.snap.png and b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-collapse-opened.snap.png differ diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-focus-state.snap.png b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-focus-state.snap.png index e3727cd48ee..8779f33ea00 100644 Binary files a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-focus-state.snap.png and b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__image_snapshots__/breadcrumb-for-ui-have-to-match-breadcrumb-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap index d8e26824902..2161c902a90 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/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 index 7f459d0c288..b2b6a14bf27 100644 --- 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; } }