feat(sbb-form-field): add negative appearance

sbb-design-systems · Sep 12, 2023 · 8191fb0 · 8191fb0
1 parent dc47583
commit 8191fb0
Show file tree

Hide file tree

Showing 33 changed files with 968 additions and 142 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -489,6 +489,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbDatepickerPreviousDay {
         /**
@@ -499,6 +503,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbDatepickerToggle {
         /**
@@ -509,6 +517,10 @@ export namespace Components {
           * Whether the animation is disabled.
          */
         "disableAnimation": boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
         /**
           * Opens the calendar.
          */
@@ -627,6 +639,10 @@ export namespace Components {
         "variant": InterfaceFooterAttributes['variant'];
     }
     interface SbbFormError {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbFormField {
         /**
@@ -653,6 +669,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.
          */
@@ -671,6 +691,10 @@ export namespace Components {
         "width": 'default' | 'collapse';
     }
     interface SbbFormFieldClear {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbHeader {
         /**
@@ -1890,6 +1914,10 @@ export namespace Components {
           * The name attribute to use for the button.
          */
         "name": string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative": boolean;
     }
     interface SbbTrain {
         /**
@@ -3156,6 +3184,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDatepickerPreviousDay {
         /**
@@ -3166,6 +3198,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDatepickerToggle {
         /**
@@ -3176,6 +3212,10 @@ declare namespace LocalJSX {
           * Whether the animation is disabled.
          */
         "disableAnimation"?: boolean;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbDialog {
         /**
@@ -3319,6 +3359,10 @@ declare namespace LocalJSX {
         "variant"?: InterfaceFooterAttributes['variant'];
     }
     interface SbbFormError {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbFormField {
         /**
@@ -3337,6 +3381,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.
          */
@@ -3351,6 +3399,10 @@ declare namespace LocalJSX {
         "width"?: 'default' | 'collapse';
     }
     interface SbbFormFieldClear {
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbHeader {
         /**
@@ -4673,6 +4725,10 @@ declare namespace LocalJSX {
           * The name attribute to use for the button.
          */
         "name"?: string | undefined;
+        /**
+          * Negative coloring variant flag.
+         */
+        "negative"?: boolean;
     }
     interface SbbTrain {
         /**

diff --git a/src/components/sbb-button/sbb-button.scss b/src/components/sbb-button/sbb-button.scss
@@ -194,6 +194,13 @@
   --sbb-button-shadow-2-color: var(--sbb-color-black-alpha-0);
 }
 
+:host([data-icon-small][negative]:not([negative='false'])) {
+  @include sbb.icon-button-variables-negative;
+
+  --sbb-button-shadow-1-color: var(--sbb-color-black-alpha-0);
+  --sbb-button-shadow-2-color: var(--sbb-color-black-alpha-0);
+}
+
 .sbb-button {
   @include sbb.text-xs--bold;
   @include sbb.font-smoothing;

diff --git a/src/components/sbb-button/sbb-button.tsx b/src/components/sbb-button/sbb-button.tsx
@@ -18,7 +18,12 @@ import {
   languageChangeHandlerAspect,
   namedSlotChangeHandlerAspect,
 } from '../../global/eventing';
-import { ACTION_ELEMENTS, hostContext, toggleDatasetEntry } from '../../global/dom';
+import {
+  ACTION_ELEMENTS,
+  hostContext,
+  isValidAttribute,
+  toggleDatasetEntry,
+} from '../../global/dom';
 
 /**
  * @slot unnamed - Button Content
@@ -34,7 +39,7 @@ export class SbbButton implements ComponentInterface, LinkButtonProperties, IsSt
   @Prop({ reflect: true }) public variant: InterfaceButtonAttributes['variant'] = 'primary';
 
   /** Negative coloring variant flag. */
-  @Prop({ reflect: true }) public negative = false;
+  @Prop({ reflect: true, mutable: true }) public negative = false;
 
   /** Size variant, either l or m. */
   @Prop({ reflect: true }) public size?: InterfaceButtonAttributes['size'] = 'l';
@@ -102,8 +107,12 @@ export class SbbButton implements ComponentInterface, LinkButtonProperties, IsSt
       (n) => !(n as Element).slot && n.textContent?.trim(),
     );
     this._handlerRepository.connect();
-    if (this._element.closest('sbb-form-field') || this._element.closest('[data-form-field]')) {
+
+    const formField =
+      this._element.closest('sbb-form-field') ?? this._element.closest('[data-form-field]');
+    if (formField) {
       toggleDatasetEntry(this._element, 'iconSmall', true);
+      this.negative = isValidAttribute(formField, 'negative');
     }
   }
 

diff --git a/src/components/sbb-datepicker-next-day/readme.md b/src/components/sbb-datepicker-next-day/readme.md
@@ -33,6 +33,7 @@ Inside `sbb-form-field`:
 | ------------ | ------------- | ----------------------------------------- | ----------------------- | ----------- |
 | `datePicker` | `date-picker` | Datepicker reference.                     | `HTMLElement \| string` | `undefined` |
 | `name`       | `name`        | The name attribute to use for the button. | `string`                | `undefined` |
+| `negative`   | `negative`    | Negative coloring variant flag.           | `boolean`               | `false`     |
 
 
 ## Dependencies

diff --git a/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.scss b/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.scss
@@ -10,9 +10,6 @@
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
-
-  --sbb-datepicker-control-radius: var(--sbb-border-radius-4x);
-  --sbb-datepicker-control-color: var(--sbb-color-black-default);
 }
 
 @include sbb.icon-button('.sbb-datepicker-next-day', 'sbb-icon');

diff --git a/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.stories.tsx b/src/components/sbb-datepicker-next-day/sbb-datepicker-next-day.stories.tsx
@@ -2,56 +2,96 @@
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md';
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { Meta, StoryObj, Decorator } from '@storybook/html';
+import type { Meta, StoryObj, Decorator, StoryContext } from '@storybook/html';
+import { InputType } from '@storybook/types';
+import { Args, ArgTypes } from '@storybook/html';
 
-const StandaloneTemplate = (picker = null): JSX.Element => (
-  <sbb-datepicker-next-day date-picker={picker}></sbb-datepicker-next-day>
+const wrapperStyle = (context: StoryContext): Record<string, string> => ({
+  'background-color': context.args.negative
+    ? 'var(--sbb-color-black-default)'
+    : 'var(--sbb-color-white-default)',
+});
+
+const negative: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const defaultArgTypes: ArgTypes = {
+  negative,
+};
+
+const defaultArgs: Args = {
+  negative: false,
+};
+
+const StandaloneTemplate = (args, picker = null): JSX.Element => (
+  <sbb-datepicker-next-day {...args} date-picker={picker}></sbb-datepicker-next-day>
 );
 
-const PickerAndButtonTemplate = (): JSX.Element => (
+const PickerAndButtonTemplate = (args): JSX.Element => (
   <div style={{ display: 'flex', gap: '1em' }}>
-    <sbb-datepicker id="datepicker" input="datepicker-input"></sbb-datepicker>
+    <sbb-datepicker
+      id="datepicker"
+      input="datepicker-input"
+      data-now={new Date(2023, 0, 12, 0, 0, 0).valueOf()}
+    ></sbb-datepicker>
     <input value="15.02.2023" id="datepicker-input" />
-    {StandaloneTemplate('datepicker')}
+    {StandaloneTemplate(args, 'datepicker')}
   </div>
 );
 
-const FormFieldTemplate = (): JSX.Element => (
-  <sbb-form-field>
+const FormFieldTemplate = (args): JSX.Element => (
+  <sbb-form-field {...args}>
     <input value="15.02.2023" />
     <sbb-datepicker></sbb-datepicker>
-    {StandaloneTemplate()}
+    {StandaloneTemplate(args)}
   </sbb-form-field>
 );
 
-const EmptyFormFieldTemplate = (): JSX.Element => (
-  <sbb-form-field>
+const EmptyFormFieldTemplate = (args): JSX.Element => (
+  <sbb-form-field {...args}>
     <input />
     <sbb-datepicker></sbb-datepicker>
-    {StandaloneTemplate()}
+    {StandaloneTemplate(args)}
   </sbb-form-field>
 );
 
 export const Standalone: StoryObj = {
   render: StandaloneTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const StandaloneNegative: StoryObj = {
+  render: StandaloneTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true },
 };
 
 export const WithPicker: StoryObj = {
   render: PickerAndButtonTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 export const InFormField: StoryObj = {
   render: FormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 export const EmptyFormField: StoryObj = {
   render: EmptyFormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
 };
 
 const meta: Meta = {
   decorators: [
-    (Story) => (
-      <div style={{ padding: '2rem' }}>
+    (Story, context) => (
+      <div style={{ ...wrapperStyle(context), padding: '2rem' }}>
         <Story />
       </div>
     ),