SelectBox Grouping demo: fix custom icon alignment

apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css

@@ -1,5 +1,9 @@
 ::ng-deep .custom-icon .icon {
-  font-size: 17px;
   color: #f05b41;
-  margin-right: 2px;
+}
+
+::ng-deep .custom-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }

apps/demos/Demos/SelectBox/GroupedItems/React/styles.css

@@ -1,5 +1,9 @@
 .custom-icon .icon {
-  font-size: 17px;
   color: #f05b41;
-  margin-right: 2px;
+}
+
+.custom-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }

apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css

@@ -1,5 +1,9 @@
 .custom-icon .icon {
-  font-size: 17px;
   color: #f05b41;
-  margin-right: 2px;
+}
+
+.custom-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }

apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue

@@ -13,8 +13,12 @@ withDefaults(defineProps<{
 </script>
 <style scoped>
   .custom-icon .icon {
-    font-size: 17px;
     color: #f05b41;
-    margin-right: 2px;
+  }
+
+  .custom-icon {
+    display: flex;
+    align-items: center;
+    gap: 4px;
   }
 </style>

apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css

@@ -1,5 +1,9 @@
 .custom-icon .icon {
-  font-size: 17px;
   color: #f05b41;
-  margin-right: 2px;
+}
+
+.custom-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }

apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css

@@ -1,7 +1,11 @@
 ::ng-deep .custom-icon .icon {
-  font-size: 17px;
   color: #f05b41;
-  margin-right: 2px;
+}
+
+::ng-deep .custom-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 ::ng-deep .dx-field {

apps/demos/Demos/TagBox/GroupedItems/React/styles.css

@@ -1,7 +1,11 @@
 .custom-icon .icon {
-  font-size: 17px;
   color: #f05b41;
-  margin-right: 2px;
+}
+
+.custom-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .dx-field {

apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css

@@ -1,7 +1,11 @@
 .custom-icon .icon {
-  font-size: 17px;
   color: #f05b41;
-  margin-right: 2px;
+}
+
+.custom-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .dx-field {

apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue

@@ -13,8 +13,12 @@ withDefaults(defineProps<{
 </script>
 <style scoped>
   .custom-icon .icon {
-    font-size: 17px;
     color: #f05b41;
-    margin-right: 2px;
+  }
+
+  .custom-icon {
+    display: flex;
+    align-items: center;
+    gap: 4px;
   }
 </style>

apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css

@@ -1,7 +1,11 @@
 .custom-icon .icon {
-  font-size: 17px;
   color: #f05b41;
-  margin-right: 2px;
+}
+
+.custom-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .dx-field {

apps/demos/testing/widgets/selectbox/GroupedItems.test.js

@@ -0,0 +1,47 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { Selector as $ } from 'testcafe';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
+
+fixture('SelectBox.GroupedItems')
+  .page('http://localhost:8080/')
+  .before(async (ctx) => {
+    ctx.initialWindowSize = [900, 600];
+  });
+
+runManualTest('SelectBox', 'GroupedItems', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
+  test('GroupedItems', async (t) => {
+    const SELECT_BOX_CLASS = 'dx-selectbox';
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .click($(`.${SELECT_BOX_CLASS}`).nth(0))
+      .wait(200);
+
+    await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_first_opened.png');
+
+    await t
+      .click($(`.${SELECT_BOX_CLASS}`).nth(0))
+      .wait(200);
+
+    await t
+      .click($(`.${SELECT_BOX_CLASS}`).nth(1))
+      .wait(200);
+
+    await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_second_opened.png');
+
+    await t
+      .click($(`.${SELECT_BOX_CLASS}`).nth(1))
+      .wait(200);
+
+    await t
+      .click($(`.${SELECT_BOX_CLASS}`).nth(2))
+      .wait(200);
+
+    await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_third_opened.png');
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
+});

apps/demos/testing/widgets/tagbox/GroupedItems.test.js

@@ -0,0 +1,43 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
+
+fixture('TagBox.GroupedItems')
+  .page('http://localhost:8080/')
+  .before(async (ctx) => {
+    ctx.initialWindowSize = [900, 600];
+  });
+
+runManualTest('TagBox', 'GroupedItems', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
+  test('GroupedItems', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .pressKey('tab')
+      .pressKey('alt+down');
+
+    await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_first_opened.png');
+
+    await t
+      .pressKey('esc')
+
+    await t
+      .pressKey('tab')
+      .pressKey('alt+down');
+
+    await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_second_opened.png');
+
+    await t
+      .pressKey('esc')
+
+    await t
+      .pressKey('tab')
+      .pressKey('alt+down');
+
+    await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_third_opened.png');
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
+});