fix(toggle): style error

Signed-off-by: Alexandre Esteves <[email protected]>
ovh · Nov 28, 2024 · 761607a · 761607a
1 parent df512ca
commit 761607a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/packages/ods/src/components/toggle/src/components/ods-toggle/ods-toggle.scss b/packages/ods/src/components/toggle/src/components/ods-toggle/ods-toggle.scss
@@ -10,20 +10,16 @@
     box-sizing: border-box;
     display: inline-block;
     position: relative;
-    border: 1px solid transparent;
     border-radius: 1rem;
     width: 48px;
     height: 24px;
 
-    &--error {
-      border-color: var(--ods-color-form-element-border-critical);
-    }
-
     &__slider {
       $slider: &;
 
       position: absolute;
       inset: 0;
+      border: 1px solid var(--ods-color-neutral-200);
       border-radius: 1rem;
       background-color: var(--ods-color-neutral-200);
       cursor: pointer;
@@ -42,7 +38,8 @@
         content: '';
       }
 
-      &:not(#{$slider}--disabled):hover {
+      &:not(#{$slider}--disabled, #{$slider}--error):hover {
+        border-color: var(--ods-color-neutral-300);
         background-color: var(--ods-color-neutral-300);
 
         & #{$slider}__label {
@@ -53,6 +50,8 @@
       &--disabled {
         @include state.ods-is-disabled();
 
+        border-color: state.$ods-state-is-disabled-background-color;
+
         &::before {
           box-shadow: none;
         }
@@ -62,6 +61,10 @@
         }
       }
 
+      &--error {
+        border-color: var(--ods-color-form-element-border-critical);
+      }
+
       &__label {
         display: flex;
         position: absolute;
@@ -79,23 +82,34 @@
     }
 
     &__input {
+      $error: '.ods-toggle__container__slider--error';
+      $disabled: '.ods-toggle__container__slider--disabled';
+
       opacity: 0;
       width: 0;
       height: 0;
 
       &:focus + .ods-toggle__container__slider {
         @include focus.ods-focus();
 
-        background-color: var(--ods-color-neutral-300);
+        + :not(#{$error}) {
+          border-color: var(--ods-color-neutral-300);
+          background-color: var(--ods-color-neutral-300);
+        }
+
 
         .ods-toggle__container__slider__label {
           color: var(--ods-color-neutral-800);
         }
       }
 
-      &:focus:checked + :not(.ods-toggle__container__slider--disabled).ods-toggle__container__slider {
+      &:focus:checked + :not(#{$disabled}).ods-toggle__container__slider {
         background-color: var(--ods-color-primary-700);
 
+        &:not(#{$error}) {
+          border-color: var(--ods-color-primary-700);
+        }
+
         .ods-toggle__container__slider__label {
           color: var(--ods-color-neutral-000);
         }
@@ -111,10 +125,12 @@
           padding-left: 4px;
         }
 
-        & + :not(.ods-toggle__container__slider--disabled).ods-toggle__container__slider {
+        & + :not(#{$disabled}, #{$error}).ods-toggle__container__slider {
+          border-color: var(--ods-color-primary-500);
           background-color: var(--ods-color-primary-500);
 
           &:hover {
+            border-color: var(--ods-color-primary-700);
             background-color: var(--ods-color-primary-700);
           }
 

diff --git a/packages/ods/src/components/toggle/src/components/ods-toggle/ods-toggle.tsx b/packages/ods/src/components/toggle/src/components/ods-toggle/ods-toggle.tsx
@@ -169,10 +169,7 @@ export class OdsToggle {
     return (
       <Host class='ods-toggle'
         disabled={ this.isDisabled }>
-        <label class={{
-          'ods-toggle__container': true,
-          'ods-toggle__container--error': this.isInvalid,
-        }}>
+        <label class='ods-toggle__container'>
           <input
             checked={ this.value ?? false }
             class="ods-toggle__container__input"
@@ -192,6 +189,7 @@ export class OdsToggle {
             'ods-toggle__container__slider': true,
             'ods-toggle__container__slider--checked': this.value ?? false,
             'ods-toggle__container__slider--disabled': this.isDisabled,
+            'ods-toggle__container__slider--error': this.isInvalid,
           }}
           part={ `slider ${this.value ? 'checked' : ''}` }>
             {

diff --git a/packages/ods/src/components/toggle/tests/rendering/ods-toggle.e2e.ts b/packages/ods/src/components/toggle/tests/rendering/ods-toggle.e2e.ts
@@ -10,7 +10,7 @@ describe('ods-toggle rendering', () => {
 
   async function isInErrorState(): Promise<boolean | undefined> {
     return await page.evaluate(() => {
-      return document.querySelector('ods-toggle')?.shadowRoot?.querySelector('.ods-toggle__container')?.classList.contains('ods-toggle__container--error');
+      return document.querySelector('ods-toggle')?.shadowRoot?.querySelector('.ods-toggle__container__slider')?.classList.contains('ods-toggle__container__slider--error');
     });
   }