fix(ui-library, storybook): #875 align toggle prop names with design (#…

…1022) Co-authored-by: Barkley <barkley.taylor@accenture.com> Co-authored-by: Julius Walther <julius.walther@accenture.com> Co-authored-by: David Kennedy <127498135+davidken91@users.noreply.github.com>
deven-org · Apr 4, 2024 · d6d7536 · d6d7536
1 parent f7c55d4
commit d6d7536
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 132 deletions.
diff --git a/packages/ui-library/src/components/toggle-switch/index.css.ts b/packages/ui-library/src/components/toggle-switch/index.css.ts
@@ -5,6 +5,9 @@ export const styleCustom = typeSafeNestedCss/* css */ `
   .blr-label-toggleswitch {
     display: flex;
     align-items: flex-start;
+    flex-direction: row;
+    justify-content: space-between;
+
 
     & input {
       all: initial;
@@ -32,14 +35,10 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar
           }
         }
 
-        &.leading {
-          flex-direction: column;
-        }
 
-        &.trailing {
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
+        &.has-state-label {
+          flex-direction: column;
+        
         }
 
         & > .toggle-content-col {
@@ -85,6 +84,7 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar
               position: absolute;
               top: 0;
               display: flex;
+              align-items:center;
             }
       
             & > .blr-form-label-inline {
@@ -139,7 +139,7 @@ export const { tokenizedLight: toggleSwitchLight, tokenizedDark: toggleSwitchDar
                 }
                 .toggle-icon > .toggle-icon-class {
                   color: ${ToggleSwitch.Control.AY11Icon.IconColor.Inactive.Pressed};
-                  color: pink;
+              
                 }
               }