Merge pull request #1154 from dpc-sdp/fix/number-input-focusable

[R20-1949] Style updates to number input
dpc-sdp · May 14, 2024 · 80e528c · 80e528c
2 parents d4c233d + 7da9ce4
commit 80e528c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/packages/ripple-ui-forms/src/components/RplFormNumber/RplFormNumber.stories.mdx b/packages/ripple-ui-forms/src/components/RplFormNumber/RplFormNumber.stories.mdx
@@ -49,7 +49,8 @@ export const FormElementTemplate = (args) => ({
       min: 0,
       max: 10,
       step: 1,
-      mode: 'alt'
+      mode: 'alt',
+      label: 'Number'
     }}
   >
     {FormElementTemplate.bind()}

diff --git a/packages/ripple-ui-forms/src/components/RplFormNumber/RplFormNumber.vue b/packages/ripple-ui-forms/src/components/RplFormNumber/RplFormNumber.vue
@@ -136,7 +136,8 @@ const handleIncrement = () => {
     <div class="rpl-form__input-wrap">
       <button
         v-if="props.mode"
-        class="rpl-form__input-dec"
+        class="rpl-form__input-dec rpl-u-focusable-outline"
+        type="button"
         @click.prevent="handleDecrement"
       >
         <span class="rpl-u-visually-hidden">Decrease value</span>
@@ -166,7 +167,8 @@ const handleIncrement = () => {
       />
       <button
         v-if="props.mode"
-        class="rpl-form__input-inc"
+        class="rpl-form__input-inc rpl-u-focusable-outline"
+        type="button"
         @click.prevent="handleIncrement"
       >
         <span class="rpl-u-visually-hidden">Increase value</span>
@@ -184,14 +186,18 @@ const handleIncrement = () => {
 
 <style>
 .rpl-form__input--type-number-alt {
+  --local-button-dimension: var(--rpl-sp-11);
+
   .rpl-form__input-icon {
-    color: var(--rpl-clr-type-default);
+    color: var(--rpl-clr-link);
   }
 
   input[type='number'] {
-    padding-left: 4.75rem;
-    padding-right: 4.75rem;
+    height: var(--local-button-dimension);
     text-align: center;
+    color: var(--rpl-clr-type-default);
+    padding: var(--rpl-sp-3)
+      calc(var(--rpl-sp-5) * 2 + var(--rpl-sp-4) + var(--rpl-sp-3)); /* pad + icon + margin  */
   }
 
   input[type='number']::-webkit-inner-spin-button,
@@ -202,25 +208,50 @@ const handleIncrement = () => {
     margin: 0;
   }
 
+  .rpl-form__input-icon__prefix {
+    left: var(--rpl-sp-5);
+  }
+
+  .rpl-form__input-icon__suffix {
+    right: var(--rpl-sp-5);
+  }
+
   .rpl-form__input-inc,
   .rpl-form__input-dec {
+    border: 1px solid var(--rpl-clr-neutral-600);
     cursor: pointer;
-    height: 4.75rem;
-    width: 4.75rem;
+    height: var(--local-button-dimension);
+    width: var(--local-button-dimension);
+    padding: var(--rpl-sp-3) var(--rpl-sp-5);
     display: flex;
     z-index: 1;
 
+    &:hover {
+      border-color: var(--rpl-clr-dark);
+    }
+
     &:hover .rpl-icon {
       color: var(--rpl-clr-primary);
     }
   }
 
   .rpl-form__input-inc {
-    margin-left: -4.75rem;
+    border-radius: 0 var(--rpl-border-radius-2) var(--rpl-border-radius-2) 0;
+    margin-left: calc(-1 * var(--local-button-dimension));
   }
 
   .rpl-form__input-dec {
-    margin-right: -4.75rem;
+    border-radius: var(--rpl-border-radius-2) 0 0 var(--rpl-border-radius-2);
+    margin-right: calc(-1 * var(--local-button-dimension));
+  }
+
+  .rpl-form__input-wrap {
+    width: 100%;
   }
 }
+
+[data-invalid='true'] .rpl-form__input-dec,
+[data-invalid='true'] .rpl-form__input-inc {
+  border-color: var(--rpl-clr-error);
+}
 </style>