diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop.png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop.png index b70d3dd5ce5e..631b55833e07 100644 Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop.png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop.png differ diff --git a/e2e/testcafe-devextreme/tests/common/etalons/SVG icon set (material-blue-light).png b/e2e/testcafe-devextreme/tests/common/etalons/SVG icon set (material-blue-light).png index 144d78c03ccf..5a1866c88b10 100644 Binary files a/e2e/testcafe-devextreme/tests/common/etalons/SVG icon set (material-blue-light).png and b/e2e/testcafe-devextreme/tests/common/etalons/SVG icon set (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light).png b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light).png index 10745bc5cec6..48c10d7892a8 100644 Binary files a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light).png and b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light-compact).png b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light-compact).png index f10160d1ee05..b4fd4897b04f 100644 Binary files a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light-compact).png and b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (generic-light-compact).png differ diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light).png b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light).png index ff788651393f..50f72ca23ae1 100644 Binary files a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light).png and b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light-compact).png index 0e7680e08c3b..586bffb00252 100644 Binary files a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (material-blue-light-compact).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent-blue-light).png index b5c040ec63b7..210250c65b8f 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (generic-light).png index 0b6ccc4463ef..fd8d93b519ae 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-blue-light).png index 0354930ff578..5845c86abdb1 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (generic-light).png index f329bc307d34..475934e20e85 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/common.ts b/e2e/testcafe-devextreme/tests/navigation/tabPanel/common.ts index 6df149a9b632..e19a67d5bf2a 100644 --- 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/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,rtl=false (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,rtl=false (generic-light).png index 04fe1ccfaa65..15edd175374e 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,rtl=false (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,rtl=false (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,rtl=true (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,rtl=true (generic-light).png index 64b5ea60cade..55624778672c 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,rtl=true (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,rtl=true (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=bottom (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=bottom (generic-light).png index 6458cc639801..d42ca4d93bd8 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=bottom (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=bottom (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=left (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=left (generic-light).png index c1a19ce45e92..d7fecceabc0a 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=left (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=left (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=right (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=right (generic-light).png index 76b9498141d8..7a10ac19df24 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=right (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel 1 item active,tabsPosition=right (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,rtl=false (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,rtl=false (generic-light).png index 98774f469426..c469f2c67fec 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,rtl=false (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,rtl=false (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,rtl=true (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,rtl=true (generic-light).png index 81742c62dbd8..bb78740def06 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,rtl=true (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,rtl=true (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=bottom (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=bottom (generic-light).png index 1291ef232dfa..2465f19dd585 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=bottom (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=bottom (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=left (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=left (generic-light).png index db7b67e43d74..b61f36d5cff7 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=left (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=left (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=right (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=right (generic-light).png index 311394af815e..68bb1902eeca 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=right (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel available item focused,tabsPosition=right (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (fluent-blue-light).png new file mode 100644 index 000000000000..cfc5cff05ea8 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (generic-light).png new file mode 100644 index 000000000000..afc9d01a0f9c Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (material-blue-light).png new file mode 100644 index 000000000000..37e51d17611d Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=bottom (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (fluent-blue-light).png new file mode 100644 index 000000000000..e520577c7e8d Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (generic-light).png new file mode 100644 index 000000000000..ff15d8667ab1 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (material-blue-light).png new file mode 100644 index 000000000000..c8a340e065b0 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=left (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (fluent-blue-light).png new file mode 100644 index 000000000000..974d8f9b41e6 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (generic-light).png new file mode 100644 index 000000000000..5b2ab6e16fe3 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (material-blue-light).png new file mode 100644 index 000000000000..075a54c6245e Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel disabled item is focused,tabsPosition=right (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (fluent-blue-light).png new file mode 100644 index 000000000000..850159a7db36 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (generic-light).png new file mode 100644 index 000000000000..3d268e68b418 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (material-blue-light).png new file mode 100644 index 000000000000..72b28da96560 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=bottom (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (fluent-blue-light).png new file mode 100644 index 000000000000..784b7e12e998 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (generic-light).png new file mode 100644 index 000000000000..5d88d4650685 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (material-blue-light).png new file mode 100644 index 000000000000..8907fc5d6fc1 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=left (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (fluent-blue-light).png new file mode 100644 index 000000000000..08ee156c101c Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (generic-light).png new file mode 100644 index 000000000000..57bb5c76c089 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (material-blue-light).png new file mode 100644 index 000000000000..0424f1f964c8 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus not selected item,tabsPosition=right (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (fluent-blue-light).png new file mode 100644 index 000000000000..cfc5cff05ea8 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (generic-light).png new file mode 100644 index 000000000000..497369fea5f2 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (material-blue-light).png new file mode 100644 index 000000000000..4079c9a39d14 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=bottom (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (fluent-blue-light).png new file mode 100644 index 000000000000..e520577c7e8d Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (generic-light).png new file mode 100644 index 000000000000..fa34d14601b7 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (material-blue-light).png new file mode 100644 index 000000000000..1f0ceb1f07e3 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=left (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (fluent-blue-light).png new file mode 100644 index 000000000000..974d8f9b41e6 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (generic-light).png new file mode 100644 index 000000000000..109165e24bc2 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (material-blue-light).png new file mode 100644 index 000000000000..6228250e072c Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview,tabsPosition=right (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long not stretched tabs,rtl=false (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long not stretched tabs,rtl=false (generic-light).png index a212044aadec..c96a52662583 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long not stretched tabs,rtl=false (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long not stretched tabs,rtl=false (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long not stretched tabs,rtl=true (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long not stretched tabs,rtl=true (generic-light).png index c7544ebb0472..6e0742031cf7 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long not stretched tabs,rtl=true (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long not stretched tabs,rtl=true (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=false (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=false (generic-light).png index 9a5c502b7d0d..e907e83d16c4 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=false (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=false (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=true (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=true (generic-light).png index 830e169eaf37..69bf013b350e 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=true (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel long tabs,2 tab selected,rtl=true (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with expanded tabs,rtl=false (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with expanded tabs,rtl=false (generic-light).png index 78de397b34c8..8afebbda6b89 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with expanded tabs,rtl=false (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with expanded tabs,rtl=false (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with expanded tabs,rtl=true (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with expanded tabs,rtl=true (generic-light).png index 2624319bbea0..19966ed4f910 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with expanded tabs,rtl=true (generic-light).png and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with expanded tabs,rtl=true (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/focus.ts b/e2e/testcafe-devextreme/tests/navigation/tabPanel/focus.ts index 75822103922d..dd44fd54fed4 100644 --- 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 index 736ad32a8ec0..811ca9a49aa4 100644 --- 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/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss index 64a62f8b833e..07e646602ccd 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab-panel/_position-bottom.scss +++ b/packages/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 index b8c95fc80bb6..20c032b5517d 100644 --- 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 index 206c1b932d4c..6e7cfa075b8b 100644 --- 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 index dc542ef3e73e..3a4543fc7fe1 100644 --- 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 index 6184d5d5379a..df78a5e269fe 100644 --- 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 index c503a6e504f8..d539811832d9 100644 --- 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; - } - } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss index 5118c927a73c..94c27ec9110a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-left.scss @@ -14,41 +14,10 @@ .dx-tabpanel-tabs-position-left { .dx-tabpanel-tab { - &:first-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - $generic-tabpanel-tab-border-hover-bottom, - $generic-tabs-border-transparent, - null, - ); - } - } - - &:last-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - $generic-tabs-border-transparent, - $generic-tabpanel-tab-border-hover-bottom, - null, - null, - ); - } - } - - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - $generic-tabpanel-tab-border-hover-bottom, - null, - null, - ); - } - &.dx-tab-selected { @include dx-tabs-border-mixin( null, - none, + $generic-tabpanel-tab-border-transparent, null, null, ); @@ -56,82 +25,8 @@ border-inline-end: $generic-tabpanel-tab-border-selected-bottom; } - &.dx-state-active { - @include dx-tabs-border-mixin( - null, - $generic-tabpanel-tab-border-active-bottom, - null, - null, - ); - } - - &.dx-state-focused:not(.dx-state-disabled) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); - - border-inline-end: $generic-tabpanel-tab-border-focused-bottom; - } - - &.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); - - border-inline-end: $generic-tabs-border; - } - - &.dx-state-disabled.dx-state-focused { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); - - border-inline-end: $generic-tabs-border-focused-disabled-bottom; - } - - &.dx-tab-selected, - &.dx-state-focused, - &.dx-state-disabled { + &.dx-tab-selected { margin-inline-end: -$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( - null, - none, - null, - null, - ); - - border-inline-end: $generic-tabs-border; - } - } - - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); - - border-inline-end: $generic-tabs-border-focus; - } - - .dx-tabpanel-tab.dx-focused-disabled-next-tab::after { - border-inline-end: none; - } - } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss index 9d771e6ba126..df6e7a5ef020 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-right.scss @@ -14,124 +14,19 @@ .dx-tabpanel-tabs-position-right { .dx-tabpanel-tab { - &:first-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - null, - $generic-tabs-border-transparent, - $generic-tabpanel-tab-border-hover-bottom, - ); - } - } - - &:last-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - $generic-tabs-border-transparent, - null, - null, - $generic-tabpanel-tab-border-hover-bottom, - ); - } - } - - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - null, - null, - $generic-tabpanel-tab-border-hover-bottom, - ); - } - &.dx-tab-selected { @include dx-tabs-border-mixin( null, null, null, - none, + $generic-tabpanel-tab-border-transparent, ); border-inline-start: $generic-tabpanel-tab-border-selected-bottom; } - &.dx-state-active { - @include dx-tabs-border-mixin( - null, - null, - null, - $generic-tabpanel-tab-border-active-bottom, - ); - } - - &.dx-state-focused:not(.dx-state-disabled) { - @include dx-tabs-border-mixin( - null, - null, - null, - none, - ); - - border-inline-start: $generic-tabpanel-tab-border-focused-bottom; - } - - &.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); - - border-inline-start: $generic-tabs-border; - } - - &.dx-state-disabled.dx-state-focused { - @include dx-tabs-border-mixin( - null, - null, - null, - none, - ); - - border-inline-start: $generic-tabs-border-focused-disabled-bottom; - } - - &.dx-tab-selected, - &.dx-state-focused, - &.dx-state-disabled { + &.dx-tab-selected { margin-inline-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( - null, - null, - null, - none, - ); - - border-inline-start: $generic-tabs-border; - } - } - - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - none, - null, - null, - null, - ); - - border-inline-start: $generic-tabs-border-focus; - } - - .dx-tabpanel-tab.dx-focused-disabled-next-tab::after { - border-inline-start: none; - } - } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss index 60baae3d6460..3a8bd9eb4d1c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/layout/tab/_position-top.scss @@ -14,120 +14,19 @@ .dx-tabpanel-tabs-position-top { .dx-tabpanel-tab { - &:first-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - null, - $generic-tabpanel-tab-border-hover-bottom, - $generic-tabs-border-transparent, - ); - } - } - - &:last-child:not(.dx-state-focused, .dx-tab-selected) { - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - $generic-tabs-border-transparent, - $generic-tabpanel-tab-border-hover-bottom, - null, - ); - } - } - - &.dx-state-hover { - @include dx-tabs-border-mixin( - null, - null, - $generic-tabpanel-tab-border-hover-bottom, - null, - ); - } - &.dx-tab-selected { @include dx-tabs-border-mixin( null, null, - none, + $generic-tabpanel-tab-border-transparent, null, ); border-block-end: $generic-tabpanel-tab-border-selected-bottom; } - &.dx-state-active { - @include dx-tabs-border-mixin( - null, - null, - $generic-tabpanel-tab-border-active-bottom, - null, - ); - } - - &.dx-state-focused:not(.dx-state-disabled) { - @include dx-tabs-border-mixin( - null, - null, - none, - null, - ); - - border-block-end: $generic-tabpanel-tab-border-focused-bottom; - } - - &.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); - - border-block-end: $generic-tabs-border; - } - - &.dx-state-disabled.dx-state-focused { - @include dx-tabs-border-mixin( - null, - null, - none, - null, - ); - - border-block-end: $generic-tabs-border-focused-disabled-bottom; - } - - &.dx-tab-selected, - &.dx-state-focused, - &.dx-state-disabled { + &.dx-tab-selected { margin-bottom: -$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( - null, - null, - none, - null, - ); - - border-block-end: $generic-tabs-border; - } - } - - .dx-tabpanel-tab.dx-state-disabled:not(.dx-state-focused) { - @include dx-tabs-border-mixin( - null, - none, - null, - null, - ); - - border-block-end: $generic-tabs-border-focus; - } - } } diff --git a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss index 16d7c370a392..64a7c82b7c84 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabPanel/variables/_borders.scss @@ -7,7 +7,7 @@ // adduse -$generic-tabpanel-tab-border-hover-bottom: null !default; +$generic-tabpanel-tab-border-transparent: null !default; $generic-tabpanel-tab-border-selected-bottom: null !default; $generic-tabpanel-tab-border-active-bottom: null !default; @@ -17,7 +17,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; @if $color == "carmine" { - $generic-tabpanel-tab-border-hover-bottom: $generic-tabs-border-width solid transparent !default; + $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; @@ -27,7 +27,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; } @if $color == "contrast" { - $generic-tabpanel-tab-border-hover-bottom: $generic-tabs-border-width solid transparent !default; + $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; @@ -37,7 +37,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; } @if $color == "dark" { - $generic-tabpanel-tab-border-hover-bottom: $generic-tabs-border-width solid transparent !default; + $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; @@ -47,7 +47,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; } @if $color == "darkmoon" { - $generic-tabpanel-tab-border-hover-bottom: $generic-tabs-border-width solid transparent !default; + $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; @@ -57,7 +57,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; } @if $color == "darkviolet" { - $generic-tabpanel-tab-border-hover-bottom: $generic-tabs-border-width solid transparent !default; + $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; @@ -67,7 +67,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; } @if $color == "greenmist" { - $generic-tabpanel-tab-border-hover-bottom: $generic-tabs-border-width solid transparent !default; + $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; @@ -77,7 +77,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; } @if $color == "light" { - $generic-tabpanel-tab-border-hover-bottom: $generic-tabs-border-width solid transparent !default; + $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; @@ -87,7 +87,7 @@ $generic-tabpanel-tab-border-focused-right: null !default; } @if $color == "softblue" { - $generic-tabpanel-tab-border-hover-bottom: $generic-tabs-border-width solid transparent !default; + $generic-tabpanel-tab-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabpanel-tab-border-selected-bottom: $generic-tabs-border-width solid $tabs-tab-selected-bg !default; $generic-tabpanel-tab-border-active-bottom: $generic-tabs-border-width solid $tabs-focused-border-color !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss index a591b0ef0734..7156075ab05a 100644 --- a/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss +++ b/packages/devextreme-scss/scss/widgets/generic/tabs/variables/borders/_borders-horizontal.scss @@ -10,7 +10,6 @@ $generic-tabs-border: $generic-tabs-border-width solid $tabs-border-color !default; -$generic-tabs-border-focus: $generic-tabs-border-width solid $tabs-focused-border-color !default; $generic-tabs-border-transparent: $generic-tabs-border-width solid transparent !default; $generic-tabs-border-hover-top: null !default; diff --git a/packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts b/packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts index 2fecc3b5a650..3acd280a8031 100644 --- a/packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts +++ b/packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts @@ -397,6 +397,7 @@ const TabPanel = MultiView.inherit({ } if (isMultiViewTarget) { + this._toggleFocusClass(isFocused, this._tabs.$element()); this._toggleFocusClass(isFocused, this._tabs.option('focusedElement')); } },