chore(Field.Number): use default size for when showStepControls is us…

…ed (#3233) Following up of PR #3229
dnbexperience · Jan 17, 2024 · b886ad9 · b886ad9
1 parent ee5014f
commit b886ad9
Show file tree

Hide file tree

Showing 14 changed files with 34 additions and 16 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
@@ -115,8 +115,18 @@ export const Widths = () => {
           value={1234}
         />
         <Field.Number label="Small" value={1234} width="small" />
-        <Field.Number label="Medium" value={1234} width="medium" />
-        <Field.Number label="Large" value={1234} width="large" />
+        <Field.Number
+          label="Medium (and medium size)"
+          value={1234}
+          width="medium"
+          size="medium"
+        />
+        <Field.Number
+          label="Large (and large size)"
+          value={1234}
+          width="large"
+          size="large"
+        />
         <Field.Number label="Stretch" value={1234} width="stretch" />
         <Form.SubHeading>With step controls</Form.SubHeading>
         <Field.Number
@@ -132,15 +142,17 @@ export const Widths = () => {
         />
         <Field.Number
           showStepControls
-          label="Medium"
+          label="Medium (and medium size)"
           value={1234}
           width="medium"
+          size="medium"
         />
         <Field.Number
           showStepControls
-          label="Large"
+          label="Large (and large size)"
           value={1234}
           width="large"
+          size="large"
         />
         <Field.Number
           showStepControls

diff --git a/...apshots__/skeleton-for-sbanken-have-to-match-all-components-horizontal.snap.png b/...apshots__/skeleton-for-sbanken-have-to-match-all-components-horizontal.snap.png
diff --git a/...rency-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png b/...rency-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
@@ -247,7 +247,7 @@ function NumberComponent(props: Props) {
     className: 'dnb-button--control-after',
     variant: 'secondary',
     icon: 'add',
-    size: convertInputSizeToButtonSize(size),
+    size: (size || 'small') as ButtonSize,
     tabIndex: -1,
     disabled: disabled || value >= maximum,
     onClick: () => {
@@ -265,6 +265,7 @@ function NumberComponent(props: Props) {
     ...increaseProps,
     className: 'dnb-button--control-before',
     icon: 'subtract',
+    size: (size || 'small') as ButtonSize,
     disabled: disabled || value <= minimum,
     onClick: () => {
       handleChange({
@@ -325,15 +326,5 @@ function NumberComponent(props: Props) {
   )
 }
 
-const convertInputSizeToButtonSize = (
-  inputSize: InputSize
-): ButtonSize => {
-  const buttonSize =
-    ['small', 'medium', 'large'].indexOf(inputSize as string) > -1
-      ? inputSize
-      : 'medium'
-  return buttonSize as ButtonSize
-}
-
 NumberComponent._supportsSpacingProps = true
 export default NumberComponent
diff --git a/.../Number/__tests__/__image_snapshots__/fieldnumber-have-to-match-widths.snap.png b/.../Number/__tests__/__image_snapshots__/fieldnumber-have-to-match-widths.snap.png
diff --git a/...or-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png b/...or-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png
diff --git a/...umber-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png b/...umber-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png
diff --git a/...mber-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png b/...mber-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png
diff --git a/.../number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png b/.../number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png
diff --git a/.../number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png b/.../number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png
diff --git a/.../number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png b/.../number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss
@@ -1,5 +1,4 @@
 @import '../../../../../style/core/utilities.scss';
-@import '../../style/field-sizes.scss';
 
 .dnb-forms-field-number {
   --number-control-button-border-color: black;

diff --git a/.../dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss b/.../dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss
@@ -18,6 +18,13 @@
     &--has-controls {
       background-color: #1c1b4e;
       border-radius: 3rem;
+
+      // There is no small size in Sbanken
+      .dnb-button.dnb-button--size-small {
+        --button-height--small: 2.5rem;
+        --button-width--small: 2.5rem;
+      }
+
       .dnb-input {
         position: relative;
         &::before,

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss
@@ -12,4 +12,13 @@
   --number-control-button-color--active: var(--color-sea-green);
   --number-control-button--error: var(--color-fire-red);
   --number-control-button--error-contrast: var(--color-fire-red-8);
+
+  &__contents {
+    &--has-controls {
+      .dnb-button.dnb-button--size-small {
+        --button-height--small: 2rem;
+        --button-width--small: 2rem;
+      }
+    }
+  }
 }