From e23c5c4e44b3fdd8b473d4840ebd26282286dec9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Mon, 2 Sep 2024 13:58:45 +0300 Subject: [PATCH 1/4] FileInput visibility hidden in single file mode when file has been added --- src/core/Form/FileInput/FileInput.baseStyles.tsx | 4 ++++ src/core/Form/FileInput/FileInput.tsx | 4 +++- .../__snapshots__/FileInput.test.tsx.snap | 16 ++++++++++++++++ 3 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/core/Form/FileInput/FileInput.baseStyles.tsx b/src/core/Form/FileInput/FileInput.baseStyles.tsx index 15382ef8b..4c72d908d 100644 --- a/src/core/Form/FileInput/FileInput.baseStyles.tsx +++ b/src/core/Form/FileInput/FileInput.baseStyles.tsx @@ -154,6 +154,10 @@ export const baseStyles = ( opacity: 0; z-index: -9999; + &.fi-file-input_label--hidden-under-file { + visibility: hidden; + } + &:not(.fi-file-input_label--hidden-under-file) { &:focus { + .fi-file-input_input-label { diff --git a/src/core/Form/FileInput/FileInput.tsx b/src/core/Form/FileInput/FileInput.tsx index f2366a6d5..f65bdb4bf 100644 --- a/src/core/Form/FileInput/FileInput.tsx +++ b/src/core/Form/FileInput/FileInput.tsx @@ -406,7 +406,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(); diff --git a/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap b/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap index 79f3e238e..daa624762 100644 --- a/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap +++ b/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap @@ -496,6 +496,10 @@ exports[`snapshots match error status with statustext 1`] = ` z-index: -9999; } +.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_input-element.fi-file-input_label--hidden-under-file { + 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_input-element:not(.fi-file-input_label--hidden-under-file):focus + .fi-file-input_input-label { position: relative; outline: 3px solid transparent; @@ -1198,6 +1202,10 @@ exports[`snapshots match hidden label 1`] = ` z-index: -9999; } +.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_input-element.fi-file-input_label--hidden-under-file { + 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_input-element:not(.fi-file-input_label--hidden-under-file):focus + .fi-file-input_input-label { position: relative; outline: 3px solid transparent; @@ -1890,6 +1898,10 @@ exports[`snapshots match hint text 1`] = ` z-index: -9999; } +.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_input-element.fi-file-input_label--hidden-under-file { + 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_input-element:not(.fi-file-input_label--hidden-under-file):focus + .fi-file-input_input-label { position: relative; outline: 3px solid transparent; @@ -2572,6 +2584,10 @@ exports[`snapshots match minimal implementation 1`] = ` z-index: -9999; } +.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_input-element.fi-file-input_label--hidden-under-file { + 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_input-element:not(.fi-file-input_label--hidden-under-file):focus + .fi-file-input_input-label { position: relative; outline: 3px solid transparent; From 39b2e3e0f019925fc40820b5ef409e65137162c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Fri, 6 Sep 2024 13:37:14 +0300 Subject: [PATCH 2/4] FileInput: Input wrapper visiblity hidden when single file mode and file chosen --- .../Form/FileInput/FileInput.baseStyles.tsx | 8 ++--- src/core/Form/FileInput/FileInput.tsx | 8 ++++- .../__snapshots__/FileInput.test.tsx.snap | 32 +++++++++---------- 3 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/core/Form/FileInput/FileInput.baseStyles.tsx b/src/core/Form/FileInput/FileInput.baseStyles.tsx index 4c72d908d..c015231af 100644 --- a/src/core/Form/FileInput/FileInput.baseStyles.tsx +++ b/src/core/Form/FileInput/FileInput.baseStyles.tsx @@ -143,6 +143,10 @@ export const baseStyles = ( display: flex; align-items: center; + &.fi-file-input_input_wrapper--hidden { + visibility: hidden; + } + .fi-file-input_drag-text-container { ${font(theme)('bodyTextSmall')} margin-left: ${theme.spacing.insetXxl}; @@ -154,10 +158,6 @@ export const baseStyles = ( opacity: 0; z-index: -9999; - &.fi-file-input_label--hidden-under-file { - visibility: hidden; - } - &:not(.fi-file-input_label--hidden-under-file) { &:focus { + .fi-file-input_input-label { diff --git a/src/core/Form/FileInput/FileInput.tsx b/src/core/Form/FileInput/FileInput.tsx index f65bdb4bf..0aa308cfa 100644 --- a/src/core/Form/FileInput/FileInput.tsx +++ b/src/core/Form/FileInput/FileInput.tsx @@ -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`, @@ -506,7 +507,12 @@ const BaseFileInput = (props: InternalFileInputProps) => { })} forwardedRef={dragAreaRef} > - + 0, + })} + >