diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx index 3d2ce00c124..ed021a84bc1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx @@ -122,7 +122,12 @@ export const ToggleButtonStatusMessages = () => ( export const ToggleButtonDisabledGroup = () => ( - + diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.screenshot.test.ts b/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.screenshot.test.ts index f48030e6b92..22eb95a6943 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.screenshot.test.ts @@ -8,7 +8,7 @@ import { setupPageScreenshot, } from '../../../core/jest/jestSetupScreenshots' -describe.each(['ui', 'sbanken'])('Radio for %s', (themeName) => { +describe.each(['ui', 'sbanken'])('ToggleButton for %s', (themeName) => { describe('ToggleButton unchecked', () => { setupPageScreenshot({ themeName, @@ -112,4 +112,11 @@ describe.each(['ui', 'sbanken'])('Radio for %s', (themeName) => { expect(screenshot).toMatchImageSnapshot() }) }) + + it('have to match toggle-button in disabled state', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="toggle-button-group-disabled"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) }) diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-group-with-form-status.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-group-with-form-status.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-group-with-form-status.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-group-with-form-status.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-group.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-group.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-group.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-group.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-in-active-focus-state.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-in-active-focus-state.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-in-active-focus-state.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-in-active-focus-state.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-in-checked-state.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-in-checked-state.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-checked-have-to-match-toggle-button-in-checked-state.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-checked-have-to-match-toggle-button-in-checked-state.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-have-to-match-toggle-button-in-disabled-state.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-have-to-match-toggle-button-in-disabled-state.snap.png new file mode 100644 index 00000000000..dc443595af1 Binary files /dev/null and b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-have-to-match-toggle-button-in-disabled-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-sbanken-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-group-with-form-status.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-group-with-form-status.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-group-with-form-status.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-group-with-form-status.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-group.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-group.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-group.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-group.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-in-active-focus-state.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-in-active-focus-state.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-in-active-focus-state.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-in-active-focus-state.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-in-checked-state.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-in-checked-state.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-checked-have-to-match-toggle-button-in-checked-state.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-checked-have-to-match-toggle-button-in-checked-state.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-have-to-match-toggle-button-in-disabled-state.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-have-to-match-toggle-button-in-disabled-state.snap.png new file mode 100644 index 00000000000..58567efbcc4 Binary files /dev/null and b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-have-to-match-toggle-button-in-disabled-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/radio-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png rename to packages/dnb-eufemia/src/components/toggle-button/__tests__/__image_snapshots__/togglebutton-for-ui-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 666a4d9a122..83d81d40103 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -1730,6 +1730,10 @@ exports[`ToggleButton scss have to match default theme snapshot 1`] = ` .dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button { box-shadow: 0 0 0 0.0318rem var(--color-sea-green); } +.dnb-toggle-button--checked .dnb-toggle-button__button[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled], .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] { + background-color: var(--color-mint-green); + color: var(--color-white); +} .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) { background-color: var(--color-emerald-green); color: var(--color-mint-green); diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss b/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss index 73114488497..5e826de7d5b 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss +++ b/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss @@ -24,7 +24,6 @@ &[disabled] { @include fakeBorder(var(--sb-color-gray-light), 0.09375rem, inset); - background-color: var(--sb-color-gray-light); color: var(--sb-color-gray-dark); } @@ -55,6 +54,12 @@ /* stylelint-disable no-descending-specificity */ &--checked &__button { + &[disabled] { + @include fakeBorder(var(--sb-color-gray-light), 0.09375rem, inset); + background-color: var(--sb-color-gray-light); + color: var(--sb-color-gray-dark); + } + &:not([disabled]):not(:active) { background-color: var(--sb-color-violet); color: var(--sb-color-white); diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss b/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss index d656e45505c..bb308ae29a2 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss @@ -25,6 +25,11 @@ &--checked &__button, &--checked &__button:focus, &--checked &__button:hover { + &[disabled] { + background-color: var(--color-mint-green); + color: var(--color-white); + } + &:not([disabled]):not(:active) { background-color: var(--color-emerald-green); color: var(--color-mint-green);