@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.51

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,32 +26,37 @@ 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
       </Chip>
     );
 
-    // Only a non-overflow chip will have exactly the class "pf-v5-c-chip", we test for
+    // Only a non-overflow chip will have exactly the class "pf-v6-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-v6-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,10 @@ 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';
+
+jest.mock('../../../../helpers/GenerateId/GenerateId');
 
 test('chip group default', () => {
   render(
@@ -14,7 +16,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 +26,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 +36,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 +46,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 +64,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 +73,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(`generated-id`));
 });
 
 test('chip group has aria-labelledby attribute set to ID value', () => {
@@ -80,7 +82,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 +107,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 +134,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();
 
@@ -283,11 +268,11 @@ test('passing defaultIsOpen of true causes the chip group to be expanded by defa
 
 test('chip group will not render if no children passed', () => {
   render(<ChipGroup />);
-  expect(screen.queryByRole('group')).toBeNull();
+  expect(screen.queryByRole('list')).toBeNull();
 });
 
 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,40 +2,38 @@
 
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v5-c-chip"
+  <span
+    class="pf-v6-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-v6-c-label__content"
     >
       <span
-        class="pf-v5-c-chip__text"
-        id="snapshot-test"
+        class="pf-v6-c-label__text"
+        style="--pf-v6-c-label__text--MaxWidth: 16ch;"
       >
         Chip text
       </span>
     </span>
     <span
-      class="pf-v5-c-chip__actions"
+      class="pf-v6-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-v6-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
           aria-hidden="true"
-          class="pf-v5-svg"
+          class="pf-v6-svg"
           fill="currentColor"
           height="1em"
           role="img"
@@ -48,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-v6-c-label-group"
   >
     <div
-      class="pf-v5-c-chip-group__main"
+      class="pf-v6-c-label-group__main"
     >
       <ul
         aria-label="Chip group category"
-        class="pf-v5-c-chip-group__list"
+        class="pf-v6-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-v6-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/ContextSelector/ContextSelector.tsx

@@ -135,8 +135,8 @@ class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateI
     } = this.props;
 
     const uniqueId = id || getUniqueId();
-    const toggleId = `pf-v5-context-selector-toggle-id-${uniqueId}`;
-    const screenReaderLabelId = `pf-v5-context-selector-label-id-${uniqueId}`;
+    const toggleId = `pf-v6-context-selector-toggle-id-${uniqueId}`;
+    const screenReaderLabelId = `pf-v6-context-selector-label-id-${uniqueId}`;
     const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
 
     const menuContainer = (