fix: Removes files prop and updates focus state outline

cloudscape-design · Nov 25, 2024 · 2d8d2db · 2d8d2db
1 parent d8b1dc1
commit 2d8d2db
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/pages/button-group/test.page.tsx b/pages/button-group/test.page.tsx
@@ -72,7 +72,6 @@ export default function ButtonGroupPage() {
         type: 'file-input',
         id: 'file-input',
         text: 'Choose files',
-        value: files,
         multiple: true,
       },
     ],

diff --git a/pages/prompt-input/simple.page.tsx b/pages/prompt-input/simple.page.tsx
@@ -179,7 +179,6 @@ export default function PromptInputPage() {
                               type: 'file-input',
                               id: 'files',
                               text: 'Upload files',
-                              value: files,
                               multiple: true,
                             },
                             {

diff --git a/src/button-group/file-input-item.tsx b/src/button-group/file-input-item.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import clsx from 'clsx';
 
 import { FileInputProps } from '../file-input/interfaces.js';
@@ -24,6 +24,7 @@ const FileInputItem = forwardRef(
     },
     ref: React.Ref<FileInputProps.Ref>
   ) => {
+    const [files, setFiles] = useState<File[]>([]);
     const containerRef = React.useRef<HTMLDivElement>(null);
 
     const canShowTooltip = Boolean(showTooltip);
@@ -34,8 +35,11 @@ const FileInputItem = forwardRef(
           ariaLabel={item.text}
           accept={item.accept}
           multiple={item.multiple}
-          value={item.value}
-          onChange={event => fireCancelableEvent(onItemClick, { id: item.id, files: event.detail.value })}
+          value={files}
+          onChange={event => {
+            fireCancelableEvent(onItemClick, { id: item.id, files: event.detail.value });
+            setFiles(event.detail.value);
+          }}
           ref={ref}
           data-testid={item.id}
           dataItemId={item.id}

diff --git a/src/button-group/interfaces.ts b/src/button-group/interfaces.ts
@@ -138,7 +138,6 @@ export namespace ButtonGroupProps {
     type: 'file-input';
     id: string;
     text: string;
-    value: File[];
     accept?: string;
     multiple?: boolean;
   }

diff --git a/src/file-input/styles.scss b/src/file-input/styles.scss
@@ -18,7 +18,12 @@
 .file-input-button {
   @include focus-visible.when-visible-unfocused {
     &.force-focus-outline {
-      @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+      @include styles.focus-highlight(
+        (
+          'vertical': awsui.$space-button-icon-focus-outline-gutter-vertical,
+          'horizontal': awsui.$space-button-focus-outline-gutter,
+        )
+      );
     }
   }
 }