Fixed columns: add icons for context menu

e2e/testcafe-devextreme/tests/common/icons.ts

@@ -271,6 +271,11 @@ const iconSet = {
   triangleleft: '\f16e',
   sendfilled: '\f09a',
   chat: '\f17e',
+  fixcolumn: '\f16f',
+  unfixcolumn: '\f17a',
+  fixcolumnleft: '\f17b',
+  stickcolumn: '\f17c',
+  fixcolumnright: '\f17d',
 };
 
 fixture.disablePageReloads`Icons`

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/columnFixingIcons.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { changeTheme } from '../../helpers/changeTheme';
+import { Themes } from '../../helpers/themes';
+import { getData } from './helpers/generateDataSourceData';
+
+fixture.disablePageReloads`Column Fixing`.page(
+  url(__dirname, '../container.html'),
+);
+
+[Themes.genericLight, Themes.materialBlue, Themes.fluentBlue].forEach(
+  (theme) => {
+    test('Sticky columns: add icons for context menu', async (t) => {
+      const dataGrid = new DataGrid('#container');
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+      await t
+        .rightClick(dataGrid.getHeaders().getHeaderRow(0).element)
+        .click(dataGrid.getContextMenu().getItemByOrder(4))
+        .expect(
+          await takeScreenshot(
+            `sticky_columns_menu_icons_(${theme}).png`,
+            dataGrid.element,
+          ),
+        )
+        .ok()
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    })
+      .before(async () => {
+        await changeTheme(theme);
+        await createWidget('dxDataGrid', {
+          dataSource: getData(5, 5),
+          width: '100%',
+          columnFixing: {
+            enabled: true,
+            texts: {
+              // @ts-expect-error required
+              stickyPosition: 'Stick',
+            },
+          },
+          customizeColumns: (columns) => {
+            columns[1].fixed = true;
+            columns[1].fixedPosition = 'sticky';
+          },
+        });
+      })
+      .after(async () => {
+        await changeTheme(Themes.genericLight);
+      });
+  },
+);

packages/devextreme-scss/scss/widgets/base/_icons.scss

@@ -130,7 +130,12 @@
 .dx-icon-triangleright,
 .dx-icon-triangleleft,
 .dx-icon-sendfilled,
-.dx-icon-chat {
+.dx-icon-chat,
+.dx-icon-fixcolumn,
+.dx-icon-fixcolumnleft,
+.dx-icon-fixcolumnright,
+.dx-icon-stickcolumn,
+.dx-icon-unfixcolumn {
   background-position: 0 0;
   background-repeat: no-repeat;
 }
@@ -465,6 +470,7 @@ $icons: (
     "triangledown":"\f16c",
     "triangleright":"\f16d",
     "triangleleft":"\f16e",
+    "fixcolumn":"\f16f",
     "expandform": "\f170",
     "description": "\f171",
     "belloutline": "\f172",
@@ -475,6 +481,10 @@ $icons: (
     "datausage": "\f177",
     "datapie": "\f178",
     "pinmap": "\f179",
+    "unfixcolumn":"\f17a",
+    "fixcolumnleft":"\f17b",
+    "stickcolumn":"\f17c",
+    "fixcolumnright":"\f17d",
 );
 
 // stylelint-enable

packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss

@@ -114,6 +114,31 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
         .dx-icon-context-menu-sort-none {
           @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4);
         }
+
+        .dx-icon-fix-column {
+          @include dx-icon(fixcolumn);
+          @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4);
+        }
+
+        .dx-icon-fix-column-left {
+          @include dx-icon(fixcolumnleft);
+          @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4);
+        }
+
+        .dx-icon-fix-column-right {
+          @include dx-icon(fixcolumnright);
+          @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4);
+        }
+
+        .dx-icon-stick-column {
+          @include dx-icon(stickcolumn);
+          @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4);
+        }
+
+        .dx-icon-unfix-column {
+          @include dx-icon(unfixcolumn);
+          @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4);
+        }
       }
     }
 

packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss

@@ -63,6 +63,31 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
           @include dx-icon(sortdowntext);
           @include dx-icon-sizing(16px);
         }
+
+        .dx-icon-fix-column {
+          @include dx-icon(fixcolumn);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-fix-column-left {
+          @include dx-icon(fixcolumnleft);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-fix-column-right {
+          @include dx-icon(fixcolumnright);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-stick-column {
+          @include dx-icon(stickcolumn);
+          @include dx-icon-sizing(16px);
+        }
+
+        .dx-icon-unfix-column {
+          @include dx-icon(unfixcolumn);
+          @include dx-icon-sizing(16px);
+        }
       }
     }
 

packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss

@@ -104,6 +104,31 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         .dx-icon-context-menu-sort-none {
           @include dx-icon-sizing($material-grid-base-filter-icon-size - 4);
         }
+
+        .dx-icon-fix-column {
+          @include dx-icon(fixcolumn);
+          @include dx-icon-sizing($material-grid-base-filter-icon-size - 4);
+        }
+
+        .dx-icon-fix-column-left {
+          @include dx-icon(fixcolumnleft);
+          @include dx-icon-sizing($material-grid-base-filter-icon-size - 4);
+        }
+
+        .dx-icon-fix-column-right {
+          @include dx-icon(fixcolumnright);
+          @include dx-icon-sizing($material-grid-base-filter-icon-size - 4);
+        }
+
+        .dx-icon-stick-column {
+          @include dx-icon(stickcolumn);
+          @include dx-icon-sizing($material-grid-base-filter-icon-size - 4);
+        }
+
+        .dx-icon-unfix-column {
+          @include dx-icon(unfixcolumn);
+          @include dx-icon-sizing($material-grid-base-filter-icon-size - 4);
+        }
       }
     }
 

