fix(fileuploader): adding missing styles for FileUploader (#5780)

* fix(fileuploader): adding missing styles for FileUploader

* adding changeset

* chore: adding test snaps

* fix: updating cssvars test snap

* fix(docs): changing storagemanager theme to fileuploader in FileUploader docs

.changeset/mighty-rice-smell.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui': patch
+---
+
+fixed missing styles for FileUploader component

docs/__tests__/__snapshots__/cssvars-table.test.ts.snap

@@ -3310,6 +3310,250 @@ exports[`CSS Variables Table 1`] = `
         "variable": "--amplify-components-fieldset-small-gap",
         "value": "var(--amplify-components-field-small-gap)"
     },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-background-color",
+        "value": "var(--amplify-colors-primary-10)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-border-color",
+        "value": "var(--amplify-colors-border-pressed)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-border-radius",
+        "value": "var(--amplify-components-fileuploader-dropzone-border-radius)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-border-style",
+        "value": "var(--amplify-components-fileuploader-dropzone-border-style)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-active-border-width",
+        "value": "var(--amplify-border-widths-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-background-color",
+        "value": "var(--amplify-colors-background-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-border-color",
+        "value": "var(--amplify-colors-border-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-border-style",
+        "value": "dashed"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-border-width",
+        "value": "var(--amplify-border-widths-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-icon-color",
+        "value": "var(--amplify-colors-border-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-icon-font-size",
+        "value": "var(--amplify-font-sizes-xxl)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-padding-block",
+        "value": "var(--amplify-space-xl)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-padding-inline",
+        "value": "var(--amplify-space-large)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-text-align",
+        "value": "center"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-text-color",
+        "value": "var(--amplify-colors-font-tertiary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-text-font-size",
+        "value": "var(--amplify-font-sizes-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-dropzone-text-font-weight",
+        "value": "var(--amplify-font-weights-bold)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-align-items",
+        "value": "baseline"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-background-color",
+        "value": "var(--amplify-colors-background-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-border-color",
+        "value": "var(--amplify-colors-border-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-border-style",
+        "value": "solid"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-border-width",
+        "value": "var(--amplify-border-widths-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-background-color",
+        "value": "var(--amplify-colors-background-secondary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-color",
+        "value": "var(--amplify-colors-font-tertiary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-height",
+        "value": "var(--amplify-space-xxl)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-image-width",
+        "value": "var(--amplify-space-xxl)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-name-color",
+        "value": "var(--amplify-colors-font-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-name-font-size",
+        "value": "var(--amplify-font-sizes-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-name-font-weight",
+        "value": "var(--amplify-font-weights-bold)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-padding-block",
+        "value": "var(--amplify-space-xs)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-padding-inline",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-size-color",
+        "value": "var(--amplify-colors-font-tertiary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-size-font-size",
+        "value": "var(--amplify-font-sizes-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-file-size-font-weight",
+        "value": "var(--amplify-font-weights-normal)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-filelist-flex-direction",
+        "value": "column"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-filelist-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-loader-stroke-empty",
+        "value": "var(--amplify-colors-border-secondary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-loader-stroke-filled",
+        "value": "var(--amplify-components-loader-stroke-filled)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-loader-stroke-linecap",
+        "value": "round"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-loader-stroke-width",
+        "value": "var(--amplify-border-widths-large)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-background-color",
+        "value": "var(--amplify-colors-background-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-body-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-body-padding-block",
+        "value": "var(--amplify-space-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-body-padding-inline",
+        "value": "var(--amplify-space-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-border-color",
+        "value": "var(--amplify-colors-border-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-border-style",
+        "value": "solid"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-border-width",
+        "value": "var(--amplify-border-widths-small)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-footer-justify-content",
+        "value": "flex-end"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-max-height",
+        "value": "40rem"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-max-width",
+        "value": "auto"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-padding-block",
+        "value": "var(--amplify-space-zero)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-padding-inline",
+        "value": "var(--amplify-space-zero)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-text-color",
+        "value": "var(--amplify-colors-font-primary)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-text-font-size",
+        "value": "var(--amplify-font-sizes-medium)"
+    },
+    {
+        "variable": "--amplify-components-fileuploader-previewer-text-font-weight",
+        "value": "var(--amplify-font-weights-bold)"
+    },
     {
         "variable": "--amplify-components-flex-align-content",
         "value": "normal"

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx

@@ -8,7 +8,7 @@ const theme = {
       small: '2px',
     },
     components: {
-      storagemanager: {
+      fileuploader: {
         dropzone: {
           borderColor: '{colors.primary.60}',
         },

packages/ui/src/theme/__tests__/__snapshots__/defaultTheme.test.ts.snap

@@ -701,6 +701,67 @@ exports[`@aws-amplify/ui defaultTheme should match snapshot 1`] = `
 --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
 --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
 --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
+--amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-dropzone-border-style: dashed;
+--amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
+--amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
+--amplify-components-fileuploader-dropzone-text-align: center;
+--amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
+--amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
+--amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
+--amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
+--amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
+--amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
+--amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-file-border-style: solid;
+--amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
+--amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
+--amplify-components-fileuploader-file-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-file-align-items: baseline;
+--amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
+--amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
+--amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
+--amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
+--amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
+--amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
+--amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
+--amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-filelist-flex-direction: column;
+--amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-loader-stroke-linecap: round;
+--amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
+--amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
+--amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
+--amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
+--amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
+--amplify-components-fileuploader-previewer-border-style: solid;
+--amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
+--amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
+--amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
+--amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
+--amplify-components-fileuploader-previewer-max-height: 40rem;
+--amplify-components-fileuploader-previewer-max-width: auto;
+--amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
+--amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
+--amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
+--amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
+--amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
+--amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
 --amplify-components-flex-gap: var(--amplify-space-medium);
 --amplify-components-flex-justify-content: normal;
 --amplify-components-flex-align-items: stretch;