feat(file picker ):keep action button (#301)

* feat: add keeActionButton boolean

* docs: add documentation for keepActionButton

* fix: make keepActionButton optional

* refactor: use alwaysShowActionButton

---------

Co-authored-by: Leonardo Di Vittorio <[email protected]>

Author: div-Leo

src/components/FilePicker/FilePicker.tsx

@@ -35,6 +35,10 @@ interface FilePickerProps extends MarginProps, ComponentPropsWithoutRef<'input'>
      * it works better when short
      */
     buttonText: string;
+    /**
+     * Keep the action button displayed instead of showing the success state.
+     */
+    alwaysShowActionButton?: boolean;
     /**
      * Whether or not the component should render an error state
      */
@@ -134,6 +138,7 @@ const FilePicker: FC<FilePickerProps> = ({
     onFileChange = () => undefined,
     onChange = () => undefined,
     disabled = false,
+    alwaysShowActionButton = false,
     ...nonInputProps
 }: FilePickerProps) => {
     const inputEl = useRef<HTMLInputElement>(null);
@@ -190,7 +195,7 @@ const FilePicker: FC<FilePickerProps> = ({
                     </Text>
                 </Box>
                 <Box display={{ _: 'none', medium: 'flex' }} alignItems="center" justifyContent="top">
-                    {validFileSelected ? (
+                    {!alwaysShowActionButton && validFileSelected ? (
                         <CheckCircleOutlineIcon color={ICON_FILE_FEEDBACK_COLOR} />
                     ) : (
                         <InputButton variant="secondary" type="button" tabIndex={-1} onClick={onClickHandler}>
@@ -201,7 +206,7 @@ const FilePicker: FC<FilePickerProps> = ({
                 <Box display={{ _: 'flex', medium: 'none' }} alignItems="top">
                     {validFileSelected ? <CheckCircleOutlineIcon color={ICON_FILE_FEEDBACK_COLOR} /> : <ShareIcon />}
                 </Box>
-            </Outliner>
+            </Outliner> 
         </Box>
     );
 };

src/components/FilePicker/docs/FilePicker.mdx

@@ -67,6 +67,7 @@ The example below will demostrate how to create compositions of `FilePicker`
       name="logo"
       onChange={(e) => console.log('onChange', e)}
       onFileChange={(file, e) => console.log('onFileChange', file, e)}
+      alwaysShowActionButton
       mt={1}
     />
     <FilePicker

src/components/FilePicker/docs/FilePickerPropsTable.tsx

@@ -30,6 +30,13 @@ export const FilePickerPropsTable: FC = () => {
             description:
                 'Text to display within component button, it describes the main action, it works better when short.'
         },
+        {
+            name: 'alwaysShowActionButton',
+            type: 'boolean',
+            description:
+                'Keep the action button displayed instead of showing the success state.',
+            defaultValue: 'false'
+        },
         {
             name: 'error',
             type: 'boolean',