feat(sbb-form-field): adapt new design and add negative mode (#1976)

* feat(sbb-form-field): add negative appearance * feat(sbb-form-field): add negative appearance to overlay components * chore: dummy commit * fix: enable form field click to open sbb-select * fix: multilevel negative instantiation * fix: remove obsolete check in visual checkbox * fix: readonly select state --------- Co-authored-by: Federico Iseppon <[email protected]>
sbb-design-systems · Sep 21, 2023 · c04a0ef · c04a0ef
1 parent dde941e
commit c04a0ef
Show file tree

Hide file tree

Showing 54 changed files with 1,604 additions and 241 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -207,6 +207,10 @@ export namespace Components {
           * Whether the animation is disabled.
          */
         "disableAnimation": boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
         /**
           * Opens the autocomplete.
          */
@@ -493,6 +497,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbDatepickerPreviousDay {
         /**
@@ -503,6 +511,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbDatepickerToggle {
         /**
@@ -513,6 +525,10 @@ export namespace Components {
           * Whether the animation is disabled.
          */
         "disableAnimation": boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
         /**
           * Opens the calendar.
          */
@@ -665,6 +681,10 @@ export namespace Components {
         "variant": InterfaceFooterAttributes['variant'];
     }
     interface SbbFormError {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbFormField {
         /**
@@ -691,6 +711,10 @@ export namespace Components {
           * Label text for the input which is internally rendered as `<label>`.
          */
         "label": string;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
         /**
           * Indicates whether the input is optional.
          */
@@ -709,6 +733,10 @@ export namespace Components {
         "width": 'default' | 'collapse';
     }
     interface SbbFormFieldClear {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbHeader {
         /**
@@ -1401,6 +1429,10 @@ export namespace Components {
           * Whether the select allows for multiple selection.
          */
         "multiple": boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
         /**
           * Opens the selection panel.
          */
@@ -1942,6 +1974,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbTrain {
         /**
@@ -2016,6 +2052,10 @@ export namespace Components {
           * Indeterminate state.
          */
         "indeterminate": boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
 }
 export interface SbbAlertCustomEvent<T> extends CustomEvent<T> {
@@ -2914,6 +2954,10 @@ declare namespace LocalJSX {
           * Whether the animation is disabled.
          */
         "disableAnimation"?: boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
         /**
           * Emits whenever the autocomplete is closed.
          */
@@ -3226,6 +3270,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDatepickerPreviousDay {
         /**
@@ -3236,6 +3284,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDatepickerToggle {
         /**
@@ -3246,6 +3298,10 @@ declare namespace LocalJSX {
           * Whether the animation is disabled.
          */
         "disableAnimation"?: boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDialog {
         /**
@@ -3423,6 +3479,10 @@ declare namespace LocalJSX {
         "variant"?: InterfaceFooterAttributes['variant'];
     }
     interface SbbFormError {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbFormField {
         /**
@@ -3441,6 +3501,10 @@ declare namespace LocalJSX {
           * Label text for the input which is internally rendered as `<label>`.
          */
         "label"?: string;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
         /**
           * Indicates whether the input is optional.
          */
@@ -3455,6 +3519,10 @@ declare namespace LocalJSX {
         "width"?: 'default' | 'collapse';
     }
     interface SbbFormFieldClear {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbHeader {
         /**
@@ -4173,6 +4241,10 @@ declare namespace LocalJSX {
           * Whether the select allows for multiple selection.
          */
         "multiple"?: boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
         "onChange"?: (event: SbbSelectCustomEvent<any>) => void;
         /**
           * Emits whenever the select is closed.
@@ -4791,6 +4863,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbTrain {
         /**
@@ -4867,6 +4943,10 @@ declare namespace LocalJSX {
           * Indeterminate state.
          */
         "indeterminate"?: boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface IntrinsicElements {
         "sbb-accordion": SbbAccordion;

diff --git a/src/components/sbb-autocomplete/readme.md b/src/components/sbb-autocomplete/readme.md
@@ -97,6 +97,7 @@ Nesting interactive controls like this interferes with most assistive technology
 | Property            | Attribute             | Description                                                                                                                                                                                                                                                                                                       | Type                         | Default     |
 | ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
 | `disableAnimation`  | `disable-animation`   | Whether the animation is disabled.                                                                                                                                                                                                                                                                                | `boolean`                    | `false`     |
+| `negative`          | `negative`            | Negative coloring variant flag.                                                                                                                                                                                                                                                                                   | `boolean`                    | `false`     |
 | `origin`            | `origin`              | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, will search for the first 'sbb-form-field' ancestor.                                                                                                                                                  | `HTMLElement \| string`      | `undefined` |
 | `preserveIconSpace` | `preserve-icon-space` | Whether the icon space is preserved when no icon is set.                                                                                                                                                                                                                                                          | `boolean`                    | `undefined` |
 | `trigger`           | `trigger`             | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. | `HTMLInputElement \| string` | `undefined` |

diff --git a/src/components/sbb-autocomplete/sbb-autocomplete.scss b/src/components/sbb-autocomplete/sbb-autocomplete.scss
@@ -14,6 +14,10 @@
   --sbb-options-panel-internal-z-index: var(--sbb-autocomplete-z-index, var(--sbb-overlay-z-index));
 }
 
+:host([negative]:not([negative='false'])) {
+  @include sbb.options-panel-overlay-negative-variables;
+}
+
 :host([data-state='closed']) {
   --sbb-options-panel-visibility: hidden;
 }
@@ -70,32 +74,49 @@
 .sbb-autocomplete__panel {
   @include sbb.options-panel-overlay;
 
-  :host([data-state='opened']) &,
-  :host([data-state='opening']) & {
-    @include sbb.shadow-level-5-hard;
-  }
-
   :host([data-options-panel-position='below']) & {
     inset-block-start: calc(
       var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height)
     );
+  }
 
-    &::before {
+  :host(:is([data-state='opened'], [data-state='opening'])) & {
+    @include sbb.shadow-level-5-hard;
+  }
+
+  :host(:is([data-state='opened'], [data-state='opening'])[negative]:not([negative='false'])) & {
+    @include sbb.shadow-level-5-hard-negative;
+  }
+
+  &::before {
+    :host([data-options-panel-position='below']) & {
       display: block;
     }
   }
 
-  :host([data-options-panel-position='above']) & {
-    &::after {
+  &::after {
+    :host([data-options-panel-position='above']) & {
       display: block;
     }
   }
 
-  :host(:is([data-state='opened'], [data-state='opening'])[data-option-panel-origin-borderless]) & {
-    &::before,
-    &::after {
+  /* stylelint-disable-next-line no-descending-specificity */
+  &::before,
+  &::after {
+    :host(:is([data-state='opened'], [data-state='opening'])[data-option-panel-origin-borderless])
+      & {
       @include sbb.shadow-level-5-hard;
     }
+
+    :host(
+        :is(
+            [data-state='opened'],
+            [data-state='opening']
+          )[data-option-panel-origin-borderless][negative]:not([negative='false'])
+      )
+      & {
+      @include sbb.shadow-level-5-hard-negative;
+    }
   }
 }
 
@@ -104,7 +125,7 @@
 }
 
 .sbb-autocomplete__options {
-  @include sbb.scrollbar;
+  @include sbb.scrollbar-rules;
   @include sbb.optionsOverlay;
 
   @include sbb.if-forced-colors {