@patternfly/react-core 6.5.0-prerelease.2 → 6.5.0-prerelease.21

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/Page/Page.tsx

@@ -266,6 +266,7 @@ class Page extends Component<PageProps, PageState> {
       isManagedSidebar,
       onSidebarToggle: mobileView ? this.onSidebarToggleMobile : this.onSidebarToggleDesktop,
       isSidebarOpen: mobileView ? mobileIsSidebarOpen : desktopIsSidebarOpen,
+      isMobile: mobileView,
       width,
       height,
       getBreakpoint,

package/src/components/Page/PageContext.tsx

@@ -6,6 +6,7 @@ export interface PageContextProps {
   isManagedSidebar: boolean;
   onSidebarToggle: () => void;
   isSidebarOpen: boolean;
+  isMobile: boolean;
   width: number;
   height: number;
   getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -16,6 +17,7 @@ export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
   isSidebarOpen: false,
   onSidebarToggle: () => null,
+  isMobile: false,
   width: null,
   height: null,
   getBreakpoint,

package/src/components/Page/PageSidebar.tsx

@@ -35,7 +35,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   ...props
 }: PageSidebarProps) => (
   <PageContextConsumer>
-    {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen }: PageSidebarProps) => {
+    {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen, isMobile }) => {
       const sidebarOpen = isManagedSidebar ? managedIsNavOpen : isSidebarOpen;
 
       return (
@@ -43,7 +43,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           id={id}
           className={css(
             styles.pageSidebar,
-            sidebarOpen && styles.modifiers.expanded,
+            sidebarOpen && isMobile && styles.modifiers.expanded,
             !sidebarOpen && styles.modifiers.collapsed,
             className
           )}

package/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="false"
-    class="pf-v6-c-page__sidebar pf-m-expanded ''"
+    class="pf-v6-c-page__sidebar ''"
     id="page-sidebar"
   >
     <div>

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

@@ -12,7 +12,7 @@ exports[`Page Check dark page against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     >
       <div
@@ -55,7 +55,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -92,7 +92,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -237,7 +237,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -386,7 +386,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -629,7 +629,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -913,7 +913,7 @@ exports[`Page Check page to verify skip to content points to main content region
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1063,7 +1063,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     >
       <div
@@ -1106,7 +1106,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1251,7 +1251,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1400,7 +1400,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1545,7 +1545,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div

package/src/components/Progress/Progress.tsx

@@ -48,6 +48,8 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  /** Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure. */
+  hideStatusIcon?: boolean;
 }
 
 class Progress extends Component<ProgressProps> {
@@ -94,6 +96,7 @@ class Progress extends Component<ProgressProps> {
       'aria-labelledby': ariaLabelledBy,
       'aria-describedby': ariaDescribedBy,
       helperText,
+      hideStatusIcon,
       ...props
     } = this.props;
 
@@ -151,6 +154,7 @@ class Progress extends Component<ProgressProps> {
           isTitleTruncated={isTitleTruncated}
           tooltipPosition={tooltipPosition}
           helperText={helperText}
+          hideStatusIcon={hideStatusIcon}
         />
       </div>
     );

package/src/components/Progress/ProgressContainer.tsx

@@ -58,6 +58,8 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  /** Hide the status icon, helpful when space is limited (such as within table cells) */
+  hideStatusIcon?: boolean;
 }
 
 const variantToIcon = {
@@ -76,9 +78,10 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   measureLocation = ProgressMeasureLocation.top,
   isTitleTruncated = false,
   tooltipPosition,
-  helperText
+  helperText,
+  hideStatusIcon = false
 }: ProgressContainerProps) => {
-  const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
+  const StatusIcon = !hideStatusIcon && variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
   const titleRef = useRef(null);
   const updateTooltip = (event: any) => {

package/src/components/Progress/__tests__/Generated/ProgressContainer.test.tsx

@@ -15,6 +15,7 @@ it('ProgressContainer should match snapshot (auto-generated)', () => {
       variant={'danger'}
       measureLocation={'outside'}
       value={42}
+      hideStatusIcon={false}
     />
   );
   expect(asFragment()).toMatchSnapshot();

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

@@ -108,3 +108,35 @@ test('Renders passed helper text', () => {
 
   expect(screen.getByText('Test helper text')).toBeVisible();
 });
+
+describe('hideStatusIcon prop behavior', () => {
+  test('shows status icon by default when hideStatusIcon is not set', () => {
+    render(<Progress id="default-status-icon-test" value={100} variant="success" />);
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with success variant', () => {
+    render(<Progress id="hide-icon-success" value={100} variant="success" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with danger variant', () => {
+    render(<Progress id="hide-icon-danger" value={50} variant="danger" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with warning variant', () => {
+    render(<Progress id="hide-icon-warning" value={75} variant="warning" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('shows status icon when hideStatusIcon is explicitly false', () => {
+    render(<Progress id="show-icon-success" value={100} variant="success" hideStatusIcon={false} />);
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+});

package/src/components/Progress/examples/Progress.md

@@ -107,20 +107,8 @@ When conveying status, you should ensure:
 
 ```
 
-### Inside success
+### Interactive status icon and measure location
 
-```ts file="./ProgressInsideSuccess.tsx"
-
-```
-
-### Outside failure
-
-```ts file="./ProgressOutsideFailure.tsx"
-
-```
-
-### Failure without measure
-
-```ts file="./ProgressFailureWithoutMeasure.tsx"
+```ts file="./ProgressInteractiveFailure.tsx"
 
 ```

package/src/components/Progress/examples/ProgressInteractiveFailure.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import {
+  Progress,
+  ProgressMeasureLocation,
+  ProgressVariant,
+  Radio,
+  Checkbox,
+  Form,
+  FormGroup
+} from '@patternfly/react-core';
+
+export const ProgressInteractiveFailure: React.FunctionComponent = () => {
+  const [measureLocation, setMeasureLocation] = useState<ProgressMeasureLocation>(ProgressMeasureLocation.inside);
+  const [hideStatusIcon, setHideStatusIcon] = useState<boolean>(false);
+
+  const measureLocationOptions = [
+    { value: ProgressMeasureLocation.inside, label: 'Inside' },
+    { value: ProgressMeasureLocation.outside, label: 'Outside' },
+    { value: ProgressMeasureLocation.top, label: 'Top' },
+    { value: ProgressMeasureLocation.none, label: 'None' }
+  ];
+
+  return (
+    <Form>
+      <FormGroup fieldId="measure-location" label="Measure location">
+        {measureLocationOptions.map((option) => (
+          <Radio
+            key={option.value}
+            id={`measure-location-${option.value}`}
+            name="measure-location"
+            label={option.label}
+            value={option.value}
+            isChecked={measureLocation === option.value}
+            onChange={() => setMeasureLocation(option.value)}
+          />
+        ))}
+      </FormGroup>
+      <FormGroup fieldId="hide-status-icon">
+        <Checkbox
+          id="hide-status-icon"
+          label="Hide status icon"
+          isChecked={hideStatusIcon}
+          onChange={(_, checked) => setHideStatusIcon(checked)}
+        />
+      </FormGroup>
+      <Progress
+        value={33}
+        title="Title"
+        measureLocation={measureLocation}
+        variant={ProgressVariant.danger}
+        hideStatusIcon={hideStatusIcon}
+      />
+    </Form>
+  );
+};

package/src/components/Tabs/Tabs.tsx

@@ -206,7 +206,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     backScrollAriaLabel: 'Scroll back',
     rightScrollAriaLabel: 'Scroll right',
     forwardScrollAriaLabel: 'Scroll forward',
-    component: TabsComponent.div,
     mountOnEnter: false,
     unmountOnExit: false,
     ouiaSafe: true,
@@ -529,7 +528,8 @@ class Tabs extends Component<TabsProps, TabsState> {
     const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);
 
     const uniqueId = id || getUniqueId();
-    const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
+    const defaultComponent = isNav && !component ? 'nav' : 'div';
+    const Component: any = component !== undefined ? component : defaultComponent;
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;

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

@@ -166,6 +166,66 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when unc
   expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
 });
 
+test(`Renders with class ${styles.modifiers.nav} when isNav is true`, () => {
+  render(
+    <Tabs isNav role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.nav);
+});
+
+test(`Renders with div wrapper by default`, () => {
+  render(
+    <Tabs>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when component="nav"`, () => {
+  render(
+    <Tabs component="nav">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when isNav is true`, () => {
+  render(
+    <Tabs isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Overrides isNav nav wrapper when component="div" is passed`, () => {
+  render(
+    <Tabs component="div" isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">