HtmlEditor: change type of "lock" button in image uploader form (#25903)

packages/devextreme/js/ui/html_editor/utils/image_uploader_helper.js

@@ -5,6 +5,7 @@ import { extend } from '../../../core/utils/extend';
 import { getHeight, getWidth } from '../../../core/utils/size';
 import devices from '../../../core/devices';
 import { isDefined } from '../../../core/utils/type';
+import { isFluent } from '../../themes';
 const isMobile = devices.current().deviceType === 'phone';
 
 const DIALOG_IMAGE_CAPTION = 'dxHtmlEditor-dialogImageCaption';
@@ -318,6 +319,8 @@ class AddUrlStrategy extends BaseStrategy {
     }
 
     getItemsConfig() {
+        const stylingMode = isFluent() ? 'text' : 'outlined';
+
         return [
             { dataField: 'src', colSpan: 11, label: { text: localizationMessage.format(DIALOG_IMAGE_FIELD_URL) },
                 validationRules: [{ type: 'required' }, { type: 'stringLength', min: 1 }],
@@ -338,7 +341,7 @@ class AddUrlStrategy extends BaseStrategy {
                     hint: localizationMessage.format(DIALOG_IMAGE_KEEP_ASPECT_RATIO),
                     focusStateEnabled: false,
                     keyExpr: 'value',
-                    stylingMode: 'outlined',
+                    stylingMode,
                     selectionMode: 'multiple',
                     selectedItemKeys: ['keepRatio'],
                     onSelectionChanged: (e) => {

packages/devextreme/testing/testcafe/model/htmlEditor/dialog/addImageUrlForm.ts

@@ -1,5 +1,12 @@
+import { Selector } from 'testcafe';
 import Form from '../../form/form';
 import TextBox from '../../textBox';
+import Button from '../../button';
+
+const CLASS = {
+  buttonGroup: 'dx-buttongroup',
+  button: 'dx-button',
+};
 
 export default class AddImageUrlForm extends Form {
   public get url(): TextBox {
@@ -13,4 +20,8 @@ export default class AddImageUrlForm extends Form {
   public get height(): TextBox {
     return this.findTextBox('height');
   }
+
+  public get lockButton(): Button {
+    return new Button(Selector(this.element.find(`.${CLASS.buttonGroup}`).find(`.${CLASS.button}`)));
+  }
 }

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

@@ -8,6 +8,31 @@ import { isMaterial, testScreenshot } from '../../../../helpers/themeUtils';
 fixture.disablePageReloads`HtmlEditor - add image url`
   .page(url(__dirname, '../../../containerQuill.html'));
 
+const ADD_IMAGE_POPUP_CONTENT_SELECTOR = '.dx-htmleditor-add-image-popup .dx-overlay-content';
+
+test('Image uploader from url appearance', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const htmlEditor = new HtmlEditor('#container');
+
+  await t
+    .click(htmlEditor.toolbar.getItemByName('image'));
+
+  await t
+    .click(htmlEditor.dialog.addImageUrlForm.lockButton.element);
+
+  await t
+    .click(htmlEditor.dialog.addImageUrlForm.url.element);
+
+  await testScreenshot(t, takeScreenshot, 'Image uploader from url appearance.png', { element: ADD_IMAGE_POPUP_CONTENT_SELECTOR });
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxHtmlEditor', {
+  height: 600,
+  width: 800,
+  toolbar: { items: ['image'] },
+}));
+
 test('Image url should be validate before wil be inserted by add button click', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const htmlEditor = new HtmlEditor('#container');