Fix style for file input and add accept attribute

Amsterdam · Apr 25, 2024 · 884e7da · 884e7da
1 parent b672273
commit 884e7da
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/packages/css/src/components/input/input.scss b/packages/css/src/components/input/input.scss
@@ -72,6 +72,11 @@
   padding-inline: var(--ams-input-file-selector-button-padding-inline);
 }
 
-.ams-input:hover::file-selector-button {
+.ams-input:disabled::file-selector-button {
+  color: var(--ams-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ams-input:not(:disabled):hover::file-selector-button {
   text-decoration: underline;
 }
diff --git a/storybook/src/components/Input/Input.docs.mdx b/storybook/src/components/Input/Input.docs.mdx
@@ -35,8 +35,17 @@ Incorrectly filled input fields become visible immediately.
 
 ### File
 
+Use the `accept` attribute to specify the types of files that the input accepts.
+
+- [MDN Input type File](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
+
 <Canvas of={InputStories.File} />
 
+## Extra types
+
+Besides the default text input, there are other types of inputs that can be used. Use them to aid
+autocomplete, validation, and use the correct keyboard on mobile devices.
+
 ### Password
 
 <Canvas of={InputStories.Password} />

diff --git a/storybook/src/components/Input/Input.stories.tsx b/storybook/src/components/Input/Input.stories.tsx
@@ -65,6 +65,7 @@ export const Disabled: Story = {
 export const File: Story = {
   args: {
     type: 'file',
+    accept: 'image/*,.pdf',
   },
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,6 +65,7 @@ export const Disabled: Story = { @@
     export const File: Story = {
       args: {
         type: 'file',
+        accept: 'image/*,.pdf',
       },
     }
@@ Expand Down @@