SelectBox Grouping demo: fix custom icon alignment (#28509)

DevExpress · Dec 6, 2024 · e2a46b2 · e2a46b2
1 parent fca9727
commit e2a46b2
Show file tree

Hide file tree

Showing 30 changed files with 150 additions and 20 deletions.
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css b/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;
 }
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css b/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;
 }
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css b/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;
 }
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue b/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>
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css b/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;
 }
diff --git a/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css b/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 {

diff --git a/apps/demos/Demos/TagBox/GroupedItems/React/styles.css b/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 {

diff --git a/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css b/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 {

diff --git a/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue b/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>
diff --git a/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css b/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 {

diff --git a/apps/demos/testing/widgets/selectbox/GroupedItems.test.js b/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());
+  });
+});
diff --git a/...s/selectbox/etalons/selectbox_groupeditems_first_opened (fluent.blue.light).png b/...s/selectbox/etalons/selectbox_groupeditems_first_opened (fluent.blue.light).png
diff --git a/...selectbox/etalons/selectbox_groupeditems_first_opened (material.blue.light).png b/...selectbox/etalons/selectbox_groupeditems_first_opened (material.blue.light).png
diff --git a/...demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened.png b/...demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened.png
diff --git a/.../selectbox/etalons/selectbox_groupeditems_second_opened (fluent.blue.light).png b/.../selectbox/etalons/selectbox_groupeditems_second_opened (fluent.blue.light).png
diff --git a/...electbox/etalons/selectbox_groupeditems_second_opened (material.blue.light).png b/...electbox/etalons/selectbox_groupeditems_second_opened (material.blue.light).png
diff --git a/...emos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened.png b/...emos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened.png
diff --git a/...s/selectbox/etalons/selectbox_groupeditems_third_opened (fluent.blue.light).png b/...s/selectbox/etalons/selectbox_groupeditems_third_opened (fluent.blue.light).png
diff --git a/...selectbox/etalons/selectbox_groupeditems_third_opened (material.blue.light).png b/...selectbox/etalons/selectbox_groupeditems_third_opened (material.blue.light).png
diff --git a/...demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened.png b/...demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened.png
diff --git a/apps/demos/testing/widgets/tagbox/GroupedItems.test.js b/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());
+  });
+});
diff --git a/...widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent.blue.light).png b/...widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent.blue.light).png
diff --git a/...dgets/tagbox/etalons/tagbox_groupeditems_first_opened (material.blue.light).png b/...dgets/tagbox/etalons/tagbox_groupeditems_first_opened (material.blue.light).png
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened.png
diff --git a/...idgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent.blue.light).png b/...idgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent.blue.light).png
diff --git a/...gets/tagbox/etalons/tagbox_groupeditems_second_opened (material.blue.light).png b/...gets/tagbox/etalons/tagbox_groupeditems_second_opened (material.blue.light).png
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened.png
diff --git a/...widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent.blue.light).png b/...widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent.blue.light).png
diff --git a/...dgets/tagbox/etalons/tagbox_groupeditems_third_opened (material.blue.light).png b/...dgets/tagbox/etalons/tagbox_groupeditems_third_opened (material.blue.light).png
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened.png