Processed feedback

Amsterdam · May 8, 2024 · a6d9e36 · a6d9e36
1 parent 5561c10
commit a6d9e36
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 14 deletions.
diff --git a/packages/css/src/components/file-input/README.md b/packages/css/src/components/file-input/README.md
@@ -2,7 +2,7 @@
 
 # File Input
 
-The file input component is a styled input element that allows users to select a file from their device.
+Allows the user to upload one or more files from their device.
 
 ## Visual considerations
 

diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss
@@ -7,16 +7,15 @@
 
 @mixin reset-button {
   border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
 }
 
 .ams-file-input {
-  align-items: center; // Aligns button label with file name on iOS
   color: var(--ams-file-input-color);
-  display: flex;
+  cursor: var(--ams-file-input-cursor);
   font-family: var(--ams-file-input-font-family);
   font-size: var(--ams-file-input-font-size);
   font-weight: var(--ams-file-input-font-weight);
-  justify-content: flex-start;
   line-height: var(--ams-file-input-line-height);
   outline-offset: var(--ams-file-input-outline-offset);
   touch-action: manipulation;
@@ -35,12 +34,9 @@
   box-shadow: var(--ams-file-input-file-selector-button-box-shadow);
   color: var(--ams-file-input-file-selector-button-color);
   cursor: var(--ams-file-input-file-selector-button-cursor);
-  display: inline-block;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  /* stylelint-disable-next-line property-disallowed-list */
-  margin-right: 2ex; // Add space between the file selector button and the file name
   padding-block: var(--ams-file-input-file-selector-button-padding-block);
   padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
 
@@ -57,4 +53,5 @@
 .ams-file-input:not(:disabled):hover::file-selector-button {
   background-color: var(--ams-file-input-file-selector-button-hover-background-color);
   box-shadow: var(--ams-file-input-file-selector-button-hover-box-shadow);
+  color: var(--ams-file-input-file-selector-button-hover-color);
 }
diff --git a/packages/react/src/FileInput/FileInput.test.tsx b/packages/react/src/FileInput/FileInput.test.tsx
@@ -6,22 +6,22 @@ import '@testing-library/jest-dom'
 describe('File input', () => {
   it('renders', () => {
     const { container } = render(<FileInput />)
-    const component = container.querySelector(':only-child')
+    const component = container.querySelector('input[type="file"]')
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<FileInput />)
-    const component = container.querySelector(':only-child')
+    const component = container.querySelector('input[type="file"]')
 
     expect(component).toHaveClass('ams-file-input')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<FileInput className="extra" />)
-    const component = container.querySelector(':only-child')
+    const component = container.querySelector('input[type="file"]')
 
     expect(component).toHaveClass('ams-file-input extra')
   })
@@ -30,7 +30,7 @@ describe('File input', () => {
     const ref = createRef<HTMLInputElement>()
 
     const { container } = render(<FileInput ref={ref} />)
-    const component = container.querySelector(':only-child')
+    const component = container.querySelector('input[type="file"]')
 
     expect(ref.current).toBe(component)
   })

diff --git a/proprietary/tokens/src/components/ams/file-input.tokens.json b/proprietary/tokens/src/components/ams/file-input.tokens.json
@@ -2,19 +2,19 @@
   "ams": {
     "file-input": {
       "color": { "value": "{ams.color.primary-black}" },
+      "cursor": { "value": "{ams.action.activate.cursor}" },
       "font-family": { "value": "{ams.text.font-family}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "placeholder": {
-        "color": { "value": "{ams.color.neutral-grey3}" }
-      },
       "disabled": {
         "color": { "value": "{ams.color.neutral-grey2}" }
       },
       "file-selector-button": {
         "background-color": { "value": "{ams.color.primary-white}" },
         "color": { "value": "{ams.color.primary-blue}" },
+        "cursor": { "value": "{ams.action.activate.cursor}" },
         "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
         "padding-block": { "value": "{ams.space.inside.xs}" },
         "padding-inline": { "value": "{ams.space.inside.md}" },

diff --git a/storybook/src/components/FileInput/FileInput.stories.tsx b/storybook/src/components/FileInput/FileInput.stories.tsx
@@ -12,6 +12,7 @@ const meta = {
   args: {
     accept: '',
     multiple: false,
+    disabled: false,
   },
   argTypes: {
     accept: {
@@ -24,6 +25,11 @@ const meta = {
         type: 'boolean',
       },
     },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 } satisfies Meta<typeof FileInput>