TabPanel: support focused but not selected state in Generic

DevExpress · Sep 4, 2024 · c341d14 · c341d14
1 parent 536fcb8
commit c341d14
Show file tree

Hide file tree

Showing 31 changed files with 509 additions and 444 deletions.
diff --git a/.../htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light).png b/.../htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light).png
diff --git a/...tor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light-compact).png b/...tor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light-compact).png
diff --git a/...ter in tab content after window resize, pane_1.size=`100px` (generic-light).png b/...ter in tab content after window resize, pane_1.size=`100px` (generic-light).png
diff --git a/...litter/etalons/Splitter in tab content, pane_1.size=`100px` (generic-light).png b/...litter/etalons/Splitter in tab content, pane_1.size=`100px` (generic-light).png
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/common.ts b/e2e/testcafe-devextreme/tests/navigation/tabPanel/common.ts
@@ -480,7 +480,6 @@ test('TabPanel borders without scrolling', async (t) => {
 
     await t.dispatchEvent(firstItem.element, 'mousedown');
     await testScreenshot(t, takeScreenshot, `TabPanel 1 item active,tabsPosition=${tabsPosition}.png`, { element: '#container' });
-
     // TODO: this test is unstable
     // await t
     //   .dispatchEvent(thirdItem.element, 'mouseup')
@@ -533,6 +532,67 @@ test('TabPanel borders without scrolling', async (t) => {
 
     return createWidget('dxTabPanel', tabPanelOptions);
   });
+
+  test(`TabPanel tabs selected item focus with tabsPosition=${tabsPosition}`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    const tabPanel = new TabPanel('#container');
+
+    await t.click(tabPanel.multiView.element);
+    await testScreenshot(t, takeScreenshot, `TabPanel item focus when clicking on multiview,tabsPosition=${tabsPosition}.png`, { element: '#container' });
+
+    await t.pressKey('right');
+    await testScreenshot(t, takeScreenshot, `TabPanel disabled item focused,tabsPosition=${tabsPosition}.png`, { element: '#container' });
+
+    await t.click(tabPanel.multiView.element);
+
+    await t.pressKey('left');
+    await testScreenshot(t, takeScreenshot, `TabPanel focus not selected item,tabsPosition=${tabsPosition}.png`, { element: '#container' });
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await ClientFunction(() => {
+      (window as any).DevExpress.ui.dxTabs.defaultOptions({
+        options: {
+          useInkRipple: false,
+        },
+      });
+    })();
+
+    const dataSource = [
+      {
+        title: 'John Heart',
+        text: 'John Heart',
+      }, {
+        title: 'Olivia Peyton',
+        text: 'Olivia Peyton',
+      }, {
+        title: 'Robert Reagan',
+        text: 'Robert Reagan',
+        disabled: true,
+      }, {
+        title: 'Greta Sims',
+        text: 'Greta Sims',
+      }, {
+        title: 'Olivia Peyton',
+        text: 'Olivia Peyton',
+      },
+    ] as Item[];
+
+    const tabPanelOptions = {
+      dataSource,
+      height: 250,
+      width: 450,
+      tabsPosition,
+      selectedIndex: 1,
+      // prevent firing dxinactive event for to avoid failing test
+      itemHoldTimeout: 5000,
+    };
+
+    return createWidget('dxTabPanel', tabPanelOptions);
+  });
 });
 
 [true, false].forEach((rtlEnabled) => {

diff --git a/...avigation/tabPanel/etalons/TabPanel 1 item active,rtl=false (generic-light).png b/...avigation/tabPanel/etalons/TabPanel 1 item active,rtl=false (generic-light).png
diff --git a/...navigation/tabPanel/etalons/TabPanel 1 item active,rtl=true (generic-light).png b/...navigation/tabPanel/etalons/TabPanel 1 item active,rtl=true (generic-light).png
diff --git a/...tabPanel/etalons/TabPanel 1 item active,tabsPosition=bottom (generic-light).png b/...tabPanel/etalons/TabPanel 1 item active,tabsPosition=bottom (generic-light).png
diff --git a/...n/tabPanel/etalons/TabPanel 1 item active,tabsPosition=left (generic-light).png b/...n/tabPanel/etalons/TabPanel 1 item active,tabsPosition=left (generic-light).png
diff --git a/.../tabPanel/etalons/TabPanel 1 item active,tabsPosition=right (generic-light).png b/.../tabPanel/etalons/TabPanel 1 item active,tabsPosition=right (generic-light).png
diff --git a/.../tabPanel/etalons/TabPanel available item focused,rtl=false (generic-light).png b/.../tabPanel/etalons/TabPanel available item focused,rtl=false (generic-light).png
diff --git a/...n/tabPanel/etalons/TabPanel available item focused,rtl=true (generic-light).png b/...n/tabPanel/etalons/TabPanel available item focused,rtl=true (generic-light).png
diff --git a/...etalons/TabPanel available item focused,tabsPosition=bottom (generic-light).png b/...etalons/TabPanel available item focused,tabsPosition=bottom (generic-light).png
diff --git a/...l/etalons/TabPanel available item focused,tabsPosition=left (generic-light).png b/...l/etalons/TabPanel available item focused,tabsPosition=left (generic-light).png
diff --git a/.../etalons/TabPanel available item focused,tabsPosition=right (generic-light).png b/.../etalons/TabPanel available item focused,tabsPosition=right (generic-light).png
diff --git a/...tabPanel/etalons/TabPanel long not stretched tabs,rtl=false (generic-light).png b/...tabPanel/etalons/TabPanel long not stretched tabs,rtl=false (generic-light).png
diff --git a/.../tabPanel/etalons/TabPanel long not stretched tabs,rtl=true (generic-light).png b/.../tabPanel/etalons/TabPanel long not stretched tabs,rtl=true (generic-light).png
diff --git a/...abPanel/etalons/TabPanel long tabs,2 tab selected,rtl=false (generic-light).png b/...abPanel/etalons/TabPanel long tabs,2 tab selected,rtl=false (generic-light).png
diff --git a/...tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=true (generic-light).png b/...tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=true (generic-light).png
diff --git a/...tion/tabPanel/etalons/TabPanel with expanded tabs,rtl=false (generic-light).png b/...tion/tabPanel/etalons/TabPanel with expanded tabs,rtl=false (generic-light).png
diff --git a/...ation/tabPanel/etalons/TabPanel with expanded tabs,rtl=true (generic-light).png b/...ation/tabPanel/etalons/TabPanel with expanded tabs,rtl=true (generic-light).png
diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_base.scss
@@ -33,9 +33,9 @@
     border: $generic-tabs-border;
   }
 
-  &.dx-state-focused {
-    .dx-multiview-wrapper.dx-state-focused {
-      border-color: $tabs-focused-border-color;
-    }
-  }
+  // &.dx-state-focused {
+  //   .dx-multiview-wrapper.dx-state-focused {
+  //     border-color: $tabs-focused-border-color;
+  //   }
+  // }
 }
