refactored css

deven-org · Jan 18, 2024 · 5c8047a · 5c8047a
1 parent bf6bf27
commit 5c8047a
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 105 deletions.
diff --git a/packages/ui-library/src/components/forms/number-input/index.css.ts b/packages/ui-library/src/components/forms/number-input/index.css.ts
@@ -4,33 +4,50 @@ import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/in
 export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
   const { UserInput, SurfaceFill, Placeholder, Input, InputBorderRadius, SM, MD, LG, PrefixSuffix } = semanticTokens.Forms;
   const { StepperCombo } = componentTokens.Action;
+  const { NumberInput } = componentTokens.Forms;
+
   return typeSafeNestedCss`
     .noPointerEvents {
       pointer-events: none;
     }
 
+
     .input-wrapper {
       box-sizing: border-box;
       width:100%;
       outline: ${Input.Default.Rest.width} ${Input.Default.Rest.style} ${Input.Default.Rest.color};
       border-radius: ${InputBorderRadius};
 
-      > input {
-        display:flex;
-        border: none;
-        outline: none;
-        color: inherit;
-   
-      }
-
-      .unit{
-        color:${PrefixSuffix.OnPopulatedField.Default.Rest};
+    .input-unit-container{
+      display:flex;
+       &.sm {
+         gap: ${NumberInput.Input.TextContainer.ItemSpacing.SM};
+       }
+
+       &.md {
+         gap: ${NumberInput.Input.TextContainer.ItemSpacing.MD};
+       }
+       
+       &.lg {
+         gap: ${NumberInput.Input.TextContainer.ItemSpacing.LG};
+       } 
+       .unit {
+        color: ${PrefixSuffix.OnPopulatedField.Default.Rest};
       }
-
+       .input-container{
+        display:flex; 
+        > input{
+          display:flex;
+          border:none;
+          outline:none;
+        }
+       }      
+     }
+  
       > * {
         background-color: transparent;
       }
-
+      
       &.split {
         &.sm {
           > .custom-stepper-button {
@@ -50,25 +67,16 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
             width: ${StepperCombo.LG.Vertical.Width};
           }
         }
-        > .unit {
-          text-align: left;
-        }
-  
-        > input {
-          text-align: right;
-
-        }
       }
-
-      > .unit,
-      input {
+      
+      .unit,
+      input{
         &.sm {
           font-weight: ${SM.UserInput.fontWeight};
           font-size: ${SM.UserInput.fontSize};
           font-family: ${SM.UserInput.fontFamily}, sans-serif;
           line-height: ${SM.UserInput.lineHeight};
           padding: ${SM.InputField.Padding};
-
         }
 
         &.md {
@@ -86,7 +94,6 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
           line-height: ${LG.UserInput.lineHeight};
           padding: ${LG.InputField.Padding};
         }
-
       }
 
       &.disabled {
@@ -273,71 +280,69 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
 );
 
 export const baseStyle = typeSafeNestedCss`
