Merge pull request #1383 from Wizleap-Inc/fix/number-input-height

Fix/number-input-height
Wizleap-Inc · Oct 10, 2024 · 5fd12b8 · 5fd12b8
2 parents 30e6274 + 9286a58
commit 5fd12b8
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/forty-candles-hide.md b/.changeset/forty-candles-hide.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": patch
+"@wizleap-inc/wiz-ui-next": patch
+"@wizleap-inc/wiz-ui-styles": patch
+---
+
+Fix(number-input): height
diff --git a/packages/styles/bases/number-input.css.ts b/packages/styles/bases/number-input.css.ts
@@ -30,10 +30,10 @@ export const input = style({
   minWidth: "30%",
   border: "none",
   outline: "none",
-  padding: `${THEME.spacing.xs2} ${THEME.spacing.xs}`,
-  lineHeight: THEME.fontSize.xl,
   flexGrow: 1,
   fontSize: THEME.fontSize.sm,
+  lineHeight: THEME.fontSize.lg,
+  padding: `${THEME.spacing.sm} ${THEME.spacing.xs}`,
   color: THEME.color.gray["800"],
   "::placeholder": {
     color: THEME.color.gray["500"],
@@ -56,6 +56,7 @@ export const button = style({
   borderColor: THEME.color.gray["400"],
   border: "none",
   borderLeft: `1px solid ${THEME.color.gray["400"]}`,
+  height: "100%",
   background: "transparent",
   fill: THEME.color.gray["500"],
   selectors: {
@@ -78,7 +79,7 @@ export const button = style({
 });
 
 export const arrowIcon = style([
-  fontSizeStyle.xs2,
+  fontSizeStyle.xs,
   {
     transform: "scale(2)",
     pointerEvents: "none",

diff --git a/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue b/packages/wiz-ui-next/src/components/base/inputs/number-input/number-input.vue
@@ -18,7 +18,7 @@
       v-bind="restProps"
       :disabled="disabled"
     />
-    <WizVStack>
+    <WizVStack justify="center" nowrap>
       <button
         type="button"
         @click="handleStepUp"

diff --git a/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/number-input/components/number-input.tsx
@@ -94,7 +94,7 @@ const NumberInput = (props: Props) => {
         disabled={disabled}
         {...rest}
       />
-      <WizVStack>
+      <WizVStack justify="center" nowrap>
         <button
           type="button"
           onClick={handleStepUp}