FileUploader: Update styles for loaded files

packages/devextreme/js/ui/file_uploader.js

@@ -17,7 +17,7 @@ import devices from '../core/devices';
 import { addNamespace, isTouchEvent } from '../events/utils/index';
 import { name as clickEventName } from '../events/click';
 import messageLocalization from '../localization/message';
-import { isMaterial } from './themes';
+import { isFluent, isMaterial } from './themes';
 import domAdapter from '../core/dom_adapter';
 
 // STYLE fileUploader
@@ -194,7 +194,8 @@ class FileUploader extends Editor {
             useNativeInputClick: false,
             useDragOver: true,
             nativeDropSupported: true,
-            _uploadButtonType: 'normal'
+            _uploadButtonType: 'normal',
+            _buttonStylingMode: 'contained',
         });
     }
 
@@ -239,6 +240,12 @@ class FileUploader extends Editor {
                 options: {
                     _uploadButtonType: 'default'
                 }
+            },
+            {
+                device: () => isFluent(),
+                options: {
+                    _buttonStylingMode: 'text'
+                }
             }
         ]);
     }
@@ -653,15 +660,23 @@ class FileUploader extends Editor {
             return null;
         }
 
+        const {
+            allowCanceling,
+            readOnly,
+            hoverStateEnabled,
+            _buttonStylingMode,
+        } = this.option();
+
         file.cancelButton = this._createComponent(
             $('<div>').addClass(FILEUPLOADER_BUTTON_CLASS + ' ' + FILEUPLOADER_CANCEL_BUTTON_CLASS),
             Button, {
                 onClick: () => this._removeFile(file),
                 icon: 'close',
-                visible: this.option('allowCanceling'),
-                disabled: this.option('readOnly'),
+                visible: allowCanceling,
+                disabled: readOnly,
                 integrationOptions: {},
-                hoverStateEnabled: this.option('hoverStateEnabled')
+                hoverStateEnabled: hoverStateEnabled,
+                stylingMode: _buttonStylingMode,
             }
         );
 
@@ -675,13 +690,16 @@ class FileUploader extends Editor {
             return null;
         }
 
+        const { hoverStateEnabled, _buttonStylingMode } = this.option();
+
         file.uploadButton = this._createComponent(
             $('<div>').addClass(FILEUPLOADER_BUTTON_CLASS + ' ' + FILEUPLOADER_UPLOAD_BUTTON_CLASS),
             Button,
             {
                 onClick: () => this._uploadFile(file),
                 icon: 'upload',
-                hoverStateEnabled: this.option('hoverStateEnabled')
+                hoverStateEnabled: hoverStateEnabled,
+                stylingMode: _buttonStylingMode,
             }
         );
 
@@ -1340,6 +1358,12 @@ class FileUploader extends Editor {
             case '_uploadButtonType':
                 this._uploadButton && this._uploadButton.option('type', value);
                 break;
+            case '_buttonStylingMode':
+                this._files.forEach(file => {
+                    file.uploadButton?.option('stylingMode', value);
+                    file.cancelButton?.option('stylingMode', value);
+                });
+                break;
             case 'dialogTrigger':
                 this._detachSelectFileDialogHandler(previousValue);
                 this._attachSelectFileDialogHandler(value);

packages/devextreme/scss/widgets/fluent/fileUploader/_index.scss

@@ -84,7 +84,7 @@ $fluent-fileuploader-file-wrapper-border-size: 3px;
 
 .dx-fileuploader-files-container {
   .dx-fileuploader-show-file-list & {
-    padding: 14px 3px 0;
+    padding: $fluent-fileuploader-files-container-padding;
   }
 
   .dx-fileuploader-empty & {
@@ -103,6 +103,7 @@ $fluent-fileuploader-file-wrapper-border-size: 3px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
     padding: $fluent-fileuploader-file-container-padding;
     margin-bottom: 4px;
+    border-radius: $fluent-fileuploader-files-container-rounding;
 
     .dx-fileuploader-button-container + .dx-fileuploader-button-container {
       .dx-button {
@@ -140,7 +141,9 @@ $fluent-fileuploader-file-wrapper-border-size: 3px;
 }
 
 .dx-fileuploader-file-size {
-  padding-bottom: math.div($fluent-fileuploader-vertical-padding, 2);
+  float: right;
+  margin: $fluent-fileuploader-file-size-margin;
+  color: $base-label-color;
 }
 
 .dx-fileuploader-invalid {

packages/devextreme/scss/widgets/fluent/fileUploader/_sizes.scss

@@ -8,17 +8,24 @@ $fluent-fileuploader-file-container-button-margin: null !default;
 $fluent-fileuploader-file-container-button-size: null !default;
 
 $fluent-fileuploader-vertical-padding: 7px !default;
+$fluent-fileuploader-files-container-padding: null !default;
+$fluent-fileuploader-file-size-margin: null !default;
+$fluent-fileuploader-files-container-rounding: 4px !default;
 
 @if $size == "default" {
   $fluent-fileuploader-file-container-padding: 5px 8px !default;
   $fluent-fileuploader-file-container-text-margin: 15px !default;
-  $fluent-fileuploader-file-container-button-margin: 5px !default;
-  $fluent-fileuploader-file-container-button-size: 36px !default;
+  $fluent-fileuploader-file-container-button-margin: 8px !default;
+  $fluent-fileuploader-file-container-button-size: 32px !default;
+  $fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
+  $fluent-fileuploader-file-size-margin: 0 8px 0 4px !default;
 }
 
 @else if $size == "compact" {
   $fluent-fileuploader-file-container-padding: 2px 4px !default;
   $fluent-fileuploader-file-container-text-margin: 6px !default;
   $fluent-fileuploader-file-container-button-margin: 2px !default;
   $fluent-fileuploader-file-container-button-size: 28px !default;
+  $fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
+  $fluent-fileuploader-file-size-margin: 0 8px 4px !default;
 }