TagBox - selectAll checkBox should be aligned correctly in fluent (T1252002)

e2e/testcafe-devextreme/tests/editors/tagBox/common.ts

@@ -3,6 +3,7 @@ import TagBox from 'devextreme-testcafe-models/tagBox';
 import { testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture.disablePageReloads`TagBox`
   .page(url(__dirname, '../../container.html'));
@@ -123,6 +124,25 @@ test('Select all checkbox should be focused by tab and closed by escape (T389453
   applyValueMode: 'useButtons',
 }));
 
+safeSizeTest('TagBox with selection controls', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const tagBox = new TagBox('#container');
+
+  await t.click(tagBox.element);
+
+  await testScreenshot(t, takeScreenshot, 'TagBox with selection controls.png', {
+    shouldTestInCompact: true,
+  });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [300, 300]).before(async () => createWidget('dxTagBox', {
+  items: [1, 2, 3, 4, 5, 6, 7],
+  showSelectionControls: true,
+  width: 300,
+}));
+
 test('Placeholder is visible after items option change when value is not chosen (T1099804)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const tagBox = new TagBox('#container');

packages/devextreme-scss/scss/widgets/fluent/common/_mixins.scss

@@ -89,12 +89,16 @@ $badge-invalid-bg: $base-invalid-color;
   }
 
   .dx-list-select-all {
+    margin-inline: $fluent-list-item-margin-inline;
     padding: $fluent-list-item-vertical-padding + 2px 0 $fluent-list-item-vertical-padding - 2px;
   }
 
   .dx-list-items {
-    margin-left: $fluent-list-vertical-padding;
-    margin-right: $fluent-list-vertical-padding;
+    margin-inline: $fluent-list-item-margin-inline;
+
+    .dx-list-select-checkbox {
+      margin-inline: $fluent-list-item-checkbox-margin-inline;
+    }
   }
 
   .dx-list-item,

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

@@ -128,7 +128,8 @@ $fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-
   }
 
   .dx-list-group-header,
-  .dx-list-item-content {
+  .dx-list-item-content,
+  .dx-list-select-all-label {
     font-size: $fluent-dropdowneditor-list-font-size;
     line-height: $fluent-dropdowneditor-list-line-height;
   }

packages/devextreme-scss/scss/widgets/fluent/list/_sizes.scss

@@ -3,6 +3,8 @@
 // adduse
 
 $fluent-list-vertical-padding: 4px !default;
+$fluent-list-item-margin-inline: 4px !default;
+$fluent-list-item-checkbox-margin-inline: null !default;
 $fluent-list-bottom-padding: 4px !default;
 $fluent-list-searchbox-margin-bottom: 4px !default;
 $fluent-list-item-height: null !default;
@@ -13,6 +15,7 @@ $fluent-list-group-header-vertical-padding: null !default;
 $fluent-list-next-button-horizontal-padding: null !default;
 
 @if $size == "default" {
+  $fluent-list-item-checkbox-margin-inline: 8px !default;
   $fluent-list-item-height: 32px !default;
   $fluent-list-item-vertical-padding: 6px !default;
   $fluent-list-item-horizontal-padding: 12px !default;
@@ -21,6 +24,7 @@ $fluent-list-next-button-horizontal-padding: null !default;
 }
 
 @else if $size == "compact" {
+  $fluent-list-item-checkbox-margin-inline: 4px !default;
   $fluent-list-item-height: 24px !default;
   $fluent-list-item-vertical-padding: 4px !default;
   $fluent-list-item-horizontal-padding: 8px !default;