refactor(Toggle Switch): incorporates feedback from UX and a11y

AnnaHoege · AnnaHoege · commit e76a319d3479 · 2024-02-22T16:03:23.000+01:00
diff --git a/packages/core-components/src/components.d.ts b/packages/core-components/src/components.d.ts
@@ -991,13 +991,17 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The label of the toggle button. This is required
+          * An optional label for the toggle switch.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The alignment of the toggle switch label.
          */
         "labelPosition"?: 'left' | 'right';
+        /**
+          * The toggle name. Use this if the toggle switch is used in a form group.
+         */
+        "name"?: string;
         /**
           * Whether or not the toggle button is currently on or off. Per default it is off.
          */
@@ -3022,13 +3026,17 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The label of the toggle button. This is required
+          * An optional label for the toggle switch.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The alignment of the toggle switch label.
          */
         "labelPosition"?: 'left' | 'right';
+        /**
+          * The toggle name. Use this if the toggle switch is used in a form group.
+         */
+        "name"?: string;
         /**
           * Emits the toggle switch value when it's state changes.
          */
diff --git a/packages/core-components/src/components/toggle-switch/readme.md b/packages/core-components/src/components/toggle-switch/readme.md
@@ -7,12 +7,12 @@
 
 ## Properties
 
-| Property             | Attribute        | Description                                                                      | Type                | Default     |
-| -------------------- | ---------------- | -------------------------------------------------------------------------------- | ------------------- | ----------- |
-| `disabled`           | `disabled`       | Whether or not the toggle button is currently disabled. Per default it is false. | `boolean`           | `false`     |
-| `label` _(required)_ | `label`          | The label of the toggle button. This is required                                 | `string`            | `undefined` |
-| `labelPosition`      | `label-position` | The alignment of the toggle switch label.                                        | `"left" \| "right"` | `'left'`    |
-| `state`              | `state`          | Whether or not the toggle button is currently on or off. Per default it is off.  | `boolean`           | `false`     |
+| Property        | Attribute        | Description                                                                      | Type                | Default     |
+| --------------- | ---------------- | -------------------------------------------------------------------------------- | ------------------- | ----------- |
+| `disabled`      | `disabled`       | Whether or not the toggle button is currently disabled. Per default it is false. | `boolean`           | `false`     |
+| `label`         | `label`          | An optional label for the toggle switch.                                         | `string`            | `undefined` |
+| `labelPosition` | `label-position` | The alignment of the toggle switch label.                                        | `"left" \| "right"` | `'left'`    |
+| `state`         | `state`          | Whether or not the toggle button is currently on or off. Per default it is off.  | `boolean`           | `false`     |
 
 
 ## Events
diff --git a/packages/core-components/src/components/toggle-switch/toggle-switch.e2e.tsx b/packages/core-components/src/components/toggle-switch/toggle-switch.e2e.tsx
@@ -24,9 +24,7 @@ describe('B2B-InputList', () => {
       state="true"></b2b-toggle-switch>
     `);
 
-    const label = await page.find(
-      'b2b-toggle-switch >>> .b2b-toggle__text-left',
-    );
+    const label = await page.find('b2b-toggle-switch >>> .b2b-toggle__text');
     expect(label.textContent).toBe('IT-test-label');
   });
 
@@ -40,9 +38,7 @@ describe('B2B-InputList', () => {
       state="true"></b2b-toggle-switch>
     `);
 
-    const label = await page.find(
-      'b2b-toggle-switch >>> .b2b-toggle__text-right',
-    );
+    const label = await page.find('b2b-toggle-switch >>> .b2b-toggle__text');
     expect(label.textContent).toBe('IT-test-label-right');
   });
 
