feat(tabs): add secondary border-bottom variation, update demos (#7311)

* feat(tabs): add secondary border-bottom variation, update demos * improve prop description Co-authored-by: Jenny <[email protected]> * sentence case test aria labels Co-authored-by: Jenny <[email protected]>
patternfly · May 5, 2022 · 3532fc6 · 3532fc6
1 parent 29bbfb4
commit 3532fc6
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 59 deletions.
diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx
@@ -41,8 +41,10 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   isBox?: boolean;
   /** Enables vertical tab styling */
   isVertical?: boolean;
-  /** Enables no border bottom tab styling */
+  /** 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;
   /** Aria-label for the left scroll button */
   leftScrollAriaLabel?: string;
   /** Aria-label for the right scroll button */
@@ -292,6 +294,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       isVertical,
       isBox,
       hasBorderBottom,
+      hasSecondaryBorderBottom,
       leftScrollAriaLabel,
       rightScrollAriaLabel,
       'aria-label': ariaLabel,
@@ -361,6 +364,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             showScrollButtons && !isVertical && styles.modifiers.scrollable,
             usePageInsets && styles.modifiers.pageInsets,
             !hasBorderBottom && styles.modifiers.noBorderBottom,
+            hasSecondaryBorderBottom && styles.modifiers.borderBottom,
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
             className

diff --git a/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx b/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Tabs } from '../Tabs';
 import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
@@ -350,3 +350,42 @@ test('should render tabs with no bottom border', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
+test('should not render tabs with secondary border bottom when not passed hasSecondaryBorderBottom', () => {
+  render(
+    <Tabs 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).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');
+});
diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
@@ -378,65 +378,60 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
-        <Flex direction={{ default: 'column' }}>
-          <FlexItem>
-            <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
-              <TabContentBody>
-                <Tabs
-                  isSecondary
-                  activeKey={activeTabKeySecondary}
-                  onSelect={handleTabClickSecondary}
-                  inset={{ default: 'insetNone' }}
-                  id="open-with-secondary-tabs-example-tabs-list-secondary"
-                >
-                  <Tab
-                    eventKey={10}
-                    title={<TabTitleText>Pod information</TabTitleText>}
-                    tabContentId={`tabContent${10}`}
-                  />
-                  <Tab
-                    eventKey={11}
-                    title={<TabTitleText>Editable aspects</TabTitleText>}
-                    tabContentId={`tabContent${11}`}
-                  />
-                </Tabs>
-                <TabContent
-                  key={10}
-                  eventKey={10}
-                  id={`tabContent${10}`}
-                  activeKey={activeTabKeySecondary}
-                  hidden={10 !== activeTabKeySecondary}
-                >
-                  <TabContentBody>{tabContent}</TabContentBody>
-                </TabContent>
-                <TabContent
-                  key={11}
-                  eventKey={11}
-                  id={`tabContent${11}`}
-                  activeKey={activeTabKeySecondary}
-                  hidden={11 !== activeTabKeySecondary}
-                >
-                  <TabContentBody>Editable aspects</TabContentBody>
-                </TabContent>
-              </TabContentBody>
-            </TabContent>
-          </FlexItem>
-          <FlexItem>
-            <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
-              <TabContentBody>YAML panel</TabContentBody>
-            </TabContent>
-            <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
-              <TabContentBody>Environment panel</TabContentBody>
-            </TabContent>
-            <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
-              <TabContentBody>Events panel</TabContentBody>
+      <PageSection isWidthLimited variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>
+            <Tabs
+              isSecondary
+              hasSecondaryBorderBottom
+              activeKey={activeTabKeySecondary}
+              onSelect={handleTabClickSecondary}
+              usePageInsets
+              id="open-with-secondary-tabs-example-tabs-list-secondary"
+            >
+              <Tab
+                eventKey={10}
+                title={<TabTitleText>Pod information</TabTitleText>}
+                tabContentId={`tabContent${10}`}
+              />
+              <Tab
+                eventKey={11}
+                title={<TabTitleText>Editable aspects</TabTitleText>}
+                tabContentId={`tabContent${11}`}
+              />
+            </Tabs>
+            <TabContent
+              key={10}
+              eventKey={10}
+              id={`tabContent${10}`}
+              activeKey={activeTabKeySecondary}
+              hidden={10 !== activeTabKeySecondary}
+            >
+              <TabContentBody hasPadding>{tabContent}</TabContentBody>
             </TabContent>
-            <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
-              <TabContentBody>Terminal panel</TabContentBody>
+            <TabContent
+              key={11}
+              eventKey={11}
+              id={`tabContent${11}`}
+              activeKey={activeTabKeySecondary}
+              hidden={11 !== activeTabKeySecondary}
+            >
+              <TabContentBody>Editable aspects</TabContentBody>
             </TabContent>
-          </FlexItem>
-        </Flex>
+          </TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>YAML panel</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Environment panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Events panel</TabContentBody>
+        </TabContent>
+        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
+          <TabContentBody>Terminal panel</TabContentBody>
+        </TabContent>
       </PageSection>
     </DashboardWrapper>
   );
@@ -467,6 +462,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
 
 ```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
 ```
+
 ### Gray tabs
 
 ```js isFullscreen file="./examples/Tabs/GrayTabs.tsx"