@patternfly/react-core 6.0.0-alpha.33 → 6.0.0-alpha.35

package/src/deprecated/components/Chip/ChipGroup.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { LabelGroup, LabelGroupProps } from '../../../components/Label';
+import { TooltipPosition } from '../../../components/Tooltip';
+import { getOUIAProps, OUIAProps } from '../../../helpers';
+
+export interface ChipGroupProps extends Omit<LabelGroupProps, 'ref'>, OUIAProps {
+  /** Content rendered inside the chip group. Should be <Chip> elements. */
+  children?: React.ReactNode;
+  /** Additional classes added to the chip item */
+  className?: string;
+  /** Flag for having the chip group default to expanded */
+  defaultIsOpen?: boolean;
+  /** Customizable "Show Less" text string */
+  expandedText?: string;
+  /** Customizeable template string. Use variable "${remaining}" for the overflow chip count. */
+  collapsedText?: string;
+  /** Category name text for the chip group category.  If this prop is supplied the chip group with have a label and category styling applied */
+  categoryName?: string;
+  /** Aria label for chip group that does not have a category name */
+  'aria-label'?: string;
+  /** Set number of chips to show before overflow */
+  numChips?: number;
+  /** Flag if chip group can be closed*/
+  isClosable?: boolean;
+  /** Aria label for close button */
+  closeBtnAriaLabel?: string;
+  /** Function that is called when clicking on the chip group close button or on an overflow chip */
+  onClick?: (event: React.MouseEvent) => void;
+  /** @deprecated Function that is called when clicking on the overflow (expand/collapse) chip button */
+  onOverflowChipClick?: (event: React.MouseEvent) => void;
+  /** Position of the tooltip which is displayed if the category name text is longer */
+  tooltipPosition?:
+    | TooltipPosition
+    | 'auto'
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left-end'
+    | 'right-start'
+    | 'right-end';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+}
+
+class ChipGroup extends React.Component<ChipGroupProps> {
+  static displayName = 'ChipGroup';
+  constructor(props: ChipGroupProps) {
+    super(props);
+  }
+
+  static defaultProps: ChipGroupProps = {
+    expandedText: 'Show Less',
+    collapsedText: '${remaining} more',
+    categoryName: '',
+    defaultIsOpen: false,
+    numChips: 3,
+    isClosable: false,
+    closeBtnAriaLabel: 'Close chip group',
+    tooltipPosition: 'top',
+    'aria-label': 'Chip group category'
+  };
+
+  render() {
+    const {
+      categoryName,
+      children,
+      className,
+      isClosable,
+      closeBtnAriaLabel,
+      'aria-label': ariaLabel,
+      onClick,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onOverflowChipClick,
+      numChips,
+      expandedText,
+      collapsedText,
+      ouiaId,
+      defaultIsOpen,
+      tooltipPosition,
+      ...props
+    } = this.props;
+
+    return (
+      <LabelGroup
+        className={className}
+        categoryName={categoryName}
+        numLabels={numChips}
+        isClosable={isClosable}
+        closeBtnAriaLabel={closeBtnAriaLabel}
+        aria-label={ariaLabel}
+        onClick={onClick}
+        expandedText={expandedText}
+        collapsedText={collapsedText}
+        defaultIsOpen={defaultIsOpen}
+        tooltipPosition={tooltipPosition}
+        {...getOUIAProps(ChipGroup.displayName, ouiaId)}
+        {...props}
+      >
+        {children}
+      </LabelGroup>
+    );
+  }
+}
+
+export { ChipGroup };

package/src/{components → deprecated/components}/Chip/__tests__/Chip.test.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Chip } from '../Chip';
-import styles from '@patternfly/react-styles/css/components/Chip/chip';
+import styles from '@patternfly/react-styles/css/components/Label/label';
 
