fix: Adds hidden class to pass behavior test

cloudscape-design · Oct 31, 2024 · 23b5a3f · 23b5a3f
1 parent 104e09f
commit 23b5a3f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/internal/components/file-input/index.tsx b/src/internal/components/file-input/index.tsx
@@ -99,7 +99,7 @@ const InternalFileInput = React.forwardRef(
           onChange={onUploadInputChange}
           onFocus={onUploadInputFocus}
           onBlur={onUploadInputBlur}
-          className={styles['file-input']}
+          className={clsx(styles['file-input'], styles.hidden)}
           {...nativeAttributes}
         />
 

diff --git a/src/internal/components/file-input/styles.scss b/src/internal/components/file-input/styles.scss
@@ -6,19 +6,19 @@
 @use '../../styles' as styles;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
-.root {
-  position: relative;
+.root,
+.file-input {
+  /* used in test-utils */
 }
 
-.file-input {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
+.hidden {
+  @include styles.awsui-util-hide;
+}
 
-  &-button {
-    @include focus-visible.when-visible-unfocused {
-      &.force-focus-outline {
-        @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
-      }
+.file-input-button {
+  @include focus-visible.when-visible-unfocused {
+    &.force-focus-outline {
+      @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
     }
   }
 }