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

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

@@ -5,7 +5,7 @@ import { Badge } from '../../Badge';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -61,21 +61,23 @@ describe('menu toggle', () => {
     const mockClick = jest.fn();
     const user = userEvent.setup();
 
-    render(<MenuToggle
-      onClick={mockClick}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-disabled-example"
-            key="split-checkbox-with-text-disabled"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
-      aria-label="Menu toggle with checkbox split button and text"
-    />);
+    render(
+      <MenuToggle
+        onClick={mockClick}
+        splitButtonOptions={{
+          items: [
+            <MenuToggleCheckbox
+              id="split-button-checkbox-with-text-disabled-example"
+              key="split-checkbox-with-text-disabled"
+              aria-label="Select all"
+            >
+              10 selected
+            </MenuToggleCheckbox>
+          ]
+        }}
+        aria-label="Menu toggle with checkbox split button and text"
+      />
+    );
 
     await user.click(screen.getByRole(`button`) as Element);
     expect(mockClick).toHaveBeenCalled();

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -165,7 +165,8 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           helperText={progressHelperText}
         />
       </div>
-      <div className={styles.multipleFileUploadStatusItemClose}>
+      {/* TODO: Update with issue #9997.  Removed class "styles.multipleFileUploadStatusItemClose" that no longer exists */}
+      <div>
         <Button variant="plain" aria-label={buttonAriaLabel} onClick={onClearClick}>
           <TimesCircleIcon />
         </Button>

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -48,7 +48,7 @@ describe('MultipleFileUploadStatusItem', () => {
         fileName="testCustomFileName.txt"
         fileSize={42}
         progressId="test-progress-id"
-        progressAriaLiveMessage={loadPercentage => `test message ${loadPercentage}`}
+        progressAriaLiveMessage={(loadPercentage) => `test message ${loadPercentage}`}
       />
     );
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitle.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitle } from '../MultipleFileUploadTitle';
 
 describe('MultipleFileUploadTitle', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleIcon.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleIcon } from '../MultipleFileUploadTitleIcon';
 
 describe('MultipleFileUploadTitleIcon', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleText.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleText } from '../MultipleFileUploadTitleText';
 
 describe('MultipleFileUploadTitleText', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleTextSeparator.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleTextSeparator } from '../MultipleFileUploadTitleTextSeparator';
 
 describe('MultipleFileUploadTitleTextSeparator', () => {

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -85,9 +85,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="buttonAriaLabel"
@@ -198,9 +196,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -313,9 +309,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -428,9 +422,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -560,9 +552,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -675,9 +665,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -788,9 +776,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -903,9 +889,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"

package/src/components/Nav/Nav.tsx

@@ -35,10 +35,8 @@ export interface NavProps
   ) => void;
   /** Accessible label for the nav when there are multiple navs on the page */
   'aria-label'?: string;
-  /** Indicates which theme color to use */
-  theme?: 'dark' | 'light';
   /** For horizontal navs */
-  variant?: 'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav';
+  variant?: 'default' | 'horizontal' | 'horizontal-subnav';
   /** 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. */
@@ -72,7 +70,6 @@ class Nav extends React.Component<
   static defaultProps: NavProps = {
     onSelect: () => undefined,
     onToggle: () => undefined,
-    theme: 'dark',
     ouiaSafe: true
   };
 
@@ -121,13 +118,12 @@ class Nav extends React.Component<
       onSelect,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onToggle,
-      theme,
       ouiaId,
       ouiaSafe,
       variant,
       ...props
     } = this.props;
-    const isHorizontal = ['horizontal', 'tertiary'].includes(variant);
+    const isHorizontal = ['horizontal', 'horizontal-subnav'].includes(variant);
 
     return (
       <NavContext.Provider
@@ -148,7 +144,7 @@ class Nav extends React.Component<
           onToggle: (event: React.MouseEvent<HTMLButtonElement>, groupId: number | string, expanded: boolean) =>
             this.onToggle(event, groupId, expanded),
           updateIsScrollable: (isScrollable: boolean) => this.setState({ isScrollable }),
-          isHorizontal: ['horizontal', 'tertiary', 'horizontal-subnav'].includes(variant),
+          isHorizontal: ['horizontal', 'horizontal-subnav'].includes(variant),
           flyoutRef: this.state.flyoutRef,
           setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
           navRef: this.navRef
@@ -157,14 +153,12 @@ class Nav extends React.Component<
         <nav
           className={css(
             styles.nav,
-            theme === 'light' && styles.modifiers.light,
             isHorizontal && styles.modifiers.horizontal,
-            variant === 'tertiary' && styles.modifiers.tertiary,
-            variant === 'horizontal-subnav' && styles.modifiers.horizontalSubnav,
+            variant === 'horizontal-subnav' && styles.modifiers.subnav,
             this.state.isScrollable && styles.modifiers.scrollable,
             className
           )}
-          aria-label={ariaLabel || (['tertiary', 'horizontal-subnav'].includes(variant) ? 'Local' : 'Global')}
+          aria-label={ariaLabel || (variant === 'horizontal-subnav' ? 'Local' : 'Global')}
           ref={this.navRef}
           {...getOUIAProps(Nav.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           {...props}

package/src/components/Nav/NavExpandable.tsx

@@ -115,7 +115,6 @@ class NavExpandable extends React.Component<NavExpandableProps, NavExpandableSta
           <li
             className={css(
               styles.navItem,
-              styles.modifiers.expandable,
               expandedState && styles.modifiers.expanded,
               isActive && styles.modifiers.current,
               className

package/src/components/Nav/NavItem.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
+import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
+import dividerStyles from '@patternfly/react-styles/css/components/Divider/divider';
 import { css } from '@patternfly/react-styles';
 import { NavContext, NavSelectClickHandler } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
@@ -125,7 +127,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     // Otherwise, MenuItem should handle closing its flyouts
     if (
       (key === 'Escape' || key === 'ArrowLeft') &&
-      popperRef?.current?.querySelectorAll(`.${styles.menu}`).length === 1
+      popperRef?.current?.querySelectorAll(`.${menuStyles.menu}`).length === 1
     ) {
       if (flyoutVisible) {
         event.stopPropagation();
@@ -151,7 +153,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       if (flyoutVisible) {
         const flyoutItems = Array.from(
           (popperRef.current as HTMLElement).getElementsByTagName('UL')[0].children
-        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider)));
+        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(dividerStyles.divider)));
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
         flyoutTarget.focus();

package/src/components/Nav/NavList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { getLanguageDirection, isElementInView } from '../../helpers/util';
@@ -143,15 +144,19 @@ class NavList extends React.Component<NavListProps> {
             {({ isSidebarOpen }) => (
               <React.Fragment>
                 {isHorizontal && (
-                  <button
-                    className={css(styles.navScrollButton)}
-                    aria-label={backScrollAriaLabel || ariaLeftScroll}
-                    onClick={this.scrollBack}
-                    disabled={scrollViewAtStart}
-                    tabIndex={isSidebarOpen ? null : -1}
-                  >
-                    <AngleLeftIcon />
-                  </button>
+                  <div className={css(styles.navScrollButton)}>
+                    <Button
+                      variant="plain"
+                      aria-label={backScrollAriaLabel || ariaLeftScroll}
+                      onClick={this.scrollBack}
+                      disabled={scrollViewAtStart}
+                      tabIndex={isSidebarOpen ? null : -1}
+                    >
+                      <span className={css(styles.buttonIcon)}>
+                        <AngleLeftIcon />
+                      </span>
+                    </Button>
+                  </div>
                 )}
                 <ul
                   ref={this.navList}
@@ -163,15 +168,19 @@ class NavList extends React.Component<NavListProps> {
                   {children}
                 </ul>
                 {isHorizontal && (
-                  <button
-                    className={css(styles.navScrollButton)}
-                    aria-label={forwardScrollAriaLabel || ariaRightScroll}
-                    onClick={this.scrollForward}
-                    disabled={scrollViewAtEnd}
-                    tabIndex={isSidebarOpen ? null : -1}
-                  >
-                    <AngleRightIcon />
-                  </button>
+                  <div className={css(styles.navScrollButton)}>
+                    <Button
+                      variant="plain"
+                      aria-label={forwardScrollAriaLabel || ariaRightScroll}
+                      onClick={this.scrollForward}
+                      disabled={scrollViewAtEnd}
+                      tabIndex={isSidebarOpen ? null : -1}
+                    >
+                      <span className={css(styles.buttonIcon)}>
+                        <AngleRightIcon />
+                      </span>
+                    </Button>
+                  </div>
                 )}
               </React.Fragment>
             )}

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-nav__item pf-m-expandable ''"
+    class="pf-v5-c-nav__item ''"
     data-ouia-component-id="OUIA-Generated-NavExpandable-1"
     data-ouia-component-type="PF5/NavExpandable"
     data-ouia-safe="true"

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

@@ -30,7 +30,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav className="test-nav-class">
         <NavList className="test-nav-list-class">
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
@@ -47,7 +47,7 @@ describe('Nav', () => {
       <React.StrictMode>
         <Nav className="test-nav-class">
           <NavList className="test-nav-list-class">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to} className="test-nav-item-class">
                 {item.label}
               </NavItem>
@@ -60,28 +60,13 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Dark Nav List', () => {
-    const { asFragment } = renderNav(
-      <Nav className="test=nav-class" theme="dark">
-        <NavList className="test-nav-list-class">
-          {props.items.map(item => (
-            <NavItem to={item.to} key={item.to} className="test-nav-item-class">
-              {item.label}
-            </NavItem>
-          ))}
-        </NavList>
-      </Nav>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   test('Default Nav List - Trigger item active update', async () => {
     const user = userEvent.setup();
 
     const { asFragment } = renderNav(
       <Nav>
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -99,7 +84,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -119,7 +104,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" onExpand={onExpand}>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -141,7 +126,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -160,7 +145,7 @@ describe('Nav', () => {
       <Nav aria-label="Test">
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -177,7 +162,7 @@ describe('Nav', () => {
       <Nav>
         <NavGroup id="grp-1" title="Section 1">
           <NavList>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={`section1_${item.to}`}>
                 {item.label}
               </NavItem>
@@ -186,7 +171,7 @@ describe('Nav', () => {
         </NavGroup>
         <NavGroup id="grp-2" title="Section 2">
           <NavList>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={`section2_${item.to}`}>
                 {item.label}
               </NavItem>
@@ -202,7 +187,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="horizontal">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -217,22 +202,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="horizontal-subnav">
         <NavList>
-          {props.items.map(item => (
-            <NavItem to={item.to} key={item.to}>
-              {item.label}
-            </NavItem>
-          ))}
-        </NavList>
-      </Nav>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Tertiary Nav List', () => {
-    const { asFragment } = renderNav(
-      <Nav variant="tertiary">
-        <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -245,7 +215,7 @@ describe('Nav', () => {
 
   test('Nav List with custom item nodes', () => {
     const { asFragment } = renderNav(
-      <Nav variant="tertiary">
+      <Nav>
         <NavList>
           <NavItem to="/components/nav#link1" className="test-nav-item-class">
             <div className="my-custom-node">My custom node</div>
@@ -260,7 +230,7 @@ describe('Nav', () => {
     const user = userEvent.setup();
 
     const { asFragment } = renderNav(
-      <Nav variant="tertiary">
+      <Nav>
         <NavList>
           <NavItem className="test-nav-item-class" flyout={<div>Flyout test</div>}>
             <div className="my-custom-node">My custom node</div>
@@ -269,7 +239,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    await user.hover(screen.getByText('My custom node'))
+    await user.hover(screen.getByText('My custom node'));
     expect(asFragment()).toMatchSnapshot();
   });
 });