diff --git a/packages/css/src/components/file-input/README.md b/packages/css/src/components/file-input/README.md
index 56ea1c867c..4ab50f20f3 100644
--- 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
index bf971b9211..f69156830c 100644
--- 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
index 8ed8529442..8875679be5 100644
--- a/packages/react/src/FileInput/FileInput.test.tsx
+++ b/packages/react/src/FileInput/FileInput.test.tsx
@@ -6,7 +6,7 @@ import '@testing-library/jest-dom'
describe('File input', () => {
it('renders', () => {
const { container } = render()
- const component = container.querySelector(':only-child')
+ const component = container.querySelector('input[type="file"]')
expect(component).toBeInTheDocument()
expect(component).toBeVisible()
@@ -14,14 +14,14 @@ describe('File input', () => {
it('renders a design system BEM class name', () => {
const { container } = render()
- 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()
- 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()
const { container } = render()
- 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
index f26f1218c3..e78dcb5df1 100644
--- 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
index 6c988bed51..7ca727bef1 100644
--- 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