TreeList - Expand/collapse buttons are too close to column borders if the first column is a boolean column (T1223168)

e2e/testcafe-devextreme/tests/treeList/markup.ts

@@ -0,0 +1,57 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import TreeList from 'devextreme-testcafe-models/treeList';
+
+import { changeTheme } from '../../helpers/changeTheme';
+import { createWidget } from '../../helpers/createWidget';
+import url from '../../helpers/getPageUrl';
+import { Themes } from '../../helpers/themes';
+
+fixture`Markup`
+ .page(url(__dirname, '../container.html'));
+
+const tasksT1223168 = [{
+ Task_ID: 1,
+ Task_Subject: 'Plans 2015',
+ Task_Parent_ID: 0,
+}, {
+ Task_ID: 2,
+ Task_Subject: 'Health Insurance',
+ Task_Parent_ID: 1,
+}, {
+ Task_ID: 3,
+ Task_Subject: 'Training',
+ Task_Parent_ID: 2,
+}];
+
+[Themes.genericLight, Themes.materialBlue, Themes.fluentBlue].forEach((theme) => {
+ test(`TreeList - Expand/collapse buttons are too close to column borders if the first column is a boolean column (T1223168) in ${theme}`, async (t) => {
+ const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+ const treeList = new TreeList('#container');
+
+ await t
+ .expect(await takeScreenshot(`T1223168-expandable-${theme}`, treeList.element))
+ .ok()
+ .expect(compareResults.isValid())
+ .ok(compareResults.errorMessages());
+ }).before(async () => {
+ await changeTheme(theme);
+ await createWidget('dxTreeList', {
+ dataSource: tasksT1223168,
+ keyExpr: 'Task_ID',
+ parentIdExpr: 'Task_Parent_ID',
+ autoExpandAll: true,
+ wordWrapEnabled: true,
+ showBorders: true,
+ columns: [{
+ dataField: 'test',
+ dataType: 'boolean',
+ }, 'Task_Subject'],
+ showColumnLines: true,
+ rowDragging: {
+ allowReordering: true,
+ },
+ });
+ }).after(async () => {
+ await changeTheme(Themes.genericLight);
+ });
+});

packages/devextreme/scss/widgets/base/_gridBase.scss

@@ -465,8 +465,14 @@
 
  .dx-editor-cell {
  max-width: 0;
- padding: 0;
  vertical-align: middle;
+ padding-top: 0;
+ padding-right: 0;
+ padding-bottom: 0;
+
+ &:not(.dx-#{$widget-name}-cell-expandable) {
+ padding-left: 0;
+ }
 
  .dx-texteditor,
  .dx-texteditor-container {

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

@@ -331,7 +331,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
 
  &.dx-editor-cell:not(.dx-command-select) {
  padding-right: 0;
- padding-left: 0;
+
+ &:not(.dx-#{$widget-name}-cell-expandable) {
+ padding-left: 0;
+ }
  }
  }
  }

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

@@ -309,7 +309,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
 
  &.dx-editor-cell:not(.dx-command-select) {
  padding-right: 0;
- padding-left: 0;
+
+ &:not(.dx-#{$widget-name}-cell-expandable) {
+ padding-left: 0;
+ }
  }
  }
  }