packages/devextreme-scss/tests/icon-font.test.ts

@@ -25,21 +25,21 @@ describe('Equals svg to font', () => {
     const countElementGenericFont = getCountElementInFont(`${BASE_PATH}/icons/dxicons.ttf`);
     const countElementGenericSvg = getCountElementInSvg(`${BASE_PATH}/images/icons/generic`);
 
-    expect(countElementGenericFont - 5).toBe(countElementGenericSvg);
+    expect(countElementGenericFont).toBe(countElementGenericSvg);
   });
 
   test('material themes', () => {
     const countElementMaterialFont = getCountElementInFont(`${BASE_PATH}/icons/dxiconsmaterial.ttf`);
     const countElementMaterialSvg = getCountElementInSvg(`${BASE_PATH}/images/icons/material`);
 
-    expect(countElementMaterialFont - 5).toBe(countElementMaterialSvg);
+    expect(countElementMaterialFont).toBe(countElementMaterialSvg);
   });
 
   test('fluent theme', () => {
     const countElementFluentFont = getCountElementInFont(`${BASE_PATH}/icons/dxiconsfluent.ttf`);
     const countElementFluentSvg = getCountElementInSvg(`${BASE_PATH}/images/icons/fluent`);
 
-    expect(countElementFluentFont - 5).toBe(countElementFluentSvg);
+    expect(countElementFluentFont).toBe(countElementFluentSvg);
   });
 
   test('check svg elements', () => {

packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts

@@ -41,6 +41,11 @@ const POINTER_EVENTS_NONE_CLASS = 'dx-pointer-events-none';
 const COMMAND_TRANSPARENT = 'transparent';
 const GROUP_ROW_CLASS = 'dx-group-row';
 const DETAIL_ROW_CLASS = 'dx-master-detail-row';
+const FIXED_COLUMN_ICON_CLASS = 'fix-column';
+const FIXED_COLUMN_LEFT_ICON_CLASS = 'fix-column-left';
+const FIXED_COLUMN_RIGHT_ICON_CLASS = 'fix-column-right';
+const STICKY_COLUMN_ICON_CLASS = 'stick-column';
+const UNFIXED_COLUMN_ICON_CLASS = 'unfix-column';
 
 const getTransparentColumnIndex = function (fixedColumns: any[]) {
   let transparentColumnIndex = -1;
@@ -1166,6 +1171,13 @@ export const columnFixingModule = {
           rightPosition: messageLocalization.format('dxDataGrid-columnFixingRightPosition'),
           stickyPosition: messageLocalization.format('dxDataGrid-columnFixingStickyPosition'),
         },
+        icons: {
+          fix: FIXED_COLUMN_ICON_CLASS,
+          unfix: UNFIXED_COLUMN_ICON_CLASS,
+          leftPosition: FIXED_COLUMN_LEFT_ICON_CLASS,
+          rightPosition: FIXED_COLUMN_RIGHT_ICON_CLASS,
+          stickyPosition: STICKY_COLUMN_ICON_CLASS,
+        },
       },
     };
   },

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts

@@ -249,16 +249,28 @@ const columnHeadersView = (
         };
         const fixedPositionItems = [
           {
-            text: columnFixingOptions.texts.leftPosition, value: 'left', disabled: column.fixed && (!column.fixedPosition || column.fixedPosition === 'left'), onItemClick,
+            text: columnFixingOptions.texts.leftPosition,
+            icon: columnFixingOptions.icons.leftPosition,
+            value: 'left',
+            disabled: column.fixed && (!column.fixedPosition || column.fixedPosition === 'left'),
+            onItemClick,
           },
           {
-            text: columnFixingOptions.texts.rightPosition, value: 'right', disabled: column.fixed && column.fixedPosition === 'right', onItemClick,
+            text: columnFixingOptions.texts.rightPosition,
+            icon: columnFixingOptions.icons.rightPosition,
+            value: 'right',
+            disabled: column.fixed && column.fixedPosition === 'right',
+            onItemClick,
           },
         ];
 
         if (this.option('columnFixing.legacyMode') !== true) {
           fixedPositionItems.push({
-            text: columnFixingOptions.texts.stickyPosition, value: 'sticky', disabled: column.fixed && getColumnFixedPosition(column) === StickyPosition.Sticky, onItemClick,
+            text: columnFixingOptions.texts.stickyPosition,
+            icon: columnFixingOptions.icons.stickyPosition,
+            value: 'sticky',
+            disabled: column.fixed && getColumnFixedPosition(column) === StickyPosition.Sticky,
+            onItemClick,
           });
         }
 
@@ -267,11 +279,16 @@ const columnHeadersView = (
         items.push(
           {
             text: columnFixingOptions.texts.fix,
+            icon: columnFixingOptions.icons.fix,
             beginGroup: true,
             items: fixedPositionItems,
           },
           {
-            text: columnFixingOptions.texts.unfix, value: 'none', disabled: !column.fixed, onItemClick,
+            text: columnFixingOptions.texts.unfix,
+            icon: columnFixingOptions.icons.unfix,
+            value: 'none',
+            disabled: !column.fixed,
+            onItemClick,
           },
         );
       }