-  :host {
-    --spacing: -18px;
-  }
-  
   .input-wrapper {
     display: flex;
     overflow: hidden;
     box-sizing: border-box;
 
-    & > input::-webkit-outer-spin-button,
-    & > input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
+      .input-unit-container{
+        display: flex;
+        .input-container{
+         & > input::-webkit-outer-spin-button,
+         & > input::-webkit-inner-spin-button {
+              -webkit-appearance: none;
+              margin: 0;
+          }
+         & > input[type="number"] {
+              -moz-appearance: textfield;
+          } 
+        }
+        &:has(.unit){
+          .unit.prepend{
+            order:-1;
+            padding-right:0;
+          }
 
-    > input {
-      flex-grow: 1;
-    }
+          .input-container.prepend{
+            order:0;
+              > input{
+              padding-left: 0px;
+            }   
+          }
+        }
+        &.split{
+          display: grid;
+          grid-template-columns: 1fr ;
 
-    > input[type="number"] {
-      -moz-appearance: textfield;
-    }
+          .input-container{  
+            > input {
+              text-align:center;
+             } 
+          }
 
-    &.split {
-      > button:first-of-type {
-        order: -2;
-      }
+          &:has(.unit){
+             grid-template-columns: 1fr 1fr;
+             text-align:right;
 
-      .unit {
-        order: 0;
-      }
-   
-      .unit.prepend {
-        order: -1;
-        text-align: right;
+             .input-container{  
+              > input {
+                text-align:left;
+               } 
+            } 
+          }
+        }
       }
+    }  
+  }
 
-      > input.prepend {
-        text-align: left;
+    &.split{
+      > button:first-of-type {
+        order: -2; 
       }
-      
+
       > button:last-of-type {
         margin-left:auto;
       }
     }
-
-    &.horizontal,
-    &.vertical {
-      .unit.prepend {
-        order: -1;
-      }
-      > input.prepend{
-        position:relative; 
-        &.sm{
-        margin-left: var(--spacing);
-        }
-
-        &.md{
-          margin-left:var(--spacing);
-        }
-        
-        &.lg{
-          margin-left:var(--spacing);
-        }
-      }
-    }
   }
 `;
diff --git a/packages/ui-library/src/components/forms/number-input/index.stories.ts b/packages/ui-library/src/components/forms/number-input/index.stories.ts
@@ -54,7 +54,7 @@ export default {
     value: undefined,
     fractionDigits: 0,
     totalDigits: 0,
-    prependUnit: false,
+    prependUnit: true,
     unit: 'kg',
     step: 1,
     hasLabel: true,

diff --git a/packages/ui-library/src/components/forms/number-input/index.ts b/packages/ui-library/src/components/forms/number-input/index.ts
@@ -175,6 +175,7 @@ export class BlrNumberInput extends LitElement {
         unit: true,
         prepend: !!this.prependUnit,
         [`${this.size}`]: this.size,
+        [this.stepperVariant || 'split']: this.stepperVariant || 'split',
       });
 
       const wrapperClasses = classMap({
@@ -183,6 +184,21 @@ export class BlrNumberInput extends LitElement {
         [`${this.size}`]: this.size,
         [this.stepperVariant || 'split']: this.stepperVariant || 'split',
         'error-input': this.hasError || false,
+        'prepend': !!this.prependUnit,
+      });
+
+      const inputAndUnitContainer = classMap({
+        'input-unit-container': true,
+        'prepend': !!this.prependUnit,
+        [`${this.size}`]: this.size,
+        [this.stepperVariant || 'split']: this.stepperVariant || 'split',
+      });
+
+      const inputContainer = classMap({
+        'input-container': true,
+        'prepend': !!this.prependUnit,
+        [`${this.size}`]: this.size,
+        [this.stepperVariant || 'split']: this.stepperVariant || 'split',
       });
 
       const captionContent = html`
@@ -218,37 +234,48 @@ export class BlrNumberInput extends LitElement {
         <style>
           ${dynamicStyles}
         </style>
-        ${this.hasLabel
-          ? BlrFormLabelRenderFunction({
-              labelText: this.label,
-              labelSize: this.size,
-              labelAppendix: this.labelAppendix,
-              forValue: this.numberInputId,
-              theme: this.theme,
-              variant: this.hasError ? 'error' : 'label',
-            })
-          : nothing}
+        ${
+          this.hasLabel
+            ? BlrFormLabelRenderFunction({
+                labelText: this.label,
+                labelSize: this.size,
+                labelAppendix: this.labelAppendix,
+                forValue: this.numberInputId,
+                theme: this.theme,
+                variant: this.hasError ? 'error' : 'label',
+              })
+            : nothing
+        }
         <div class="${wrapperClasses}">
-          <input
-            class="${inputClasses}"
-            type="number"
-            .value=${!this.readonly && this.currentValue != 0
-              ? this.customFormat(this.currentValue || 0, this.fractionDigits || 0, this.totalDigits || 0)
-              : nothing}
-            step="${this.step || nothing}"
-            ?disabled="${this.disabled}"
-            ?readonly="${this.readonly}"
-            ?required="${this.required}"
-            hasError="${this.hasError}"
-            @change=${this.handleChange}
-            placeholder=${this.placeholder || nothing}
-          />
-          ${!this.readonly && this.unit ? html` <span class="${unitClasses}">${this.unit}</span> ` : nothing}
-          ${this.renderMode()}
+          <div class="${inputAndUnitContainer}">
+            <div class="${inputContainer}">
+              <input
+                class="${inputClasses}"
+                type="number"
+                .value=${
+                  !this.readonly && this.currentValue != 0
+                    ? this.customFormat(this.currentValue || 0, this.fractionDigits || 0, this.totalDigits || 0)
+                    : nothing
+                }
+                step="${this.step || nothing}"
+                ?disabled="${this.disabled}"
+                ?readonly="${this.readonly}"
+                ?required="${this.required}"
+                hasError="${this.hasError}"
+                @change=${this.handleChange}
+                placeholder=${this.placeholder || nothing}
+              />
+            </div>
+            ${!this.readonly && this.unit ? html` <div class="${unitClasses}">${this.unit}</div> ` : nothing}
+                </div>
+            ${this.renderMode()}
+          </div>
+          ${
+            this.hasHint || this.hasError
+              ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
+              : nothing
+          }
         </div>
-        ${this.hasHint || this.hasError
-          ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
-          : nothing}
       `;
     }
   }