@patternfly/react-core 6.2.1-prerelease.9 → 6.2.2

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

@@ -1,113 +1,117 @@
 import { render, screen } from '@testing-library/react';
-import { List, ListVariant, ListComponent, OrderType } from '../List';
-import styles from '@patternfly/react-styles/css/components/List/list';
-
-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>);
-
-      expect(screen.getByRole('list')).toBeVisible();
-    });
-
-    test(`Renders children for ${component} list`, () => {
-      render(<List component={component}>Children content</List>);
-
-      expect(screen.getByRole('list')).toHaveTextContent('Children content');
-    });
-
-    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>);
-
-      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>);
+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();
+  });
 
-      expect(screen.getByRole('list')).toHaveAttribute('role', 'list');
-    });
+  test('inline list', () => {
+    const { asFragment } = render(
+      <List variant={ListVariant.inline}>
+        <ListItems />
+      </List>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-    test(`Matches snapshot for ${component} list`, () => {
-      const { asFragment } = 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(asFragment()).toMatchSnapshot();
-    });
+  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');
   });
-});
 
-describe('Ol component list', () => {
-  test(`Renders with type of "1" by default`, () => {
-    render(<List component={ListComponent.ol}></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')).toHaveAttribute('type', '1');
+  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 type attribute when type is passed`, () => {
-    render(<List component={ListComponent.ol} type={OrderType.uppercaseLetter}></List>);
+  test('bordered list', () => {
+    render(
+      <List isBordered>
+        <ListItems />
+      </List>
+    );
+    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-bordered');
+  });
 
-    expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
+  test('plain list', () => {
+    render(
+      <List isPlain>
+        <ListItems />
+      </List>
+    );
+    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-plain');
   });
-});
 
-describe('Ul component list', () => {
-  test(`Does not render with type attribute when type is passed`, () => {
-    render(<List type={OrderType.lowercaseRomanNumber}></List>);
+  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();
+  });
 
-    expect(screen.getByRole('list')).not.toHaveAttribute('type');
+  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();
   });
 });

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

@@ -1,18 +1,275 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Shared tests between ol and ul lists Matches snapshot for ol list 1`] = `
+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`] = `
 <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[`Shared tests between ol and ul lists Matches snapshot for ul list 1`] = `
+exports[`List simple 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/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' | 'onToggle'>,
+  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect'>,
     OUIAProps {
   /** Anything that can be rendered inside of the nav */
   children?: React.ReactNode;

package/src/components/Nav/NavItemSeparator.tsx

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

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

@@ -8,7 +8,7 @@ import {
 } from '@patternfly/react-core';
 
 export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
-  <DescriptionList aria-label="Progress Title outside of progress bar">
+  <DescriptionList>
     <DescriptionListGroup>
       <DescriptionListTerm id="title-outside-progress-example-label">Title outside of progress bar</DescriptionListTerm>
       <DescriptionListDescription>

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -32,7 +32,6 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
       />
       <br />
       <SearchInput
-        aria-label="Advanced search"
         attributes={[
           { attr: 'username', display: 'Username' },
           { attr: 'firstname', display: 'First name' }

package/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -10,7 +10,6 @@ export const SearchInputBasic: React.FunctionComponent = () => {
 
   return (
     <SearchInput
-      aria-label="Search basic example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -7,13 +7,7 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput
-        ref={ref}
-        value={value}
-        onChange={(_event, value) => setValue(value)}
-        onClear={() => setValue('')}
-        aria-label="Search focus using ref example"
-      />
+      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -15,7 +15,6 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
 
   return (
     <SearchInput
-      aria-label="Search with expandable button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -29,7 +29,6 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
 
   return (
     <SearchInput
-      aria-label="Search match with navigable options example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -17,7 +17,6 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
 
   return (
     <SearchInput
-      aria-label="Match with result count"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -6,7 +6,6 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
 
   return (
     <SearchInput
-      aria-label="Search with submit button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => setValue(value)}

package/src/components/Tabs/Tabs.tsx

@@ -31,9 +31,7 @@ export interface HorizontalOverflowObject {
 type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
 type TabsChild = TabElement | boolean | null | undefined;
 
-export interface TabsProps
-  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>,
-    OUIAProps {
+export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
   /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
   children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -12,7 +12,7 @@ export enum ToolbarGroupVariant {
   'label-group' = 'label-group'
 }
 
-export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'onToggle'> {
+export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */

package/src/components/Toolbar/ToolbarItem.tsx

@@ -185,19 +185,10 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   children,
   isAllExpanded,
   isOverflowContainer,
-  role,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
-    const isDividerRoleValid = role === 'separator' || role === 'presentation';
-    return (
-      <Divider
-        className={css(className)}
-        orientation={{ default: 'vertical' }}
-        {...props}
-        {...(isDividerRoleValid && { role: role as 'separator' | 'presentation' })}
-      />
-    );
+    return <Divider className={css(className)} orientation={{ default: 'vertical' }} {...props} />;
   }
 
   return (
@@ -226,7 +217,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           )}
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
-          role={role}
           {...props}
         >
           {children}