diff --git a/...ages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss b/...ages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss
@@ -39,25 +39,25 @@
     }
   }
 
-  &.dx-state-focused {
-    &.dx-disabled-focused-tab {
-      .dx-tabs-wrapper {
-        border-block-start: $generic-tabs-border;
-      }
+  // &.dx-state-focused {
+  //   &.dx-disabled-focused-tab {
+  //     .dx-tabs-wrapper {
+  //       border-block-start: $generic-tabs-border;
+  //     }
 
-      .dx-tabs-nav-button {
-        border-block-start: $generic-tabs-border;
-      }
-    }
+  //     .dx-tabs-nav-button {
+  //       border-block-start: $generic-tabs-border;
+  //     }
+  //   }
 
-    .dx-tabs-wrapper {
-      border-block-start: $generic-tabs-border-focus;
-    }
+  //   .dx-tabs-wrapper {
+  //     border-block-start: $generic-tabs-border-focus;
+  //   }
 
-    .dx-tabs-nav-button {
-      border-block-start: $generic-tabs-border-focus;
-    }
-  }
+  //   .dx-tabs-nav-button {
+  //     border-block-start: $generic-tabs-border-focus;
+  //   }
+  // }
 
   &:not(.dx-empty-collection) {
     .dx-multiview-wrapper {

diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-left.scss
@@ -17,12 +17,12 @@
     border-inline-start: $generic-tabs-border;
     border-inline-end: $generic-tabs-border;
 
-    @include dx-tabs-border-mixin(
-      $generic-tabs-border,
-      none,
-      $generic-tabs-border,
-      none,
-    );
+    // @include dx-tabs-border-mixin(
+    //   $generic-tabs-border,
+    //   none,
+    //   $generic-tabs-border,
+    //   none,
+    // );
   }
 
   .dx-tabs .dx-tabs-scrollable {
@@ -39,25 +39,25 @@
     }
   }
 
