From 23b5a3f2a063a98594bc88df0327aac563623fbe Mon Sep 17 00:00:00 2001
From: Katie George <katiegeo@amazon.com>
Date: Thu, 31 Oct 2024 14:09:56 -0700
Subject: [PATCH] fix: Adds hidden class to pass behavior test

---
 src/internal/components/file-input/index.tsx  |  2 +-
 .../components/file-input/styles.scss         | 20 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/internal/components/file-input/index.tsx b/src/internal/components/file-input/index.tsx
index 6409e67a03..d7c2bdf512 100644
--- 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
index 4faf20f6a5..b73d2f93fd 100644
--- 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);
     }
   }
 }