DropDownButton: type option should be passed to buttons of nested but…

…tonGroup (#25646)

packages/devextreme/js/ui/drop_down_button.js

@@ -70,6 +70,8 @@ const DropDownButton = Widget.inherit({
 
             text: '',
 
+            type: 'normal',
+
             icon: undefined,
 
             onButtonClick: null,
@@ -245,19 +247,25 @@ const DropDownButton = Widget.inherit({
     },
 
     _actionButtonConfig() {
+        const { icon, text, type } = this.option();
+
         return {
-            text: this.option('text'),
-            icon: this.option('icon'),
+            text,
+            icon,
+            type,
             elementAttr: { class: DROP_DOWN_BUTTON_ACTION_CLASS }
         };
     },
 
     _getButtonGroupItems() {
+        const { splitButton, type } = this.option();
+
         const items = [];
         items.push(this._actionButtonConfig());
-        if(this.option('splitButton')) {
+        if(splitButton) {
             items.push({
                 icon: 'spindown',
+                type,
                 elementAttr: { class: DROP_DOWN_BUTTON_TOGGLE_CLASS }
             });
         }
@@ -712,6 +720,9 @@ const DropDownButton = Widget.inherit({
             case 'stylingMode':
                 this._updateButtonGroup(name, value);
                 break;
+            case 'type':
+                this._updateButtonGroup('items', this._getButtonGroupItems());
+                break;
             case 'itemTemplate':
             case 'grouped':
             case 'noDataText':

packages/devextreme/testing/testcafe/tests/editors/dropDownButton/common.ts

@@ -15,6 +15,7 @@ const DROP_DOWN_BUTTON_CLASS = 'dx-dropdownbutton';
 const BUTTON_GROUP_CLASS = 'dx-buttongroup';
 
 const stylingModes = ['text', 'outlined', 'contained'];
+const types = ['normal', 'default', 'danger', 'success'];
 
 fixture.disablePageReloads`Drop Down Button`
   .page(url(__dirname, '../../container.html'));
@@ -58,56 +59,63 @@ test('Item collection should be updated after direct option changing (T817436)',
 });
 
 [undefined, 120].forEach((width) => {
-  test('DropDownButton renders correctly', async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-    await insertStylesheetRulesToPage(`.${DROP_DOWN_BUTTON_CLASS}.dx-widget { display: inline-flex; vertical-align: middle; margin: 2px; } .${BUTTON_GROUP_CLASS} { vertical-align: middle; }`);
-
-    await testScreenshot(t, takeScreenshot, `DropDownButton render${width ? ' with fixed width' : ''}.png`, {
-      shouldTestInCompact: true,
-    });
+  types.forEach((type) => {
+    if (width && type !== 'normal') {
+      return;
+    }
 
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  }).before(async (t) => {
-    t.ctx.ids = [];
-
-    for (const rtlEnabled of [false, true]) {
-      for (const stylingMode of stylingModes) {
-        await appendElementTo('#container', 'div', `${stylingMode}-${rtlEnabled}`, { fontSize: '10px' });
-        await ClientFunction(() => {
-          $(`#${stylingMode}-${rtlEnabled}`).text(`StylingMode: ${stylingMode}, rtlEnabled: ${rtlEnabled}`);
-        }, {
-          dependencies: {
-            stylingMode, rtlEnabled,
-          },
-        })();
-
-        for (const splitButton of [true, false]) {
-          for (const showArrowIcon of [true, false]) {
-            for (const icon of ['image', '']) {
-              for (const text of ['', 'Text']) {
-                const id = `${`dx${new Guid()}`}`;
-
-                t.ctx.ids.push(id);
-                await appendElementTo('#container', 'div', id, { });
-                await createWidget('dxDropDownButton', {
-                  width,
-                  rtlEnabled,
-                  items: [{ text: 'text1' }, { text: 'text2' }],
-                  displayExpr: 'text',
-                  text,
-                  icon,
-                  stylingMode,
-                  showArrowIcon,
-                  splitButton,
-                }, `#${id}`);
+    test('DropDownButton renders correctly', async (t) => {
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+      await insertStylesheetRulesToPage(`.${DROP_DOWN_BUTTON_CLASS}.dx-widget { display: inline-flex; vertical-align: middle; margin: 2px; } .${BUTTON_GROUP_CLASS} { vertical-align: middle; }`);
+
+      await testScreenshot(t, takeScreenshot, `DropDownButton render${width ? ' with fixed width' : ''}${type !== 'normal' ? `, type=${type}` : ''}.png`, {
+        shouldTestInCompact: true,
+      });
+
+      await t
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async (t) => {
+      t.ctx.ids = [];
+
+      for (const rtlEnabled of [false, true]) {
+        for (const stylingMode of stylingModes) {
+          await appendElementTo('#container', 'div', `${stylingMode}-${rtlEnabled}`, { fontSize: '10px' });
+          await ClientFunction(() => {
+            $(`#${stylingMode}-${rtlEnabled}`).text(`StylingMode: ${stylingMode}, rtlEnabled: ${rtlEnabled}`);
+          }, {
+            dependencies: {
+              stylingMode, rtlEnabled,
+            },
+          })();
+
+          for (const splitButton of [true, false]) {
+            for (const showArrowIcon of [true, false]) {
+              for (const icon of ['image', '']) {
+                for (const text of ['', 'Text']) {
+                  const id = `${`dx${new Guid()}`}`;
+
+                  t.ctx.ids.push(id);
+                  await appendElementTo('#container', 'div', id, { });
+                  await createWidget('dxDropDownButton', {
+                    width,
+                    rtlEnabled,
+                    items: [{ text: 'text1' }, { text: 'text2' }],
+                    displayExpr: 'text',
+                    type,
+                    text,
+                    icon,
+                    stylingMode,
+                    showArrowIcon,
+                    splitButton,
+                  }, `#${id}`);
+                }
               }
             }
           }
         }
       }
-    }
+    });
   });
 });

packages/devextreme/testing/tests/DevExpress.ui.widgets/dropDownButton.tests.js

@@ -91,6 +91,58 @@ QUnit.module('button group integration', {}, () => {
         const buttonGroup = getButtonGroup(dropDownButton);
         assert.strictEqual(buttonGroup.option('accessKey'), accessKey, 'accessKey is passed to buttonGroup');
     });
+
+    ['normal', 'default', 'danger', 'success'].forEach((type) => {
+        QUnit.test(`type '${type}' should be passed to action button of buttonGroup if splitbutton is false`, function(assert) {
+            const dropDownButton = $('#dropDownButton').dxDropDownButton({
+                type,
+                splitButton: false
+            }).dxDropDownButton('instance');
+
+            const actionButton = getActionButton(dropDownButton).dxButton('instance');
+
+            assert.strictEqual(actionButton.option('type'), type, `action button has ${type} type`);
+        });
+
+        QUnit.test(`type '${type}' should be passed to action and toggle buttons of buttonGroup if splitbutton is true`, function(assert) {
+            const dropDownButton = $('#dropDownButton').dxDropDownButton({
+                type,
+                splitButton: true
+            }).dxDropDownButton('instance');
+
+            const actionButton = getActionButton(dropDownButton).dxButton('instance');
+            const toggleButton = getToggleButton(dropDownButton).dxButton('instance');
+
+            assert.strictEqual(actionButton.option('type'), type, `action button has ${type} type`);
+            assert.strictEqual(toggleButton.option('type'), type, `toggle button has ${type} type`);
+        });
+
+        QUnit.test(`type '${type}' should be passed to action button of buttonGroup if splitbutton is false after change in runtime`, function(assert) {
+            const dropDownButton = $('#dropDownButton').dxDropDownButton({
+                splitButton: false
+            }).dxDropDownButton('instance');
+
+            dropDownButton.option('type', type);
+
+            const actionButton = getActionButton(dropDownButton).dxButton('instance');
+
+            assert.strictEqual(actionButton.option('type'), type, `action button has ${type} type`);
+        });
+
+        QUnit.test(`type '${type}' should be passed to action and toggle buttons of buttonGroup if splitbutton is true after change in runtime`, function(assert) {
+            const dropDownButton = $('#dropDownButton').dxDropDownButton({
+                splitButton: true
+            }).dxDropDownButton('instance');
+
+            dropDownButton.option('type', type);
+
+            const actionButton = getActionButton(dropDownButton).dxButton('instance');
+            const toggleButton = getToggleButton(dropDownButton).dxButton('instance');
+
+            assert.strictEqual(actionButton.option('type'), type, `action button has ${type} type`);
+            assert.strictEqual(toggleButton.option('type'), type, `toggle button has ${type} type`);
+        });
+    });
 });
 
 QUnit.module('popup integration', {

packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js

@@ -410,6 +410,7 @@ testComponentDefaults(DropDownButton, {}, {
     dataSource: null,
     deferRendering: true,
     text: '',
+    type: 'normal',
     keyExpr: 'this',
     displayExpr: undefined,
     useSelectMode: false,