@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.31

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

@@ -0,0 +1,175 @@
+import { render, screen } from '@testing-library/react';
+import { Hero } from '../Hero';
+import styles from '@patternfly/react-styles/css/components/Hero/hero';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-hero">
+      <Hero />
+    </div>
+  );
+  expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<Hero>Test content</Hero>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test(`Renders with ${styles.hero} class on wrapper by defaulty`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true });
+});
+
+test('Renders with custom class name on wrapper when className prop is provided', () => {
+  render(<Hero className="custom-class">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test(`Renders with class ${styles.heroBody} on content element`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test')).toHaveClass(`${styles.heroBody}`, { exact: true });
+});
+
+test('Renders with additional props spread to the wrapper component', () => {
+  render(<Hero id="custom-id">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveAttribute('id', 'custom-id');
+});
+
+test('Renders with light background image style when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<Hero backgroundSrcLight={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--light: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with dark background image style when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<Hero backgroundSrcDark={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--dark: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with both light and dark background image styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(
+    <Hero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with light gradient styles when gradientLight is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientLight={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--light: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-3--light: ${gradient.stop3}`);
+});
+
+test('Renders with dark gradient styles when gradientDark is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientDark={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--dark: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-3--dark: ${gradient.stop3}`);
+});
+
+test('Renders with both light and dark gradient styles when both are provided', () => {
+  const lightGradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  const darkGradient = {
+    stop1: '#000000',
+    stop2: '#ffffff',
+    stop3: '#808080'
+  };
+  render(
+    <Hero gradientLight={lightGradient} gradientDark={darkGradient}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with both background images and gradient styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  const lightGradient = { stop1: '#ff0000' };
+  const darkGradient = { stop1: '#000000' };
+
+  render(
+    <Hero
+      backgroundSrcLight={lightSrc}
+      backgroundSrcDark={darkSrc}
+      gradientLight={lightGradient}
+      gradientDark={darkGradient}
+    >
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with inline width style when bodyWidth is passed', () => {
+  const bodyWidth = '100px';
+
+  render(<Hero bodyWidth={bodyWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--Width: ${bodyWidth}`);
+});
+
+test('Renders with inline max-width style when bodyMaxWidth is passed', () => {
+  const bodyMaxWidth = '100px';
+
+  render(<Hero bodyMaxWidth={bodyMaxWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--MaxWidth: ${bodyMaxWidth}`);
+});
+
+test('Matches the snapshot without backgroundSrc and gradient props', () => {
+  const { asFragment } = render(<Hero>Hero content</Hero>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with backgroundSrc and gradient props', () => {
+  const { asFragment } = render(
+    <Hero
+      backgroundSrcLight="light.jpg"
+      backgroundSrcDark="dark.jpg"
+      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
+      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
+    >
+      Hero content
+    </Hero>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+    style="--pf-v6-c-hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-hero--gradient--stop-1--light: #ff0000; --pf-v6-c-hero--gradient--stop-2--light: #00ff00; --pf-v6-c-hero--gradient--stop-3--light: #0000ff; --pf-v6-c-hero--gradient--stop-1--dark: #000000; --pf-v6-c-hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-hero--gradient--stop-3--dark: #808080;"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot without backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hero/examples/Hero.md

@@ -0,0 +1,19 @@
+---
+id: Hero
+section: components
+cssPrefix: pf-v6-c-hero
+beta: true
+propComponents: ['Hero']
+---
+
+## Examples
+
+### Basic
+
+If you need finer control over the placement of text content within the `<Hero>`, such as when you omit a background image, adjust the `bodyWidth` and `bodyMaxWidth` properties. Be mindful of using these properties when a background image is still present and ensure there is sufficient contrast between text and any part of the image that it overlaps.
+
+When using `gradientLight` or `gradientDark` to apply gradient backgrounds, check the color contrast to ensure proper accessibility.
+
+```ts file="HeroBasic.tsx"
+
+```

package/src/components/Hero/examples/HeroBasic.tsx

@@ -0,0 +1,3 @@
+import { Hero } from '@patternfly/react-core';
+
+export const HeroBasic: React.FunctionComponent = () => <Hero>Basic hero content</Hero>;

package/src/components/Hero/index.ts

@@ -0,0 +1 @@
+export * from './Hero';

package/src/components/Label/Label.tsx

@@ -338,7 +338,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     );
   }
 
-  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
+  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
   return (
     <LabelComponent

package/src/components/LoginPage/LoginPage.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 
 import { BackgroundImage } from '../BackgroundImage';
-import { Brand } from '../Brand';
+import { Brand, BrandProps } from '../Brand';
 import { List, ListVariant } from '../List';
 
 import { Login } from './Login';
@@ -21,6 +21,8 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   brandImgSrc?: string;
   /** Attribute that specifies the alt text of the brand image for the login page */
   brandImgAlt?: string;
+  /** Additional props for the brand image for the login page */
+  brandImgProps?: BrandProps;
   /** Attribute that specifies the URL of the background image for the login page */
   backgroundImgSrc?: string;
   /** Content rendered inside of the text component of the login page */
@@ -50,6 +52,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
   className = '',
   brandImgSrc = '',
   brandImgAlt = '',
+  brandImgProps,
   backgroundImgSrc = '',
   footerListItems = null,
   textContent = '',
@@ -65,7 +68,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
 }: LoginPageProps) => {
   const HeaderBrand = (
     <Fragment>
-      <Brand src={brandImgSrc} alt={brandImgAlt} />
+      {(brandImgSrc || brandImgProps?.src) && <Brand src={brandImgSrc} alt={brandImgAlt} {...brandImgProps} />}
     </Fragment>
   );
   const Header = <LoginHeader headerBrand={HeaderBrand} />;

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

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { LoginPage } from '../LoginPage';
 import { ListVariant } from '../../List';
@@ -26,3 +26,40 @@ test('check loginpage example against snapshot', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('brand is absent without brandImgSrc and brandImgProps.src', () => {
+  const { asFragment } = render(<LoginPage loginTitle="Log into your account" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('brand is present with brandImgSrc prop', () => {
+  const { asFragment } = render(<LoginPage brandImgSrc="Brand src" loginTitle="Log into your account" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('brandImgProps successfully renders brand with props', () => {
+  render(
+    <LoginPage
+      brandImgProps={{ src: 'Brand src', alt: 'Pf-logo', 'aria-label': 'PatternFly logo', className: 'custom-class' }}
+      loginTitle="Log into your account"
+    />
+  );
+  const brandImg = screen.getByRole('img', { name: 'PatternFly logo' });
+  expect(brandImg).toHaveAttribute('src', 'Brand src');
+  expect(brandImg).toHaveAttribute('alt', 'Pf-logo');
+  expect(brandImg).toHaveAttribute('aria-label', 'PatternFly logo');
+  expect(brandImg).toHaveClass('custom-class');
+});
+
+test('Brand is rendered correctly with both brandImgSrc and brandImgProps, prioritizing brandImgProps.src', () => {
+  render(
+    <LoginPage
+      brandImgSrc="Brand-src-that-should-be-ignored"
+      brandImgProps={{ src: 'Brand-src-from-props', alt: 'Pf-logo from props' }}
+      loginTitle="Log into your account"
+    />
+  );
+  const brandImg = screen.getByRole('img', { name: 'Pf-logo from props' });
+  expect(brandImg).toHaveAttribute('src', 'Brand-src-from-props');
+  expect(brandImg).toHaveAttribute('alt', 'Pf-logo from props');
+});

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -69,7 +69,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -175,7 +175,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -219,7 +219,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -336,7 +336,7 @@ exports[`LoginForm should render Login form 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -380,7 +380,7 @@ exports[`LoginForm should render Login form 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           

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

@@ -1,5 +1,97 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`brand is absent without brandImgSrc and brandImgProps.src 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-login"
+  >
+    <div
+      class="pf-v6-c-login__container"
+    >
+      <header
+        class="pf-v6-c-login__header"
+      />
+      <main
+        class="pf-v6-c-login__main"
+      >
+        <div
+          class="pf-v6-c-login__main-header"
+        >
+          <h2
+            class="pf-v6-c-title pf-m-3xl"
+            data-ouia-component-id="OUIA-Generated-Title-2"
+            data-ouia-component-type="PF6/Title"
+            data-ouia-safe="true"
+          >
+            Log into your account
+          </h2>
+        </div>
+        <div
+          class="pf-v6-c-login__main-body"
+        />
+      </main>
+      <footer
+        class="pf-v6-c-login__footer"
+      >
+        <p />
+        <ul
+          class="pf-v6-c-list"
+        />
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`brand is present with brandImgSrc prop 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-login"
+  >
+    <div
+      class="pf-v6-c-login__container"
+    >
+      <header
+        class="pf-v6-c-login__header"
+      >
+        <img
+          alt=""
+          class="pf-v6-c-brand"
+          src="Brand src"
+        />
+      </header>
+      <main
+        class="pf-v6-c-login__main"
+      >
+        <div
+          class="pf-v6-c-login__main-header"
+        >
+          <h2
+            class="pf-v6-c-title pf-m-3xl"
+            data-ouia-component-id="OUIA-Generated-Title-3"
+            data-ouia-component-type="PF6/Title"
+            data-ouia-safe="true"
+          >
+            Log into your account
+          </h2>
+        </div>
+        <div
+          class="pf-v6-c-login__main-body"
+        />
+      </main>
+      <footer
+        class="pf-v6-c-login__footer"
+      >
+        <p />
+        <ul
+          class="pf-v6-c-list"
+        />
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`check loginpage example against snapshot 1`] = `
 <DocumentFragment>
   <div

package/src/components/LoginPage/examples/LoginPage.md

@@ -32,6 +32,8 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 ### Basic
 
 By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
+
+This example uses `brandImgProps` to pass the brand image source, alt text, and an extra class, which will be preferred over `brandImgSrc` when both are provided.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -114,8 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg}
-      brandImgAlt="PatternFly logo"
+      brandImgProps={{ src: brandImg, alt: 'PatternFly logo' }}
       backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."

package/src/components/Masthead/Masthead.tsx

@@ -27,6 +27,8 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
     xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
     '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
   };
+  /** @beta Indicates the variant of the masthead */
+  variant?: 'default' | 'docked';
 }
 
 export const Masthead: React.FunctionComponent<MastheadProps> = ({
@@ -36,6 +38,7 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
     md: 'inline'
   },
   inset,
+  variant = 'default',
   ...props
 }: MastheadProps) => {
   const { width, getBreakpoint } = useContext(PageContext);
@@ -43,6 +46,7 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
     <header
       className={css(
         styles.masthead,
+        variant === 'docked' && styles.modifiers.docked,
         formatBreakpointMods(display, styles, 'display-', getBreakpoint(width)),
         formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
         className

package/src/components/Masthead/MastheadLogo.tsx

@@ -1,8 +1,10 @@
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 
-export interface MastheadLogoProps
-  extends React.DetailedHTMLProps<React.HTMLProps<HTMLAnchorElement>, HTMLAnchorElement> {
+export interface MastheadLogoProps extends React.DetailedHTMLProps<
+  React.HTMLProps<HTMLAnchorElement>,
+  HTMLAnchorElement
+> {
   /** Content rendered inside of the masthead logo. */
   children?: React.ReactNode;
   /** Additional classes added to the masthead logo. */

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

@@ -1,5 +1,6 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Masthead, MastheadMain, MastheadLogo, MastheadContent, MastheadBrand, MastheadToggle } from '../index';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 describe('Masthead', () => {
   test('verify basic', () => {
@@ -71,6 +72,29 @@ describe('Masthead', () => {
       expect(asFragment()).toMatchSnapshot();
     });
   });
+
+  test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
+    render(
+      <Masthead variant="docked" data-testid="masthead">
+        test
+      </Masthead>
+    );
+    expect(screen.getByTestId('masthead')).toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Does not render with ${styles.modifiers.docked} class when variant is default`, () => {
+    render(
+      <Masthead variant="default" data-testid="masthead">
+        test
+      </Masthead>
+    );
+    expect(screen.getByTestId('masthead')).not.toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Does not render with ${styles.modifiers.docked} class when variant is not passed`, () => {
+    render(<Masthead data-testid="masthead">test</Masthead>);
+    expect(screen.getByTestId('masthead')).not.toHaveClass(styles.modifiers.docked);
+  });
 });
 
 describe('MastheadLogo', () => {

package/src/components/MenuToggle/MenuToggle.tsx

@@ -23,7 +23,8 @@ export enum MenuToggleSize {
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
 export interface MenuToggleProps
-  extends Omit<
+  extends
+    Omit<
       React.DetailedHTMLProps<
         React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
         MenuToggleElement

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -5,8 +5,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface MenuToggleCheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>, OUIAProps {
   /** Additional classes added to the MenuToggleCheckbox */
   className?: string;
   /** Flag to show if the checkbox selection is valid or invalid */

package/src/components/Nav/Nav.tsx

@@ -10,7 +10,8 @@ export type NavSelectClickHandler = (
   to: string
 ) => void;
 export interface NavProps
-  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect' | 'onToggle'>,
+  extends
+    Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect' | 'onToggle'>,
     OUIAProps {
   /** Anything that can be rendered inside of the nav */
   children?: React.ReactNode;
@@ -35,8 +36,8 @@ export interface NavProps
   ) => void;
   /** Accessible label for the nav when there are multiple navs on the page */
   'aria-label'?: string;
-  /** For horizontal navs */
-  variant?: 'default' | 'horizontal' | 'horizontal-subnav';
+  /** The nav variant to use. Docked is in beta. */
+  variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -154,6 +155,7 @@ class Nav extends Component<
           className={css(
             styles.nav,
             isHorizontal && styles.modifiers.horizontal,
+            variant === 'docked' && styles.modifiers.docked,
             variant === 'horizontal-subnav' && styles.modifiers.subnav,
             this.state.isScrollable && styles.modifiers.scrollable,
             className

package/src/components/Nav/NavExpandable.tsx

@@ -9,8 +9,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface NavExpandableProps
-  extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>,
-    OUIAProps {
+  extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
   /** Title content shown for the expandable list */
   title: React.ReactNode;
   /** If defined, screen readers will read this text instead of the list title */