FileUpload CSS refactor

components/lib/fileupload/FileContent.vue

@@ -4,8 +4,8 @@
         <div :class="cx('details')" v-bind="ptm('details')">
             <div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
             <span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
-            <Badge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" />
         </div>
+        <Badge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" />
         <div :class="cx('actions')" v-bind="ptm('actions')">
             <Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('removeButton')" :unstyled="unstyled" :pt="ptm('removeButton')">
                 <template #icon="iconProps">

components/lib/fileupload/FileUpload.vue

@@ -30,10 +30,14 @@
             <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
                 <template v-if="hasFiles">
                     <ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
+                    <div v-if="hasFiles" :class="cx('fileList')">
                         <FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
+                    </div>
                 </template>
                 <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</Message>
+                <div v-if="hasUploadedFiles" :class="cx('fileList')">
                     <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
+                </div>
             </slot>
             <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" :class="cx('empty')" v-bind="ptm('empty')">
                 <slot name="empty"></slot>

components/lib/fileupload/style/FileUploadStyle.js

@@ -2,28 +2,23 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
-    buttonbar: 'p-fileupload-buttonbar',
+    buttonbar: 'p-fileupload-header',
-    chooseButton: ({ instance, props }) => [
+    chooseButton: 'p-fileupload-choose-button', // TODO: Also add upload and clear
-        'p-fileupload-choose',
+    chooseIcon: 'p-fileupload-choose-icon', // TODO: remove
-        {
+    chooseButtonLabel: 'p-fileupload-choosebutton-label', // TODO: remove
-            'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
-            'p-focus': instance.focused
-        }
-    ],
-    chooseIcon: 'p-fileupload-choose-icon',
-    chooseButtonLabel: 'p-fileupload-choosebutton-label',
     content: 'p-fileupload-content',
-    empty: 'p-fileupload-empty',
+    emptyContent: 'p-fileupload-empty-content', // TODO: remove
-    uploadIcon: 'p-fileupload-upload-icon',
+    uploadIcon: 'p-fileupload-upload-icon', // TODO: remove
-    label: 'p-fileupload-button-label',
+    label: 'p-fileupload-button-label', // TODO: remove
+    fileList: 'p-fileupload-file-list',
     file: 'p-fileupload-file',
     thumbnail: 'p-fileupload-file-thumbnail',
-    details: 'p-fileupload-file-details',
+    details: 'p-fileupload-file-info',
     fileName: 'p-fileupload-file-name',
     fileSize: 'p-fileupload-file-size',
     badge: 'p-fileupload-file-badge',
     actions: 'p-fileupload-file-actions',
-    removeButton: 'p-fileupload-file-remove'
+    removeButton: 'p-fileupload-file-remove-button'
 };
 
 export default BaseStyle.extend({

components/lib/themes/primeone/base/fileupload/index.js

@@ -1,40 +1,28 @@
 export default {
     css: ({ dt }) => `
-.p-fileupload-choose {
-    position: relative;
-    overflow: hidden;
-}
-
 .p-fileupload input[type="file"] {
     display: none;
 }
 
-.p-fluid .p-fileupload .p-button {
+.p-fileupload-advanced {
-    width: auto;
+    border: 1px solid ${dt('fileupload.border.color')};
+    border-radius: ${dt('rounded.base')};
+    background: ${dt('fileupload.background')};
+    color: ${dt('fileupload.color')};
 }
 
-.p-fileupload-buttonbar {
+.p-fileupload-header {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
-    background: ${dt('fileupload.header.background')};
     padding: 1.125rem;
-    border: 1px solid ${dt('fileupload.header.border.color')};
-    color: ${dt('fileupload.header.color')};
-    border-bottom: 0 none;
-    border-top-right-radius: ${dt('rounded.base')};
-    border-top-left-radius: ${dt('rounded.base')};
     gap: 0.5rem;
 }
 
 .p-fileupload-content {
+    border: 1px solid transparent;
     position: relative;
-    background: ${dt('fileupload.content.background')};
     padding: 0 1.125rem 1.125rem 1.125rem;
-    border: 1px solid ${dt('fileupload.content.border.color')};
-    color: ${dt('fileupload.content.color')};
-    border-bottom-right-radius: ${dt('rounded.base')};
-    border-bottom-left-radius: ${dt('rounded.base')};
-    border-top: 0 none;
 }
 
 .p-fileupload-content .p-progressbar {
@@ -45,19 +33,30 @@ export default {
     height: 0.25rem;
 }
 
+.p-fileupload-file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 1.125rem;
+}
+
 .p-fileupload-file {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     padding: 1rem;
-    border: 1px solid ${dt('fileupload.file.border.color')};
+    border-bottom: 1px solid ${dt('fileupload.file.border.color')};
-    border-radius: ${dt('rounded.base')};
     gap: 0.5rem;
-    margin-bottom: 0.5rem;
 }
 
 .p-fileupload-file:last-child {
-    margin-bottom: 0;
+    border-bottom: 0;
+}
+
+.p-fileupload-file-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 } 
 
 .p-fileupload-file-thumbnail {
@@ -73,18 +72,6 @@ export default {
     background: ${dt('fileupload.content.highlight.background')};
 }
 
-.p-fileupload-file-name {
-    margin-bottom: 0.5rem;
-}
-
-.p-fileupload-file-size {
-    margin-right: 0.5rem;
-}
-
-.p-fileupload-row > div {
-    padding: 0.75rem 1rem;
-}
-
 .p-fileupload-advanced .p-message {
     margin-top: 0;
 }

components/lib/themes/primeone/presets/aura/fileupload/index.js

@@ -1,37 +1,31 @@
 export default {
     colorScheme: {
         light: {
-            header: {
+            root: {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
                 color: '{surface.700}'
             },
             content: {
-                background: '{surface.0}',
                 highlightBackground: '{highlight.background}',
-                borderColor: '{surface.200}',
                 highlightBorderColor: '{highlight.color}',
-                color: '{surface.700}'
             },
             file: {
                 borderColor: '{surface.200}'
             }
         },
         dark: {
-            header: {
+            root: {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
                 color: '{surface.0}'
             },
             content: {
-                background: '{surface.900}',
                 highlightBackground: '{highlight.background}',
-                borderColor: '{surface.700}',
+                highlightBorderColor: '{highlight.color}'
-                highlightBorderColor: '{highlight.color}',
-                color: '{surface.0}'
             },
             file: {
-                borderColor: '{surface.200}'
+                borderColor: '{surface.700}'
             }
         }
     }

doc/fileupload/AdvancedDoc.vue

@@ -5,7 +5,7 @@
     <div class="card">
         <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
             <template #empty>
-                <p>Drag and drop files to here to upload.</p>
+                <span>Drag and drop files to here to upload.</span>
             </template>
         </FileUpload>
     </div>
@@ -20,7 +20,7 @@ export default {
                 basic: `
 <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
     <template #empty>
-        <p>Drag and drop files to here to upload.</p>
+        <span>Drag and drop files to here to upload.</span>
     </template>
 </FileUpload>
 `,
@@ -30,7 +30,7 @@ export default {
         <Toast />
         <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
             <template #empty>
-                <p>Drag and drop files to here to upload.</p>
+                <span>Drag and drop files to here to upload.</span>
             </template>
         </FileUpload>
     </div>
@@ -52,7 +52,7 @@ export default {
         <Toast />
         <FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
             <template #empty>
-                <p>Drag and drop files to here to upload.</p>
+                <span>Drag and drop files to here to upload.</span>
             </template>
         </FileUpload>
     </div>