Number: Add custom control button widths + add button class specifici…

…ty to prevent button style bugs
dnbexperience · Dec 21, 2023 · 8b41a01 · 8b41a01
1 parent 2fd227a
commit 8b41a01
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 28 deletions.
diff --git a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
@@ -9,17 +9,17 @@
   --button-icon-size: 1rem;
   --button-height: 2.5rem;
   --button-border-radius: calc(var(--button-height) / 2);
-  --button-width--small: 1.5rem;
-  --button-width--medium: 2rem;
-  --button-width--large: 3rem;
 }
 
 .dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
+  --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
+  --button-width--medium: 2rem;
   --button-height--medium: 2rem;
+  --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;

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
@@ -12,33 +12,23 @@
   --number-control-button-color--active: lightgrey;
   --number-control-button--error: red;
   --number-control-button--error-contrast: white;
-  --forms-field-block--buttons-width: calc(
-    var(--button-width--medium) * 2
+  --number-control-button-width--small: 2rem;
+  --number-control-button-width--medium: 2.5rem;
+  --number-control-button-width--large: 3rem;
+  --forms-field-block--number-control-buttons-width--small: calc(
+    var(--number-control-button-width--small) * 2
+  );
+  --forms-field-block--number-control-buttons-width--medium: calc(
+    var(--number-control-button-width--medium) * 2
+  );
+  --forms-field-block--number-control-buttons-width--large: calc(
+    var(--number-control-button-width--large) * 2
   );
 
   &__contents {
     display: flex;
     align-items: center;
 
-    &--has-controls.dnb-forms-field-block__contents--width-small {
-      width: calc(
-        var(--forms-field-width--small) +
-          var(--forms-field-block--buttons-width)
-      );
-    }
-    &--has-controls.dnb-forms-field-block__contents--width-medium {
-      width: calc(
-        var(--forms-field-width--medium) +
-          var(--forms-field-block--buttons-width)
-      );
-    }
-    &--has-controls.dnb-forms-field-block__contents--width-large {
-      width: calc(
-        var(--forms-field-width--large) +
-          var(--forms-field-block--buttons-width)
-      );
-    }
-
     &--has-controls {
       border-radius: 0.25rem;
       @include fakeBorder(
@@ -79,7 +69,8 @@
         }
       }
 
-      .dnb-button {
+      .dnb-button--control-before,
+      .dnb-button--control-after {
         @include hover() {
           background-color: var(
             --number-control-button-background-color--hover
@@ -109,7 +100,8 @@
         }
       }
 
-      .dnb-button {
+      .dnb-button--control-before,
+      .dnb-button--control-after {
         color: var(--number-control-button--error);
         @include hover() {
           background-color: var(--number-control-button--error-contrast);
@@ -143,10 +135,42 @@
         @include fakeBorder(var(--color-black-55), 0.0625rem);
       }
 
-      .dnb-button[disabled] {
+      .dnb-button--control-before[disabled],
+      .dnb-button--control-after[disabled] {
         background-color: var(--color-black-3);
         color: var(--color-black-20);
       }
     }
+
+    &--has-controls.dnb-forms-field-block__contents--width-small {
+      width: calc(
+        var(--forms-field-width--small) +
+          var(--forms-field-block--number-control-buttons-width--small)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--small);
+      }
+    }
+    &--has-controls.dnb-forms-field-block__contents--width-medium {
+      width: calc(
+        var(--forms-field-width--medium) +
+          var(--forms-field-block--number-control-buttons-width--medium)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--medium);
+      }
+    }
+    &--has-controls.dnb-forms-field-block__contents--width-large {
+      width: calc(
+        var(--forms-field-width--large) +
+          var(--forms-field-block--number-control-buttons-width--large)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--large);
+      }
+    }
   }
 }
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
@@ -70,7 +70,9 @@
           border-left: 0.0625rem solid var(--sb-color-gray-dark);
         }
       }
-      .dnb-button[disabled] {
+
+      .dnb-button--control-before[disabled],
+      .dnb-button--control-after[disabled] {
         color: var(--sb-color-gray-dark);
         background-color: var(--sb-color-gray-light);
       }