fix(multiple): disabled states (#1972)

Closes #1955 The following disabled states were adapted to the new design: - Checkbox - Form field (Text input / time input) - Option (Select / Autocomplete) - Radio button - Selection Panel - Slider - Tag - Toggle Check - Toggle / Toggle Option
sbb-design-systems · Sep 12, 2023 · dc47583 · dc47583
1 parent 3b7f50d
commit dc47583
Show file tree

Hide file tree

Showing 14 changed files with 169 additions and 149 deletions.
diff --git a/src/components/sbb-checkbox/sbb-checkbox.scss b/src/components/sbb-checkbox/sbb-checkbox.scss
@@ -10,7 +10,6 @@
   --sbb-checkbox-cursor: pointer;
   --sbb-checkbox-subtext-color: var(--sbb-color-granite-default);
   --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-checkbox-text-decoration: none;
 
   display: inline-block;
 
@@ -19,35 +18,10 @@
   outline: none !important;
 }
 
-:host([data-group-disabled]),
-:host([disabled]:not([disabled='false'])) {
-  --sbb-checkbox-border-color: var(--sbb-color-smoke-default);
-  --sbb-checkbox-selection-color: var(--sbb-color-granite-default);
-  --sbb-checkbox-label-color: var(--sbb-color-granite-default);
+:host(:is([data-group-disabled], [disabled]:not([disabled='false']))) {
+  --sbb-checkbox-label-color: var(--sbb-color-charcoal-default);
   --sbb-checkbox-cursor: default;
   --sbb-checkbox-subtext-color: var(--sbb-color-smoke-default);
-  --sbb-checkbox-text-decoration: line-through;
-
-  @include sbb.if-forced-colors {
-    --sbb-checkbox-selection-color: Canvas;
-  }
-}
-
-:host([indeterminate]:not([indeterminate='false'])) {
-  @include sbb.if-forced-colors {
-    --sbb-checkbox-selection-color: ButtonBorder;
-  }
-}
-
-:host(
-    [indeterminate]:not([indeterminate='false']):is(
-        [data-group-disabled],
-        [disabled]:not([disabled='false'])
-      )
-  ) {
-  @include sbb.if-forced-colors {
-    --sbb-checkbox-selection-color: GrayText;
-  }
 }
 
 :host([data-is-selection-panel-input]) {
@@ -149,7 +123,6 @@ input[type='checkbox'] {
   display: flex;
   gap: var(--sbb-checkbox-label-gap);
   color: var(--sbb-checkbox-label-color);
-  text-decoration: var(--sbb-checkbox-text-decoration);
 
   // Fix for Chrome and Safari, they approximate 23.8px to 23px for line-height
   line-height: max((1em * var(--sbb-typo-line-height-body-text)), var(--sbb-checkbox-dimension));

diff --git a/src/components/sbb-form-field/sbb-form-field.scss b/src/components/sbb-form-field/sbb-form-field.scss
@@ -7,6 +7,7 @@
 :host {
   --sbb-form-field-background-color: var(--sbb-color-white-default);
   --sbb-form-field-border-color: var(--sbb-color-smoke-default);
+  --sbb-form-field-border-style: solid;
   --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
   --sbb-form-field-border-width: var(--sbb-border-width-1x);
   --sbb-form-field-height: var(--sbb-size-form-element-m-min-height);
@@ -60,7 +61,7 @@
 :host([data-disabled]) {
   --sbb-form-field-label-color: var(--sbb-color-granite-default);
   --sbb-form-field-prefix-color: var(--sbb-color-granite-default);
-  --sbb-form-field-text-color: var(--sbb-color-granite-default);
+  --sbb-form-field-border-style: dashed;
 
   @include sbb.if-forced-colors {
     --sbb-form-field-label-color: GrayText;
@@ -79,6 +80,11 @@
 :host([data-has-popup-open]) {
   --sbb-form-field-border-color: var(--sbb-color-charcoal-default);
   --sbb-form-field-prefix-color: var(--sbb-color-charcoal-default);
+
+  @include sbb.if-forced-colors {
+    --sbb-form-field-border-color: Highlight;
+    --sbb-form-field-prefix-color: Highlight;
+  }
 }
 
 :host([data-invalid]) {
@@ -123,7 +129,8 @@
   align-items: center;
   gap: var(--sbb-form-field-gap);
   padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--sbb-form-field-border-width));
-  border: var(--sbb-form-field-border-width) solid var(--sbb-form-field-border-color);
+  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style)
+    var(--sbb-form-field-border-color);
   border-radius: var(--sbb-form-field-border-radius);
   height: var(--sbb-form-field-height);
   background-color: var(--sbb-form-field-background-color);
@@ -258,18 +265,18 @@
     :host([floating-label]:not([floating-label='false'])) & {
       color: transparent !important;
       -webkit-text-fill-color: transparent !important;
+
+      @include sbb.if-forced-colors {
+        color: Canvas !important;
+        -webkit-text-fill-color: Canvas !important;
+      }
     }
 
     :host([data-disabled]:not([floating-label]:not([floating-label='false']))) & {
-      color: var(--sbb-form-field-text-color) !important;
-      -webkit-text-fill-color: var(--sbb-form-field-text-color) !important;
-      text-decoration: line-through !important;
+      color: var(--sbb-color-granite-default);
+      -webkit-text-fill-color: var(--sbb-color-granite-default);
     }
   }
-
-  :host([data-disabled]) & {
-    text-decoration: line-through !important;
-  }
 }
 
 .sbb-form-field__input ::slotted(:where(select, sbb-select)) {

diff --git a/src/components/sbb-option/sbb-option.scss b/src/components/sbb-option/sbb-option.scss
@@ -15,7 +15,6 @@
   --sbb-option-cursor: pointer;
   --sbb-option-border-radius: var(--sbb-border-radius-4x);
   --sbb-option-icon-color: var(--sbb-color-metal-default);
-  --sbb-option-text-decoration: none;
 }
 
 :host([active]:not([active='false'])) {
@@ -39,11 +38,8 @@
   }
 }
 
-:host([data-group-disabled]),
-:host([disabled]:not([disabled='false'])) {
-  --sbb-option-color: var(--sbb-color-granite-default);
+:host(:is([data-group-disabled], [disabled]:not([disabled='false']))) {
   --sbb-option-cursor: default;
-  --sbb-option-text-decoration: line-through;
 
   @include sbb.if-forced-colors {
     --sbb-option-color: GrayText;
@@ -82,7 +78,6 @@
   padding-block: var(--sbb-option-padding-block);
   justify-content: var(--sbb-option-justify-content);
   color: var(--sbb-option-color);
-  text-decoration: var(--sbb-option-text-decoration);
   background-color: var(--sbb-option-background-color);
   cursor: var(--sbb-option-cursor);
   -webkit-tap-highlight-color: transparent;
@@ -93,6 +88,27 @@
 
     border-radius: var(--sbb-option-border-radius);
   }
+
+  // Add inner border and background for disabled option when it's not multiple
+  :host(:is([data-group-disabled], [disabled]:not([disabled='false'])):not([data-multiple])) & {
+    position: relative;
+    z-index: 0;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: #{sbb.px-to-rem-build(6)};
+      border: var(--sbb-border-width-1x) dashed var(--sbb-color-graphite-default);
+      border-radius: var(--sbb-border-radius-2x);
+      background-color: var(--sbb-color-milk-default);
+      z-index: -1;
+
+      @include sbb.if-forced-colors {
+        border-color: GrayText;
+      }
+    }
+  }
 }
 
 .sbb-option__icon {

diff --git a/src/components/sbb-option/sbb-option.stories.tsx b/src/components/sbb-option/sbb-option.stories.tsx
@@ -78,8 +78,8 @@ const createOptions = ({
           style={style}
           active={active && i === 0}
           disabled={disabled && i === 0}
-          {...args}
           value={`${value} ${i + 1}`}
+          {...args}
         >
           {`${value} ${i + 1}`}
         </sbb-option>

diff --git a/src/components/sbb-radio-button/sbb-radio-button.scss b/src/components/sbb-radio-button/sbb-radio-button.scss
@@ -5,22 +5,35 @@
 @include sbb.host-component-properties;
 
 :host {
-  --sbb-radio-button-label-color: var(--color-black-default);
+  --sbb-radio-button-label-color: var(--sbb-color-charcoal-default);
   --sbb-radio-button-background-color: var(--sbb-color-white-default);
-  --sbb-radio-button-border: var(--sbb-border-width-1x);
-  --sbb-radio-button-size: calc(var(--sbb-spacing-fixed-6x) - var(--sbb-radio-button-border) * 2);
+  --sbb-radio-button-inner-circle-color: var(--sbb-color-white-default);
+  --sbb-radio-button-border-width: var(--sbb-border-width-1x);
+  --sbb-radio-button-border-style: solid;
+  --sbb-radio-button-border-color: var(--sbb-color-smoke-default);
+  --sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);
+  --sbb-radio-button-inner-circle-dimension: #{sbb.px-to-rem-build(10)};
   --sbb-radio-button-subtext-color: var(--sbb-color-granite-default);
-  --sbb-radio-button-text-decoration: none;
+  --sbb-radio-button-cursor: pointer;
+
+  // The border in unchecked state should fill the circle.
+  --sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);
 
   // Align radio button to the first row of the label based on the line-height so that it's vertically
   // aligned to the label and sticks to the top if the label breaks into multiple lines
   --sbb-radio-button-icon-align: calc(
-    (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-size)) / 2
+    (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2
   );
 
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
+
+  @include sbb.if-forced-colors {
+    --sbb-radio-button-background-color: Canvas !important;
+    --sbb-radio-button-border-width: var(--sbb-border-width-2x);
+    --sbb-radio-button-border-color: ButtonBorder;
+  }
 }
 
 // Change the focus outline when the input is placed inside of a selection panel
@@ -30,7 +43,7 @@
   // which appears in normalize css of several frameworks.
   outline: none !important;
 
-  .sbb-radio-button__label-slot::after {
+  .sbb-radio-button::after {
     content: '';
     position: absolute;
     display: block;
@@ -47,11 +60,31 @@
   }
 }
 
-:host([data-group-disabled]),
-:host([disabled]:not([disabled='false'])) {
-  --sbb-radio-button-label-color: var(--sbb-color-granite-default);
+:host([checked]:not([checked='false'])) {
+  --sbb-radio-button-inner-circle-color: var(--sbb-color-red-default);
+  --sbb-radio-button-background-fake-border-width: calc(
+    (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2
+  );
+
+  @include sbb.if-forced-colors {
+    --sbb-radio-button-inner-circle-color: Highlight;
+    --sbb-radio-button-border-color: Highlight;
+  }
+}
+
+// Disabled definitions have to be after checked definitions
+:host(:is([data-group-disabled], [disabled]):not([disabled='false'])) {
+  --sbb-radio-button-background-color: var(--sbb-color-milk-default);
   --sbb-radio-button-subtext-color: var(--sbb-color-smoke-default);
-  --sbb-radio-button-text-decoration: line-through;
+  --sbb-radio-button-border-style: dashed;
+  --sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal-default);
+  --sbb-radio-button-cursor: default;
+
+  @include sbb.if-forced-colors {
+    --sbb-radio-button-inner-circle-color: GrayText;
+    --sbb-radio-button-border-color: GrayText;
+    --sbb-radio-button-border-style: solid;
+  }
 }
 
 .sbb-radio-button__input {
@@ -63,7 +96,7 @@
   @include sbb.text-m--regular;
 
   display: block;
-  cursor: pointer;
+  cursor: var(--sbb-radio-button-cursor);
   user-select: none;
   position: relative;
   color: var(--sbb-radio-button-label-color);
@@ -73,11 +106,6 @@
     @include sbb.text-s--regular;
   }
 
-  :host([data-group-disabled]) &,
-  :host([disabled]:not([disabled='false'])) & {
-    cursor: default;
-  }
-
   // Hide focus outline when focus origin is mouse or touch. This is being used in tooltip as a workaround.
   :host(
       :focus-visible:not(
@@ -103,66 +131,42 @@ slot[name='subtext'] {
   display: flex;
   align-items: flex-start;
   overflow: hidden;
-  text-decoration: var(--sbb-radio-button-text-decoration);
 
-  // Unchecked style
-  &::before {
+  &::before,
+  &::after {
     content: '';
     flex-shrink: 0;
-    width: var(--sbb-radio-button-size);
-    height: var(--sbb-radio-button-size);
-    background: var(--sbb-radio-button-background-color);
+    width: var(--sbb-radio-button-dimension);
+    height: var(--sbb-radio-button-dimension);
     border-radius: 50%;
-
-    // The border was used to generate the animation of the radio-button,
-    // consequently the box-shadow was used as the actual border of the radio.
-    border: calc(var(--sbb-radio-button-size) / 2) solid var(--sbb-color-white-default);
-    box-shadow: 0 0 0 var(--sbb-radio-button-border) var(--sbb-color-smoke-default);
-    margin-inline-end: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-radio-button-border));
-    margin-inline-start: var(--sbb-radio-button-border);
     margin-block-start: var(--sbb-radio-button-icon-align);
+
     transition: {
       duration: var(--sbb-animation-duration-4x);
       timing-function: ease;
       property: background-color, border;
     }
 
-    // We use the :checked pseudo-class to reflect the checked state
-    .sbb-radio-button__input:checked + & {
-      --sbb-radio-button-background-color: var(--sbb-color-red-default);
-
-      border-width: #{sbb.px-to-rem-build(6)};
-
-      @include sbb.if-forced-colors {
-        --sbb-radio-button-background-color: Highlight;
-
-        outline: var(--sbb-border-width-2x) solid Highlight;
-        border-color: Canvas;
-      }
+    @include sbb.if-forced-colors {
+      transition: none;
     }
+  }
 
-    // We use the :checked pseudo-class to reflect the checked state
-    :host([data-group-disabled]) .sbb-radio-button__input:checked + &,
-    :host([disabled]:not([disabled='false'])) .sbb-radio-button__input:checked + & {
-      --sbb-radio-button-background-color: var(--sbb-color-granite-default);
-
-      @include sbb.if-forced-colors {
-        --sbb-radio-button-background-color: GrayText;
-
-        outline-color: GrayText;
-        border-color: Canvas;
-      }
-    }
+  // Unchecked style
+  &::before {
+    background: var(--sbb-radio-button-inner-circle-color);
 
-    @include sbb.if-forced-colors {
-      transition: none;
-      border: var(--sbb-border-width-2x) solid ButtonBorder;
+    // The border was used to generate the animation of the radio-button
+    // The border color acts as background color.
+    border: var(--sbb-radio-button-background-fake-border-width) solid
+      var(--sbb-radio-button-background-color);
+    margin-inline-end: var(--sbb-spacing-fixed-2x);
+  }
 
-      :host([data-group-disabled]) &,
-      :host([disabled]:not([disabled='false'])) & {
-        border-color: GrayText;
-      }
-    }
+  &::after {
+    position: absolute;
+    border: var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style)
+      var(--sbb-radio-button-border-color);
   }
 }