fix(ui-library): number-input adjustments (#449)

deven-org · Oct 18, 2023 · 6d7f899 · 6d7f899
1 parent 4a7ed0f
commit 6d7f899
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 161 deletions.
diff --git a/packages/ui-library/src/components/number-input/index.css.ts b/packages/ui-library/src/components/number-input/index.css.ts
@@ -1,12 +1,12 @@
 import { css } from "nested-css-to-flat/lit-css";
 import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
-export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
+export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = renderThemedCssStrings((_componentTokens, semanticTokens) => {
   const { UserInput, SurfaceFill, Placeholder, Input, InputBorderRadius } = semanticTokens.Forms;
 
   return css`
     .input-wrapper {
-      border: ${Input.Default.Rest.width} ${Input.Default.Rest.style} ${Input.Default.Rest.color};
+      outline: ${Input.Default.Rest.width} ${Input.Default.Rest.style} ${Input.Default.Rest.color};
       border-radius: ${InputBorderRadius};
 
       &.disabled {
@@ -171,28 +171,7 @@ export const { tokenizedLight: formLight, tokenizedDark: formDark } = renderThem
       }
     }
 
-    .hint-wrapper {
-      display: flex;
-
-      &.sm {
-        margin: ${SM.CaptionSlot.Margin};
-      }
-
-      &.md {
-        margin: ${MD.CaptionSlot.Margin};
-      }
-
-      &.lg {
-        margin: ${MD.CaptionSlot.Margin};
-      }
-    }
-
     .unit {
-      all: initial;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
       &.sm {
         font-weight: ${SM.UserInput.fontWeight};
         font-size: ${SM.UserInput.fontSize};
@@ -236,70 +215,79 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
 
     return css`
       .stepper-combo {
-        position: relative;
-
         &.horizontal {
           display: flex;
           justify-content: flex-end;
 
           &.sm {
             width: ${StepperCombo.SM.Horizontal.Width};
 
-            > .divider-vertical {
+            > blr-divider {
               padding: ${StepperCombo.SM.Horizontal.DividerWrapper.Padding};
             }
           }
 
           &.md {
             width: ${StepperCombo.MD.Horizontal.Width};
 
-            > .divider-vertical {
+            > blr-divider {
               padding: ${StepperCombo.MD.Horizontal.DividerWrapper.Padding};
             }
           }
 
           &.lg {
             width: ${StepperCombo.LG.Horizontal.Width};
 
-            > .divider-vertical {
+            > blr-divider {
               padding: ${StepperCombo.LG.Horizontal.DividerWrapper.Padding};
             }
           }
         }
-      }
 
-      &.vertical {
-        &.sm {
-          width: ${StepperCombo.SM.Vertical.Width};
-        }
+        &.vertical {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
 
-        &.md {
-          width: ${StepperCombo.MD.Vertical.Width};
+          &.sm {
+            width: ${StepperCombo.SM.Vertical.Width};
 
-          > .divider-horizontal {
-            padding: ${StepperCombo.MD.Vertical.DividerWrapper.Padding};
+            > blr-divider {
+              padding: ${StepperCombo.SM.Vertical.DividerWrapper.Padding};
+            }
           }
-        }
 
-        &.lg {
-          width: ${StepperCombo.LG.Vertical.Width};
+          &.md {
+            width: ${StepperCombo.MD.Vertical.Width};
+
+            > blr-divider {
+              padding: ${StepperCombo.MD.Vertical.DividerWrapper.Padding};
+            }
+          }
+
+          &.lg {
+            width: ${StepperCombo.LG.Vertical.Width};
 
-          > .divider-horizontal {
-            padding: ${StepperCombo.LG.Vertical.DividerWrapper.Padding};
+            > blr-divider {
+              padding: ${StepperCombo.LG.Vertical.DividerWrapper.Padding};
+            }
           }
         }
       }
 
       .custom-stepper-button {
-        all: initial;
-        line-height: 0;
-        text-align: center;
+        display: flex;
+        align-items: center;
+        border: none;
         background-color: ${Silent.SurfaceFill.Rest};
         color: ${Silent.Icon.Rest};
 
-        &.fullWidthHeight {
-          width: 100%;
-          height: 50%;
+        &.horizontal {
+          justify-content: center;
+        }
+
+        &.vertical {
+          flex-direction: column;
         }
 
         &:hover:not(:disabled) {
@@ -380,13 +368,6 @@ export const baseStyle = css`
     &.mode2 {
       .stepper-combo.horizontal.sm {
         grid-area: right2;
-
-        & > .divider-vertical {
-          position: absolute;
-          left: 50%;
-          height: 60%;
-          padding-top: 10%;
-        }
       }
 
       .stepper-combo.horizontal.md {
@@ -429,18 +410,4 @@ export const baseStyle = css`
       }
     }
   }
-
-  .divider-horizontal {
-    position: absolute;
-    top: 50%;
-    width: 60%;
-    left: 50%;
-    transform: translate(-50%);
-  }
-
-  .divider-vertical {
-    position: absolute;
-    left: 60%;
-    height: 60%;
-  }
 `;