@patternfly/react-core 6.2.2 → 6.3.0-prerelease.10

package/src/components/List/ListItem.tsx

@@ -2,18 +2,21 @@ import styles from '@patternfly/react-styles/css/components/List/list';
 import { css } from '@patternfly/react-styles';
 
 export interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
-  /** Icon for the list item */
-  icon?: React.ReactNode | null;
+  /** Additional classes added to the list item */
+  className?: string;
   /** Anything that can be rendered inside of list item */
   children: React.ReactNode;
+  /** Icon for the list item */
+  icon?: React.ReactNode | null;
 }
 
 export const ListItem: React.FunctionComponent<ListItemProps> = ({
-  icon = null,
+  className,
   children = null,
+  icon = null,
   ...props
 }: ListItemProps) => (
-  <li className={css(icon && styles.listItem)} {...props}>
+  <li className={css(icon && styles.listItem, className)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
     <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
   </li>

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

@@ -1,117 +1,113 @@
 import { render, screen } from '@testing-library/react';
-
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 import { List, ListVariant, ListComponent, OrderType } from '../List';
-import { ListItem } from '../ListItem';
-
-const ListItems = () => (
-  <List>
-    <ListItem>First</ListItem>
-    <ListItem>Second</ListItem>
-    <ListItem>Third</ListItem>
-  </List>
-);
-
-describe('List', () => {
-  test('simple list', () => {
-    const { asFragment } = render(
-      <List>
-        <ListItems />
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+import styles from '@patternfly/react-styles/css/components/List/list';
 
-  test('inline list', () => {
-    const { asFragment } = render(
-      <List variant={ListVariant.inline}>
-        <ListItems />
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+describe('Shared tests between ol and ul lists', () => {
+  Object.values(ListComponent).forEach((component) => {
+    test(`Renders without children for ${component} list`, () => {
+      render(<List component={component}></List>);
 
-  test('ordered list', () => {
-    const { asFragment } = render(
-      <List component={ListComponent.ol}>
-        <ListItem>Apple</ListItem>
-        <ListItem>Banana</ListItem>
-        <ListItem>Orange</ListItem>
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+      expect(screen.getByRole('list')).toBeVisible();
+    });
 
-  test('ordered list starts with 2nd item', () => {
-    render(
-      <List component={ListComponent.ol} start={2}>
-        <ListItem>Banana</ListItem>
-        <ListItem>Orange</ListItem>
-      </List>
-    );
-    expect(screen.getByRole('list')).toHaveAttribute('start', '2');
-  });
+    test(`Renders children for ${component} list`, () => {
+      render(<List component={component}>Children content</List>);
 
-  test('ordered list items will be numbered with uppercase letters', () => {
-    render(
-      <List component={ListComponent.ol} type={OrderType.uppercaseLetter}>
-        <ListItem>Banana</ListItem>
-        <ListItem>Orange</ListItem>
-      </List>
-    );
-    expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
-  });
+      expect(screen.getByRole('list')).toHaveTextContent('Children content');
+    });
 
-  test('inlined ordered list', () => {
-    render(
-      <List variant={ListVariant.inline} component={ListComponent.ol}>
-        <ListItem>Apple</ListItem>
-        <ListItem>Banana</ListItem>
-        <ListItem>Orange</ListItem>
-      </List>
-    );
-    expect(screen.getByRole('list')).toHaveClass('pf-m-inline');
-  });
+    test(`Renders with ${component} tag`, () => {
+      render(<List component={component}></List>);
+
+      expect(screen.getByRole('list').tagName).toBe(component.toUpperCase());
+    });
+
+    test(`Renders with only class ${styles.list} by default for ${component} list`, () => {
+      render(<List component={component}></List>);
+
+      expect(screen.getByRole('list')).toHaveClass(styles.list, { exact: true });
+    });
+
+    test(`Renders with custom class when className is passed for ${component} list`, () => {
+      render(<List component={component} className="custom-class"></List>);
+
+      expect(screen.getByRole('list')).toHaveClass('custom-class');
+    });
+
+    test(`Renders with variant class ${styles.modifiers.inline} when variant prop is inline for ${component} list`, () => {
+      render(<List component={component} variant={ListVariant.inline}></List>);
+
+      expect(screen.getByRole('list')).toHaveClass(styles.modifiers.inline);
+    });
+
+    test(`Renders with class ${styles.modifiers.bordered} when isBordered is true for ${component} list`, () => {
+      render(<List component={component} isBordered></List>);
+
+      expect(screen.getByRole('list')).toHaveClass(styles.modifiers.bordered);
+    });
+
+    test(`Renders with class ${styles.modifiers.plain} when isPlain is true for ${component} list`, () => {
+      render(<List component={component} isPlain></List>);
 
-  test('bordered list', () => {
-    render(
-      <List isBordered>
-        <ListItems />
-      </List>
-    );
-    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-bordered');
+      expect(screen.getByRole('list')).toHaveClass(styles.modifiers.plain);
+    });
+
+    test(`Renders with class ${styles.modifiers.iconLg} when iconSize is "large" for ${component} list`, () => {
+      render(<List component={component} iconSize="large"></List>);
+
+      expect(screen.getByRole('list')).toHaveClass(styles.modifiers.iconLg);
+    });
+
+    test(`Renders with aria-label for ${component} list`, () => {
+      render(<List component={component} aria-label="Testing stuff"></List>);
+
+      expect(screen.getByRole('list')).toHaveAccessibleName('Testing stuff');
+    });
+
+    test(`Spreads additional props when passed for ${component} list`, () => {
+      render(<List component={component} id="Test ID"></List>);
+
+      expect(screen.getByRole('list')).toHaveAttribute('id', 'Test ID');
+    });
+
+    test(`Does not render with role attribute when isPlain is false for ${component} list`, () => {
+      render(<List component={component}></List>);
+
+      expect(screen.getByRole('list')).not.toHaveAttribute('role');
+    });
+
+    test(`Renders with role attribute of "list" when isPlain is true for ${component} list`, () => {
+      render(<List component={component} isPlain></List>);
+
+      expect(screen.getByRole('list')).toHaveAttribute('role', 'list');
+    });
+
+    test(`Matches snapshot for ${component} list`, () => {
+      const { asFragment } = render(<List component={component}></List>);
+
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
+});
+
+describe('Ol component list', () => {
+  test(`Renders with type of "1" by default`, () => {
+    render(<List component={ListComponent.ol}></List>);
 
-  test('plain list', () => {
-    render(
-      <List isPlain>
-        <ListItems />
-      </List>
-    );
-    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-plain');
+    expect(screen.getByRole('list')).toHaveAttribute('type', '1');
   });
 
-  test('icon list', () => {
-    const { asFragment } = render(
-      <List isPlain>
-        <ListItem icon={<BookOpen />}>Apple</ListItem>
-        <ListItem icon={<Key />}>Banana</ListItem>
-        <ListItem icon={<Desktop />}>Orange</ListItem>
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
+  test(`Renders with type attribute when type is passed`, () => {
+    render(<List component={ListComponent.ol} type={OrderType.uppercaseLetter}></List>);
+
+    expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
   });
+});
+
+describe('Ul component list', () => {
+  test(`Does not render with type attribute when type is passed`, () => {
+    render(<List type={OrderType.lowercaseRomanNumber}></List>);
 
-  test('icon large list', () => {
-    const { asFragment } = render(
-      <List iconSize="large">
-        <ListItem icon={<BookOpen />}>Apple</ListItem>
-        <ListItem icon={<Key />}>Banana</ListItem>
-        <ListItem icon={<Desktop />}>Orange</ListItem>
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByRole('list')).not.toHaveAttribute('type');
   });
 });

package/src/components/List/__tests__/ListItem.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { ListItem } from '../ListItem';
+import styles from '@patternfly/react-styles/css/components/List/list';
+
+test('Renders with children', () => {
+  render(<ListItem>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveTextContent('List item content');
+});
+
+test(`Does not render with a class by default`, () => {
+  render(<ListItem>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).not.toHaveClass();
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<ListItem className="test-class">List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveClass('test-class', { exact: true });
+});
+
+test(`Renders with icon content when icon prop is passed`, () => {
+  render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toContainHTML('<div>Icon content</div>');
+});
+
+test(`Renders with class ${styles.listItem} when icon prop is passed`, () => {
+  render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveClass(styles.listItem, { exact: true });
+});
+
+test(`Spreads additional props when passed`, () => {
+  render(<ListItem id="test-ID">List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveAttribute('id', 'test-ID');
+});
+
+test('Matches snapshot without icon', () => {
+  const { asFragment } = render(<ListItem>List item content</ListItem>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with icon', () => {
+  const { asFragment } = render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -1,275 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`List icon large list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-icon-lg"
-  >
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Apple
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M802,320 C748.980664,320 706,277.019336 706,224 C706,170.980664 748.980664,128 802,128 C855.019336,128 898,170.980664 898,224 C898,277.019336 855.019336,320 802,320 M704,0 C527.3,0 384,143.3 384,320 C383.937788,357.490503 390.505571,394.696657 403.4,429.9 L0,824.1 L0,1024 L192,1024 L192,896 L320,896 L320,768 L448,768 L597,622 C596.906403,621.881923 596.838304,621.745723 596.8,621.6 C631.220126,633.811107 667.47802,640.034477 704,640 C880.7,640 1024,496.7 1024,320 C1024,143.3 880.7,0 704,0"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Banana
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Orange
-      </span>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List icon list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-plain"
-    role="list"
-  >
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Apple
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M802,320 C748.980664,320 706,277.019336 706,224 C706,170.980664 748.980664,128 802,128 C855.019336,128 898,170.980664 898,224 C898,277.019336 855.019336,320 802,320 M704,0 C527.3,0 384,143.3 384,320 C383.937788,357.490503 390.505571,394.696657 403.4,429.9 L0,824.1 L0,1024 L192,1024 L192,896 L320,896 L320,768 L448,768 L597,622 C596.906403,621.881923 596.838304,621.745723 596.8,621.6 C631.220126,633.811107 667.47802,640.034477 704,640 C880.7,640 1024,496.7 1024,320 C1024,143.3 880.7,0 704,0"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Banana
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Orange
-      </span>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List inline list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-inline"
-  >
-    <ul
-      class="pf-v6-c-list"
-    >
-      <li
-        class=""
-      >
-        <span>
-          First
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Second
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Third
-        </span>
-      </li>
-    </ul>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List ordered list 1`] = `
+exports[`Shared tests between ol and ul lists Matches snapshot for ol list 1`] = `
 <DocumentFragment>
   <ol
     class="pf-v6-c-list"
     type="1"
-  >
-    <li
-      class=""
-    >
-      <span>
-        Apple
-      </span>
-    </li>
-    <li
-      class=""
-    >
-      <span>
-        Banana
-      </span>
-    </li>
-    <li
-      class=""
-    >
-      <span>
-        Orange
-      </span>
-    </li>
-  </ol>
+  />
 </DocumentFragment>
 `;
 
-exports[`List simple list 1`] = `
+exports[`Shared tests between ol and ul lists Matches snapshot for ul list 1`] = `
 <DocumentFragment>
   <ul
     class="pf-v6-c-list"
-  >
-    <ul
-      class="pf-v6-c-list"
-    >
-      <li
-        class=""
-      >
-        <span>
-          First
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Second
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Third
-        </span>
-      </li>
-    </ul>
-  </ul>
+  />
 </DocumentFragment>
 `;

package/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with icon 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-v6-c-list__item"
+  >
+    <span
+      class="pf-v6-c-list__item-icon"
+    >
+      <div>
+        Icon content
+      </div>
+    </span>
+    <span
+      class="pf-v6-c-list__item-text"
+    >
+      List item content
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without icon 1`] = `
+<DocumentFragment>
+  <li
+    class=""
+  >
+    <span>
+      List item content
+    </span>
+  </li>
+</DocumentFragment>
+`;

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

@@ -116,7 +116,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      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."
       loginTitle="Log in to your account"

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

@@ -189,7 +189,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      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."
       loginTitle="Log in to your account"

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

@@ -117,7 +117,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      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."
       loginTitle="Log in to your account"

package/src/components/Nav/Nav.tsx

@@ -10,7 +10,7 @@ export type NavSelectClickHandler = (
   to: string
 ) => void;
 export interface NavProps
-  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect'>,
+  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect' | 'onToggle'>,
     OUIAProps {
   /** Anything that can be rendered inside of the nav */
   children?: React.ReactNode;

package/src/components/Nav/NavExpandable.tsx

@@ -141,7 +141,12 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                 </button>
               )}
             </PageSidebarContext.Consumer>
-            <section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
+            <section
+              className={css(styles.navSubnav)}
+              aria-labelledby={this.id}
+              hidden={expandedState ? null : true}
+              {...(!expandedState && { inert: '' })}
+            >
               {srText && (
                 <h2 className="pf-v6-screen-reader" id={this.id}>
                   {srText}

package/src/components/Nav/NavItemSeparator.tsx

@@ -2,6 +2,7 @@ import { Divider, DividerProps } from '../Divider';
 
 export const NavItemSeparator: React.FunctionComponent<DividerProps> = ({
   component = 'li',
+  role = 'presentation',
   ...props
-}: DividerProps) => <Divider component={component} {...props} />;
+}: DividerProps) => <Divider component={component} role={role} {...props} />;
 NavItemSeparator.displayName = 'NavItemSeparator';

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

@@ -39,6 +39,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       aria-labelledby="''"
       class="pf-v6-c-nav__subnav"
       hidden=""
+      inert=""
     >
       <h2
         class="pf-v6-screen-reader"