Fluent: DataGrid - Change button style (#25626)

DevExpress · Sep 20, 2023 · 0d68746 · 0d68746
1 parent 5ea4401
commit 0d68746
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts
@@ -23,6 +23,7 @@ import pointerEvents from '@js/events/pointer';
 import { addNamespace } from '@js/events/utils/index';
 import messageLocalization from '@js/localization/message';
 import { confirm } from '@js/ui/dialog';
+import { current, isFluent } from '@js/ui/themes';
 
 import modules from '../m_modules';
 import { Controllers, Views } from '../m_types';
@@ -1195,17 +1196,30 @@ class EditingControllerImpl extends modules.ViewController {
   _getPopupEditFormTemplate(rowIndex): any {}
 
   _getSaveButtonConfig() {
-    return {
+    const buttonConfig: any = {
       text: this.option('editing.texts.saveRowChanges'),
       onClick: this.saveEditData.bind(this),
     };
+
+    if (isFluent(current())) {
+      buttonConfig.stylingMode = 'contained';
+      buttonConfig.type = 'default';
+    }
+
+    return buttonConfig;
   }
 
   _getCancelButtonConfig() {
-    return {
+    const buttonConfig: any = {
       text: this.option('editing.texts.cancelRowChanges'),
       onClick: this.cancelEditData.bind(this),
     };
+
+    if (isFluent(current())) {
+      buttonConfig.stylingMode = 'outlined';
+    }
+
+    return buttonConfig;
   }
 
   _removeInternalData(key) {

diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_index.scss
@@ -791,7 +791,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
     }
 
     .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon {
-      border-radius: 50%;
+      border-radius: $fluent-base-border-radius;
     }
 
     .dx-#{$widget-name}-toolbar-button {
@@ -1206,19 +1206,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
     }
   }
 
-  .dx-#{$widget-name}-form-buttons-container {
-    .dx-button {
-      @include dx-button-flat-color-styling(
-        $button-default-text-color,
-        $button-default-text-color-hover,
-        $button-default-text-color-active,
-        $button-default-text-hover-bg,
-        $button-default-text-focused-bg,
-        $button-default-text-active-bg
-      );
-    }
-  }
-
   .dx-command-adaptive {
     width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size;
     min-width: 2 * $fluent-grid-base-cell-horizontal-padding + $fluent-base-icon-size;