🎨 Fluent: Redesign Field Chooser (#25760)

packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/const.ts

@@ -44,9 +44,15 @@ export const CLASSES = {
 } as const;
 
 export const ICONS = {
-  measure: 'measure',
+  all: 'smalliconslayout',
+  column: 'columnfield',
+  row: 'rowfield',
+  filter: 'filter',
+  data: 'formula',
+
+  measure: 'formula',
   hierarchy: 'hierarchy',
-  dimension: 'dimension',
+  dimension: 'detailslayout',
 } as const;
 
 export const SORTABLE_CONST = {

packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts

@@ -556,7 +556,7 @@ const FieldChooser = FieldChooserBase.inherit({
     let render;
 
     $('<span>').addClass(CLASSES.area.icon)
-      .addClass(`dx-area-icon-${area}`)
+      .addClass(`dx-icon-${ICONS[area]}`)
       .appendTo($fieldsHeaderContainer);
 
     $('<span>')

packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts

@@ -16,8 +16,10 @@ import { name as clickEventName } from '@js/events/click';
 import eventsEngine from '@js/events/core/events_engine';
 import { addNamespace } from '@js/events/utils/index';
 import localizationMessage from '@js/localization/message';
+import Button, { Properties } from '@js/ui/button';
 import ContextMenu from '@js/ui/context_menu';
 import Popup from '@js/ui/popup/ui.popup';
+import { current, isFluent } from '@js/ui/themes';
 import Widget from '@js/ui/widget/ui.widget';
 import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 
@@ -878,35 +880,38 @@ const PivotGrid = (Widget as any).inherit({
     this.$element().find('.dx-pivotgrid-toolbar').remove();
 
     $toolbarContainer.prependTo($targetContainer);
+    const stylingMode = isFluent(current()) ? 'text' : 'contained';
 
     if (this.option('fieldChooser.enabled')) {
       const $buttonElement = $(DIV)
         .appendTo($toolbarContainer)
         .addClass('dx-pivotgrid-field-chooser-button');
-      const buttonOptions = {
+      const buttonOptions: Properties = {
         icon: 'columnchooser',
         hint: this.option('texts.showFieldChooser'),
+        stylingMode,
         onClick: () => {
           this.getFieldChooserPopup().show();
         },
       };
 
-      this._createComponent($buttonElement, 'dxButton', buttonOptions);
+      this._createComponent($buttonElement, Button, buttonOptions);
     }
 
     if (this.option('export.enabled')) {
       const $buttonElement = $(DIV)
         .appendTo($toolbarContainer)
         .addClass('dx-pivotgrid-export-button');
-      const buttonOptions = {
+      const buttonOptions: Properties = {
         icon: 'xlsxfile',
         hint: this.option('texts.exportToExcel'),
+        stylingMode,
         onClick: () => {
           this.exportTo();
         },
       };
 
-      this._createComponent($buttonElement, 'dxButton', buttonOptions);
+      this._createComponent($buttonElement, Button, buttonOptions);
     }
   },
 

packages/devextreme/scss/widgets/base/pivotGrid/_common.scss

@@ -223,12 +223,6 @@
       flex-grow: 1;
     }
   }
-
-  // stylelint-enable no-duplicate-selectors
-
-  .dx-area-caption {
-    vertical-align: middle;
-  }
 }
 
 .dx-pivotgrid-action {

packages/devextreme/scss/widgets/base/pivotGrid/_index.scss

@@ -16,13 +16,6 @@ $pivotgrid-field-area-text-color: null !default;
 $pivotgrid-data-area-color: null !default;
 $pivotgrid-grandtotalcolor: null !default;
 $pivotgrid-accent-color: null !default;
-$pivotgrid-area-all-image: null !default;
-$pivotgrid-area-filter-image: null !default;
-$pivotgrid-area-row-image: null !default;
-$pivotgrid-area-column-image: null !default;
-$pivotgrid-area-data-image: null !default;
-$pivotgrid-dimension-image: null !default;
-$pivotgrid-hierarchy-image: null !default;
 $pivotgrid-empty-area-text-padding: null !default;
 $pivotgrid-button-top-padding: null !default;
 
@@ -480,9 +473,6 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-treeview-item .dx-icon {
     vertical-align: middle;
-    margin: 0 5px 1px 0;
-
-    @include dx-icon-sizing(16px);
   }
 
   .dx-treeview-search {
@@ -492,8 +482,6 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-area-icon {
     display: inline-block;
     vertical-align: middle;
-    width: 16px;
-    height: 16px;
   }
 
   .dx-area {
@@ -526,42 +514,6 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-area-fields.dx-drag-target {
     border-color: $pivotgrid-accent-color;
   }
-
-  .dx-area-icon-all {
-    background: $pivotgrid-area-all-image no-repeat center center;
-  }
-
-  .dx-area-icon-filter {
-    background: $pivotgrid-area-filter-image no-repeat center center;
-  }
-
-  .dx-area-icon-row {
-    background: $pivotgrid-area-row-image no-repeat center center;
-  }
-
-  .dx-area-icon-column {
-    background: $pivotgrid-area-column-image no-repeat center center;
-  }
-
-  .dx-area-icon-data {
-    background: $pivotgrid-area-data-image no-repeat center center;
-  }
-
-  .dx-icon-measure {
-    background: $pivotgrid-area-data-image no-repeat center center;
-  }
-
-  .dx-icon-dimension {
-    background: $pivotgrid-dimension-image no-repeat center center;
-  }
-
-  .dx-icon-hierarchy {
-    background: $pivotgrid-hierarchy-image no-repeat center center;
-
-    &::before {
-      content: none;
-    }
-  }
 }
 
 

packages/devextreme/scss/widgets/fluent/pivotGrid/_colors.scss

@@ -21,7 +21,7 @@ $pivotgrid-data-area-color: $base-text-color !default;
 * $name 20. Totals background color
 * $type color
 */
-$pivotgrid-totalcolor: color.change(darken($pivotgrid-area-background, 13.3%), $alpha: 0.2) !default;
+$pivotgrid-totalcolor: $base-neutral-background1 !default;
 
 /**
 * $name 30. Grand totals background color
@@ -38,32 +38,5 @@ $pivotgrid-accent-color: $base-accent !default;
 $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
 $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
 $pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
-$pivotgrid-area-all-image: null !default;
-$pivotgrid-area-filter-image: null !default;
-$pivotgrid-area-column-image: null !default;
-$pivotgrid-area-row-image: null !default;
-$pivotgrid-area-data-image: null !default;
-$pivotgrid-dimension-image: null !default;
-$pivotgrid-hierarchy-image: null !default;
 $pivotgrid-position-indicator-color: gray !default;
 $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default;
-
-@if $mode == "light" {
-  $pivotgrid-area-all-image: data-uri('images/widgets/fluent/color-schemes/light/grid/area-all.png') !default;
-  $pivotgrid-area-filter-image: data-uri('images/widgets/fluent/color-schemes/light/grid/area-filter.png') !default;
-  $pivotgrid-area-column-image: data-uri('images/widgets/fluent/color-schemes/light/grid/area-column.png') !default;
-  $pivotgrid-area-row-image: data-uri('images/widgets/fluent/color-schemes/light/grid/area-row.png') !default;
-  $pivotgrid-area-data-image: data-uri('images/widgets/fluent/color-schemes/light/grid/area-data.png') !default;
-  $pivotgrid-dimension-image: data-uri('images/widgets/fluent/color-schemes/light/grid/dimension.png') !default;
-  $pivotgrid-hierarchy-image: data-uri('images/widgets/fluent/color-schemes/light/grid/hierarchy.png') !default;
-}
-
-@if $mode == "dark" {
-  $pivotgrid-area-all-image: data-uri('images/widgets/fluent/color-schemes/dark/grid/area-all.png') !default;
-  $pivotgrid-area-filter-image: data-uri('images/widgets/fluent/color-schemes/dark/grid/area-filter.png') !default;
-  $pivotgrid-area-column-image: data-uri('images/widgets/fluent/color-schemes/dark/grid/area-column.png') !default;
-  $pivotgrid-area-row-image: data-uri('images/widgets/fluent/color-schemes/dark/grid/area-row.png') !default;
-  $pivotgrid-area-data-image: data-uri('images/widgets/fluent/color-schemes/dark/grid/area-data.png') !default;
-  $pivotgrid-dimension-image: data-uri('images/widgets/fluent/color-schemes/dark/grid/dimension.png') !default;
-  $pivotgrid-hierarchy-image: data-uri('images/widgets/fluent/color-schemes/dark/grid/hierarchy.png') !default;
-}

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

@@ -28,13 +28,6 @@
   $pivotgrid-data-area-color: $pivotgrid-data-area-color,
   $pivotgrid-grandtotalcolor: $pivotgrid-grandtotalcolor,
   $pivotgrid-accent-color: $pivotgrid-accent-color,
-  $pivotgrid-area-all-image: $pivotgrid-area-all-image,
-  $pivotgrid-area-filter-image: $pivotgrid-area-filter-image,
-  $pivotgrid-area-row-image: $pivotgrid-area-row-image,
-  $pivotgrid-area-column-image: $pivotgrid-area-column-image,
-  $pivotgrid-area-data-image: $pivotgrid-area-data-image,
-  $pivotgrid-dimension-image: $pivotgrid-dimension-image,
-  $pivotgrid-hierarchy-image: $pivotgrid-hierarchy-image,
   $pivotgrid-empty-area-text-padding: $pivotgrid-empty-area-text-padding,
   $pivotgrid-button-top-padding: $pivotgrid-button-top-padding,
 );
@@ -76,16 +69,22 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px;
     }
   }
 
+  &.dx-pivotgridfieldchooser {
+    .dx-area-field.dx-area-box {
+      border-radius: 4px;
+    }
+  }
+
   .dx-sort-up {
-    @include dx-icon-sizing($fluent-base-icon-size)
+    @include dx-icon-sizing($fluent-button-icon-size)
   }
 
   .dx-sort-down {
-    @include dx-icon-sizing($fluent-base-icon-size)
+    @include dx-icon-sizing($fluent-button-icon-size)
   }
 
   .dx-header-filter {
-    @include dx-icon-sizing($fluent-base-icon-size)
+    @include dx-icon-sizing($fluent-button-icon-size)
   }
 }
 
@@ -190,21 +189,19 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px;
 .dx-pivotgridfieldchooser {
   background-color: $pivotgrid-area-background;
 
-  .dx-area {
-    .dx-area-icon-filter {
-      background: none;
-
-      @include dx-icon(filter);
-
-      width: 14px;
-      height: 14px;
-    }
+  .dx-area-icon {
+    width: $fluent-button-icon-size;
+    height: $fluent-button-icon-size;
+    font-size: $fluent-button-icon-size;
+  }
 
+  .dx-area {
     .dx-area-caption {
       text-transform: uppercase;
       font-size: $fluent-pivotgrid-headers-font-size;
       font-weight: 500;
       color: $pivotgrid-area-color;
+      vertical-align: middle;
     }
 
     .dx-area-fields {
@@ -237,14 +234,15 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px;
   .dx-treeview-item {
     min-height: $fluent-pivotgridfieldchooser-field-min-height;
     padding: 9px 8px;
-    line-height: normal;
-  }
 
-  .dx-treeview-item-with-checkbox {
-    .dx-checkbox {
-      top: 9px;
+    .dx-icon {
+      margin: 0 5px -1px 0;
+
+      @include dx-icon-sizing($fluent-button-icon-size);
     }
+  }
 
+  .dx-treeview-item-with-checkbox {
     .dx-treeview-item {
       padding-left: $fluent-treeview-item-with-checkbox-offset;
     }