-jest.mock('../../Tooltip', () => ({
+jest.mock('../../../../components/Tooltip', () => ({
   Tooltip: ({ content, position }) => (
     <div data-testid="tooltip-mock">
       <p>{`content: ${content}`}</p>
@@ -26,7 +26,7 @@ jest.mock('../../Tooltip', () => ({
     expect(screen.getByTestId('container').firstChild).toBeVisible();
   });
 
-  test(`Renders with class ${styles.chip} on the ${chipType} container element`, () => {
+  test(`Renders with class ${styles.label} on the ${chipType} container element`, () => {
     render(
       <Chip isOverflowChip={isOverflowChip} data-testid="container">
         Chip text
@@ -35,23 +35,28 @@ jest.mock('../../Tooltip', () => ({
 
     // Only a non-overflow chip will have exactly the class "pf-v5-c-chip", we test for
     // additional classes on overflow chips elsewhere in the suite
-    expect(screen.getByTestId('container')).toHaveClass(styles.chip, { exact: !isOverflowChip });
+    expect(screen.getByTestId('container')).toHaveClass(
+      isOverflowChip ? `${styles.label} ${styles.modifiers.overflow}` : `${styles.label} ${styles.modifiers.outline}`,
+      {
+        exact: !isOverflowChip
+      }
+    );
   });
 
-  test(`Renders with class ${styles.chipContent} around the ${chipType} content`, () => {
+  test(`Renders with class ${styles.labelContent} around the ${chipType} content`, () => {
     render(
       <Chip isOverflowChip={isOverflowChip} data-testid="container">
         Chip text
       </Chip>
     );
 
-    expect(screen.getByTestId('container').firstChild).toHaveClass(styles.chipContent, { exact: true });
+    expect(screen.getByTestId('container').firstChild).toHaveClass(styles.labelContent, { exact: true });
   });
 
-  test(`Renders ${chipType} children with class ${styles.chipText}`, () => {
+  test(`Renders ${chipType} children with class ${styles.labelText}`, () => {
     render(<Chip isOverflowChip={isOverflowChip}>Chip text</Chip>);
 
-    expect(screen.getByText('Chip text')).toHaveClass(styles.chipText, { exact: true });
+    expect(screen.getByText('Chip text')).toHaveClass(styles.labelText, { exact: true });
   });
 
   test(`Renders with custom class on the ${chipType} container element`, () => {
@@ -74,34 +79,14 @@ jest.mock('../../Tooltip', () => ({
     expect(screen.getByText('Badge content')).toBeVisible();
   });
 
-  test(`Renders with div container on ${chipType} by default`, () => {
-    render(
-      <Chip isOverflowChip={isOverflowChip} data-testid="container">
-        Chip text
-      </Chip>
-    );
-
-    expect(screen.getByTestId('container').tagName).toBe('DIV');
-  });
-
-  test(`Renders with custom container on ${chipType} when component prop is passed`, () => {
-    render(
-      <Chip component="li" isOverflowChip={isOverflowChip}>
-        Chip text
-      </Chip>
-    );
-
-    expect(screen.getByRole('listitem')).toBeVisible();
-  });
-
   test(`Renders maxWidth css var in style attribute when textMaxWidth is passed for ${chipType}`, () => {
     render(
-      <Chip isOverflowChip={isOverflowChip} data-testid="container" textMaxWidth="10px">
+      <Chip isOverflowChip={isOverflowChip} textMaxWidth="10px">
         Chip text
       </Chip>
     );
 
-    expect(screen.getByTestId('container')).toHaveAttribute('style', '--pf-v5-c-chip__text--MaxWidth: 10px;');
+    expect(screen.getByText('Chip text')).toHaveAttribute('style', '--pf-v5-c-label__text--MaxWidth: 10px;');
   });
 
   test(`Spreads additional props to container for ${chipType}`, () => {
@@ -115,13 +100,13 @@ jest.mock('../../Tooltip', () => ({
   });
 });
 
-test(`Renders id prop on ${styles.chipText} container for default chip`, () => {
+test(`Renders id prop on ${styles.labelText} container for default chip`, () => {
   render(<Chip id="custom-id">Chip text</Chip>);
 
-  expect(screen.getByText('Chip text')).toHaveAttribute('id', 'custom-id');
+  expect(screen.getByText('Chip text').parentElement?.parentElement).toHaveAttribute('id', 'custom-id');
 });
 
-test(`Does not render id prop on ${styles.chipText} container for overflow chip`, () => {
+test(`Does not render id prop on ${styles.labelText} container for overflow chip`, () => {
   render(
     <Chip isOverflowChip id="custom-id">
       Chip text
@@ -131,41 +116,29 @@ test(`Does not render id prop on ${styles.chipText} container for overflow chip`
   expect(screen.getByText('Chip text')).not.toHaveAttribute('id');
 });
 
-test(`Renders actions container with class ${styles.chipActions} when isReadOnly is false`, () => {
+test(`Renders actions container with class ${styles.labelActions} when isReadOnly is false`, () => {
   render(<Chip>Chip text</Chip>);
 
-  expect(screen.getByRole('button').parentElement).toHaveClass(styles.chipActions);
-});
-
-test(`Renders aria-labelledby on action close button by default`, () => {
-  render(<Chip>Chip text</Chip>);
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
-});
-
-test(`Renders aria-labelledby on action close button with custom id passed`, () => {
-  render(<Chip id="custom-id">Chip text</Chip>);
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
+  expect(screen.getByRole('button').parentElement).toHaveClass(styles.labelActions);
 });
 
 test(`Renders concatenated aria-label on action close button by default`, () => {
   render(<Chip>Chip text</Chip>);
 
-  expect(screen.getByRole('button')).toHaveAccessibleName('close Chip text');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Close Chip text');
 });
 
 test(`Renders custom aria-label on action close button when closeBtnAriaLabel is passed`, () => {
   render(<Chip closeBtnAriaLabel="custom label">Chip text</Chip>);
 
-  expect(screen.getByRole('button')).toHaveAccessibleName('custom label Chip text');
+  expect(screen.getByRole('button')).toHaveAccessibleName('custom label');
 });
 
 test(`Does not render close button action when isOverflowChip is true`, () => {
   render(<Chip isOverflowChip>Chip text</Chip>);
 
   // Because overflow chip renders as a button, we need to add the accessible name to the query
-  expect(screen.queryByRole('button', { name: 'close Chip text' })).not.toBeInTheDocument();
+  expect(screen.queryByRole('button', { name: 'Close Chip text' })).not.toBeInTheDocument();
 });
 
 test(`Does not render close button action when isReadOnly is true`, () => {
@@ -196,7 +169,7 @@ test(`Calls onClick when close button action is clicked for default chip`, async
 
   render(<Chip onClick={onClickMock}>Chip text</Chip>);
 
-  await user.click(screen.getByRole('button', { name: 'close Chip text' }));
+  await user.click(screen.getByRole('button', { name: 'Close Chip text' }));
 
   expect(onClickMock).toHaveBeenCalledTimes(1);
 });
@@ -227,7 +200,7 @@ test(`Calls onClick when chip is clicked for overflow chip`, async () => {
     </Chip>
   );
 
-  await user.click(screen.getByRole('button', { name: 'Chip text' }));
+  await user.click(screen.getByRole('button'));
 
   expect(onClickMock).toHaveBeenCalledTimes(1);
 });
@@ -258,14 +231,6 @@ test('Passes position to Tooltip', () => {
   Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 0 });
 });
 
-test('Passes content to Tooltip', () => {
-  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 500 });
-  render(<Chip>Test chip text</Chip>);
-
-  expect(screen.getByText(`content: Test chip text`)).toBeVisible();
-  Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 0 });
-});
-
 test('Matches snapshot', () => {
   const { asFragment } = render(
     <Chip id="snapshot-test" ouiaId="snapshot-test">

package/src/{components → deprecated/components}/Chip/__tests__/ChipGroup.test.tsx

@@ -4,8 +4,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ChipGroup } from '../index';
-import { Chip } from '../../Chip';
-import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
+import { Chip } from '..';
+import styles from '@patternfly/react-styles/css/components/Label/label-group';
 
 test('chip group default', () => {
   render(
@@ -14,7 +14,7 @@ test('chip group default', () => {
     </ChipGroup>
   );
 
-  expect(screen.getByRole('group')).toHaveClass(styles.chipGroup);
+  expect(screen.getByRole('list').parentElement?.parentElement).toHaveClass(styles.labelGroup);
 });
 
 test('chip group with custom className', () => {
@@ -24,7 +24,7 @@ test('chip group with custom className', () => {
     </ChipGroup>
   );
 
-  expect(screen.getByRole('group')).toHaveClass(`${styles.chipGroup} test`);
+  expect(screen.getByRole('list').parentElement?.parentElement).toHaveClass(`${styles.labelGroup} test`);
 });
 
 test('chip group has aria-label by default when categoryName is not passed', () => {
@@ -34,7 +34,7 @@ test('chip group has aria-label by default when categoryName is not passed', ()
     </ChipGroup>
   );
 
-  expect(screen.getByRole('group')).toHaveAccessibleName('Chip group category');
+  expect(screen.getByRole('list')).toHaveAccessibleName('Chip group category');
 });
 
 test('chip group with custom aria-label', () => {
@@ -44,7 +44,7 @@ test('chip group with custom aria-label', () => {
     </ChipGroup>
   );
 
-  expect(screen.getByRole('group')).toHaveAccessibleName('test chip group');
+  expect(screen.getByRole('list')).toHaveAccessibleName('test chip group');
 });
 
 test('chip group with category', () => {
@@ -62,7 +62,7 @@ test('chip group with category renders with class pf-m-category', () => {
       <Chip>1.1</Chip>
     </ChipGroup>
   );
-  expect(screen.getByRole('group')).toHaveClass(`${styles.modifiers.category}`);
+  expect(screen.getByRole('list').parentElement?.parentElement).toHaveClass(`${styles.modifiers.category}`);
 });
 
 test('chip group has aria-labelledby attribute', () => {
@@ -71,7 +71,7 @@ test('chip group has aria-labelledby attribute', () => {
       <Chip>1.1</Chip>
     </ChipGroup>
   );
-  expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
+  expect(screen.getByRole('list')).toHaveAttribute('aria-labelledby', expect.stringContaining(`pf-random-id`));
 });
 
 test('chip group has aria-labelledby attribute set to ID value', () => {
@@ -80,7 +80,7 @@ test('chip group has aria-labelledby attribute set to ID value', () => {
       <Chip>1.1</Chip>
     </ChipGroup>
   );
-  expect(screen.getByRole('group')).toHaveAttribute('aria-labelledby', 'chip-group-id');
+  expect(screen.getByRole('list')).toHaveAttribute('aria-labelledby', 'chip-group-id');
 });
 
 test('chip group expands', async () => {
@@ -105,7 +105,7 @@ test('chip group with closable category', () => {
       <Chip>1.1</Chip>
     </ChipGroup>
   );
-  expect(screen.getByRole('group').lastChild).toHaveClass(styles.chipGroupClose);
+  expect(screen.getByRole('list').parentElement?.parentElement?.lastChild).toHaveClass(styles.labelGroupClose);
 });
 
 test('chip group with closeBtnAriaLabel', () => {
@@ -132,23 +132,6 @@ test('chip group onClick', async () => {
   expect(onClose).toHaveBeenCalledTimes(1);
 });
 
-test('chip group onOverflowChipClick', async () => {
-  const onOverflowChipClick = jest.fn();
-  const user = userEvent.setup();
-
-  render(
-    <ChipGroup categoryName="category" onOverflowChipClick={onOverflowChipClick}>
-      <Chip>1</Chip>
-      <Chip>2</Chip>
-      <Chip>3</Chip>
-      <Chip>4</Chip>
-    </ChipGroup>
-  );
-
-  await user.click(screen.getByText('1 more'));
-  expect(onOverflowChipClick).toHaveBeenCalledTimes(1);
-});
-
 test('chip group expanded', async () => {
   const user = userEvent.setup();
 
@@ -288,6 +271,6 @@ test('chip group will not render if no children passed', () => {
 
 test('chip group renders to match snapshot', () => {
   const { asFragment } = render(<ChipGroup>chips</ChipGroup>);
-  expect(screen.getByRole('group')).toBeInTheDocument();
+  expect(screen.getByRole('list')).toBeInTheDocument();
   expect(asFragment()).toMatchSnapshot();
 });

package/src/{components → deprecated/components}/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -2,34 +2,33 @@
 
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v5-c-chip"
+  <span
+    class="pf-v5-c-label pf-m-outline"
     data-ouia-component-id="snapshot-test"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
+    id="snapshot-test"
   >
     <span
-      class="pf-v5-c-chip__content"
+      class="pf-v5-c-label__content"
     >
       <span
-        class="pf-v5-c-chip__text"
-        id="snapshot-test"
+        class="pf-v5-c-label__text"
+        style="--pf-v5-c-label__text--MaxWidth: 16ch;"
       >
         Chip text
       </span>
     </span>
     <span
-      class="pf-v5-c-chip__actions"
+      class="pf-v5-c-label__actions"
     >
       <button
         aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_snapshot-test snapshot-test"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="snapshot-test"
+        aria-label="Close Chip text"
+        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+        data-ouia-component-id="OUIA-Generated-Button-plain-17"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
-        id="remove_snapshot-test"
         type="button"
       >
         <svg
@@ -47,6 +46,6 @@ exports[`Matches snapshot 1`] = `
         </svg>
       </button>
     </span>
-  </div>
+  </span>
 </DocumentFragment>
 `;

package/src/{components → deprecated/components}/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap

@@ -3,22 +3,20 @@
 exports[`chip group renders to match snapshot 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Chip group category"
-    class="pf-v5-c-chip-group"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
+    class="pf-v5-c-label-group"
   >
     <div
-      class="pf-v5-c-chip-group__main"
+      class="pf-v5-c-label-group__main"
     >
       <ul
         aria-label="Chip group category"
-        class="pf-v5-c-chip-group__list"
+        class="pf-v5-c-label-group__list"
+        data-ouia-component-type="PF5/ChipGroup"
+        data-ouia-safe="true"
         role="list"
       >
         <li
-          class="pf-v5-c-chip-group__list-item"
+          class="pf-v5-c-label-group__list-item"
         >
           chips
         </li>

package/src/{components → deprecated/components}/Chip/examples/Chip.md

@@ -4,14 +4,17 @@ section: components
 cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
 propComponents: ['Chip', 'ChipGroup']
 ouia: true
+deprecated: true
 ---
 
 ## Examples
 
 ### Chip variants
+
 Chips can be removable or read-only. The Overflow chip is a special chip that is used to expand or collapse the content of a chip group.
 
 ```ts file='./ChipDefault.tsx'
+
 ```
 
 ### Chip groups
@@ -19,14 +22,17 @@ Chips can be removable or read-only. The Overflow chip is a special chip that is
 A chip group is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When the value of `numChips` is exceeded, additional chips will be hidden using an overflow chip.
 
 ```ts file='./ChipGroupInline.tsx'
+
 ```
 
 ### Chip groups with categories
 
 ```ts file='./ChipGroupWithCategories.tsx'
+
 ```
 
 ### Chip groups with removable categories
 
 ```ts file='./ChipGroupRemovableCategories.tsx'
+
 ```

package/src/{components → deprecated/components}/Chip/examples/ChipDefault.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Badge, Chip } from '@patternfly/react-core';
+import { Badge } from '@patternfly/react-core';
+import { Chip } from '@patternfly/react-core/deprecated';
 
 export const ChipDefault: React.FunctionComponent = () => {
   const [chips, setChips] = React.useState({

package/src/{components → deprecated/components}/Chip/examples/ChipGroupInline.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupInline: React.FunctionComponent = () => {
   const [chips, setChips] = React.useState([

package/src/{components → deprecated/components}/Chip/examples/ChipGroupRemovableCategories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
   const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);

package/src/{components → deprecated/components}/Chip/examples/ChipGroupWithCategories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 export const ChipGroupWithCategories: React.FunctionComponent = () => {
   const [chips, setChips] = React.useState([

package/src/deprecated/components/Select/Select.tsx

@@ -19,8 +19,8 @@ import {
   SelectDirection,
   SelectFooterTabbableItems
 } from './selectConstants';
-import { ChipGroup, ChipGroupProps } from '../../../components/Chip';
-import { Chip } from '../../../components/Chip';
+import { ChipGroup, ChipGroupProps } from '../Chip';
+import { Chip } from '../Chip';
 import { Spinner } from '../../../components/Spinner';
 import {
   keyHandler,