fix(input-number): button styling for hover and focus states

shuriken-ui · Nov 28, 2023 · dfb241a · dfb241a
1 parent a700fef
commit dfb241a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/src/plugins/components/input-number/index.ts b/src/plugins/components/input-number/index.ts
@@ -203,8 +203,10 @@ export default plugin.withOptions(
                 {},
             },
             [`.${prefix}input-number-buttons button`]: {
-              [`@apply hover:bg-muted-100 dark:hover:bg-muted-800`]: {},
-              [`@apply focus:bg-muted-100 dark:focus:bg-muted-800`]: {},
+              [`@apply enabled:hover:bg-muted-100 dark:enabled:hover:bg-muted-800`]:
+                {},
+              [`@apply enabled:focus:bg-muted-100 dark:enabled:focus:bg-muted-800`]:
+                {},
             },
           },
           [`&.${prefix}input-number-default-contrast`]: {
@@ -213,8 +215,10 @@ export default plugin.withOptions(
                 {},
             },
             [`.${prefix}input-number-buttons button`]: {
-              [`@apply hover:bg-muted-100 dark:hover:bg-muted-900`]: {},
-              [`@apply focus:bg-muted-100 dark:focus:bg-muted-900`]: {},
+              [`@apply enabled:hover:bg-muted-100 dark:enabled:hover:bg-muted-900`]:
+                {},
+              [`@apply enabled:focus:bg-muted-100 dark:enabled:focus:bg-muted-900`]:
+                {},
             },
           },
           [`&.${prefix}input-number-muted`]: {
@@ -223,8 +227,10 @@ export default plugin.withOptions(
                 {},
             },
             [`.${prefix}input-number-buttons button`]: {
-              [`@apply hover:bg-white dark:hover:bg-muted-800`]: {},
-              [`@apply focus:bg-white dark:focus:bg-muted-800`]: {},
+              [`@apply enabled:hover:bg-white dark:enabled:hover:bg-muted-800`]:
+                {},
+              [`@apply enabled:focus:bg-white dark:enabled:focus:bg-muted-800`]:
+                {},
             },
           },
           [`&.${prefix}input-number-muted-contrast`]: {
@@ -233,8 +239,10 @@ export default plugin.withOptions(
                 {},
             },
             [`.${prefix}input-number-buttons button`]: {
-              [`@apply hover:bg-white dark:hover:bg-muted-900`]: {},
-              [`@apply focus:bg-white dark:focus:bg-muted-900`]: {},
+              [`@apply enabled:hover:bg-white dark:enabled:hover:bg-muted-900`]:
+                {},
+              [`@apply enabled:focus:bg-white dark:enabled:focus:bg-muted-900`]:
+                {},
             },
           },
           [`&:not(.${prefix}input-number-loading)`]: {

diff --git a/src/plugins/components/input-number/input-number.component.ts b/src/plugins/components/input-number/input-number.component.ts
@@ -26,6 +26,7 @@ export const InputNumber = ({
     error: '',
   },
   icon,
+  disabled,
   actionSlot,
   ...attrs
 }: InputAttrs) => {
@@ -64,6 +65,7 @@ export const InputNumber = ({
           class="${['nui-input-number', classes?.input]
             .filter(Boolean)
             .join(' ')}"
+          ?disabled="${disabled}"
           ${spread(attrs)}
         />
         ${label && labelFloat
@@ -95,7 +97,7 @@ export const InputNumber = ({
           </div>
         `}
         <div class="nui-input-number-buttons">
-          <button aria-label="Increment">
+          <button aria-label="Increment" ?disabled="${disabled}">
             <svg
               class=${['nui-chevron', 'rotate-180'].filter(Boolean).join(' ')}
               aria-hidden="true"
@@ -111,7 +113,7 @@ export const InputNumber = ({
               />
             </svg>
           </button>
-          <button aria-label="Decrement">
+          <button aria-label="Decrement" ?disabled="${disabled}">
             <svg
               class=${['nui-chevron'].filter(Boolean).join(' ')}
               aria-hidden="true"

diff --git a/src/plugins/components/input-number/input-number.stories.ts b/src/plugins/components/input-number/input-number.stories.ts
@@ -50,7 +50,7 @@ const meta = {
       control: { type: 'boolean' },
       defaultValue: false,
     },
-    '?disabled': {
+    disabled: {
       name: 'disabled',
       control: { type: 'boolean' },
       defaultValue: false,
@@ -383,7 +383,7 @@ export const DisabledSm: Story = {
     size: 'sm',
     contrast: 'default',
     shape: 'rounded',
-    '?disabled': true,
+    disabled: true,
     type: 'text',
     inputmode: 'numeric',
     placeholder: 'Enter a number',
@@ -401,7 +401,7 @@ export const DisabledMd: Story = {
     size: 'md',
     contrast: 'default',
     shape: 'rounded',
-    '?disabled': true,
+    disabled: true,
     type: 'text',
     inputmode: 'numeric',
     placeholder: 'Enter a number',
@@ -419,7 +419,7 @@ export const DisabledLg: Story = {
     size: 'lg',
     contrast: 'default',
     shape: 'rounded',
-    '?disabled': true,
+    disabled: true,
     type: 'text',
     inputmode: 'numeric',
     placeholder: 'Enter a number',