Style disabled inputs

ooni · Sep 3, 2024 · de84d4d · de84d4d
1 parent d80b974
commit de84d4d
Show file tree

Hide file tree

Showing 6 changed files with 191 additions and 172 deletions.
diff --git a/package.json b/package.json
@@ -9,33 +9,30 @@
   "author": "Arturo Filastò <arturo@filasto.net>",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "mini-svg-data-uri": "^1.4.4",
     "react-select": "^5.8.0",
-    "tailwind-merge": "^2.3.0"
+    "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@biomejs/biome": "1.5.3",
-    "@chromatic-com/storybook": "^1.6.1",
+    "@chromatic-com/storybook": "^1.8.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/addon-onboarding": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
-    "@storybook/react": "^8.2.1",
-    "@storybook/react-vite": "^8.2.1",
-    "@storybook/test": "^8.2.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@svgr/rollup": "^8.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/dom": "^9.3.4",
@@ -64,7 +61,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.9",
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.5",
     "tslib": "^2.6.3",
@@ -95,5 +92,12 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build"
   },
-  "files": ["dist", "animations", "svgs", "index.d.ts", "icons", "tailwind"]
+  "files": [
+    "dist",
+    "animations",
+    "svgs",
+    "index.d.ts",
+    "icons",
+    "tailwind"
+  ]
 }
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -36,10 +36,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             rounded-full 
             border
             outline-none
-            ${
-              error
-                ? 'border-red-700 hover:border-red-700 focus:border-red-700'
-                : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
+            disabled:bg-gray-300
+            disabled:hover:border-gray-600
+            ${error
+              ? 'border-red-700 hover:border-red-900 focus:border-red-700'
+              : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
             }
           `}
           {...props}

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -36,10 +36,11 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
           bg-no-repeat
           bg-right
           bg-[length:40px_20px]
-          ${
-            error
-              ? 'border-red-700 hover:border-red-700 focus:border-red-700'
-              : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
+          disabled:bg-gray-300
+          disabled:hover:border-gray-600
+          ${error
+            ? 'border-red-700 hover:border-red-900 focus:border-red-700'
+            : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
           }
         `}
         {...props}

diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
@@ -34,10 +34,11 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             box-border
             rounded
             border
-            ${
-              error
-                ? 'border-red-700 hover:border-red-700 focus:border-red-700'
-                : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
+            disabled:bg-gray-300
+            disabled:hover:border-gray-600
+            ${error
+              ? 'border-red-700 hover:border-red-900 focus:border-red-700'
+              : 'border-gray-600 hover:border-gray-800 focus:border-blue-500'
             }
           `}
           {...props}

diff --git a/stories/Input.stories.tsx b/stories/Input.stories.tsx
@@ -28,6 +28,10 @@ export const ErrorInput: Story = {
 }
 
 ErrorInput.args = {
-  label: 'Error Label',
+  label: 'Error Input',
   error: 'cannot be empty',
 }
+
+export const DisabledInput: Story = {
+  render: (args) => <Input {...args} label="Disabled Input" disabled placeholder="Please enter text" />,
+}