@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.21

package/src/components/Nav/examples/Nav.md

@@ -50,12 +50,6 @@ The following example shows two navigation groups, each with a `title` prop pass
 
 ```
 
-### Tertiary (deprecated)
-
-```ts file="./NavLegacyTertiary.tsx" isDeprecated
-
-```
-
 ### Flyout
 
 A flyout should be a `Menu` component. Press `space` or `right arrow` to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press `escape` or `left arrow` to close a flyout.

package/src/components/Nav/examples/NavExpandable.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
+import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 
 export const NavExpandableExample: React.FunctionComponent = () => {
   const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1');
@@ -49,7 +49,6 @@ export const NavExpandableExample: React.FunctionComponent = () => {
           >
             Subnav 1 Link 1
           </NavItem>
-          <NavItemSeparator />
           <NavItem
             preventDefault
             id="expandable-2"

package/src/components/Nav/examples/NavFlyout.tsx

@@ -22,7 +22,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-${depth}`}>
             Next menu
           </MenuItem>
-          {Array.apply(0, Array(numFlyouts - depth)).map((_item, index: number) => (
+          {Array.from({ length: numFlyouts - depth }).map((_value, index) => (
             <MenuItem
               onClick={onMenuItemClick}
               key={`${depth}-${index}`}

package/src/components/Nav/examples/NavHorizontalSubNav.tsx

@@ -11,7 +11,7 @@ export const NavHorizontalSubNav: React.FunctionComponent = () => {
   return (
     <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function (_item, index: number) {
+        {Array.from({ length: 10 }).map((_value, index) => {
           const num = index + 1;
           return (
             <NavItem

package/src/components/Nav/examples/nav.css

@@ -1,17 +1,3 @@
-#ws-react-c-navigation-basic,
-#ws-react-c-navigation-grouped,
-#ws-react-c-navigation-default,
-#ws-react-c-navigation-expandable,
-#ws-react-c-navigation-expandable-wsubnavigation-titles,
-#ws-react-c-navigation-mixed,
-#ws-react-c-navigation-expandable-third-level,
-#ws-react-c-navigation-link-text,
-#ws-react-c-navigation-horizontal-subnav,
-#ws-react-c-navigation-flyout,
-#ws-react-c-navigation-drilldown {
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
 #ws-react-c-navigation-flyout,
 #ws-react-c-navigation-drilldown {
   width: 300px;

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/NotificationBadge/notification-badge';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
@@ -42,20 +40,26 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
   isExpanded = false,
   ...props
 }: NotificationBadgeProps) => {
-  let notificationChild = icon;
-  if (children !== undefined) {
-    notificationChild = children;
-  } else if (variant === NotificationBadgeVariant.attention) {
-    notificationChild = attentionIcon;
-  }
+  const hasCount = count > 0;
+  const hasChildren = children !== undefined;
+  const isAttention = variant === NotificationBadgeVariant.attention;
+
+  const notificationIcon = isAttention ? attentionIcon : icon;
+  const notificationContent = hasChildren ? children : notificationIcon;
+
+  const [iconProp, notificationChild] = hasCount ? [notificationContent, count] : [undefined, notificationContent];
+
   return (
-    <Button variant={ButtonVariant.plain} className={className} aria-expanded={isExpanded} {...props}>
-      <span
-        className={css(styles.notificationBadge, styles.modifiers[variant], isExpanded && styles.modifiers.expanded)}
-      >
-        {notificationChild}
-        {count > 0 && <span className={css(`${styles.notificationBadge}__count`)}>{count}</span>}
-      </span>
+    <Button
+      variant={ButtonVariant.stateful}
+      className={className}
+      aria-expanded={isExpanded}
+      state={variant}
+      isClicked={isExpanded}
+      icon={iconProp}
+      {...props}
+    >
+      {notificationChild}
     </Button>
   );
 };

package/src/components/NotificationBadge/__tests__/NotificationBadge.test.tsx

@@ -2,7 +2,7 @@ import { NotificationBadge } from '../NotificationBadge';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-Object.values([true, false]).forEach(attentionVariant => {
+Object.values([true, false]).forEach((attentionVariant) => {
   test(`${attentionVariant} NotificationBadge needs attention`, () => {
     const { asFragment } = render(
       <NotificationBadge variant="attention">
@@ -30,14 +30,14 @@ test('Renders with aria-expanded="true" when isExpanded is passed in.', () => {
   expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
 });
 
-test('Does not render with .pf-m-expanded when isExpanded is not passed in.', () => {
+test('Does not render with .pf-m-clicked when isExpanded is not passed in.', () => {
   render(<NotificationBadge />);
 
-  expect(screen.getByRole('button').firstChild).not.toHaveClass('pf-m-expanded');
+  expect(screen.getByRole('button')).not.toHaveClass('pf-m-clicked');
 });
 
-test('Renders with .pf-m-expanded when isExpanded is passed in.', () => {
+test('Renders with .pf-m-clicked when isExpanded is passed in.', () => {
   render(<NotificationBadge isExpanded />);
 
-  expect(screen.getByRole('button').firstChild).toHaveClass('pf-m-expanded');
+  expect(screen.getByRole('button')).toHaveClass('pf-m-clicked');
 });

package/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap

@@ -5,14 +5,14 @@ exports[`NotificationBadge count 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-v5-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-3"
+    class="pf-v5-c-button pf-m-stateful pf-m-read"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-3"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
     <span
-      class="pf-v5-c-notification-badge pf-m-read"
+      class="pf-v5-c-button__icon pf-m-start"
     >
       <svg
         aria-hidden="true"
@@ -27,12 +27,8 @@ exports[`NotificationBadge count 1`] = `
           d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
         />
       </svg>
-      <span
-        class="pf-v5-c-notification-badge__count"
-      >
-        3
-      </span>
     </span>
+    3
   </button>
 </DocumentFragment>
 `;
@@ -42,17 +38,13 @@ exports[`false NotificationBadge needs attention 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-v5-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-2"
+    class="pf-v5-c-button pf-m-stateful pf-m-attention"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-2"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
-    <span
-      class="pf-v5-c-notification-badge pf-m-attention"
-    >
-      does not need attention Badge
-    </span>
+    does not need attention Badge
   </button>
 </DocumentFragment>
 `;
@@ -62,17 +54,13 @@ exports[`true NotificationBadge needs attention 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    class="pf-v5-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
+    class="pf-v5-c-button pf-m-stateful pf-m-attention"
+    data-ouia-component-id="OUIA-Generated-Button-stateful-1"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
-    <span
-      class="pf-v5-c-notification-badge pf-m-attention"
-    >
-      needs attention Badge
-    </span>
+    needs attention Badge
   </button>
 </DocumentFragment>
 `;

package/src/components/NotificationBadge/examples/NotificationBadge.md

@@ -6,7 +6,6 @@ propComponents: ['NotificationBadge']
 ---
 
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import './notificationBadge.css';
 
 ## Examples
 

package/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx

@@ -19,7 +19,7 @@ export const NotificationBadgeBasic: React.FunctionComponent = () => {
   };
 
   return (
-    <div className="pf-t-dark">
+    <>
       <NotificationBadge
         variant={NotificationBadgeVariant.read}
         onClick={onReadClick}
@@ -38,6 +38,6 @@ export const NotificationBadgeBasic: React.FunctionComponent = () => {
         aria-label="Basic notification badge with attention variant"
         isExpanded={attentionExpanded}
       />
-    </div>
+    </>
   );
 };

package/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx

@@ -19,7 +19,7 @@ export const NotificationBadgeWithCount: React.FunctionComponent = () => {
   };
 
   return (
-    <div className="pf-t-dark">
+    <>
       <NotificationBadge
         variant={NotificationBadgeVariant.read}
         onClick={onReadClick}
@@ -41,6 +41,6 @@ export const NotificationBadgeWithCount: React.FunctionComponent = () => {
         isExpanded={attentionExpanded}
         count={10}
       />
-    </div>
+    </>
   );
 };

package/src/components/NotificationDrawer/NotificationDrawerHeader.tsx

@@ -42,7 +42,9 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
       {title}
     </Text>
     {(customText !== undefined || count !== undefined) && (
-      <span className={css(styles.notificationDrawerHeaderStatus)}>{customText || `${count} ${unreadText}`}</span>
+      <span className={css(styles.notificationDrawerHeaderStatus)} aria-live="polite">
+        {customText || `${count} ${unreadText}`}
+      </span>
     )}
     {(children || onClose) && (
       <div className={css(styles.notificationDrawerHeaderAction)}>

package/src/components/NotificationDrawer/NotificationDrawerListItem.tsx

@@ -13,6 +13,8 @@ export interface NotificationDrawerListItemProps extends React.HTMLProps<HTMLLIE
   isRead?: boolean;
   /**  Callback for when a list item is clicked */
   onClick?: (event: any) => void;
+  /**  Visually hidden text that conveys the current read state of the notification list item */
+  readStateScreenReaderText?: string;
   /**  Tab index for the list item */
   tabIndex?: number;
   /**  Variant indicates the severity level */
@@ -26,6 +28,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
   isRead = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onClick = (event: React.MouseEvent) => undefined as any,
+  readStateScreenReaderText,
   tabIndex = 0,
   variant = 'custom',
   ...props
@@ -38,6 +41,14 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       }
     }
   };
+
+  let readStateSRText;
+  if (readStateScreenReaderText) {
+    readStateSRText = readStateScreenReaderText;
+  } else {
+    readStateSRText = isRead ? 'read' : 'unread';
+  }
+
   return (
     <li
       {...props}
@@ -52,6 +63,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
       onClick={(e) => onClick(e)}
       onKeyDown={onKeyDown}
     >
+      <span className="pf-v5-screen-reader">{readStateSRText}</span>
       {children}
     </li>
   );

package/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx

@@ -12,7 +12,9 @@ describe('NotificationDrawerGroup', () => {
   });
 
   test('renders correct heading level', () => {
-    const { asFragment } = render(<NotificationDrawerGroup count={2} isExpanded={false} title="Critical Alerts" headingLevel="h2" />);
+    const { asFragment } = render(
+      <NotificationDrawerGroup count={2} isExpanded={false} title="Critical Alerts" headingLevel="h2" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx

@@ -21,8 +21,19 @@ describe('NotificationDrawerListItem', () => {
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-hoverable');
   });
 
-  test('drawer list item with isRead applied', () => {
+  test('drawer list item with isRead applied and screen reader text is set to read', () => {
     render(<NotificationDrawerListItem isRead />);
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-read');
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">read</span>');
+  });
+
+  test('drawer list item has screen reader text set to unread by default', () => {
+    render(<NotificationDrawerListItem />);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">unread</span>');
+  });
+
+  test('drawer list item screen reader textcan be customized', () => {
+    render(<NotificationDrawerListItem readStateScreenReaderText="was read" />);
+    expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">was read</span>');
   });
 });

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx

@@ -13,7 +13,7 @@ describe('NotificationDrawerListItemHeader', () => {
   });
 
   test('renders with correct heading level', () => {
-    const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3"/>);
+    const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3" />);
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread
@@ -38,6 +39,7 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
       Notifications
     </h1>
     <span
+      aria-live="polite"
       class="pf-v5-c-notification-drawer__header-status"
     >
       2 unread alerts

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItem.test.tsx.snap

@@ -5,6 +5,12 @@ exports[`NotificationDrawerListItem renders with PatternFly Core styles 1`] = `
   <li
     class="pf-v5-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
     tabindex="0"
-  />
+  >
+    <span
+      class="pf-v5-screen-reader"
+    >
+      unread
+    </span>
+  </li>
 </DocumentFragment>
 `;

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
   EmptyStateFooter,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -16,7 +15,6 @@ import {
   NotificationDrawerListItemHeader,
   EmptyStateVariant,
   EmptyStateActions,
-  EmptyStateIcon,
   Dropdown,
   DropdownList,
   DropdownItem,
@@ -377,12 +375,12 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
             truncateTitle={1}
           >
             <NotificationDrawerList isHidden={!thirdGroupExpanded} aria-label="Notifications in the third group">
-              <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateHeader
-                  headingLevel="h2"
-                  titleText="No alerts found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.full}
+              >
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.

package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx

@@ -4,7 +4,6 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateFooter,
-  EmptyStateHeader,
   EmptyStateVariant,
   NotificationDrawer,
   NotificationDrawerBody,
@@ -15,8 +14,7 @@ import {
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
@@ -173,12 +171,12 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
               isHidden={!thirdGroupExpanded}
               aria-label="Notifications in the third lightweight group"
             >
-              <EmptyState variant={EmptyStateVariant.full}>
-                <EmptyStateHeader
-                  headingLevel="h2"
-                  titleText="No alerts found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No alerts found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.full}
+              >
                 <EmptyStateBody>
                   There are currently no critical alerts firing. There may be firing alerts of other severities or
                   silenced critical alerts however.

package/src/components/NumberInput/NumberInput.tsx

@@ -106,7 +106,8 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
 
   return (
     <div
-      className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)}
+      // TODO: Update with issue #9978. Removed "validated !== 'default' && styles.modifiers.status" from classname to get build to work
+      className={css(styles.numberInput, className)}
       {...(widthChars && {
         style: {
           [cssFormControlWidthChars.name]: widthChars,

package/src/components/NumberInput/__tests__/NumberInput.test.tsx

@@ -212,13 +212,13 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('');
   });
 
-  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {
+  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', async () => {
     const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const NumberInputWrapper = () => {
       const [value, setValue] = React.useState(0);
-      const onChange = event => setValue(event.currentTarget.value);
-      const inputProps = { onChange: onChange };
+      const onChange = (event) => setValue(event.currentTarget.value);
+      const inputProps = { onChange };
 
       return <NumberInput value={value} onChange={onChange} inputProps={{ ...inputProps }} />;
     };
@@ -226,20 +226,20 @@ describe('numberInput', () => {
     render(<NumberInputWrapper />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '0');
+    await userEvent.type(input, '0');
 
     expect(consoleSpy).not.toHaveBeenCalled();
   });
 
   test('input is read only if onChange not passed ', () => {
-    render(<NumberInput inputAriaLabel="readonly input" value={5}/>);
+    render(<NumberInput inputAriaLabel="readonly input" value={5} />);
     const input = screen.getByLabelText('readonly input');
     expect(input).toHaveAttribute('readOnly');
   });
 
   test('input is not read only if onChange passed ', () => {
     const onChangeMock = jest.fn();
-    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock}/>);
+    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock} />);
     const input = screen.getByLabelText('not readonly input');
     expect(input).not.toHaveAttribute('readOnly');
   });

package/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap

@@ -663,7 +663,7 @@ exports[`numberInput renders disabled 1`] = `
 exports[`numberInput renders error validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"
@@ -777,7 +777,7 @@ exports[`numberInput renders error validated 1`] = `
 exports[`numberInput renders success validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"
@@ -1180,7 +1180,7 @@ exports[`numberInput renders value 1`] = `
 exports[`numberInput renders warning validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"

package/src/components/Page/Page.tsx

@@ -44,8 +44,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
-  /** Flag indicating if tertiary nav width should be limited */
-  isTertiaryNavWidthLimited?: boolean;
+  /** Flag indicating if horizontal sub navigation width should be limited */
+  isHorizontalSubnavWidthLimited?: boolean;
   /**
    * If true, the managed sidebar is initially open for desktop view
    */
@@ -71,12 +71,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
-  /** Tertiary nav component for the page */
-  tertiaryNav?: React.ReactNode;
+  /** Horizontal sub navigation component for the page */
+  horizontalSubnav?: React.ReactNode;
   /** Accessible label, can be used to name main section */
   mainAriaLabel?: string;
-  /** Flag indicating if the tertiaryNav should be in a group */
-  isTertiaryNavGrouped?: boolean;
+  /** Flag indicating if the horizontal sub navigation should be in a group */
+  isHorizontalSubnavGrouped?: boolean;
   /** Flag indicating if the breadcrumb should be in a group */
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
@@ -219,7 +219,7 @@ class Page extends React.Component<PageProps, PageState> {
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
-      isTertiaryNavWidthLimited,
+      isHorizontalSubnavWidthLimited,
       skipToContent,
       role,
       mainContainerId,
@@ -233,8 +233,8 @@ class Page extends React.Component<PageProps, PageState> {
       mainAriaLabel,
       mainTabIndex,
       mainComponent,
-      tertiaryNav,
-      isTertiaryNavGrouped,
+      horizontalSubnav,
+      isHorizontalSubnavGrouped,
       isBreadcrumbGrouped,
       additionalGroupedContent,
       groupProps,
@@ -254,14 +254,14 @@ class Page extends React.Component<PageProps, PageState> {
     };
 
     let nav = null;
-    if (tertiaryNav && isTertiaryNavWidthLimited) {
+    if (horizontalSubnav && isHorizontalSubnavWidthLimited) {
       nav = (
         <div className={css(styles.pageMainNav, styles.modifiers.limitWidth)}>
-          <div className={css(styles.pageMainBody)}>{tertiaryNav}</div>
+          <div className={css(styles.pageMainBody)}>{horizontalSubnav}</div>
         </div>
       );
-    } else if (tertiaryNav) {
-      nav = <div className={css(styles.pageMainNav)}>{tertiaryNav}</div>;
+    } else if (horizontalSubnav) {
+      nav = <div className={css(styles.pageMainNav)}>{horizontalSubnav}</div>;
     }
 
     const crumb = breadcrumb ? (
@@ -282,11 +282,11 @@ class Page extends React.Component<PageProps, PageState> {
       </section>
     ) : null;
 
-    const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
+    const isGrouped = isHorizontalSubnavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
 
     const group = isGrouped ? (
       <PageGroup {...groupProps}>
-        {isTertiaryNavGrouped && nav}
+        {isHorizontalSubnavGrouped && nav}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
       </PageGroup>
@@ -304,7 +304,7 @@ class Page extends React.Component<PageProps, PageState> {
         aria-label={mainAriaLabel}
       >
         {group}
-        {!isTertiaryNavGrouped && nav}
+        {!isHorizontalSubnavGrouped && nav}
         {!isBreadcrumbGrouped && crumb}
         {children}
       </Component>