@patternfly/react-core 4.263.0 → 4.264.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.263.0",
+  "version": "4.264.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.92.10",
-    "@patternfly/react-styles": "^4.91.10",
-    "@patternfly/react-tokens": "^4.93.10",
+    "@patternfly/react-icons": "^4.93.0",
+    "@patternfly/react-styles": "^4.92.0",
+    "@patternfly/react-tokens": "^4.94.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.219.2",
+    "@patternfly/patternfly": "4.221.2",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "a6cd98641632354c9e9765f4cff1303942123fb7"
+  "gitHead": "e1f95ce96852165dd4d102cd87c6b49288f01eff"
 }

package/src/components/Tabs/Tab.tsx

@@ -5,10 +5,12 @@ import { TabButton } from './TabButton';
 import { TabsContext } from './TabsContext';
 import { css } from '@patternfly/react-styles';
 import { Tooltip } from '../Tooltip';
-import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { TabAction } from './TabAction';
 
-export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title'>, OUIAProps {
+export interface TabProps
+  extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title' | 'action'>,
+    OUIAProps {
   /** content rendered inside the Tab content area. */
   children?: React.ReactNode;
   /** additional classes added to the Tab */
@@ -39,6 +41,8 @@ export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLB
   closeButtonAriaLabel?: string;
   /** @beta Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
+  /** @beta Actions rendered beside the tab content */
+  actions?: React.ReactNode;
   /** Value to set the data-ouia-component-id for the tab button.*/
   ouiaId?: number | string;
 }
@@ -59,6 +63,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   tooltip,
   closeButtonAriaLabel,
   isCloseDisabled = false,
