fix(ToggleButton): add checked disabled style (#3224)

proposal to solve #3028
and #3027

Not sure if its the best way though.

before:
<img width="143" alt="Screenshot 2024-01-15 at 10 12 42"
src="https://github.com/dnbexperience/eufemia/assets/25927156/3f08ba85-8f75-444d-bf4f-8fe8b918c9d6">

after:
<img width="166" alt="Screenshot 2024-01-15 at 10 12 22"
src="https://github.com/dnbexperience/eufemia/assets/25927156/48d84173-a76e-4317-9634-194d349a88ed">

---------

Co-authored-by: Tobias Høegh <[email protected]>

packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button/Examples.tsx

@@ -122,7 +122,12 @@ export const ToggleButtonStatusMessages = () => (
 
 export const ToggleButtonDisabledGroup = () => (
   <ComponentBox data-visual-test="toggle-button-group-disabled">
-    <ToggleButton.Group label="Disabled Group" disabled variant="checkbox">
+    <ToggleButton.Group
+      label="Disabled Group"
+      disabled
+      value="first"
+      variant="checkbox"
+    >
       <ToggleButton text="First" value="first" />
       <ToggleButton text="Second" value="second" />
       <ToggleButton text="Third" value="third" checked />

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()
+  })
 })

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);

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);

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);