wip tabs border styling update

patternfly · Jan 9, 2023 · 49e01fb · 49e01fb
1 parent f595385
commit 49e01fb
Show file tree

Hide file tree

Showing 4 changed files with 469 additions and 32 deletions.
diff --git 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<React.HTMLProps<HTMLElement | HTMLDivEle
   isBox?: boolean;
   /** Enables vertical tab styling */
   isVertical?: boolean;
-  /** Enables border bottom tab styling on tabs. Defaults to true. To remove the bottom border, set this prop to false. */
-  hasBorderBottom?: boolean;
-  /** Enables border bottom styling for secondary tabs */
-  hasSecondaryBorderBottom?: boolean;
+  /** Disables border bottom tab styling on tabs. Defaults to false. To remove the bottom border, set this prop to true. */
+  hasNoBorderBottom?: boolean;
   /** Aria-label for the left scroll button */
   leftScrollAriaLabel?: string;
   /** Aria-label for the right scroll button */
@@ -177,7 +175,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     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<TabsProps, TabsState> {
       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<TabsProps, TabsState> {
             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
@@ -357,7 +357,7 @@ test('should render box tabs of light variant', () => {
 
 test('should render tabs with no bottom border', () => {
   const { asFragment } = render(
-    <Tabs id="noBottomBorderTabs" hasBorderBottom={false}>
+    <Tabs id="noBottomBorderTabs" hasNoBorderBottom>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -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(
-    <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border">
+    <Tabs isSecondary hasNoBorderBottom id="noBottomBorderTabs" aria-label="Secondary bottom border">
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
       </Tab>
@@ -392,25 +392,25 @@ test('should not render tabs with secondary border bottom when not passed hasSec
   expect(tabsContainer).not.toHaveClass('pf-m-border-bottom');
 });
 
-// test('should render tabs with secondary border bottom when passed hasSecondaryBorderBottom', () => {
-//   render(
-//     <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border" hasSecondaryBorderBottom>
-//       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
-//         Tab 1 section
-//       </Tab>
-//       <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
-//         Tab 2 section
-//       </Tab>
-//       <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
-//         Tab 3 section
-//       </Tab>
-//     </Tabs>
-//   );
-//
-//   const tabsContainer = screen.queryByLabelText('Secondary bottom border');
-//
-//   expect(tabsContainer).toHaveClass('pf-m-border-bottom');
-// });
+test('should render secondary tabs with border bottom', () => {
+  render(
+    <Tabs isSecondary id="noBottomBorderTabs" aria-label="Secondary bottom border">
+      <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+        Tab 1 section
+      </Tab>
+      <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+        Tab 2 section
+      </Tab>
+      <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
+        Tab 3 section
+      </Tab>
+    </Tabs>
+  );
+
+  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+
+  expect(tabsContainer).toHaveClass('pf-m-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
@@ -383,7 +383,6 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <TabContentBody>
             <Tabs
               isSecondary
-              hasSecondaryBorderBottom
               activeKey={activeTabKeySecondary}
               onSelect={handleTabClickSecondary}
               usePageInsets