fix: disabled prop on Input component is not being respected

`disabled` is on input props but the “Input Wrapper” type elements need to set `data-variant: ‘disabled’`.
tablecheck · May 31, 2024 · 1ff7b9f · 1ff7b9f
1 parent b479374
commit 1ff7b9f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/system/react-css/src/structuredComponents/Input.tsx b/system/react-css/src/structuredComponents/Input.tsx
@@ -37,6 +37,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>(
       onInput,
       style,
       className,
+      disabled: isDisabled,
       iconBefore = null,
       iconAfter = null,
       suffix = null,
@@ -66,7 +67,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>(
       <Component
         style={style}
         className={className}
-        data-variant={variant}
+        data-variant={isDisabled ? 'disabled' : variant}
         data-stretch={isStretched}
         data-size={size}
         data-with-icon={withIcon}

diff --git a/system/react/src/structuredComponents/Input.tsx b/system/react/src/structuredComponents/Input.tsx
@@ -41,6 +41,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>(
       iconAfter = null,
       suffix = null,
       prefix = null,
+      disabled: isDisabled,
       'data-stretch': isStretched,
       'data-variant': variant,
       'data-pseudo': pseudoDebugger,
@@ -66,7 +67,7 @@ export const Input = React.forwardRef<HTMLInputElement, Props>(
       <Component
         style={style}
         className={className}
-        data-variant={variant}
+        data-variant={isDisabled ? 'disabled' : variant}
         data-stretch={isStretched}
         data-size={size}
         data-with-icon={withIcon}

diff --git a/system/stories/src/Input.stories.tsx b/system/stories/src/Input.stories.tsx
@@ -15,10 +15,10 @@ const contentVariants = [
   { title: 'Default' },
   { title: 'With Value', defaultValue: 'Some Content' },
   { title: 'Focus', 'data-pseudo': 'focus' },
-  { title: 'Disabled', 'data-variant': 'disabled' as const },
+  { title: 'Disabled', disabled: true },
   {
     title: 'Disabled With Value',
-    'data-variant': 'disabled' as const,
+    disabled: true,
     defaultValue: 'Some Content'
   },
   { title: 'Error', 'data-variant': 'error' as const },