diff --git a/packages/core-components/src/components/toggle-switch/toggle-switch.scss b/packages/core-components/src/components/toggle-switch/toggle-switch.scss
@@ -9,70 +9,65 @@ $transition-size: var(--b2b-size-50);
 $special-grey: #b1b1b1;
 
 .b2b-toggle {
-  display: flex;
+  display: inline-flex;
+  position: relative;
   font-family: var(--b2b-font-family-default);
 
   &__icon {
     position: absolute;
     fill: var(--b2b-color-success-100);
     display: inline-block;
-    margin-top: var(--b2b-size-space-25);
-    margin-left: var(--b2b-size-space-150);
+    left: var(--b2b-size-60);
+    top: var(--b2b-size-10);
     width: var(--b2b-size-30);
     height: var(--b2b-size-30);
     z-index: 1000;
     opacity: 0;
-    cursor: pointer;
 
     &--show {
-      .b2b-toggle__icon {
-        transition: opacity 1s;
-        transition: opacity 1s ease;
-        opacity: 1;
-      }
+      transition: opacity 1s;
+      transition: opacity 1s ease;
+      opacity: 1;
     }
   }
 
   &__left {
-    display: flex;
-    flex-direction: row-reverse;
-  }
-
-  &__right {
-    display: flex;
-    flex-direction: row;
-  }
+    .b2b-toggle__label {
+      flex-direction: row-reverse;
+    }
 
-  &__input {
-    display: none;
+    .b2b-toggle__text {
+      margin-right: var(--b2b-size-30);
+    }
 
-    &:checked + .b2b-toggle__label .b2b-toggle__switch {
-      &::before {
-        background-color: var(--b2b-color-success-100);
-      }
+    .b2b-toggle__icon {
+      left: var(--b2b-size-60);
+    }
+  }
 
-      &::after {
-        background-color: var(--b2b-color-white-100);
-        transform: translateX($transition-size);
-      }
+  &__right {
+    .b2b-toggle__text {
+      margin-left: var(--b2b-size-30);
     }
   }
 
   &__label {
+    display: inline-flex;
     align-items: center;
-    cursor: pointer;
   }
 
   &__switch {
     position: relative;
     display: flex;
     width: $switch-width;
     height: $switch-height;
+    cursor: pointer;
 
     &::before,
     &::after {
       position: absolute;
       content: '';
+      cursor: pointer;
     }
 
     &::before {
@@ -95,34 +90,32 @@ $special-grey: #b1b1b1;
     }
   }
 
-  &--disabled {
+  &--checked {
+    .b2b-toggle__switch::before {
+      background-color: var(--b2b-color-success-100);
+    }
+
     .b2b-toggle__switch::after {
-      background-color: var(--b2b-color-grey-100);
+      background-color: var(--b2b-color-white-100);
+      transform: translateX($transition-size);
     }
+  }
 
+  &--disabled {
     .b2b-toggle__icon {
       fill: $special-grey;
     }
 
-    .b2b-toggle__input:checked + .b2b-toggle__label .b2b-toggle__switch {
+    .b2b-toggle__switch {
+      cursor: default;
+
       &::before {
         background-color: $special-grey; // special color from figma
       }
 
       &::after {
         background-color: var(--b2b-color-grey-100);
-        transform: translateX($transition-size);
       }
     }
   }
-
-  &__text-left {
-    margin-top: var(--b2b-size-5);
-    margin-right: var(--b2b-size-space-50);
-  }
-
-  &__text-right {
-    margin-top: var(--b2b-size-5);
-    margin-left: var(--b2b-size-space-50);
-  }
 }
diff --git a/packages/core-components/src/components/toggle-switch/toggle-switch.tsx b/packages/core-components/src/components/toggle-switch/toggle-switch.tsx
@@ -17,8 +17,11 @@ import { ToggleSwitchEventDetail } from '../../utils/interfaces/interaction.inte
 export class B2bToggleSwitchComponent {
   @Element() host: HTMLB2bToggleSwitchElement;
 
-  /** The label of the toggle button. This is required */
-  @Prop() label!: string;
+  /** An optional label for the toggle switch. */
+  @Prop() label?: string;
+
+  /**The toggle name. Use this if the toggle switch is used in a form group. */
+  @Prop() name?: string;
 
   /** The alignment of the toggle switch label. */
   @Prop() labelPosition?: 'left' | 'right' = 'left';
@@ -27,13 +30,14 @@ export class B2bToggleSwitchComponent {
   @Prop() disabled = false;
 
   /** Whether or not the toggle button is currently on or off. Per default it is off. */
-  @Prop() state = false;
+  @Prop({ mutable: true }) state = false;
 
   /** Emits the toggle switch value when it's state changes. */
   @Event({ eventName: 'b2b-change' })
   b2bChange: EventEmitter<ToggleSwitchEventDetail>;
 
   private emitDetail = () => {
+    console.log(this.state);
     this.b2bChange.emit({
       value: this.state,
     });
@@ -53,43 +57,44 @@ export class B2bToggleSwitchComponent {
     this.emitDetail();
   };
 
+  private onKeyDown = (ev: KeyboardEvent) => {
+    if (ev.key != 'Enter' || this.disabled) {
+      return;
+    } else {
+      this.state = !this.state;
+    }
+    this.emitDetail();
+  };
+
   render() {
     return (
       <Host>
         <div
           class={{
             'b2b-toggle': true,
+            [`b2b-toggle__${this.labelPosition}`]: true,
             'b2b-toggle--disabled': this.disabled,
+            'b2b-toggle--checked': this.state,
           }}>
-          <div
-            class={{
-              [`b2b-toggle__${this.labelPosition}`]: true,
-              'b2b-toggle__icon--show': this.state,
-            }}>
-            <div onClick={this.onClick}>
+          <label class="b2b-toggle__label" htmlFor="toggle">
+            <span
+              class="b2b-toggle__switch"
+              role="switch"
+              tabIndex={0}
+              onKeyDown={this.onKeyDown}
+              onClick={this.onClick}>
               <svg
                 class={{
                   'b2b-toggle__icon': true,
+                  'b2b-toggle__icon--show': this.state,
                 }}
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 30 30">
                 <path d="M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" />
               </svg>
-              <input
-                class="b2b-toggle__input"
-                id="toggle"
-                type="checkbox"
-                checked={this.state}
-                disabled={this.disabled}
-              />
-              <label class="b2b-toggle__label" htmlFor="toggle">
-                <span class="b2b-toggle__switch" />
-              </label>
-            </div>
-            <div class={{ [`b2b-toggle__text-${this.labelPosition}`]: true }}>
-              {this.label}
-            </div>
-          </div>
+            </span>
+            {this.label && <span class="b2b-toggle__text">{this.label}</span>}
+          </label>
         </div>
       </Host>
     );
diff --git a/packages/core-components/src/docs/config/components-args.json b/packages/core-components/src/docs/config/components-args.json
@@ -3022,7 +3022,7 @@
         },
         "defaultValue": {}
       },
-      "description": "The label of the toggle button. This is required"
+      "description": "An optional label for the toggle switch."
     },
     "labelPosition": {
       "options": [
diff --git a/packages/core-components/src/html/interaction.html b/packages/core-components/src/html/interaction.html
@@ -488,7 +488,7 @@
         >Enabled Toggle Switch Component - On</b2b-headline
       >
       <b2b-toggle-switch
-        label="Label"
+        label="Long Label for the fun of it"
         disabled="false"
         state="true"></b2b-toggle-switch>
 

Original file line number	Diff line number	Diff line change
`@@ -488,7 +488,7 @@`
`488`	`488`	`>Enabled Toggle Switch Component - On</b2b-headline`
`489`	`489`	`>`
`490`	`490`	`<b2b-toggle-switch`
`491`		`- label="Label"`
	`491`	`+ label="Long Label for the fun of it"`
`492`	`492`	`disabled="false"`
`493`	`493`	`state="true"></b2b-toggle-switch>`
`494`	`494`