diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index bd21df924b1..34ed3d8dcbe 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -61,10 +61,8 @@ export interface TabsProps extends Omit { isSecondary: false, isVertical: false, isBox: false, - hasBorderBottom: true, + hasNoBorderBottom: false, leftScrollAriaLabel: 'Scroll left', rightScrollAriaLabel: 'Scroll right', component: TabsComponent.div, @@ -375,9 +373,7 @@ export class Tabs extends React.Component { isSecondary, isVertical, isBox, - hasBorderBottom, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - hasSecondaryBorderBottom, + hasNoBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, @@ -460,7 +456,7 @@ export class Tabs extends React.Component { isBox && styles.modifiers.box, showScrollButtons && styles.modifiers.scrollable, usePageInsets && styles.modifiers.pageInsets, - !hasBorderBottom && styles.modifiers.noBorderBottom, + hasNoBorderBottom && styles.modifiers.noBorderBottom, formatBreakpointMods(inset, styles), variantStyle[variant], hasOverflowTab && styles.modifiers.overflow, diff --git a/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx b/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx index 0166135bf04..29254e4e9a0 100644 --- a/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx +++ b/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx @@ -357,7 +357,7 @@ test('should render box tabs of light variant', () => { test('should render tabs with no bottom border', () => { const { asFragment } = render( - + "Tab item 1"}> Tab 1 section @@ -372,9 +372,9 @@ test('should render tabs with no bottom border', () => { expect(asFragment()).toMatchSnapshot(); }); -test('should not render tabs with secondary border bottom when not passed hasSecondaryBorderBottom', () => { +test('should render secondary tabs with no bottom border when passed hasNoBorderBottom', () => { render( - + "Tab item 1"}> Tab 1 section @@ -389,28 +389,28 @@ test('should not render tabs with secondary border bottom when not passed hasSec const tabsContainer = screen.queryByLabelText('Secondary bottom border'); - expect(tabsContainer).not.toHaveClass('pf-m-border-bottom'); + expect(tabsContainer).toHaveClass('pf-m-no-border-bottom'); }); -// test('should render tabs with secondary border bottom when passed hasSecondaryBorderBottom', () => { -// render( -// -// "Tab item 1"}> -// Tab 1 section -// -// "Tab item 2"}> -// Tab 2 section -// -// "Tab item 3"}> -// Tab 3 section -// -// -// ); -// -// const tabsContainer = screen.queryByLabelText('Secondary bottom border'); -// -// expect(tabsContainer).toHaveClass('pf-m-border-bottom'); -// }); +test('should render secondary tabs with border bottom', () => { + render( + + "Tab item 1"}> + Tab 1 section + + "Tab item 2"}> + Tab 2 section + + "Tab item 3"}> + Tab 3 section + + + ); + + const tabsContainer = screen.queryByLabelText('Secondary bottom border'); + + expect(tabsContainer).not.toHaveClass('pf-m-no-border-bottom'); +}); test('should not render scroll buttons by default', () => { render( diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index 258741aaa7d..c6aeeae04be 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -383,7 +383,6 @@ TabsOpenWithSecondaryTabsDemo = () => {