diff --git a/components/lib/fileupload/style/FileUploadStyle.js b/components/lib/fileupload/style/FileUploadStyle.js
index 25c62d87c..27fa46e3d 100644
--- a/components/lib/fileupload/style/FileUploadStyle.js
+++ b/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',
- chooseButton: ({ instance, props }) => [
- 'p-fileupload-choose',
- {
- 'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
- 'p-focus': instance.focused
- }
- ],
- chooseIcon: 'p-fileupload-choose-icon',
- chooseButtonLabel: 'p-fileupload-choosebutton-label',
+ buttonbar: 'p-fileupload-header',
+ chooseButton: 'p-fileupload-choose-button', // TODO: Also add upload and clear
+ chooseIcon: 'p-fileupload-choose-icon', // TODO: remove
+ chooseButtonLabel: 'p-fileupload-choosebutton-label', // TODO: remove
content: 'p-fileupload-content',
- empty: 'p-fileupload-empty',
- uploadIcon: 'p-fileupload-upload-icon',
- label: 'p-fileupload-button-label',
+ emptyContent: 'p-fileupload-empty-content', // TODO: remove
+ uploadIcon: 'p-fileupload-upload-icon', // TODO: remove
+ 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({
diff --git a/components/lib/themes/primeone/base/fileupload/index.js b/components/lib/themes/primeone/base/fileupload/index.js
index 69ab38ef9..f9a2ec146 100644
--- a/components/lib/themes/primeone/base/fileupload/index.js
+++ b/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 {
- width: auto;
+.p-fileupload-advanced {
+ 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,21 +33,32 @@ 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-radius: ${dt('rounded.base')};
+ border-bottom: 1px solid ${dt('fileupload.file.border.color')};
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 {
flex-shrink: 0;
}
@@ -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;
}
diff --git a/components/lib/themes/primeone/presets/aura/fileupload/index.js b/components/lib/themes/primeone/presets/aura/fileupload/index.js
index 57855eb85..9c5d1c3d4 100644
--- a/components/lib/themes/primeone/presets/aura/fileupload/index.js
+++ b/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}',
- color: '{surface.0}'
+ highlightBorderColor: '{highlight.color}'
},
file: {
- borderColor: '{surface.200}'
+ borderColor: '{surface.700}'
}
}
}
diff --git a/doc/fileupload/AdvancedDoc.vue b/doc/fileupload/AdvancedDoc.vue
index 0463ab9ee..1b34d8389 100644
--- a/doc/fileupload/AdvancedDoc.vue
+++ b/doc/fileupload/AdvancedDoc.vue
@@ -5,7 +5,7 @@
- Drag and drop files to here to upload.
+ Drag and drop files to here to upload.
@@ -20,7 +20,7 @@ export default {
basic: `
- Drag and drop files to here to upload.
+ Drag and drop files to here to upload.
`,
@@ -30,7 +30,7 @@ export default {
- Drag and drop files to here to upload.
+ Drag and drop files to here to upload.
@@ -52,7 +52,7 @@ export default {