fix(toggle): review

Author: aesteves60

packages/ods/src/components/toggle/src/components/ods-toggle/ods-toggle.scss

@@ -20,8 +20,10 @@
         position: absolute;
         bottom: 2px;
         left: 2px;
-        transition: .4s;
+        transition: all .4s ease;
+        z-index: 1;
         border-radius: 1rem;
+        box-shadow: 0 1px 1px 0#00000040;
         background-color: var(--ods-color-neutral-000);
         width: 20px;
         height: 20px;
@@ -39,16 +41,25 @@
       &--disabled {
         background-color: var(--ods-color-neutral-100);
         cursor: not-allowed;
+
+        & #{$slider}__label {
+          color: var(--ods-color-neutral-600);
+        }
       }
 
       &__label {
+        display: flex;
         position: absolute;
-        top: 5px;
-        left: 23px;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        align-items: center;
+        padding-right: 2px;
         color: var(--ods-color-neutral-700);
         font-size: 12px;
         font-weight: 700;
         pointer-events: none;
+        user-select: none;
       }
     }
 
@@ -67,7 +78,8 @@
         }
 
         & + .ods-toggle__container__slider .ods-toggle__container__slider__label {
-          left: 4px;
+          left: 0;
+          padding-left: 4px;
         }
 
         & + :not(.ods-toggle__container__slider--disabled).ods-toggle__container__slider {

packages/ods/src/components/toggle/tests/behaviour/ods-toggle.e2e.ts

@@ -35,7 +35,7 @@ describe('ods-toggle behaviour', () => {
     expect(odsChangeSpy).toHaveReceivedEventTimes(1);
   });
 
-  it('should toggle value if disabled', async() => {
+  it('should not toggle value if disabled', async() => {
     await setup('<ods-toggle is-disabled></ods-toggle>');
     const odsChangeSpy = await page.spyOnEvent('odsChange');
 

packages/ods/src/components/toggle/tests/rendering/ods-toggle.spec.ts

@@ -92,15 +92,15 @@ describe('ods-toggle rendering', () => {
 
   describe('withLabel', () => {
     it('should be reflected', async() => {
-      await setup('<ods-toggle withLabel></ods-toggle>');
+      await setup('<ods-toggle with-label></ods-toggle>');
 
-      expect(root?.getAttribute('withLabel')).toBe('');
+      expect(root?.getAttribute('with-label')).toBe('');
     });
 
     it('should not be set by default', async() => {
       await setup('<ods-toggle></ods-toggle>');
 
-      expect(root?.getAttribute('withLabel')).toBeNull();
+      expect(root?.getAttribute('with-label')).toBeNull();
     });
   });
 });

packages/storybook/stories/components/badge/documentation.mdx

@@ -28,9 +28,7 @@ Custom badge css:
 
 # Examples
 
-## Usage
-
-### Default
+## Default
 
 <Canvas of={ BadgeStories.Default } sourceState='shown' />
 

packages/storybook/stories/components/link/documentation.mdx

@@ -28,20 +28,18 @@ Custom link css:
 
 # Examples
 
-## Usage
-
-### Default
+## Default
 
 <Canvas of={ LinkStories.Default } sourceState='shown' />
 
-### Color
+## Color
 <Canvas of={ LinkStories.Color } sourceState='shown' />
 
-### Disabled
+## Disabled
 <Canvas of={ LinkStories.Disabled } sourceState='shown' />
 
-### Icon
+## Icon
 <Canvas of={ LinkStories.Icon } sourceState='shown' />
 
-### Target
+## Target
 <Canvas of={ LinkStories.Target } sourceState='shown' />

packages/storybook/stories/components/quantity/documentation.mdx

@@ -28,27 +28,25 @@ Custom quantity css:
 
 # Examples
 
-## Usage
-
-### Default
+## Default
 
 <Canvas of={ QuantityStories.Default } sourceState='shown' />
 
-### Disabled
+## Disabled
 <Canvas of={ QuantityStories.Disabled } sourceState='shown' />
 
-### Error
+## Error
 <Canvas of={ QuantityStories.Error } sourceState='shown' />
 
-### Max
+## Max
 <Canvas of={ QuantityStories.Max } sourceState='shown' />
 
-### Min
+## Min
 <Canvas of={ QuantityStories.Min } sourceState='shown' />
 
-### Readonly
+## Readonly
 <Canvas of={ QuantityStories.Readonly } sourceState='shown' />
 
-### Step
+## Step
 <Canvas of={ QuantityStories.Step } sourceState='shown' />
 

packages/storybook/stories/components/skeleton/documentation.mdx

@@ -25,6 +25,7 @@ You can add your own style on the text element using the part `skeleton`.
 <Canvas of={ SkeletonStories.CustomCSS } sourceState='shown'/>
 
 # Examples
+
 ## Default
 
 <Canvas of={ SkeletonStories.Default } sourceState='shown' />

packages/storybook/stories/components/table/documentation.mdx

@@ -26,9 +26,7 @@ You can apply your own style on each part of the table directly.
 
 # Examples
 
-## Usage
-
-### Default
+## Default
 
 <Canvas of={ TableStories.Default } sourceState='shown' />
 

packages/storybook/stories/components/tag/documentation.mdx

@@ -26,9 +26,7 @@ You can add your own style on the tag element using the part `tag`.
 
 # Examples
 
-## Usage
-
-### Default
+## Default
 
 <Canvas of={ TagStories.Default } sourceState='shown' />
 

packages/storybook/stories/components/toggle/documentation.mdx

@@ -18,19 +18,23 @@ Toggle component is used to allow the user to switch between two states, on and
 
 <Markdown>{ SpecificationsToggle }</Markdown>
 
-# Examples
+# Style customization
+
+You can add your own style on the text element using the part `slider`, `label`, `slider check` or `label check`.
 
-## Usage
+<Canvas of={ ToggleStories.CustomCSS } sourceState='shown'/>
+
+# Examples
 
-### Default
+## Default
 
 <Canvas of={ ToggleStories.Default } sourceState='shown' />
 
-### Disabled On
+## Disabled On
 <Canvas of={ ToggleStories.DisabledOn } sourceState='shown' />
 
-### Disabled Off
+## Disabled Off
 <Canvas of={ ToggleStories.DisabledOff } sourceState='shown' />
 
-### With Label
+## With Label
 <Canvas of={ ToggleStories.WithLabel } sourceState='shown' />

packages/storybook/stories/components/toggle/migration.from.17.x.mdx

@@ -18,19 +18,19 @@ You can use the new `value` attribute to obtain the same behavior.
 
 Has been removed.
 
-Design team doesn't valid this style anymore.
+This design feature has been removed in order to match the new styling of the component.
 
 `contrasted` <img src="https://img.shields.io/badge/removed-FF0000" />
 
 Has been removed.
 
-Design team doesn't valid this style anymore.
+This design feature has been removed in order to match the new styling of the component.
 
 `color` <img src="https://img.shields.io/badge/removed-FF0000" />
 
 Has been removed.
 
-Design team doesn't valid this style anymore.
+This design feature has been removed in order to match the new styling of the component.
 
 `disabled` <img src="https://img.shields.io/badge/updated-00FFFF" />
 
@@ -54,13 +54,13 @@ Defines if the toggle is required in a form.
 
 New attribute.
 
-You can use the new name attribute for set an identifiant in a form.
+You can use the new 'name' attribute to identify your OdsToggle within a form.
 
 `withLabel` <img src="https://img.shields.io/badge/new-008000" />
 
 New attribute (optional).
 
-For add a label `ON` / `OFF`
+Will add the visual labels `ON/OFF`.
 
 ## Migration examples
 
@@ -71,7 +71,7 @@ Checked toggle:
 
 <!-- is now -->
 
-<ods-toggle value>
+<ods-toggle value="true">
 </ods-toggle>
 ```
 

packages/storybook/stories/components/toggle/toggle.stories.ts

@@ -13,7 +13,93 @@ const meta: Meta = {
 export default meta;
 
 export const Demo: StoryObj = {
+  render: (arg) => html`
+<ods-toggle class="my-toggle-demo"
+  is-disabled=${arg.isDisabled}
+  is-required=${arg.isRequired}
+  with-label=${arg.withLabel}>
+</ods-toggle>
+<style>
+  .my-toggle-demo::part(slider) {
+    ${arg.CustomCssSlider}
+  }
+
+  .my-toggle-demo::part(slider)::before {
+    ${arg.CustomCssSlider}
+  }
+
+  .my-toggle-demo::part(label) {
+    ${arg.CustomCssLabel}
+  }
+
+  .my-toggle-demo::part(slider checked) {
+    ${arg.CustomCssSliderChecked}
+  }
+
+  .my-toggle-demo::part(slider checked)::before {
+    ${arg.CustomCssSliderChecked}
+  }
+
+  .my-toggle-demo::part(label checked) {
+    ${arg.CustomCssLabelChecked}
+  }
+</style>
+  `,
   argTypes: orderControls({
+    CustomCssLabel: {
+      control: 'text',
+      description: 'Set a custom style properties for the label. Example: "color: green;"',
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'string' },
+      },
+    },
+    CustomCssLabelChecked: {
+      control: 'text',
+      description: 'Set a custom style properties for the label when the input is checked. Example: "color: black;"',
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'string' },
+      },
+    },
+    CustomCssSlider: {
+      control: 'text',
+      description: 'Set a custom style properties for the slider. Example: "background-color: red;"',
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'string' },
+      },
+    },
+    CustomCssSliderChecked: {
+      control: 'text',
+      description: 'Set a custom style properties for the slider when the input is checked. Example: "background-color: blueviolet;"',
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'string' },
+      },
+    },
+    CustomCssSliderCircle: {
+      control: 'text',
+      description: 'Set a custom style properties for the circle of the slider. Example: "background-color: blue;"',
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'string' },
+      },
+    },
+    CustomCssSliderCircleChecked: {
+      control: 'text',
+      description: 'Set a custom style properties for the circle of the slider when the input is checked. Example: "background-color: black;"',
+      table: {
+        category: CONTROL_CATEGORY.design,
+        defaultValue: { summary: 'ø' },
+        type: { summary: 'string' },
+      },
+    },
     isDisabled: {
       control: 'boolean',
       table: {
@@ -46,6 +132,39 @@ export const Demo: StoryObj = {
   },
 };
 
+export const CustomCSS: StoryObj = {
+  tags: ['isHidden'],
+  render: () => html`
+<ods-toggle class="my-toggle" with-label>
+</ods-toggle>
+<style>
+  .my-toggle::part(slider) {
+    background-color: red;
+  }
+
+  .my-toggle::part(slider)::before {
+    background-color: blue;
+  }
+
+  .my-toggle::part(label) {
+    color: green;
+  }
+
+  .my-toggle::part(slider checked) {
+    background-color: blueviolet;
+  }
+
+  .my-toggle::part(slider checked)::before {
+    background-color: black;
+  }
+
+  .my-toggle::part(label checked) {
+    color: black;
+  }
+</style>
+  `,
+};
+
 export const Default: StoryObj = {
   tags: ['isHidden'],
   render: () => html`