-  &.dx-state-focused {
-    &.dx-disabled-focused-tab {
-      .dx-tabs-wrapper {
-        border-inline-end: $generic-tabs-border;
-      }
+  // &.dx-state-focused {
+  //   &.dx-disabled-focused-tab {
+  //     .dx-tabs-wrapper {
+  //       border-inline-end: $generic-tabs-border;
+  //     }
 
-      .dx-tabs-nav-button {
-        border-inline-end: $generic-tabs-border;
-      }
-    }
+  //     .dx-tabs-nav-button {
+  //       border-inline-end: $generic-tabs-border;
+  //     }
+  //   }
 
-    .dx-tabs-wrapper {
-      border-inline-end: $generic-tabs-border-focus;
-    }
+  //   .dx-tabs-wrapper {
+  //     border-inline-end: $generic-tabs-border-focus;
+  //   }
 
-    .dx-tabs-nav-button {
-      border-inline-end: $generic-tabs-border-focus;
-    }
-  }
+  //   .dx-tabs-nav-button {
+  //     border-inline-end: $generic-tabs-border-focus;
+  //   }
+  // }
 
   &:not(.dx-empty-collection) {
     .dx-multiview-wrapper {

diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-right.scss
@@ -17,12 +17,12 @@
     border-inline-start: $generic-tabs-border;
     border-inline-end: $generic-tabs-border;
 
-    @include dx-tabs-border-mixin(
-      $generic-tabs-border,
-      none,
-      $generic-tabs-border,
-      none,
-    );
+    // @include dx-tabs-border-mixin(
+    //   $generic-tabs-border,
+    //   none,
+    //   $generic-tabs-border,
+    //   none,
+    // );
   }
 
   .dx-tabs .dx-tabs-scrollable {
@@ -39,25 +39,25 @@
     }
   }
 
-  &.dx-state-focused {
-    &.dx-disabled-focused-tab {
-      .dx-tabs-wrapper {
-        border-inline-start: $generic-tabs-border;
-      }
+  // &.dx-state-focused {
+  //   &.dx-disabled-focused-tab {
+  //     .dx-tabs-wrapper {
+  //       border-inline-start: $generic-tabs-border;
+  //     }
 
-      .dx-tabs-nav-button {
-        border-inline-start: $generic-tabs-border;
-      }
-    }
+  //     .dx-tabs-nav-button {
+  //       border-inline-start: $generic-tabs-border;
+  //     }
+  //   }
 
-    .dx-tabs-wrapper {
-      border-inline-start: $generic-tabs-border-focus;
-    }
+  //   .dx-tabs-wrapper {
+  //     border-inline-start: $generic-tabs-border-focus;
+  //   }
 
-    .dx-tabs-nav-button {
-      border-inline-start: $generic-tabs-border-focus;
-    }
-  }
+  //   .dx-tabs-nav-button {
+  //     border-inline-start: $generic-tabs-border-focus;
+  //   }
+  // }
 
   &:not(.dx-empty-collection) {
     .dx-multiview-wrapper {

diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-top.scss
@@ -39,25 +39,25 @@
     }
   }
 
-  &.dx-state-focused {
-    &.dx-disabled-focused-tab {
-      .dx-tabs-wrapper {
-        border-block-end: $generic-tabs-border;
-      }
+  // &.dx-state-focused {
+  //   &.dx-disabled-focused-tab {
+  //     .dx-tabs-wrapper {
+  //       border-block-end: $generic-tabs-border;
+  //     }
 
-      .dx-tabs-nav-button {
-        border-block-end: $generic-tabs-border;
-      }
-    }
+  //     .dx-tabs-nav-button {
+  //       border-block-end: $generic-tabs-border;
+  //     }
+  //   }
 
-    .dx-tabs-wrapper {
-      border-block-end: $generic-tabs-border-focus;
-    }
+  //   .dx-tabs-wrapper {
+  //     border-block-end: $generic-tabs-border-focus;
+  //   }
 
-    .dx-tabs-nav-button {
-      border-block-end: $generic-tabs-border-focus;
-    }
-  }
+  //   .dx-tabs-nav-button {
+  //     border-block-end: $generic-tabs-border-focus;
+  //   }
+  // }
 
   &:not(.dx-empty-collection) {
     .dx-multiview-wrapper {

diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_base.scss
@@ -17,9 +17,9 @@
 .dx-tabpanel-tab {
   padding: $generic-tabpanel-tabs-item-padding;
 
-  &.dx-state-focused::after {
-    border-color: $tabs-border-color;
-  }
+  // &.dx-state-focused::after {
+  //   border-color: $tabs-border-color;
+  // }
 
   &.dx-state-disabled {
     &::after {