TabPanel: support focused but not selected state in Generic (#27995)

DevExpress · Sep 6, 2024 · 59b9a78 · 59b9a78
1 parent abd451a
commit 59b9a78
Show file tree

Hide file tree

Showing 68 changed files with 83 additions and 539 deletions.
diff --git a/...ing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop.png b/...ing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop.png
diff --git a/...testcafe-devextreme/tests/common/etalons/SVG icon set (material-blue-light).png b/...testcafe-devextreme/tests/common/etalons/SVG icon set (material-blue-light).png
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/...ditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light).png b/...ditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light).png
diff --git a/...alogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light-compact).png b/...alogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light-compact).png
diff --git a/...in tab content after window resize, pane_1.size=`100px` (fluent-blue-light).png b/...in tab content after window resize, pane_1.size=`100px` (fluent-blue-light).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/...er/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-blue-light).png b/...er/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-blue-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 is 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/...s/TabPanel disabled item is focused,tabsPosition=bottom (fluent-blue-light).png b/...s/TabPanel disabled item is focused,tabsPosition=bottom (fluent-blue-light).png
diff --git a/...alons/TabPanel disabled item is focused,tabsPosition=bottom (generic-light).png b/...alons/TabPanel disabled item is focused,tabsPosition=bottom (generic-light).png
diff --git a/...TabPanel disabled item is focused,tabsPosition=bottom (material-blue-light).png b/...TabPanel disabled item is focused,tabsPosition=bottom (material-blue-light).png
diff --git a/...ons/TabPanel disabled item is focused,tabsPosition=left (fluent-blue-light).png b/...ons/TabPanel disabled item is focused,tabsPosition=left (fluent-blue-light).png
diff --git a/...etalons/TabPanel disabled item is focused,tabsPosition=left (generic-light).png b/...etalons/TabPanel disabled item is focused,tabsPosition=left (generic-light).png
diff --git a/...s/TabPanel disabled item is focused,tabsPosition=left (material-blue-light).png b/...s/TabPanel disabled item is focused,tabsPosition=left (material-blue-light).png
diff --git a/...ns/TabPanel disabled item is focused,tabsPosition=right (fluent-blue-light).png b/...ns/TabPanel disabled item is focused,tabsPosition=right (fluent-blue-light).png
diff --git a/...talons/TabPanel disabled item is focused,tabsPosition=right (generic-light).png b/...talons/TabPanel disabled item is focused,tabsPosition=right (generic-light).png
diff --git a/.../TabPanel disabled item is focused,tabsPosition=right (material-blue-light).png b/.../TabPanel disabled item is focused,tabsPosition=right (material-blue-light).png
diff --git a/...ns/TabPanel focus not selected item,tabsPosition=bottom (fluent-blue-light).png b/...ns/TabPanel focus not selected item,tabsPosition=bottom (fluent-blue-light).png
diff --git a/...talons/TabPanel focus not selected item,tabsPosition=bottom (generic-light).png b/...talons/TabPanel focus not selected item,tabsPosition=bottom (generic-light).png
diff --git a/.../TabPanel focus not selected item,tabsPosition=bottom (material-blue-light).png b/.../TabPanel focus not selected item,tabsPosition=bottom (material-blue-light).png
diff --git a/...lons/TabPanel focus not selected item,tabsPosition=left (fluent-blue-light).png b/...lons/TabPanel focus not selected item,tabsPosition=left (fluent-blue-light).png
diff --git a/.../etalons/TabPanel focus not selected item,tabsPosition=left (generic-light).png b/.../etalons/TabPanel focus not selected item,tabsPosition=left (generic-light).png
diff --git a/...ns/TabPanel focus not selected item,tabsPosition=left (material-blue-light).png b/...ns/TabPanel focus not selected item,tabsPosition=left (material-blue-light).png
diff --git a/...ons/TabPanel focus not selected item,tabsPosition=right (fluent-blue-light).png b/...ons/TabPanel focus not selected item,tabsPosition=right (fluent-blue-light).png
diff --git a/...etalons/TabPanel focus not selected item,tabsPosition=right (generic-light).png b/...etalons/TabPanel focus not selected item,tabsPosition=right (generic-light).png
diff --git a/...s/TabPanel focus not selected item,tabsPosition=right (material-blue-light).png b/...s/TabPanel focus not selected item,tabsPosition=right (material-blue-light).png
diff --git a/...em focus when clicking on multiview,tabsPosition=bottom (fluent-blue-light).png b/...em focus when clicking on multiview,tabsPosition=bottom (fluent-blue-light).png
diff --git a/...l item focus when clicking on multiview,tabsPosition=bottom (generic-light).png b/...l item focus when clicking on multiview,tabsPosition=bottom (generic-light).png
diff --git a/... focus when clicking on multiview,tabsPosition=bottom (material-blue-light).png b/... focus when clicking on multiview,tabsPosition=bottom (material-blue-light).png
diff --git a/...item focus when clicking on multiview,tabsPosition=left (fluent-blue-light).png b/...item focus when clicking on multiview,tabsPosition=left (fluent-blue-light).png
diff --git a/...nel item focus when clicking on multiview,tabsPosition=left (generic-light).png b/...nel item focus when clicking on multiview,tabsPosition=left (generic-light).png
diff --git a/...em focus when clicking on multiview,tabsPosition=left (material-blue-light).png b/...em focus when clicking on multiview,tabsPosition=left (material-blue-light).png
diff --git a/...tem focus when clicking on multiview,tabsPosition=right (fluent-blue-light).png b/...tem focus when clicking on multiview,tabsPosition=right (fluent-blue-light).png
diff --git a/...el item focus when clicking on multiview,tabsPosition=right (generic-light).png b/...el item focus when clicking on multiview,tabsPosition=right (generic-light).png
diff --git a/...m focus when clicking on multiview,tabsPosition=right (material-blue-light).png b/...m focus when clicking on multiview,tabsPosition=right (material-blue-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/e2e/testcafe-devextreme/tests/navigation/tabPanel/focus.ts b/e2e/testcafe-devextreme/tests/navigation/tabPanel/focus.ts
@@ -53,7 +53,7 @@ test('[{0: selected}] -> click to multiView -> click to external button', async
     .click(tabPanel.multiView.getItem(0).element)
     .expect(tabPanel.isFocused).ok()
     .expect(tabPanel.tabs.isFocused)
-    .notOk()
+    .ok()
     .expect(tabPanel.tabs.getItem(0).isFocused)
     .ok()
     .expect(tabPanel.multiView.getItem(0).isFocused)
@@ -147,7 +147,7 @@ test('[{0: selected}, {1}] -> click to multiView -> navigate to tabs[1] -> click
     .click(tabPanel.multiView.getItem(0).element)
     .expect(tabPanel.isFocused).ok()
     .expect(tabPanel.tabs.isFocused)
-    .notOk()
+    .ok()
     .expect(tabPanel.tabs.getItem(0).isFocused)
     .ok()
     .expect(tabPanel.tabs.getItem(1).isFocused)
@@ -161,7 +161,7 @@ test('[{0: selected}, {1}] -> click to multiView -> navigate to tabs[1] -> click
     .pressKey('right')
     .expect(tabPanel.isFocused).ok()
     .expect(tabPanel.tabs.isFocused)
-    .notOk()
+    .ok()
     .expect(tabPanel.tabs.getItem(0).isFocused)
     .notOk()
     .expect(tabPanel.tabs.getItem(1).isFocused)
@@ -199,7 +199,7 @@ test('[{0: selected}] -> click to multiView -> press "tab" -> press "tab"', asyn
     .click(tabPanel.multiView.getItem(0).element)
     .expect(tabPanel.isFocused).ok()
     .expect(tabPanel.tabs.isFocused)
-    .notOk()
+    .ok()
     .expect(tabPanel.tabs.getItem(0).isFocused)
     .ok()
     .expect(tabPanel.multiView.getItem(0).isFocused)

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
@@ -32,10 +32,4 @@
   .dx-multiview-wrapper {
     border: $generic-tabs-border;
   }
-
-  &.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,26 +39,6 @@
     }
   }
 
-  &.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-wrapper {
-      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 {
       border-block-end: none;

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
@@ -16,13 +16,6 @@
   .dx-tabs-wrapper {
     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,
-    );
   }
 
   .dx-tabs .dx-tabs-scrollable {
@@ -39,26 +32,6 @@
     }
   }
 
-  &.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-wrapper {
-      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 {
       border-inline-start: none;

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
@@ -16,13 +16,6 @@
   .dx-tabs-wrapper {
     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,
-    );
   }
 
   .dx-tabs .dx-tabs-scrollable {
@@ -39,26 +32,6 @@
     }
   }
 
-  &.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-wrapper {
-      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 {
       border-inline-end: none;

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,26 +39,6 @@
     }
   }
 
-  &.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-wrapper {
-      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 {
       border-block-start: none;

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,10 +17,6 @@
 .dx-tabpanel-tab {
   padding: $generic-tabpanel-tabs-item-padding;
 
-  &.dx-state-focused::after {
-    border-color: $tabs-border-color;
-  }
-
   &.dx-state-disabled {
     &::after {
       z-index: 3;

diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-bottom.scss
@@ -14,40 +14,9 @@
 
 .dx-tabpanel-tabs-position-bottom {
   .dx-tabpanel-tab {
-    &:first-child:not(.dx-state-focused, .dx-tab-selected) {
-      &.dx-state-hover {
-        @include dx-tabs-border-mixin(
-          $generic-tabpanel-tab-border-hover-bottom,
-          null,
-          null,
-          $generic-tabs-border-transparent,
-        );
-      }
-    }
-
-    &:last-child:not(.dx-state-focused, .dx-tab-selected) {
-      &.dx-state-hover {
-        @include dx-tabs-border-mixin(
-          $generic-tabpanel-tab-border-hover-bottom,
-          $generic-tabs-border-transparent,
-          null,
-          null,
-        );
-      }
-    }
-
-    &.dx-state-hover {
-      @include dx-tabs-border-mixin(
-        $generic-tabpanel-tab-border-hover-bottom,
-        null,
-        null,
-        null,
-      );
-    }
-
     &.dx-tab-selected {
       @include dx-tabs-border-mixin(
-        none,
+        $generic-tabpanel-tab-border-transparent,
         null,
         null,
         null,
@@ -56,78 +25,8 @@
       border-block-start: $generic-tabpanel-tab-border-selected-bottom;
     }
 
-    &.dx-state-active {
-      @include dx-tabs-border-mixin(
-        $generic-tabpanel-tab-border-active-bottom,
-        null,
-        null,
-        null,
-      );
-    }
-
-    &.dx-state-focused:not(.dx-state-disabled) {
-      @include dx-tabs-border-mixin(
-        none,
-        null,
-        null,
-        null,
-      );
-
-      border-block-start: $generic-tabpanel-tab-border-focused-bottom;
-    }
-
-    &.dx-state-disabled:not(.dx-state-focused) {
-      @include dx-tabs-border-mixin(
-        null,
-        none,
-        null,
-        null,
-      );
-
-      border-block-start: $generic-tabs-border;
-    }
-
-    &.dx-state-disabled.dx-state-focused {
-      @include dx-tabs-border-mixin(
-        none,
-        null,
-        null,
-        null,
-      );
-
-      border-block-start: $generic-tabs-border-focused-disabled-bottom;
-    }
-
-    &.dx-tab-selected,
-    &.dx-state-focused,
-    &.dx-state-disabled {
+    &.dx-tab-selected {
       margin-block-start: -$generic-tabs-border-width;
     }
   }
-
-  &.dx-state-focused {
-    &.dx-disabled-focused-tab {
-      .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) {
-        @include dx-tabs-border-mixin(
-          none,
-          null,
-          null,
-          null,
-        );
-
-        border-block-start: $generic-tabs-border;
-      }
-    }
-
-    .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) {
-      @include dx-tabs-border-mixin(
-        null,
-        none,
-        null,
-        null,
-      );
-
-      border-block-start: $generic-tabs-border-focus;
-    }
-  }
 }