Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] FileInput input-element visibility #875

Merged
merged 4 commits into from
Sep 11, 2024
Merged

[Fix] FileInput input-element visibility #875

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e23c5c4
FileInput visibility hidden in single file mode when file has been added
riitasointi Sep 2, 2024
39b2e3e
FileInput: Input wrapper visiblity hidden when single file mode and f…
riitasointi Sep 6, 2024
615036f
Fix CSS class name in FileInput styles
riitasointi Sep 11, 2024
50fbd71
Update FileInput.test.tsx.snap
riitasointi Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/core/Form/FileInput/FileInput.baseStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,10 @@ export const baseStyles = (
display: flex;
align-items: center;

&.fi-file-input_input_wrapper--hidden {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The classname in CSS and in FileInput.tsx do not match. input_wrapper--hidden (here) vs input-wrapper--hidden (in FileInput.tsx). The former is used consistently in CSS but the latter form (with a hyphen between input and wrapper) would match the class used for the base state of the wrapper.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, fixed now

visibility: hidden;
}

.fi-file-input_drag-text-container {
${font(theme)('bodyTextSmall')}
margin-left: ${theme.spacing.insetXxl};
Expand Down
12 changes: 10 additions & 2 deletions src/core/Form/FileInput/FileInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const fileInputClassNames = {
singleFileContainer: `${baseClassName}_single-file-container`,
multiFileContainer: `${baseClassName}_multi-file-container`,
inputWrapper: `${baseClassName}_input-wrapper`,
inputWrapperHidden: `${baseClassName}_input-wrapper--hidden`,
inputLabel: `${baseClassName}_input-label`,
inputElement: `${baseClassName}_input-element`,
error: `${baseClassName}--error`,
Expand Down Expand Up @@ -406,7 +407,9 @@ const BaseFileInput = (props: InternalFileInputProps) => {
// Handle focus
// If there is only one file, set focus to the input element
if (!multiFile || initialFilesArray.length === 1) {
inputRef.current?.focus();
setTimeout(() => {
inputRef.current?.focus();
}, 100);
} // In multi file mode, if the removed file was the first item, set focus to the next one
else if (indexOfRemovedFile === 0) {
fileItemRefs[indexOfRemovedFile + 1].fileNameRef.current?.focus();
Expand Down Expand Up @@ -504,7 +507,12 @@ const BaseFileInput = (props: InternalFileInputProps) => {
})}
forwardedRef={dragAreaRef}
>
<HtmlDiv className={fileInputClassNames.inputWrapper}>
<HtmlDiv
className={classnames(fileInputClassNames.inputWrapper, {
[fileInputClassNames.inputWrapperHidden]:
!multiFile && files && files.length > 0,
})}
>
<HtmlInput
id={id}
className={classnames(fileInputClassNames.inputElement, {
Expand Down
16 changes: 16 additions & 0 deletions src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,6 +472,10 @@ exports[`snapshots match error status with statustext 1`] = `
align-items: center;
}

.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper.fi-file-input_input_wrapper--hidden {
visibility: hidden;
}

.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_drag-text-container {
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
Expand Down Expand Up @@ -1174,6 +1178,10 @@ exports[`snapshots match hidden label 1`] = `
align-items: center;
}

.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper.fi-file-input_input_wrapper--hidden {
visibility: hidden;
}

.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_drag-text-container {
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
Expand Down Expand Up @@ -1866,6 +1874,10 @@ exports[`snapshots match hint text 1`] = `
align-items: center;
}

.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper.fi-file-input_input_wrapper--hidden {
visibility: hidden;
}

.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_drag-text-container {
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
Expand Down Expand Up @@ -2548,6 +2560,10 @@ exports[`snapshots match minimal implementation 1`] = `
align-items: center;
}

.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper.fi-file-input_input_wrapper--hidden {
visibility: hidden;
}

.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_drag-text-container {
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
Expand Down