+  actions,
   ...props
 }: TabProps) => {
   const preventedEvents = inoperableEvents.reduce(
@@ -117,26 +122,22 @@ const TabBase: React.FunctionComponent<TabProps> = ({
       className={css(
         styles.tabsItem,
         eventKey === localActiveKey && styles.modifiers.current,
-        handleTabClose && styles.modifiers.action,
-        handleTabClose && (isDisabled || isAriaDisabled) && styles.modifiers.disabled,
+        (handleTabClose || actions) && styles.modifiers.action,
+        (isDisabled || isAriaDisabled) && styles.modifiers.disabled,
         childClassName
       )}
       role="presentation"
     >
       {tooltip ? <Tooltip {...tooltip.props}>{tabButton}</Tooltip> : tabButton}
+      {actions && actions}
       {handleTabClose !== undefined && (
-        <span className={css(styles.tabsItemClose)}>
-          <Button
-            variant="plain"
-            aria-label={closeButtonAriaLabel || 'Close tab'}
-            onClick={(event: any) => handleTabClose(event, eventKey, tabContentRef)}
-            isDisabled={isCloseDisabled}
-          >
-            <span className={css(styles.tabsItemCloseIcon)}>
-              <TimesIcon />
-            </span>
-          </Button>
-        </span>
+        <TabAction
+          aria-label={closeButtonAriaLabel || 'Close tab'}
+          onClick={(event: any) => handleTabClose(event, eventKey, tabContentRef)}
+          isDisabled={isCloseDisabled}
+        >
+          <TimesIcon />
+        </TabAction>
       )}
     </li>
   );

package/src/components/Tabs/TabAction.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
+import { Button } from '../Button';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+
+export interface TabActionProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'type'>, OUIAProps {
+  /** Content rendered in the tab action */
+  children?: React.ReactNode;
+  /** Additional classes added to the tab action span */
+  className?: string;
+  /** Click callback for tab action button */
+  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /** Flag indicating if the tab action is a help action */
+  isHelpAction?: boolean;
+  /** Flag indicating if the tab action is disabled */
+  isDisabled?: boolean;
+  /** Accessible label for the tab action */
+  'aria-label'?: string;
+  /** @hide Callback for the section ref */
+  innerRef?: React.Ref<any>;
+}
+
+const TabActionBase: React.FunctionComponent<TabActionProps> = ({
+  children,
+  className,
+  onClick,
+  isHelpAction,
+  isDisabled,
+  'aria-label': ariaLabel = 'Tab action',
+  innerRef,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ouiaId,
+  ouiaSafe,
+  ...props
+}: TabActionProps) => (
+  <span className={css(styles.tabsItemAction, isHelpAction && styles.modifiers.help, className)}>
+    <Button
+      ref={innerRef}
+      type="button"
+      variant="plain"
+      aria-label={ariaLabel}
+      onClick={onClick}
+      isDisabled={isDisabled}
+      {...getOUIAProps(TabAction.displayName, ouiaId, ouiaSafe)}
+      {...props}
+    >
+      <span className={css(styles.tabsItemActionIcon)}>{children}</span>
+    </Button>
+  </span>
+);
+
+export const TabAction = React.forwardRef((props: TabActionProps, ref: React.Ref<HTMLElement>) => (
+  <TabActionBase {...props} innerRef={ref} />
+));
+
+TabAction.displayName = 'TabAction';

package/src/components/Tabs/Tabs.tsx

@@ -42,7 +42,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   defaultActiveKey?: number | string;
   /** Callback to handle tab selection */
   onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
-  /** @beta Callback to handle tab closing */
+  /** @beta Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
   onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
   /** @beta Callback for the add button. Passing this property inserts the add button */
   onAdd?: () => void;

package/src/components/Tabs/__tests__/Tab.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Tab } from '../Tab';
+import { TabAction } from '../TabAction';
 import { TabTitleText } from '../TabTitleText';
 
 test('should not render anything', () => {
@@ -11,3 +12,12 @@ test('should not render anything', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('renders tab action', () => {
+  const { asFragment } = render(
+    <Tab eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>} actions={<TabAction>test</TabAction>}>
+      Tab 2 section
+    </Tab>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap

@@ -1,5 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders tab action 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-tabs__item pf-m-action"
+    role="presentation"
+  >
+    <button
+      aria-controls="pf-tab-section-1-"
+      aria-selected="false"
+      class="pf-c-tabs__link"
+      data-ouia-component-type="PF4/TabButton"
+      data-ouia-safe="true"
+      id="pf-tab-1-"
+      role="tab"
+      type="button"
+    >
+      <span
+        class="pf-c-tabs__item-text"
+      >
+        "Tab item 2"
+      </span>
+    </button>
+    <span
+      class="pf-c-tabs__item-action"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Tab action"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <span
+          class="pf-c-tabs__item-action-icon"
+        >
+          test
+        </span>
+      </button>
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`should not render anything 1`] = `
 <DocumentFragment>
   <li

package/src/components/Tabs/examples/Tabs.md

@@ -12,6 +12,8 @@ import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 Most tab variations are available as open (default) or box style tabs. Select the 'isBox' checkbox to preview an example with box styled tabs.
 The Tabs items background can be also toggled with 'Tab light variation' checkbox.
@@ -458,7 +460,15 @@ class VerticalTabs extends React.Component {
           aria-label="Tabs in the vertical example"
           role="region"
         >
-          <Tab eventKey={0} title={<TabTitleText aria-label="vertical" role="region">Users</TabTitleText>} aria-label="Vertical example content users">
+          <Tab
+            eventKey={0}
+            title={
+              <TabTitleText aria-label="vertical" role="region">
+                Users
+              </TabTitleText>
+            }
+            aria-label="Vertical example content users"
+          >
             Users
           </Tab>
           <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
@@ -591,7 +601,11 @@ class VerticalExpandableUncontrolledTabs extends React.Component {
         aria-label="Tabs in the vertical expandable uncontrolled example"
         role="region"
       >
-        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Vertical expandable uncontrolled content users">
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Users</TabTitleText>}
+          aria-label="Vertical expandable uncontrolled content users"
+        >
           Users
         </Tab>
         <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
@@ -1206,7 +1220,12 @@ class TabsNav extends React.Component {
         component={TabsComponent.nav}
         aria-label="Tabs in the nav element example"
       >
-        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users"  aria-label="Nav element content users">
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Users</TabTitleText>}
+          href="#users"
+          aria-label="Nav element content users"
+        >
           Users
         </Tab>
         <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
@@ -1267,7 +1286,12 @@ class SecondaryTabsNav extends React.Component {
         component={TabsComponent.nav}
         aria-label="Tabs in the sub tabs with nav element example"
       >
-        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#" aria-label="Subtabs with nav content users">
+        <Tab
+          eventKey={0}
+          title={<TabTitleText>Users</TabTitleText>}
+          href="#"
+          aria-label="Subtabs with nav content users"
+        >
           <Tabs
             activeKey={this.state.activeTabKey2}
             isSecondary
@@ -1423,7 +1447,12 @@ const TabContentWithBody = () => {
 
   return (
     <React.Fragment>
-      <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Tabs in the body and padding example" role="region">
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        aria-label="Tabs in the body and padding example"
+        role="region"
+      >
         <Tab
           eventKey={0}
           title={<TabTitleText>Tab item 1</TabTitleText>}
@@ -1447,20 +1476,10 @@ const TabContentWithBody = () => {
         <TabContent eventKey={0} id="tab1SectionBodyPadding" ref={contentRef1}>
           <TabContentBody hasPadding> Tab 1 section with body and padding </TabContentBody>
         </TabContent>
-        <TabContent
-          eventKey={1}
-          id="tab2SectionBodyPadding"
-          ref={contentRef2}
-          hidden
-        >
+        <TabContent eventKey={1} id="tab2SectionBodyPadding" ref={contentRef2} hidden>
           <TabContentBody hasPadding> Tab 2 section with body and padding </TabContentBody>
         </TabContent>
-        <TabContent
-          eventKey={2}
-          id="tab3SectionBodyPadding"
-          ref={contentRef3}
-          hidden
-        >
+        <TabContent eventKey={2} id="tab3SectionBodyPadding" ref={contentRef3} hidden>
           <TabContentBody hasPadding> Tab 3 section with body and padding </TabContentBody>
         </TabContent>
       </div>
@@ -1597,11 +1616,26 @@ class ToggledSeparateContent extends React.Component {
           aria-label="Tabs in the toggled separate content example"
           role="region"
         >
-          <Tab eventKey={0} title="Tab item 1" tabContentId="tab1SectionSeparateContent" tabContentRef={this.contentRef1} />
+          <Tab
+            eventKey={0}
+            title="Tab item 1"
+            tabContentId="tab1SectionSeparateContent"
+            tabContentRef={this.contentRef1}
+          />
           {!isTab2Hidden && (
-            <Tab eventKey={1} title="Tab item 2" tabContentId="tab2SectionSeparateContent" tabContentRef={this.contentRef2} />
+            <Tab
+              eventKey={1}
+              title="Tab item 2"
+              tabContentId="tab2SectionSeparateContent"
+              tabContentRef={this.contentRef2}
+            />
           )}
-          <Tab eventKey={2} title="Tab item 3" tabContentId="tab3SectionSeparateContent" tabContentRef={this.contentRef3} />
+          <Tab
+            eventKey={2}
+            title="Tab item 3"
+            tabContentId="tab3SectionSeparateContent"
+            tabContentRef={this.contentRef3}
+          />
         </Tabs>
         <div>
           <TabContent
@@ -1645,3 +1679,13 @@ To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable t
 
 ```ts file="./TabsDynamic.tsx" isBeta
 ```
+
+### Help action
+
+```ts file="./TabsHelp.tsx" isBeta
+```
+
+### Help and close actions
+
+```ts file="./TabsHelpAndClose.tsx" isBeta
+```

package/src/components/Tabs/examples/TabsHelp.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, TabAction, Popover } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const TabsHelp: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
+
+  const tabs = ['Users', 'Containers', 'Database', 'Disabled', 'ARIA disabled', 'Help disabled'];
+
+  const helpPopover = (header: string, popoverRef: React.RefObject<any>) => (
+    <Popover
+      headerContent={<div>{header}</div>}
+      bodyContent={
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+        </div>
+      }
+      footerContent="Popover footer"
+      reference={popoverRef}
+    />
+  );
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={(event: any, tabIndex: string | number) => setActiveTabKey(tabIndex as number)}
+      aria-label="Tabs in the help action example"
+      role="region"
+    >
+      {tabs.map((tab, index) => {
+        const ref = React.createRef<HTMLElement>();
+
+        return (
+          <Tab
+            key={index}
+            eventKey={index}
+            aria-label={`Help action content - ${tab}`}
+            title={<TabTitleText>{tab}</TabTitleText>}
+            {...(tab === 'Disabled' && { isDisabled: true })}
+            {...(tab === 'ARIA disabled' && { isAriaDisabled: true })}
+            actions={
+              <>
+                <TabAction
+                  isHelpAction
+                  aria-label={`Help action for ${tab}`}
+                  ref={ref}
+                  {...(tab === 'Help disabled' && { isDisabled: true })}
+                >
+                  <HelpIcon />
+                </TabAction>
+                {helpPopover(`Help popover for ${tab}`, ref)}
+              </>
+            }
+          >
+            {tab}
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};

package/src/components/Tabs/examples/TabsHelpAndClose.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Popover, TabAction } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const TabsHelpAndClose: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
+  const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
+  const tabComponentRef = React.useRef<any>();
+  const firstMount = React.useRef(true);
+
+  const onClose = (event: any, tabIndex: string | number) => {
+    const tabIndexNum = tabIndex as number;
+    let nextTabIndex = activeTabKey;
+    if (tabIndexNum < activeTabKey) {
+      // if a preceding tab is closing, keep focus on the new index of the current tab
+      nextTabIndex = activeTabKey - 1 > 0 ? activeTabKey - 1 : 0;
+    } else if (activeTabKey === tabs.length - 1) {
+      // if the closing tab is the last tab, focus the preceding tab
+      nextTabIndex = tabs.length - 2 > 0 ? tabs.length - 2 : 0;
+    }
+    setActiveTabKey(nextTabIndex);
+    setTabs(tabs.filter((tab, index) => index !== tabIndex));
+  };
+
+  const helpPopover = (header: string, popoverRef: React.RefObject<any>) => (
+    <Popover
+      headerContent={<div>{header}</div>}
+      bodyContent={
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+        </div>
+      }
+      footerContent="Popover footer"
+      reference={popoverRef}
+    />
+  );
+
+  React.useEffect(() => {
+    if (firstMount.current) {
+      firstMount.current = false;
+      return;
+    } else {
+      const first = tabComponentRef.current.tabList.current.childNodes[activeTabKey];
+      first && first.firstChild.focus();
+    }
+  }, [tabs]);
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={(event: any, tabIndex: string | number) => setActiveTabKey(tabIndex as number)}
+      aria-label="Tabs in the help enabled and closeable example"
+      role="region"
+      ref={tabComponentRef}
+    >
+      {tabs.map((tab, index) => {
+        const ref = React.createRef<HTMLElement>();
+
+        return (
+          <Tab
+            key={index}
+            eventKey={index}
+            aria-label={`Help action and closable content - ${tab}`}
+            title={<TabTitleText>{tab}</TabTitleText>}
+            actions={
+              <>
+                <TabAction isHelpAction aria-label={`Help for ${tab}`} ref={ref}>
+                  <HelpIcon />
+                </TabAction>
+                <TabAction aria-label={`Close ${tab}`} onClick={e => onClose(e, index)} isDisabled={tabs.length === 1}>
+                  <TimesIcon />
+                </TabAction>
+                {helpPopover(`Help popover for ${tab}`, ref)}
+              </>
+            }
+          >
+            {tab}
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};

package/src/components/Tabs/index.ts

@@ -1,4 +1,5 @@
 export * from './Tab';
+export * from './TabAction';
 export * from './Tabs';
 export * from './TabContent';
 export * from './TabContentBody';

package/src/demos/Tabs.md

@@ -453,17 +453,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
 ```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx"
 ```
 
-### Tables and tabs, auto width tabs
-
-```js isFullscreen file="./examples/Tabs/TabsAndTablesAutoWidthTabs.tsx"
-```
-
 ### Modal tabs
 
 ```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
 ```
-
-### Gray tabs
-
-```js isFullscreen file="./examples/Tabs/GrayTabs.tsx"
-```

package/src/demos/examples/DashboardWrapper.js

@@ -33,6 +33,7 @@ export const PageTemplateTitle = (
     </TextContent>
   </PageSection>
 );
+
 export default class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -47,8 +47,8 @@ const products: Product[] = [
 ];
 
 export const ModalTabs: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [selectedProduct, setSelectedProduct] = React.useState<Product>();
+  const [isModalOpen, setIsModalOpen] = React.useState(true);
+  const [selectedProduct, setSelectedProduct] = React.useState<Product>(products[0]);
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
 
   const onCardClick = React.useCallback(
@@ -114,7 +114,7 @@ export const ModalTabs: React.FunctionComponent = () => {
         <Modal variant={ModalVariant.small} title={selectedProduct.name} isOpen={isModalOpen} onClose={closeModal}>
           <Grid hasGutter>
             <GridItem>
-              <Tabs activeKey={activeTabKey} onSelect={onTabSelect} isSecondary>
+              <Tabs activeKey={activeTabKey} onSelect={onTabSelect} isSecondary hasSecondaryBorderBottom>
                 <Tab eventKey={0} tabContentId="details-tab" title={<TabTitleText>Details</TabTitleText>} />
                 <Tab eventKey={1} tabContentId="doc-tab" title={<TabTitleText>Documentation</TabTitleText>} />
               </Tabs>

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -12,6 +12,7 @@ import {
   TabContentBody,
   TabTitleText,
   Title,
+  TitleSizes,
   Flex,
   FlexItem
 } from '@patternfly/react-core';
@@ -32,7 +33,9 @@ export const NestedTabs: React.FunctionComponent = () => {
       <GridItem xl={8} md={6}>
         <Card>
           <CardHeader>
-            <Title headingLevel="h2">Status</Title>
+            <Title headingLevel="h2" size={TitleSizes.lg}>
+              Status
+            </Title>
           </CardHeader>
           <CardBody>
             <Flex direction={{ default: 'column' }}>
@@ -40,6 +43,7 @@ export const NestedTabs: React.FunctionComponent = () => {
                 <Tabs
                   activeKey={activeNestedTabKey}
                   isSecondary
+                  hasSecondaryBorderBottom
                   onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
                   id="nested-tabs-example-nested-tabs-list"
                 >
@@ -108,14 +112,18 @@ export const NestedTabs: React.FunctionComponent = () => {
           <FlexItem flex={{ default: 'flex_1' }}>
             <Card isFullHeight>
               <CardHeader>
-                <Title headingLevel="h2">Title of Card</Title>
+                <Title headingLevel="h2" size={TitleSizes.lg}>
+                  Title of card
+                </Title>
               </CardHeader>
             </Card>
           </FlexItem>
           <FlexItem flex={{ default: 'flex_1' }}>
             <Card isFullHeight>
               <CardHeader>
-                <Title headingLevel="h2">Title of Card</Title>
+                <Title headingLevel="h2" size={TitleSizes.lg}>
+                  Title of card
+                </Title>
               </CardHeader>
             </Card>
           </FlexItem>