HtmlEditor: fix dialogs' design issues

packages/devextreme/js/ui/html_editor/ui/formDialog.js

@@ -7,11 +7,33 @@ import { Deferred } from '../../../core/utils/deferred';
 import localizationMessage from '../../../localization/message';
 import { getCurrentScreenFactor, hasWindow } from '../../../core/utils/window';
 import devices from '../../../core/devices';
-import { isMaterialBased } from '../../themes';
+import { isFluent, isMaterialBased } from '../../themes';
 
 const DIALOG_CLASS = 'dx-formdialog';
 const FORM_CLASS = 'dx-formdialog-form';
 
+const getApplyButtonConfig = () => {
+    if(isFluent()) {
+        return {
+            stylingMode: 'contained',
+            type: 'default',
+        };
+    }
+
+    return {};
+};
+
+const getCancelButtonConfig = () => {
+    if(isFluent()) {
+        return {
+            stylingMode: 'outlined',
+            type: 'normal',
+        };
+    }
+
+    return {};
+};
+
 class FormDialog {
     constructor(editorInstance, popupConfig) {
         this._editorInstance = editorInstance;
@@ -92,7 +114,8 @@ class FormDialog {
                     options: {
                         onInitialized: this._addEscapeHandler.bind(this),
                         text: localizationMessage.format('OK'),
-                        onClick: (e) => this.callAddButtonAction(e.event)
+                        onClick: (e) => this.callAddButtonAction(e.event),
+                        ...getApplyButtonConfig(),
                     }
                 }, {
                     toolbar: 'bottom',
@@ -103,7 +126,8 @@ class FormDialog {
                         text: localizationMessage.format('Cancel'),
                         onClick: () => {
                             this._popup.hide();
-                        }
+                        },
+                        ...getCancelButtonConfig(),
                     }
                 }
             ],

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

@@ -238,15 +238,21 @@
     padding-inline-start: 0;
   }
 
+  .dx-tabs {
+    padding: 0 $fluent-html-editor-add-image-dialog-tabs-padding;
+  }
+
   .dx-fileuploader-input-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     padding: $fluent-html-editor-add-image-dialog-fileuploader-padding;
-    border: 1px dashed $htmleditor-fileuploader-input-wrapper-border-color;
-    background-color: $htmleditor-fileuploader-input-wrapper-bg-color;
+    border-width: $fluent-html-editor-fileuploader-input-wrapper-border-size;
+    border-style: dashed;
+    border-color: $htmleditor-fileuploader-input-wrapper-border-color;
     border-radius: $fluent-html-editor-fileuploader-input-wrapper-border-radius;
+    background-color: $htmleditor-fileuploader-input-wrapper-bg-color;
 
     &::after,
     &::before {
@@ -273,6 +279,10 @@
   }
 }
 
+.dx-formdialog-field-target .dx-field-item-content {
+  text-align: start;
+}
+
 .dx-mention {
   background-color: $htmleditor-mention-bg;
 }

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

@@ -9,19 +9,23 @@ $fluent-html-editor-horizontal-padding: null !default;
 $fluent-html-editor-add-image-dialog-fileuploader-padding: null !default;
 $fluent-html-editor-toolbar-menu-separator-margin: 4px !default;
 $fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default;
+$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default;
+$fluent-html-editor-add-image-dialog-tabs-padding: null !default;
 
 @if $size == "default" {
   $fluent-toolbar-size-editor-width: 120px !default;
   $fluent-html-editor-vertical-padding: 16px !default;
   $fluent-html-editor-horizontal-padding: 16px !default;
   $fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px;
+  $fluent-html-editor-add-image-dialog-tabs-padding: 14px !default;
 }
 
 @else if $size == "compact" {
   $fluent-toolbar-size-editor-width: 90px !default;
   $fluent-html-editor-vertical-padding: 12px !default;
   $fluent-html-editor-horizontal-padding: 12px !default;
   $fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px;
+  $fluent-html-editor-add-image-dialog-tabs-padding: 8px !default;
 }
 
 $fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !default;

packages/devextreme/testing/testcafe/tests/htmlEditor/dialogs/addImage/common.ts

@@ -18,7 +18,10 @@ test('TabPanel in HtmlEditor must have correct borders', async (t) => {
 
   await t.click(htmlEditor.toolbar.getItemByName('image'));
 
-  await testScreenshot(t, takeScreenshot, 'tabpanel-in-htmleditor.png', { element: ADD_IMAGE_POPUP_CONTENT_SELECTOR });
+  await testScreenshot(t, takeScreenshot, 'tabpanel-in-htmleditor.png', {
+    element: ADD_IMAGE_POPUP_CONTENT_SELECTOR,
+    shouldTestInCompact: true,
+  });
 
   await t
     .expect(compareResults.isValid())