From a6d9e36c37a1139ac0736fd34d2792a683adc8d7 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 8 May 2024 11:18:40 +0200 Subject: [PATCH] Processed feedback --- packages/css/src/components/file-input/README.md | 2 +- packages/css/src/components/file-input/file-input.scss | 9 +++------ packages/react/src/FileInput/FileInput.test.tsx | 8 ++++---- .../tokens/src/components/ams/file-input.tokens.json | 6 +++--- storybook/src/components/FileInput/FileInput.stories.tsx | 6 ++++++ 5 files changed, 17 insertions(+), 14 deletions(-) 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