@patternfly/react-core 6.2.1-prerelease.0 → 6.2.1-prerelease.10

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -25,7 +25,7 @@ export const ExpandableSectionDetached: React.FunctionComponent = () => {
           contentId={contentId}
           direction="up"
         >
-          {isExpanded ? 'Show less' : 'Show more'}
+          {isExpanded ? 'Show less detached example content' : 'Show more detached example content'}
         </ExpandableSectionToggle>
       </StackItem>
     </Stack>

package/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -10,7 +10,9 @@ export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
 
   return (
     <ExpandableSection
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      toggleText={
+        isExpanded ? 'Show less disclosure variation example content' : 'Show more disclosure variation example content'
+      }
       onToggle={onToggle}
       isExpanded={isExpanded}
       displaySize="lg"

package/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx

@@ -21,7 +21,7 @@ export const ExpandableSectionIndented: React.FunctionComponent = () => {
       />
       <br />
       <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
+        toggleText={isExpanded ? 'Show less indented example content' : 'Show more indented example content'}
         onToggle={onToggle}
         isExpanded={isExpanded}
         isIndented

package/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx

@@ -11,7 +11,7 @@ export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () =>
   return (
     <ExpandableSection
       variant={ExpandableSectionVariant.truncate}
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      toggleText={isExpanded ? 'Show less truncated content' : 'Show more truncated content'}
       onToggle={onToggle}
       isExpanded={isExpanded}
     >

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx

@@ -1,7 +1,7 @@
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionUncontrolled: React.FunctionComponent = () => (
-  <ExpandableSection toggleText="Show more">
+  <ExpandableSection toggleText="Show more uncontrolled example content">
     This content is visible only when the component is expanded.
   </ExpandableSection>
 );

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx

@@ -1,7 +1,10 @@
 import { ExpandableSection } from '@patternfly/react-core';
 
 export const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => (
-  <ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
+  <ExpandableSection
+    toggleTextExpanded="Show less uncontrolled dynamic toggle example content"
+    toggleTextCollapsed="Show more uncontrolled dynamic toggle example content"
+  >
     This content is visible only when the component is expanded.
   </ExpandableSection>
 );

package/src/components/Form/FormFieldGroup.tsx

@@ -1,6 +1,6 @@
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
 
-export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
 
-export interface FormFieldGroupExpandableProps extends React.HTMLProps<HTMLDivElement> {
+export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { GenerateId } from '../../helpers';
 
-export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */

package/src/components/List/List.tsx

@@ -49,12 +49,14 @@ export const List: React.FunctionComponent<ListProps> = ({
   type = OrderType.number,
   ref = null,
   component = ListComponent.ul,
+  'aria-label': ariaLabel,
   ...props
 }: ListProps) =>
   component === ListComponent.ol ? (
     <ol
       ref={ref as React.Ref<HTMLOListElement>}
       type={type}
+      aria-label={ariaLabel}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(
@@ -71,6 +73,7 @@ export const List: React.FunctionComponent<ListProps> = ({
   ) : (
     <ul
       ref={ref as React.Ref<HTMLUListElement>}
+      aria-label={ariaLabel}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(

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();
+});