From 671e42fda0ab3c05e79ff368cb57ef69d0e483a4 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 30 Jan 2024 11:37:44 -0500
Subject: [PATCH 1/9] feat(Chip): use Label internally, deprecate Chip

---
 .../src/components/Chip/ChipGroup.tsx         | 214 ------------------
 .../src/components/Toolbar/ToolbarFilter.tsx  |   4 +-
 packages/react-core/src/components/index.ts   |   1 -
 .../src/deprecated/components/Chip/Chip.tsx   | 101 +++++++++
 .../deprecated/components/Chip/ChipGroup.tsx  | 111 +++++++++
 .../components/Chip/__tests__/Chip.test.tsx   |  75 +++---
 .../Chip/__tests__/ChipGroup.test.tsx         |  39 +---
 .../__snapshots__/Chip.test.tsx.snap          |  18 +-
 .../__snapshots__/ChipGroup.test.tsx.snap     |  14 +-
 .../components/Chip/examples/Chip.md          |   6 +
 .../components/Chip/examples/ChipDefault.tsx  |   3 +-
 .../Chip/examples/ChipGroupInline.tsx         |   2 +-
 .../examples/ChipGroupRemovableCategories.tsx |   2 +-
 .../Chip/examples/ChipGroupWithCategories.tsx |   2 +-
 .../{ => deprecated}/components/Chip/index.ts |   0
 .../deprecated/components/Select/Select.tsx   |   4 +-
 .../src/deprecated/components/index.ts        |   1 +
 17 files changed, 279 insertions(+), 318 deletions(-)
 delete mode 100644 packages/react-core/src/components/Chip/ChipGroup.tsx
 create mode 100644 packages/react-core/src/deprecated/components/Chip/Chip.tsx
 create mode 100644 packages/react-core/src/deprecated/components/Chip/ChipGroup.tsx
 rename packages/react-core/src/{ => deprecated}/components/Chip/__tests__/Chip.test.tsx (73%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/__tests__/ChipGroup.test.tsx (82%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap (79%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap (53%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/examples/Chip.md (97%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/examples/ChipDefault.tsx (94%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/examples/ChipGroupInline.tsx (90%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/examples/ChipGroupRemovableCategories.tsx (95%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/examples/ChipGroupWithCategories.tsx (90%)
 rename packages/react-core/src/{ => deprecated}/components/Chip/index.ts (100%)

diff --git a/packages/react-core/src/components/Chip/ChipGroup.tsx b/packages/react-core/src/components/Chip/ChipGroup.tsx
deleted file mode 100644
index 4c60657be1c..00000000000
--- a/packages/react-core/src/components/Chip/ChipGroup.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
-import { css } from '@patternfly/react-styles';
-import { Button } from '../Button';
-import { Chip } from './Chip';
-import { Tooltip, TooltipPosition } from '../Tooltip';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import { fillTemplate } from '../../helpers';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
-import { getOUIAProps, OUIAProps } from '../../helpers';
-
-export interface ChipGroupProps extends React.HTMLProps<HTMLUListElement>, 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 */
-  onClick?: (event: React.MouseEvent) => void;
-  /** 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;
-}
-
-interface ChipGroupState {
-  isOpen: boolean;
-  isTooltipVisible: boolean;
-}
-
-class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
-  static displayName = 'ChipGroup';
-  constructor(props: ChipGroupProps) {
-    super(props);
-    this.state = {
-      isOpen: this.props.defaultIsOpen,
-      isTooltipVisible: false
-    };
-  }
-  private headingRef = React.createRef<HTMLSpanElement>();
-
-  static defaultProps: ChipGroupProps = {
-    expandedText: 'Show Less',
-    collapsedText: '${remaining} more',
-    categoryName: '',
-    defaultIsOpen: false,
-    numChips: 3,
-    isClosable: false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onClick: (_e: React.MouseEvent) => undefined as any,
-    onOverflowChipClick: (_e: React.MouseEvent) => undefined as any,
-    closeBtnAriaLabel: 'Close chip group',
-    tooltipPosition: 'top',
-    'aria-label': 'Chip group category'
-  };
-
-  componentDidMount() {
-    this.setState({
-      isTooltipVisible: Boolean(
-        this.headingRef.current && this.headingRef.current.offsetWidth < this.headingRef.current.scrollWidth
-      )
-    });
-  }
-
-  toggleCollapse = () => {
-    this.setState((prevState) => ({
-      isOpen: !prevState.isOpen,
-      isTooltipVisible: Boolean(
-        this.headingRef.current && this.headingRef.current.offsetWidth < this.headingRef.current.scrollWidth
-      )
-    }));
-  };
-
-  renderLabel(id: string) {
-    const { categoryName, tooltipPosition } = this.props;
-    const { isTooltipVisible } = this.state;
-    return isTooltipVisible ? (
-      <Tooltip position={tooltipPosition} content={categoryName}>
-        <span tabIndex={0} ref={this.headingRef} className={css(styles.chipGroupLabel)}>
-          <span id={id}>{categoryName}</span>
-        </span>
-      </Tooltip>
-    ) : (
-      <span ref={this.headingRef} className={css(styles.chipGroupLabel)} id={id}>
-        {categoryName}
-      </span>
-    );
-  }
-
-  render() {
-    const {
-      categoryName,
-      children,
-      className,
-      isClosable,
-      closeBtnAriaLabel,
-      'aria-label': ariaLabel,
-      onClick,
-      onOverflowChipClick,
-      numChips,
-      expandedText,
-      collapsedText,
-      ouiaId,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      defaultIsOpen,
-      tooltipPosition,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...rest
-    } = this.props;
-    const { isOpen } = this.state;
-    const numChildren = React.Children.count(children);
-    const collapsedTextResult = fillTemplate(collapsedText as string, {
-      remaining: React.Children.count(children) - numChips
-    });
-
-    const renderChipGroup = (id: string) => {
-      const chipArray = !isOpen
-        ? React.Children.toArray(children).slice(0, numChips)
-        : React.Children.toArray(children);
-
-      return (
-        <div
-          className={css(styles.chipGroup, className, categoryName && styles.modifiers.category)}
-          role="group"
-          {...(categoryName && { 'aria-labelledby': id })}
-          {...(!categoryName && { 'aria-label': ariaLabel })}
-          {...getOUIAProps(ChipGroup.displayName, ouiaId)}
-        >
-          <div className={css(styles.chipGroupMain)}>
-            {categoryName && this.renderLabel(id)}
-            <ul
-              className={css(styles.chipGroupList)}
-              {...(categoryName && { 'aria-labelledby': id })}
-              {...(!categoryName && { 'aria-label': ariaLabel })}
-              role="list"
-              {...rest}
-            >
-              {chipArray.map((child, i) => (
-                <li className={css(styles.chipGroupListItem)} key={i}>
-                  {child}
-                </li>
-              ))}
-              {numChildren > numChips && (
-                <li className={css(styles.chipGroupListItem)}>
-                  <Chip
-                    isOverflowChip
-                    onClick={(event) => {
-                      this.toggleCollapse();
-                      onOverflowChipClick(event);
-                    }}
-                    component="button"
-                  >
-                    {isOpen ? expandedText : collapsedTextResult}
-                  </Chip>
-                </li>
-              )}
-            </ul>
-          </div>
-          {isClosable && (
-            <div className={css(styles.chipGroupClose)}>
-              <Button
-                variant="plain"
-                aria-label={closeBtnAriaLabel}
-                onClick={onClick}
-                id={`remove_group_${id}`}
-                aria-labelledby={`remove_group_${id} ${id}`}
-                ouiaId={ouiaId || closeBtnAriaLabel}
-              >
-                <TimesCircleIcon aria-hidden="true" />
-              </Button>
-            </div>
-          )}
-        </div>
-      );
-    };
-
-    return numChildren === 0 ? null : (
-      <GenerateId>{(randomId) => renderChipGroup(this.props.id || randomId)}</GenerateId>
-    );
-  }
-}
-
-export { ChipGroup };
diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
index c3d3aacc14e..64bcb6fb874 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ToolbarItem, ToolbarItemProps } from './ToolbarItem';
-import { ChipGroup } from '../Chip';
-import { Chip } from '../Chip';
+import { ChipGroup } from '../../deprecated/components/Chip';
+import { Chip } from '../../deprecated/components/Chip';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { PickOptional } from '../../helpers/typeUtils';
 
diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts
index a4338497ba5..b04379c4f49 100644
--- a/packages/react-core/src/components/index.ts
+++ b/packages/react-core/src/components/index.ts
@@ -15,7 +15,6 @@ export * from './Button';
 export * from './CalendarMonth';
 export * from './Card';
 export * from './Checkbox';
-export * from './Chip';
 export * from './ClipboardCopy';
 export * from './CodeBlock';
 export * from './DataList';
diff --git a/packages/react-core/src/deprecated/components/Chip/Chip.tsx b/packages/react-core/src/deprecated/components/Chip/Chip.tsx
new file mode 100644
index 00000000000..557c51dbd37
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/Chip/Chip.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { TooltipPosition } from '../../../components/Tooltip';
+import { Label, LabelProps } from '../../../components/Label';
+import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
+
+export interface ChipProps extends LabelProps, OUIAProps {
+  /** Badge to add to the chip. The badge will be rendered after the chip text. */
+  badge?: React.ReactNode;
+  /** Content rendered inside the chip text */
+  children?: React.ReactNode;
+  /** Aria Label for close button */
+  closeBtnAriaLabel?: string;
+  /** Additional classes added to the chip item */
+  className?: string;
+  /** Flag indicating if the chip is an overflow chip */
+  isOverflowChip?: boolean;
+  /** Flag indicating if chip is read only */
+  isReadOnly?: boolean;
+  /** Function that is called when clicking on the chip close button */
+  onClick?: (event: React.MouseEvent) => void;
+  /** @deprecated Component that will be used for chip. It is recommended that <button> or <li>  are used when the chip is an overflow chip. */
+  component?: React.ReactNode;
+  /** Position of the tooltip which is displayed if 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';
+
+  /** Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text */
+  textMaxWidth?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+}
+
+class Chip extends React.Component<ChipProps> {
+  static displayName = 'Chip';
+  constructor(props: ChipProps) {
+    super(props);
+  }
+
+  static defaultProps: ChipProps = {
+    closeBtnAriaLabel: 'close',
+    className: '',
+    isOverflowChip: false,
+    isReadOnly: false,
+    tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onClick: (_e: React.MouseEvent) => undefined as any,
+    textMaxWidth: '16ch'
+  };
+
+  render() {
+    const {
+      isOverflowChip,
+      children,
+      badge,
+      onClick,
+      className,
+      textMaxWidth,
+      isReadOnly,
+      closeBtnAriaLabel,
+      tooltipPosition,
+      ouiaId,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      component,
+      ...props
+    } = this.props;
+
+    return (
+      <Label
+        variant="outline"
+        className={className}
+        textMaxWidth={textMaxWidth}
+        tooltipPosition={tooltipPosition}
+        {...(!isReadOnly && !isOverflowChip && { onClose: onClick, closeBtnAriaLabel })}
+        {...(isOverflowChip && { onClick, isOverflowLabel: true })}
+        {...getOUIAProps(
+          isOverflowChip ? 'OverflowChip' : Chip.displayName,
+          ouiaId !== undefined ? ouiaId : getDefaultOUIAId(Chip.displayName)
+        )}
+        {...props}
+      >
+        {children}
+        {badge && <React.Fragment> {badge}</React.Fragment>}
+      </Label>
+    );
+  }
+}
+
+export { Chip };
diff --git a/packages/react-core/src/deprecated/components/Chip/ChipGroup.tsx b/packages/react-core/src/deprecated/components/Chip/ChipGroup.tsx
new file mode 100644
index 00000000000..6eb7a31b114
--- /dev/null
+++ b/packages/react-core/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 };
diff --git a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
similarity index 73%
rename from packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
rename to packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
index a72d1caaa62..81682c0c8b6 100644
--- a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
@@ -2,7 +2,7 @@ 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', () => ({
   Tooltip: ({ content, position }) => (
@@ -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,41 @@ 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);
+  expect(screen.getByRole('button').parentElement).toHaveClass(styles.labelActions);
 });
 
 test(`Renders aria-labelledby 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');
 });
 
 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')).toHaveAccessibleName('close');
 });
 
 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');
 });
 
 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' })).not.toBeInTheDocument();
 });
 
 test(`Does not render close button action when isReadOnly is true`, () => {
@@ -196,7 +181,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' }));
 
   expect(onClickMock).toHaveBeenCalledTimes(1);
 });
@@ -227,7 +212,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 +243,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">
diff --git a/packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx b/packages/react-core/src/deprecated/components/Chip/__tests__/ChipGroup.test.tsx
similarity index 82%
rename from packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx
rename to packages/react-core/src/deprecated/components/Chip/__tests__/ChipGroup.test.tsx
index 148f985133e..812ffe07b65 100644
--- a/packages/react-core/src/components/Chip/__tests__/ChipGroup.test.tsx
+++ b/packages/react-core/src/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();
 });
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
similarity index 79%
rename from packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 88f68f2975d..137fe6caa94 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -2,34 +2,32 @@
 
 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"
   >
     <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"
+        data-ouia-component-id="OUIA-Generated-Button-plain-19"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
-        id="remove_snapshot-test"
         type="button"
       >
         <svg
@@ -47,6 +45,6 @@ exports[`Matches snapshot 1`] = `
         </svg>
       </button>
     </span>
-  </div>
+  </span>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap
similarity index 53%
rename from packages/react-core/src/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap
rename to packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap
index e54bd1962a6..10fad202508 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap
+++ b/packages/react-core/src/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>
diff --git a/packages/react-core/src/components/Chip/examples/Chip.md b/packages/react-core/src/deprecated/components/Chip/examples/Chip.md
similarity index 97%
rename from packages/react-core/src/components/Chip/examples/Chip.md
rename to packages/react-core/src/deprecated/components/Chip/examples/Chip.md
index 074a61e8cd3..6e3bca13de1 100644
--- a/packages/react-core/src/components/Chip/examples/Chip.md
+++ b/packages/react-core/src/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'
+
 ```
diff --git a/packages/react-core/src/components/Chip/examples/ChipDefault.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx
similarity index 94%
rename from packages/react-core/src/components/Chip/examples/ChipDefault.tsx
rename to packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx
index 1ea1ac5b9ef..66023f9ce35 100644
--- a/packages/react-core/src/components/Chip/examples/ChipDefault.tsx
+++ b/packages/react-core/src/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({
diff --git a/packages/react-core/src/components/Chip/examples/ChipGroupInline.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupInline.tsx
similarity index 90%
rename from packages/react-core/src/components/Chip/examples/ChipGroupInline.tsx
rename to packages/react-core/src/deprecated/components/Chip/examples/ChipGroupInline.tsx
index 33a971c74c9..145b4a3d082 100644
--- a/packages/react-core/src/components/Chip/examples/ChipGroupInline.tsx
+++ b/packages/react-core/src/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([
diff --git a/packages/react-core/src/components/Chip/examples/ChipGroupRemovableCategories.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx
similarity index 95%
rename from packages/react-core/src/components/Chip/examples/ChipGroupRemovableCategories.tsx
rename to packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx
index 7574dfa2b16..46d599783f8 100644
--- a/packages/react-core/src/components/Chip/examples/ChipGroupRemovableCategories.tsx
+++ b/packages/react-core/src/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']);
diff --git a/packages/react-core/src/components/Chip/examples/ChipGroupWithCategories.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupWithCategories.tsx
similarity index 90%
rename from packages/react-core/src/components/Chip/examples/ChipGroupWithCategories.tsx
rename to packages/react-core/src/deprecated/components/Chip/examples/ChipGroupWithCategories.tsx
index 2067c1390db..d3171593eea 100644
--- a/packages/react-core/src/components/Chip/examples/ChipGroupWithCategories.tsx
+++ b/packages/react-core/src/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([
diff --git a/packages/react-core/src/components/Chip/index.ts b/packages/react-core/src/deprecated/components/Chip/index.ts
similarity index 100%
rename from packages/react-core/src/components/Chip/index.ts
rename to packages/react-core/src/deprecated/components/Chip/index.ts
diff --git a/packages/react-core/src/deprecated/components/Select/Select.tsx b/packages/react-core/src/deprecated/components/Select/Select.tsx
index 4dbc6a6d469..bf7c1e9aa1a 100644
--- a/packages/react-core/src/deprecated/components/Select/Select.tsx
+++ b/packages/react-core/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,
diff --git a/packages/react-core/src/deprecated/components/index.ts b/packages/react-core/src/deprecated/components/index.ts
index b32add8bc6e..df78ee4c490 100644
--- a/packages/react-core/src/deprecated/components/index.ts
+++ b/packages/react-core/src/deprecated/components/index.ts
@@ -1,4 +1,5 @@
 export * from './ApplicationLauncher';
+export * from './Chip';
 export * from './ContextSelector';
 export * from './Dropdown';
 export * from './OptionsMenu';

From c77600cc7b240534b1df49545739825b8fcb0839 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 30 Jan 2024 11:40:57 -0500
Subject: [PATCH 2/9] clean up rebase

---
 .../react-core/src/components/Chip/Chip.tsx   | 216 ------------------
 1 file changed, 216 deletions(-)
 delete mode 100644 packages/react-core/src/components/Chip/Chip.tsx

diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx
deleted file mode 100644
index fd7a17cbc5d..00000000000
--- a/packages/react-core/src/components/Chip/Chip.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import { Button } from '../Button';
-import { Tooltip, TooltipPosition } from '../Tooltip';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import styles from '@patternfly/react-styles/css/components/Chip/chip';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
-import cssChipTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_chip__text_MaxWidth';
-
-export interface ChipProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** Badge to add to the chip. The badge will be rendered after the chip text. */
-  badge?: React.ReactNode;
-  /** Content rendered inside the chip text */
-  children?: React.ReactNode;
-  /** Aria Label for close button */
-  closeBtnAriaLabel?: string;
-  /** Additional classes added to the chip item */
-  className?: string;
-  /** Flag indicating if the chip is an overflow chip */
-  isOverflowChip?: boolean;
-  /** Flag indicating if chip is read only */
-  isReadOnly?: boolean;
-  /** Function that is called when clicking on the chip close button */
-  onClick?: (event: React.MouseEvent) => void;
-  /** Component that will be used for chip. It is recommended that <button> or <li>  are used when the chip is an overflow chip. */
-  component?: React.ReactNode;
-  /** Position of the tooltip which is displayed if 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';
-
-  /** Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text */
-  textMaxWidth?: string;
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
-  ouiaId?: number | string;
-}
-
-interface ChipState {
-  isTooltipVisible: boolean;
-  ouiaStateId: string;
-}
-
-class Chip extends React.Component<ChipProps, ChipState> {
-  static displayName = 'Chip';
-  constructor(props: ChipProps) {
-    super(props);
-    this.state = {
-      isTooltipVisible: false,
-      ouiaStateId: getDefaultOUIAId(Chip.displayName)
-    };
-  }
-  span = React.createRef<HTMLSpanElement>();
-
-  static defaultProps: ChipProps = {
-    closeBtnAriaLabel: 'close',
-    className: '',
-    isOverflowChip: false,
-    isReadOnly: false,
-    tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onClick: (_e: React.MouseEvent) => undefined as any,
-    component: 'div' as React.ReactNode
-  };
-
-  componentDidMount() {
-    this.setState({
-      isTooltipVisible: Boolean(this.span.current && this.span.current.offsetWidth < this.span.current.scrollWidth)
-    });
-  }
-
-  componentDidUpdate(_prevProps: ChipProps, prevState: ChipState) {
-    const nextIsTooltipVisible = Boolean(
-      this.span.current && this.span.current.offsetWidth < this.span.current.scrollWidth
-    );
-    if (prevState.isTooltipVisible !== nextIsTooltipVisible) {
-      this.setState({
-        isTooltipVisible: nextIsTooltipVisible
-      });
-    }
-  }
-
-  setChipStyle = () => ({
-    [cssChipTextMaxWidth.name]: this.props.textMaxWidth
-  });
-
-  renderOverflowChip = () => {
-    const {
-      badge,
-      children,
-      className,
-      onClick,
-      ouiaId,
-      textMaxWidth,
-      style,
-      component,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      tooltipPosition,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isOverflowChip,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      closeBtnAriaLabel,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isReadOnly,
-      ...props
-    } = this.props;
-    const Component = component as any;
-    return (
-      <Component
-        onClick={onClick}
-        {...(textMaxWidth && {
-          style: this.setChipStyle(),
-          ...style
-        })}
-        className={css(styles.chip, styles.modifiers.overflow, className)}
-        {...(component === 'button' ? { type: 'button' } : {})}
-        {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...props}
-      >
-        <span className={css(styles.chipContent)}>
-          <span className={css(styles.chipText)}>{children}</span>
-          {badge && badge}
-        </span>
-      </Component>
-    );
-  };
-
-  renderInnerChip(id: string) {
-    const {
-      badge,
-      children,
-      className,
-      onClick,
-      closeBtnAriaLabel,
-      isReadOnly,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isOverflowChip,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      tooltipPosition,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      id: idProp,
-      component,
-      ouiaId,
-      textMaxWidth,
-      ...props
-    } = this.props;
-    const Component = component as any;
-    return (
-      <Component
-        {...(textMaxWidth && {
-          style: this.setChipStyle()
-        })}
-        className={css(styles.chip, className)}
-        {...(this.state.isTooltipVisible && { tabIndex: 0 })}
-        {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...props}
-      >
-        <span className={css(styles.chipContent)}>
-          <span ref={this.span} className={css(styles.chipText)} id={id}>
-            {children}
-          </span>
-          {badge && badge}
-        </span>
-        {!isReadOnly && (
-          <span className={css(styles.chipActions)}>
-            <Button
-              onClick={onClick}
-              variant="plain"
-              aria-label={closeBtnAriaLabel}
-              id={`remove_${id}`}
-              aria-labelledby={`remove_${id} ${id}`}
-              ouiaId={ouiaId || closeBtnAriaLabel}
-            >
-              <TimesIcon aria-hidden="true" />
-            </Button>
-          </span>
-        )}
-      </Component>
-    );
-  }
-
-  renderChip = (randomId: string) => {
-    const { children, tooltipPosition } = this.props;
-    if (this.state.isTooltipVisible) {
-      return (
-        <Tooltip position={tooltipPosition} content={children}>
-          {this.renderInnerChip(randomId)}
-        </Tooltip>
-      );
-    }
-    return this.renderInnerChip(randomId);
-  };
-
-  render() {
-    const { isOverflowChip } = this.props;
-    return (
-      <GenerateId>
-        {(randomId) => (isOverflowChip ? this.renderOverflowChip() : this.renderChip(this.props.id || randomId))}
-      </GenerateId>
-    );
-  }
-}
-
-export { Chip };

From 48d8c508e7b644cf477dc7dccac6b9813d454ea3 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 30 Jan 2024 12:52:28 -0500
Subject: [PATCH 3/9] update references

---
 .../CodeEditor/examples/CodeEditorShortcutMainHeader.tsx    | 3 ++-
 .../src/components/Select/examples/SelectMultiTypeahead.tsx | 3 +--
 .../Select/examples/SelectMultiTypeaheadCreatable.tsx       | 3 +--
 .../TextInputGroup/examples/TextInputGroupFilters.tsx       | 2 +-
 .../examples/TextInputGroup/AttributeValueFiltering.tsx     | 3 +--
 .../demos/examples/TextInputGroup/AutoCompleteSearch.tsx    | 3 +--
 .../src/deprecated/components/Select/examples/Select.md     | 2 +-
 .../demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx      | 3 ++-
 .../src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx    | 3 ++-
 .../demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx       | 6 +++---
 .../ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx | 2 +-
 11 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
index d2dd1f5b466..aad877ef668 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Grid, GridItem, Chip } from '@patternfly/react-core';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { Chip } from '@patternfly/react-core/deprecated';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
index c9d92bbc5e0..c03183bd324 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
@@ -9,10 +9,9 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  ChipGroup,
-  Chip,
   Button
 } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
index a63ac365145..e44c74641f1 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
@@ -9,10 +9,9 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  ChipGroup,
-  Chip,
   Button
 } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 let initialSelectOptions: SelectOptionProps[] = [
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
index 63456128593..eb5c83de05f 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
index 08cb48d5ce1..81e48e1ad36 100644
--- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
+++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
@@ -9,10 +9,9 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Chip,
-  ChipGroup,
   Divider
 } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
index bad65d06b51..b74c0098fca 100644
--- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
+++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
@@ -9,10 +9,9 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Chip,
-  ChipGroup,
   Divider
 } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
diff --git a/packages/react-core/src/deprecated/components/Select/examples/Select.md b/packages/react-core/src/deprecated/components/Select/examples/Select.md
index e54c2b9aa00..dc92458f05b 100644
--- a/packages/react-core/src/deprecated/components/Select/examples/Select.md
+++ b/packages/react-core/src/deprecated/components/Select/examples/Select.md
@@ -2443,7 +2443,7 @@ To customize chips even more, render a [`<ChipGroup>`](/components/chip-group) c
 
 ```js
 import React from 'react';
-import { ChipGroup, Chip } from '@patternfly/react-core';
+import { ChipGroup, Chip } from '@patternfly/react-core/deprecated';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 
 class MultiTypeaheadSelectInputWithChipGroupProps extends React.Component {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx
index fb4f40d555f..3daccde9ecb 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx
@@ -1,4 +1,5 @@
-import { Badge, Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
+import { Badge } from '@patternfly/react-core';
 import React, { Component } from 'react';
 
 interface BadgeChipState {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx
index 6a4ead7ffd3..0a2cc31b405 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx
@@ -1,4 +1,5 @@
-import { Badge, Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
+import { Badge } from '@patternfly/react-core';
 import React, { Component } from 'react';
 
 interface BadgeChipState {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx
index d9c6737989a..bc47b14b276 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 
 interface ChipWithCategoryGroupState {
   chipGroups: {
@@ -65,7 +65,7 @@ export class ChipWithCategoryGroupDemo extends Component<{}, ChipWithCategoryGro
   render() {
     const { chipGroups } = this.state;
 
-    return chipGroups.map(currentGroup => (
+    return chipGroups.map((currentGroup) => (
       <ChipGroup
         id={currentGroup.id}
         key={currentGroup.category}
@@ -75,7 +75,7 @@ export class ChipWithCategoryGroupDemo extends Component<{}, ChipWithCategoryGro
         closeBtnAriaLabel="Close category demo"
         tooltipPosition="bottom"
       >
-        {currentGroup.chips.map(chip => (
+        {currentGroup.chips.map((chip) => (
           <Chip id={`chip-${currentGroup.category}-${chip}`} key={chip} onClick={() => this.deleteItem(chip)}>
             {chip}
           </Chip>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
index 8f3bcb3d1b8..f593e1b19e6 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import { css } from '@patternfly/react-styles';
 import titleStyles from '@patternfly/react-styles/css/components/Title/title';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';

From f6f338f7f0bdce8b4462638fbf04e3df15099453 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 30 Jan 2024 15:05:57 -0500
Subject: [PATCH 4/9] update chip usages, tests

---
 .../examples/CodeEditorShortcutMainHeader.tsx |  7 +--
 .../Select/examples/SelectMultiTypeahead.tsx  | 14 +++--
 .../SelectMultiTypeaheadCreatable.tsx         | 14 +++--
 .../examples/TextInputGroupFilters.tsx        | 18 ++++--
 .../__snapshots__/Toolbar.test.tsx.snap       | 59 +++++++++----------
 .../AttributeValueFiltering.tsx               | 13 ++--
 .../TextInputGroup/AutoCompleteSearch.tsx     | 13 ++--
 .../components/Chip/__tests__/Chip.test.tsx   |  2 +-
 .../__snapshots__/Chip.test.tsx.snap          |  1 +
 .../__snapshots__/Select.test.tsx.snap        | 52 ++++++++--------
 .../cypress/integration/chip.spec.ts          |  2 +-
 .../cypress/integration/chipgroup.spec.ts     | 14 ++---
 .../chipgroupdefaultisopen.spec.ts            | 22 +++----
 .../integration/chipgroupwithcategory.spec.ts |  4 +-
 .../cypress/integration/form.spec.ts          |  4 +-
 .../cypress/integration/select.spec.ts        | 24 ++++----
 .../integration/selectfavorites.spec.ts       |  4 +-
 .../cypress/integration/toolbar.spec.ts       | 10 ++--
 .../ChipGroupWithOverflowChipEventHandler.tsx |  2 +-
 19 files changed, 133 insertions(+), 146 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
index aad877ef668..9b2832c6a10 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Grid, GridItem } from '@patternfly/react-core';
-import { Chip } from '@patternfly/react-core/deprecated';
+import { Grid, GridItem, Label } from '@patternfly/react-core';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
@@ -41,9 +40,9 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
               {shortcut.keys
                 .map((key) => (
-                  <Chip key={key} isReadOnly>
+                  <Label variant="outline" key={key}>
                     {key}
-                  </Chip>
+                  </Label>
                 ))
                 .reduce((prev, curr) => (
                   <>{[prev, ' + ', curr]}</>
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
index c03183bd324..de9f8bed3b1 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
@@ -9,9 +9,10 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
+  Label,
+  LabelGroup,
   Button
 } from '@patternfly/react-core';
-import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
@@ -152,19 +153,20 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
           isExpanded={isOpen}
           aria-controls="select-multi-typeahead-listbox"
         >
-          <ChipGroup aria-label="Current selections">
+          <LabelGroup aria-label="Current selections">
             {selected.map((selection, index) => (
-              <Chip
+              <Label
                 key={index}
-                onClick={(ev) => {
+                variant="outline"
+                onClose={(ev) => {
                   ev.stopPropagation();
                   onSelect(selection);
                 }}
               >
                 {selection}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities>
           {selected.length > 0 && (
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
index e44c74641f1..e2ede6f83ba 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
@@ -9,9 +9,10 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
+  Label,
+  LabelGroup,
   Button
 } from '@patternfly/react-core';
-import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 let initialSelectOptions: SelectOptionProps[] = [
@@ -162,19 +163,20 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
           isExpanded={isOpen}
           aria-controls="select-multi-create-typeahead-listbox"
         >
-          <ChipGroup aria-label="Current selections">
+          <LabelGroup aria-label="Current selections">
             {selected.map((selection, index) => (
-              <Chip
+              <Label
                 key={index}
-                onClick={(ev) => {
+                variant="outline"
+                onClose={(ev) => {
                   ev.stopPropagation();
                   onSelect(selection);
                 }}
               >
                 {selection}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities>
           {selected.length > 0 && (
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
index eb5c83de05f..1d39bfd717f 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
-import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
+import {
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Label,
+  LabelGroup,
+  Button
+} from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
@@ -52,13 +58,13 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
   return (
     <TextInputGroup>
       <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>
-        <ChipGroup>
+        <LabelGroup>
           {currentChips.map((currentChip) => (
-            <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
+            <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>
               {currentChip}
-            </Chip>
+            </Label>
           ))}
-        </ChipGroup>
+        </LabelGroup>
       </TextInputGroupMain>
       {showUtilities && (
         <TextInputGroupUtilities>
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index c5bdf52faec..2c744bf76ca 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -103,57 +103,54 @@ exports[`Toolbar should render with custom chip content 1`] = `
           class="pf-v5-c-toolbar__item pf-m-chip-group"
         >
           <div
-            aria-labelledby="pf-random-id-0"
-            class="pf-v5-c-chip-group pf-m-category"
-            data-ouia-component-type="PF5/ChipGroup"
-            data-ouia-safe="true"
-            role="group"
+            class="pf-v5-c-label-group pf-m-category"
           >
             <div
-              class="pf-v5-c-chip-group__main"
+              class="pf-v5-c-label-group__main"
             >
               <span
-                class="pf-v5-c-chip-group__label"
+                aria-hidden="true"
+                class="pf-v5-c-label-group__label"
                 id="pf-random-id-0"
               >
                 Status
               </span>
               <ul
                 aria-labelledby="pf-random-id-0"
-                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"
                 >
-                  <div
-                    class="pf-v5-c-chip"
+                  <span
+                    class="pf-v5-c-label pf-m-outline"
                     data-ouia-component-id="OUIA-Generated-Chip-1"
                     data-ouia-component-type="PF5/Chip"
                     data-ouia-safe="true"
                   >
                     <span
-                      class="pf-v5-c-chip__content"
+                      class="pf-v5-c-label__content"
                     >
                       <span
-                        class="pf-v5-c-chip__text"
-                        id="pf-random-id-1"
+                        class="pf-v5-c-label__text"
+                        style="--pf-v5-c-label__text--MaxWidth: 16ch;"
                       >
                         New
                       </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_pf-random-id-1 pf-random-id-1"
                         class="pf-v5-c-button pf-m-plain"
-                        data-ouia-component-id="close"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-2"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
-                        id="remove_pf-random-id-1"
                         type="button"
                       >
                         <svg
@@ -171,39 +168,37 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         </svg>
                       </button>
                     </span>
-                  </div>
+                  </span>
                 </li>
                 <li
-                  class="pf-v5-c-chip-group__list-item"
+                  class="pf-v5-c-label-group__list-item"
                 >
-                  <div
-                    class="pf-v5-c-chip"
+                  <span
+                    class="pf-v5-c-label pf-m-outline"
                     data-ouia-component-id="OUIA-Generated-Chip-2"
                     data-ouia-component-type="PF5/Chip"
                     data-ouia-safe="true"
                   >
                     <span
-                      class="pf-v5-c-chip__content"
+                      class="pf-v5-c-label__content"
                     >
                       <span
-                        class="pf-v5-c-chip__text"
-                        id="pf-random-id-2"
+                        class="pf-v5-c-label__text"
+                        style="--pf-v5-c-label__text--MaxWidth: 16ch;"
                       >
                         Pending
                       </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_pf-random-id-2 pf-random-id-2"
                         class="pf-v5-c-button pf-m-plain"
-                        data-ouia-component-id="close"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-3"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
-                        id="remove_pf-random-id-2"
                         type="button"
                       >
                         <svg
@@ -221,19 +216,19 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         </svg>
                       </button>
                     </span>
-                  </div>
+                  </span>
                 </li>
               </ul>
             </div>
             <div
-              class="pf-v5-c-chip-group__close"
+              class="pf-v5-c-label-group__close"
             >
               <button
                 aria-disabled="false"
                 aria-label="Close chip group"
                 aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
                 class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="Close chip group"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
                 data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
                 id="remove_group_pf-random-id-0"
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
index 81e48e1ad36..014b9e25bd7 100644
--- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
+++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
@@ -9,9 +9,10 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Divider
+  Divider,
+  Label,
+  LabelGroup
 } from '@patternfly/react-core';
-import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
@@ -223,13 +224,13 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
           onFocus={() => setMenuIsOpen(true)}
           onKeyDown={handleTextInputKeyDown}
         >
-          <ChipGroup>
+          <LabelGroup>
             {currentChips.map((currentChip) => (
-              <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
+              <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>
                 {currentChip}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         {showUtilities && (
           <TextInputGroupUtilities>
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
index b74c0098fca..10cd6c2f2f8 100644
--- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
+++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
@@ -9,9 +9,10 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Divider
+  Divider,
+  Label,
+  LabelGroup
 } from '@patternfly/react-core';
-import { Chip, ChipGroup } from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
@@ -217,13 +218,13 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
           placeholder="search"
           aria-label="Search input"
         >
-          <ChipGroup>
+          <LabelGroup>
             {currentChips.map((currentChip) => (
-              <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
+              <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>
                 {currentChip}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         {showUtilities && (
           <TextInputGroupUtilities>
diff --git a/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
index 81682c0c8b6..979246454fa 100644
--- a/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { Chip } from '../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>
diff --git a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 137fe6caa94..6120ac73e24 100644
--- a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Matches snapshot 1`] = `
     data-ouia-component-id="snapshot-test"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
+    id="snapshot-test"
   >
     <span
       class="pf-v5-c-label__content"
diff --git a/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index 5f29634ec82..0eb7a6c2e48 100644
--- a/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1849,51 +1849,47 @@ exports[`typeahead multi select renders selected successfully 1`] = `
         class="pf-v5-c-select__toggle-wrapper"
       >
         <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"
               >
-                <div
-                  class="pf-v5-c-chip"
+                <span
+                  class="pf-v5-c-label pf-m-outline"
                   data-ouia-component-id="OUIA-Generated-Chip-1"
                   data-ouia-component-type="PF5/Chip"
                   data-ouia-safe="true"
                 >
                   <span
-                    class="pf-v5-c-chip__content"
+                    class="pf-v5-c-label__content"
                   >
                     <span
-                      class="pf-v5-c-chip__text"
-                      id="pf-random-id-25"
+                      class="pf-v5-c-label__text"
+                      style="--pf-v5-c-label__text--MaxWidth: 16ch;"
                     >
                       Mr
                     </span>
                   </span>
                   <span
-                    class="pf-v5-c-chip__actions"
+                    class="pf-v5-c-label__actions"
                   >
                     <button
                       aria-disabled="false"
                       aria-label="Remove"
-                      aria-labelledby="remove_pf-random-id-25 pf-random-id-25"
                       class="pf-v5-c-button pf-m-plain"
-                      data-ouia-component-id="Remove"
+                      data-ouia-component-id="OUIA-Generated-Button-plain-1"
                       data-ouia-component-type="PF5/Button"
                       data-ouia-safe="true"
-                      id="remove_pf-random-id-25"
                       type="button"
                     >
                       <svg
@@ -1911,39 +1907,37 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                       </svg>
                     </button>
                   </span>
-                </div>
+                </span>
               </li>
               <li
-                class="pf-v5-c-chip-group__list-item"
+                class="pf-v5-c-label-group__list-item"
               >
-                <div
-                  class="pf-v5-c-chip"
+                <span
+                  class="pf-v5-c-label pf-m-outline"
                   data-ouia-component-id="OUIA-Generated-Chip-2"
                   data-ouia-component-type="PF5/Chip"
                   data-ouia-safe="true"
                 >
                   <span
-                    class="pf-v5-c-chip__content"
+                    class="pf-v5-c-label__content"
                   >
                     <span
-                      class="pf-v5-c-chip__text"
-                      id="pf-random-id-26"
+                      class="pf-v5-c-label__text"
+                      style="--pf-v5-c-label__text--MaxWidth: 16ch;"
                     >
                       Mrs
                     </span>
                   </span>
                   <span
-                    class="pf-v5-c-chip__actions"
+                    class="pf-v5-c-label__actions"
                   >
                     <button
                       aria-disabled="false"
                       aria-label="Remove"
-                      aria-labelledby="remove_pf-random-id-26 pf-random-id-26"
                       class="pf-v5-c-button pf-m-plain"
-                      data-ouia-component-id="Remove"
+                      data-ouia-component-id="OUIA-Generated-Button-plain-2"
                       data-ouia-component-type="PF5/Button"
                       data-ouia-safe="true"
-                      id="remove_pf-random-id-26"
                       type="button"
                     >
                       <svg
@@ -1961,7 +1955,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                       </svg>
                     </button>
                   </span>
-                </div>
+                </span>
               </li>
             </ul>
           </div>
diff --git a/packages/react-integration/cypress/integration/chip.spec.ts b/packages/react-integration/cypress/integration/chip.spec.ts
index 7cbf5cdd4ad..3b6de091126 100644
--- a/packages/react-integration/cypress/integration/chip.spec.ts
+++ b/packages/react-integration/cypress/integration/chip.spec.ts
@@ -4,7 +4,7 @@ describe('Chip Group Demo Test', () => {
   });
 
   it('Verify tooltipPosition is passed to Tooltip', () => {
-    cy.get('.pf-v5-c-chip').focus();
+    cy.get('.pf-v5-c-label').focus();
     cy.get('.pf-v5-c-tooltip').should('have.class', 'pf-m-bottom');
   });
 });
diff --git a/packages/react-integration/cypress/integration/chipgroup.spec.ts b/packages/react-integration/cypress/integration/chipgroup.spec.ts
index 75229045118..462c342954c 100644
--- a/packages/react-integration/cypress/integration/chipgroup.spec.ts
+++ b/packages/react-integration/cypress/integration/chipgroup.spec.ts
@@ -4,22 +4,16 @@ describe('Chip Group Demo Test', () => {
   });
 
   it('Verify chip default text', () => {
-    cy.get('.pf-v5-c-chip__text')
-      .first()
-      .contains('Lemons');
+    cy.get('.pf-v5-c-label__text').first().contains('Lemons');
   });
 
   it('Verify chip has badge', () => {
-    cy.get('span')
-      .children('.pf-v5-c-badge')
-      .should('not.be.undefined');
-    cy.get('span')
-      .children('.pf-v5-c-badge')
-      .should('not.equal', null);
+    cy.get('span').children('.pf-v5-c-badge').should('not.be.undefined');
+    cy.get('span').children('.pf-v5-c-badge').should('not.equal', null);
   });
 
   it('Verify delete button on first chip', () => {
-    const chip = cy.get('.pf-v5-c-chip__content').children('#chip-Lemons');
+    const chip = cy.get('.pf-v5-c-label__content').children('#chip-Lemons');
     cy.get('#remove_chip-Lemons').click();
     chip.should('not.exist');
   });
diff --git a/packages/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts b/packages/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts
index da524d83816..4fd6e18c477 100644
--- a/packages/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts
+++ b/packages/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts
@@ -4,38 +4,30 @@ describe('Chip Group Demo Test', () => {
   });
 
   it('Verify chip default text', () => {
-    cy.get('.pf-v5-c-chip__text')
-      .first()
-      .contains('Lemons');
+    cy.get('.pf-v5-c-label__text').first().contains('Lemons');
   });
 
   it('Verify chip is open on default', () => {
-    cy.get('.pf-v5-c-chip__text')
-      .eq(1)
-      .contains('Limes');
+    cy.get('.pf-v5-c-label__text').eq(1).contains('Limes');
   });
 
   it('Verify chip has badge', () => {
-    cy.get('span')
-      .children('.pf-v5-c-badge')
-      .should('not.be.undefined');
-    cy.get('span')
-      .children('.pf-v5-c-badge')
-      .should('not.equal', null);
+    cy.get('span').children('.pf-v5-c-badge').should('not.be.undefined');
+    cy.get('span').children('.pf-v5-c-badge').should('not.equal', null);
   });
 
   it('Verify show less button works', () => {
     cy.get('.pf-m-overflow').click();
-    cy.get('.pf-v5-c-chip__text').contains('more');
+    cy.get('.pf-v5-c-label__text').contains('more');
   });
 
   it('Verify more button works', () => {
     cy.get('.pf-m-overflow').click();
-    cy.get('.pf-v5-c-chip__text').contains('Show Less');
+    cy.get('.pf-v5-c-label__text').contains('Show Less');
   });
 
   it('Verify delete button on first chip', () => {
-    const chip = cy.get('.pf-v5-c-chip__content').children('#chip-Lemons');
+    const chip = cy.get('.pf-v5-c-label__content').children('#chip-Lemons');
     cy.get('#remove_chip-Lemons').click();
     chip.should('not.exist');
   });
diff --git a/packages/react-integration/cypress/integration/chipgroupwithcategory.spec.ts b/packages/react-integration/cypress/integration/chipgroupwithcategory.spec.ts
index 203ecc12a0d..9974e360318 100644
--- a/packages/react-integration/cypress/integration/chipgroupwithcategory.spec.ts
+++ b/packages/react-integration/cypress/integration/chipgroupwithcategory.spec.ts
@@ -4,7 +4,7 @@ describe('Chip Group with Category Demo Test', () => {
   });
 
   it('Verify delete button on first chip group', () => {
-    const chipGroup = cy.get('.pf-v5-c-chip-group').first();
+    const chipGroup = cy.get('.pf-v5-c-label-group').first();
     const chipGroupButton = chipGroup.get('#remove_group_category-1');
     chipGroupButton.should('be.visible');
     chipGroupButton.click();
@@ -12,7 +12,7 @@ describe('Chip Group with Category Demo Test', () => {
   });
 
   it('Displays Tooltip', () => {
-    cy.get('.pf-v5-c-chip-group__label')
+    cy.get('.pf-v5-c-label-group__label')
       .last()
       .then((tooltipLink: JQuery<HTMLHeadingElement>) => {
         cy.get('.pf-v5-c-tooltip').should('not.exist');
diff --git a/packages/react-integration/cypress/integration/form.spec.ts b/packages/react-integration/cypress/integration/form.spec.ts
index 2f5bd1cf0a0..ced81dc3084 100644
--- a/packages/react-integration/cypress/integration/form.spec.ts
+++ b/packages/react-integration/cypress/integration/form.spec.ts
@@ -71,9 +71,9 @@ describe('Form Demo Test', () => {
 
   it('Verify keypress can control the multi-select-typeahead', () => {
     cy.get('[id*="pf-select-toggle-id"][id*="select-multi-typeahead-typeahead"]').type('{downarrow}{downarrow}{enter}');
-    cy.get('.pf-v5-c-chip__text').should('exist').and('have.text', 'Florida');
+    cy.get('.pf-v5-c-label__text').should('exist').and('have.text', 'Florida');
 
-    cy.get('.pf-v5-c-chip__text').then(($chipText) => {
+    cy.get('.pf-v5-c-label__text').then(($chipText) => {
       const idAttrValue = $chipText.attr('id');
       cy.get(`#remove_${idAttrValue}`).click();
     });
diff --git a/packages/react-integration/cypress/integration/select.spec.ts b/packages/react-integration/cypress/integration/select.spec.ts
index 6c01d88ce4a..292af1ba3b2 100644
--- a/packages/react-integration/cypress/integration/select.spec.ts
+++ b/packages/react-integration/cypress/integration/select.spec.ts
@@ -130,23 +130,23 @@ describe('Select Test', () => {
   xit('Verify Typeahead Multi Select', () => {
     cy.get('#typeahead-multi-select').click();
     cy.get('#Florida-2').click();
-    cy.get('.pf-v5-c-chip').contains('Florida').should('exist');
+    cy.get('.pf-v5-c-label').contains('Florida').should('exist');
     cy.get('#Alabama-0').click();
     cy.get('#Boston-1').click();
     cy.get('#Texas-4').click();
     cy.get('.pf-m-overflow > .pf-v5-c-button').should('exist');
     cy.get('#Florida-2').click();
-    cy.get('.pf-v5-c-chip').contains('Alabama').should('exist');
+    cy.get('.pf-v5-c-label').contains('Alabama').should('exist');
     cy.get('.pf-m-overflow > .pf-v5-c-button').should('not.exist');
     cy.get('#Florida-2').click();
     cy.get('.pf-m-overflow > .pf-v5-c-button').should('exist');
     cy.get('.pf-m-overflow > .pf-v5-c-button').click();
-    cy.get('.pf-v5-c-chip').contains('Florida').should('exist');
-    cy.get('.pf-v5-c-chip').contains('Alabama').should('exist');
-    cy.get('.pf-v5-c-chip').contains('.pf-v5-c-chip', 'Florida').children('button').click();
-    cy.get('.pf-v5-c-chip').contains('Florida').should('not.exist');
+    cy.get('.pf-v5-c-label').contains('Florida').should('exist');
+    cy.get('.pf-v5-c-label').contains('Alabama').should('exist');
+    cy.get('.pf-v5-c-label').contains('.pf-v5-c-label', 'Florida').children('button').click();
+    cy.get('.pf-v5-c-label').contains('Florida').should('not.exist');
     cy.get('button.pf-v5-c-select__toggle-clear').click();
-    cy.get('.pf-v5-c-chip').should('not.exist');
+    cy.get('.pf-v5-c-label').should('not.exist');
   });
 
   it('Verify false value of shouldResetOnSelect will not clear typeahead input after selection', () => {
@@ -154,20 +154,20 @@ describe('Select Test', () => {
     cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').should('contain.value', '');
     cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').type('Florida');
     cy.get('#Florida').click();
-    cy.get('.pf-v5-c-chip').contains('Florida').should('exist');
+    cy.get('.pf-v5-c-label').contains('Florida').should('exist');
     cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').should('contain.value', 'Florida');
   });
 
   xit('Verify Custom Typeahead Multi Select', () => {
     cy.get('#custom-typeahead-multi-select').click();
     cy.get('#Florida-2').click();
-    cy.get('.pf-v5-c-chip').contains('div-Florida-test_span').should('exist');
+    cy.get('.pf-v5-c-label').contains('div-Florida-test_span').should('exist');
     cy.get('#Alabama-0').click();
     cy.get('#Boston-1').click();
     cy.get('#Texas-4').click();
     cy.get('button.pf-v5-c-select__toggle-clear').should('exist');
     cy.get('#Florida-2').click();
-    cy.get('.pf-v5-c-chip').contains('div-Alabama-test_span').should('exist');
+    cy.get('.pf-v5-c-label').contains('div-Alabama-test_span').should('exist');
     cy.get('.pf-m-overflow > .pf-v5-c-button').should('not.exist');
     cy.get('button.pf-v5-c-select__toggle-clear').click();
   });
@@ -175,13 +175,13 @@ describe('Select Test', () => {
   xit('Verify Custom Typeahead Plain Multi Select', () => {
     cy.get('#custom-typeahead-plain-multi-select').click();
     cy.get('#Florida-2').click();
-    cy.get('.pf-v5-c-chip').contains('div-Florida-test_span').should('exist');
+    cy.get('.pf-v5-c-label').contains('div-Florida-test_span').should('exist');
     cy.get('#Alabama-0').click();
     cy.get('#Boston-1').click();
     cy.get('#Texas-4').click();
     cy.get('button.pf-v5-c-select__toggle-clear').should('exist');
     cy.get('#Florida-2').click();
-    cy.get('.pf-v5-c-chip').contains('div-Alabama-test_span').should('exist');
+    cy.get('.pf-v5-c-label').contains('div-Alabama-test_span').should('exist');
     cy.get('.pf-m-overflow > .pf-v5-c-button').should('not.exist');
   });
 
diff --git a/packages/react-integration/cypress/integration/selectfavorites.spec.ts b/packages/react-integration/cypress/integration/selectfavorites.spec.ts
index 0dd61e1d0ca..3d813ade1a2 100644
--- a/packages/react-integration/cypress/integration/selectfavorites.spec.ts
+++ b/packages/react-integration/cypress/integration/selectfavorites.spec.ts
@@ -58,9 +58,9 @@ describe('Select Test', () => {
     cy.get('#typeahead-multi-select-select-multi-typeahead-typeahead').should('have.value', '');
     // Verify selections work
     cy.get('#grapes-option').click();
-    cy.get('.pf-v5-c-chip').contains('grapes').should('exist');
+    cy.get('.pf-v5-c-label').contains('grapes').should('exist');
     cy.get('#pears-option').click();
-    cy.get('.pf-v5-c-chip').contains('pears').should('exist');
+    cy.get('.pf-v5-c-label').contains('pears').should('exist');
     // click on apples so it is added to favorites
     cy.get('#apples-option > .pf-m-action').click();
     cy.get('.pf-v5-c-select__menu-group-title').should('exist');
diff --git a/packages/react-integration/cypress/integration/toolbar.spec.ts b/packages/react-integration/cypress/integration/toolbar.spec.ts
index d79214eb8d3..d0f2381ebe0 100644
--- a/packages/react-integration/cypress/integration/toolbar.spec.ts
+++ b/packages/react-integration/cypress/integration/toolbar.spec.ts
@@ -41,10 +41,10 @@ describe('Data Toolbar Demo Test', () => {
       });
 
       it('displays filter chips', () => {
-        cy.get('.pf-m-chip-group').should('be.visible');
+        cy.get('.pf-m-label-group').should('be.visible');
         cy.get('.pf-m-filters-applied-message').should('not.exist');
         cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').should('be.visible');
-        cy.get('.pf-v5-c-toolbar__item .pf-v5-c-chip-group__close').should('be.visible');
+        cy.get('.pf-v5-c-toolbar__item .pf-v5-c-label-group__close').should('be.visible');
         cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').contains('Clear filters');
       });
     });
@@ -62,7 +62,7 @@ describe('Data Toolbar Demo Test', () => {
       });
 
       it('displays X filters applied message', () => {
-        cy.get('.pf-m-chip-container .pf-m-chip-group').should('not.exist');
+        cy.get('.pf-m-chip-container .pf-m-label-group').should('not.exist');
         cy.get('.pf-v5-c-toolbar__item').should('contain.text', 'filters applied');
         cy.get('.pf-v5-c-toolbar__item').should('contain.text', 'Applied filters: ');
         cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').should('be.visible');
@@ -87,14 +87,14 @@ describe('Data Toolbar Demo Test', () => {
       cy.get('.pf-v5-c-toolbar__expandable-content').should('be.visible');
       cy.get('.pf-m-chip-container').should('be.visible');
       cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').should('be.visible');
-      cy.get('.pf-v5-c-toolbar__item .pf-v5-c-chip-group__close').should('be.visible');
+      cy.get('.pf-v5-c-toolbar__item .pf-v5-c-label-group__close').should('be.visible');
       cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').contains('Clear filters');
       cy.get('#demo-toggle-group .pf-v5-c-toolbar__toggle button').last().click();
       cy.get('.pf-v5-c-toolbar__expandable-content').should('not.have.class', 'pf-m-expanded');
       cy.get('.pf-v5-c-toolbar__expandable-content').should('not.be.visible');
       cy.get('.pf-m-chip-container').should('not.be.visible');
       cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').should('be.visible');
-      cy.get('.pf-v5-c-toolbar__item .pf-v5-c-chip-group__close').should('not.be.visible');
+      cy.get('.pf-v5-c-toolbar__item .pf-v5-c-label-group__close').should('not.be.visible');
       cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').contains('Clear filters');
     });
   });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
index f593e1b19e6..42004bb1b27 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
@@ -62,7 +62,7 @@ export class ChipGroupWithOverflowChipEventHandler extends Component<{}, ChipGro
     const { chipArray } = this.state;
     return (
       <>
-        <ChipGroup onOverflowChipClick={() => this.handleOverflowChipClick()}>
+        <ChipGroup onClick={() => this.handleOverflowChipClick()}>
           {chipArray.map((chip) => (
             <Chip key={chip.name} onClick={() => this.deleteItem(chip.name)}>
               {chip.name}

From f7defb0490022832e6b333532183a5bd5a531ecc Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 30 Jan 2024 15:40:50 -0500
Subject: [PATCH 5/9] integration test updates

---
 packages/react-integration/cypress/integration/chip.spec.ts  | 2 +-
 .../react-integration/cypress/integration/chipgroup.spec.ts  | 4 ++--
 .../cypress/integration/chipgroupdefaultisopen.spec.ts       | 4 ++--
 .../chipgroupwithoverflowchipeventhandler.spec.ts            | 4 ++--
 packages/react-integration/cypress/integration/form.spec.ts  | 5 +----
 .../react-integration/cypress/integration/toolbar.spec.ts    | 4 ++--
 .../demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx   | 2 +-
 .../ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx  | 2 +-
 8 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/react-integration/cypress/integration/chip.spec.ts b/packages/react-integration/cypress/integration/chip.spec.ts
index 3b6de091126..13f49f54bf4 100644
--- a/packages/react-integration/cypress/integration/chip.spec.ts
+++ b/packages/react-integration/cypress/integration/chip.spec.ts
@@ -4,7 +4,7 @@ describe('Chip Group Demo Test', () => {
   });
 
   it('Verify tooltipPosition is passed to Tooltip', () => {
-    cy.get('.pf-v5-c-label').focus();
+    cy.get('.pf-v5-c-label__content').focus();
     cy.get('.pf-v5-c-tooltip').should('have.class', 'pf-m-bottom');
   });
 });
diff --git a/packages/react-integration/cypress/integration/chipgroup.spec.ts b/packages/react-integration/cypress/integration/chipgroup.spec.ts
index 462c342954c..43ce1882786 100644
--- a/packages/react-integration/cypress/integration/chipgroup.spec.ts
+++ b/packages/react-integration/cypress/integration/chipgroup.spec.ts
@@ -13,8 +13,8 @@ describe('Chip Group Demo Test', () => {
   });
 
   it('Verify delete button on first chip', () => {
-    const chip = cy.get('.pf-v5-c-label__content').children('#chip-Lemons');
-    cy.get('#remove_chip-Lemons').click();
+    const chip = cy.get('#chip-Lemons');
+    cy.get('#chip-Lemons button').click();
     chip.should('not.exist');
   });
 });
diff --git a/packages/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts b/packages/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts
index 4fd6e18c477..cb808f45d73 100644
--- a/packages/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts
+++ b/packages/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts
@@ -27,8 +27,8 @@ describe('Chip Group Demo Test', () => {
   });
 
   it('Verify delete button on first chip', () => {
-    const chip = cy.get('.pf-v5-c-label__content').children('#chip-Lemons');
-    cy.get('#remove_chip-Lemons').click();
+    const chip = cy.get('#chip-Lemons');
+    cy.get('#chip-Lemons button').click();
     chip.should('not.exist');
   });
 });
diff --git a/packages/react-integration/cypress/integration/chipgroupwithoverflowchipeventhandler.spec.ts b/packages/react-integration/cypress/integration/chipgroupwithoverflowchipeventhandler.spec.ts
index 9e8d7baa311..d107d72e3b0 100644
--- a/packages/react-integration/cypress/integration/chipgroupwithoverflowchipeventhandler.spec.ts
+++ b/packages/react-integration/cypress/integration/chipgroupwithoverflowchipeventhandler.spec.ts
@@ -4,8 +4,8 @@ describe('Chip Group with Custom Overflow Chip Event Handler', () => {
   });
 
   it('Verify additional text is shown from custom event handler when overflow chip is clicked', () => {
-    cy.get('.pf-v5-c-title').should('not.exist');
+    cy.get('#Pears').should('not.exist');
     cy.get('.pf-m-overflow').click();
-    cy.get('.pf-v5-c-title').should('exist');
+    cy.get('#Pears').should('exist');
   });
 });
diff --git a/packages/react-integration/cypress/integration/form.spec.ts b/packages/react-integration/cypress/integration/form.spec.ts
index ced81dc3084..6f3001d8c7b 100644
--- a/packages/react-integration/cypress/integration/form.spec.ts
+++ b/packages/react-integration/cypress/integration/form.spec.ts
@@ -73,10 +73,7 @@ describe('Form Demo Test', () => {
     cy.get('[id*="pf-select-toggle-id"][id*="select-multi-typeahead-typeahead"]').type('{downarrow}{downarrow}{enter}');
     cy.get('.pf-v5-c-label__text').should('exist').and('have.text', 'Florida');
 
-    cy.get('.pf-v5-c-label__text').then(($chipText) => {
-      const idAttrValue = $chipText.attr('id');
-      cy.get(`#remove_${idAttrValue}`).click();
-    });
+    cy.get('.pf-v5-c-label button').click();
 
     cy.get('[id*="pf-select-toggle-id"][id*="select-multi-typeahead-typeahead"]').type('New J');
 
diff --git a/packages/react-integration/cypress/integration/toolbar.spec.ts b/packages/react-integration/cypress/integration/toolbar.spec.ts
index d0f2381ebe0..78675f26f32 100644
--- a/packages/react-integration/cypress/integration/toolbar.spec.ts
+++ b/packages/react-integration/cypress/integration/toolbar.spec.ts
@@ -41,7 +41,7 @@ describe('Data Toolbar Demo Test', () => {
       });
 
       it('displays filter chips', () => {
-        cy.get('.pf-m-label-group').should('be.visible');
+        cy.get('.pf-v5-c-label-group').should('be.visible');
         cy.get('.pf-m-filters-applied-message').should('not.exist');
         cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').should('be.visible');
         cy.get('.pf-v5-c-toolbar__item .pf-v5-c-label-group__close').should('be.visible');
@@ -66,7 +66,7 @@ describe('Data Toolbar Demo Test', () => {
         cy.get('.pf-v5-c-toolbar__item').should('contain.text', 'filters applied');
         cy.get('.pf-v5-c-toolbar__item').should('contain.text', 'Applied filters: ');
         cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').should('be.visible');
-        cy.get('.pf-v5-c-toolbar__item .pf-v5-c-chip-group__close').should('not.be.visible');
+        cy.get('.pf-v5-c-toolbar__item .pf-v5-c-label-group__close').should('not.be.visible');
         cy.get('.pf-v5-c-toolbar__item .pf-v5-c-button').contains('Clear filters');
       });
     });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx
index a8e6c0e9578..306a011a92c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipDemo/ChipDemo.tsx
@@ -1,4 +1,4 @@
-import { Chip } from '@patternfly/react-core';
+import { Chip } from '@patternfly/react-core/deprecated';
 import React from 'react';
 
 export const ChipDemo: React.FunctionComponent = () => (
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
index 42004bb1b27..2ba3e493656 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
@@ -64,7 +64,7 @@ export class ChipGroupWithOverflowChipEventHandler extends Component<{}, ChipGro
       <>
         <ChipGroup onClick={() => this.handleOverflowChipClick()}>
           {chipArray.map((chip) => (
-            <Chip key={chip.name} onClick={() => this.deleteItem(chip.name)}>
+            <Chip key={chip.name} id={chip.name} onClick={() => this.deleteItem(chip.name)}>
               {chip.name}
             </Chip>
           ))}

From a428eaf337967957a4e85a10bfea9f6508046ff2 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 30 Jan 2024 16:43:32 -0500
Subject: [PATCH 6/9] code-editor to import deprecated chip

---
 .../src/components/CodeEditor/examples/CodeEditor.md     | 6 ++++++
 .../CodeEditor/examples/CodeEditorShortcutMainHeader.tsx | 9 +++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
index 54a7cc6f7b3..b8a2d52a65f 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -8,6 +8,7 @@ propComponents: ['CodeEditor', 'CodeEditorControl', 'Popover']
 Note: Code editor lives in its own package at [@patternfly/react-code-editor](https://www.npmjs.com/package/@patternfly/react-code-editor) and has [**required peer deps**](https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/package.json).
 
 import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
+import { Chip } from '@patternfly/react-core/deprecated';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ## Examples
@@ -15,11 +16,13 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 ### Basic
 
 ```ts file="./CodeEditorBasic.tsx"
+
 ```
 
 ### With sizeToFit height, height will grow/shrink with content
 
 ```ts file="./CodeEditorSizeToFit.tsx"
+
 ```
 
 ### With shortcut menu and main header content
@@ -27,14 +30,17 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.
 
 ```ts file="./CodeEditorShortcutMainHeader.tsx"
+
 ```
 
 ### With actions
 
 ```ts file="./CodeEditorWithActions.tsx"
+
 ```
 
 ### With custom control
 
 ```ts file="CodeEditorCustomControl.tsx"
+
 ```
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
index 9b2832c6a10..8d5b0041fc4 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Grid, GridItem, Label } from '@patternfly/react-core';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { Chip } from '@patternfly/react-core/deprecated';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
@@ -39,11 +40,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
           <React.Fragment key={index}>
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
               {shortcut.keys
-                .map((key) => (
-                  <Label variant="outline" key={key}>
-                    {key}
-                  </Label>
-                ))
+                .map((key) => <Chip key={key}>{key}</Chip>)
                 .reduce((prev, curr) => (
                   <>{[prev, ' + ', curr]}</>
                 ))}

From 1680bfd976e4e405f10993eabe0cd20a23e8fa99 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 6 Feb 2024 10:57:23 -0500
Subject: [PATCH 7/9] update codeeditor example, update tests

---
 .../CodeEditor/examples/CodeEditor.md          |  1 -
 .../examples/CodeEditorShortcutMainHeader.tsx  |  9 ++++++---
 .../src/deprecated/components/Chip/Chip.tsx    |  1 -
 .../components/Chip/__tests__/Chip.test.tsx    | 18 +++---------------
 .../__tests__/__snapshots__/Chip.test.tsx.snap |  4 ++--
 5 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
index b8a2d52a65f..62c95d96cd1 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -8,7 +8,6 @@ propComponents: ['CodeEditor', 'CodeEditorControl', 'Popover']
 Note: Code editor lives in its own package at [@patternfly/react-code-editor](https://www.npmjs.com/package/@patternfly/react-code-editor) and has [**required peer deps**](https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/package.json).
 
 import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
-import { Chip } from '@patternfly/react-core/deprecated';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ## Examples
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
index 8d5b0041fc4..9b2832c6a10 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Grid, GridItem } from '@patternfly/react-core';
-import { Chip } from '@patternfly/react-core/deprecated';
+import { Grid, GridItem, Label } from '@patternfly/react-core';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
@@ -40,7 +39,11 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
           <React.Fragment key={index}>
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
               {shortcut.keys
-                .map((key) => <Chip key={key}>{key}</Chip>)
+                .map((key) => (
+                  <Label variant="outline" key={key}>
+                    {key}
+                  </Label>
+                ))
                 .reduce((prev, curr) => (
                   <>{[prev, ' + ', curr]}</>
                 ))}
diff --git a/packages/react-core/src/deprecated/components/Chip/Chip.tsx b/packages/react-core/src/deprecated/components/Chip/Chip.tsx
index 557c51dbd37..6465b62f9c1 100644
--- a/packages/react-core/src/deprecated/components/Chip/Chip.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/Chip.tsx
@@ -50,7 +50,6 @@ class Chip extends React.Component<ChipProps> {
   }
 
   static defaultProps: ChipProps = {
-    closeBtnAriaLabel: 'close',
     className: '',
     isOverflowChip: false,
     isReadOnly: false,
diff --git a/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
index 979246454fa..4290827732a 100644
--- a/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
@@ -122,22 +122,10 @@ test(`Renders actions container with class ${styles.labelActions} when isReadOnl
   expect(screen.getByRole('button').parentElement).toHaveClass(styles.labelActions);
 });
 
-test(`Renders aria-labelledby on action close button by default`, () => {
-  render(<Chip>Chip text</Chip>);
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('close');
-});
-
-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');
-});
-
 test(`Renders concatenated aria-label on action close button by default`, () => {
   render(<Chip>Chip text</Chip>);
 
-  expect(screen.getByRole('button')).toHaveAccessibleName('close');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Close Chip text,');
 });
 
 test(`Renders custom aria-label on action close button when closeBtnAriaLabel is passed`, () => {
@@ -150,7 +138,7 @@ 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' })).not.toBeInTheDocument();
+  expect(screen.queryByRole('button', { name: 'Close Chip text,' })).not.toBeInTheDocument();
 });
 
 test(`Does not render close button action when isReadOnly is true`, () => {
@@ -181,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' }));
+  await user.click(screen.getByRole('button', { name: 'Close Chip text,' }));
 
   expect(onClickMock).toHaveBeenCalledTimes(1);
 });
diff --git a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 6120ac73e24..4f2ac4c3b24 100644
--- a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -24,9 +24,9 @@ exports[`Matches snapshot 1`] = `
     >
       <button
         aria-disabled="false"
-        aria-label="close"
+        aria-label="Close Chip text,"
         class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-19"
+        data-ouia-component-id="OUIA-Generated-Button-plain-17"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"

From 27a974e04111f9585f3af29775d64d3d43b0dfed Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 8 Feb 2024 15:04:48 -0500
Subject: [PATCH 8/9] adjust closeBtnAriaLabel default

---
 packages/react-core/src/components/Label/Label.tsx     |  9 ++++++++-
 .../__tests__/__snapshots__/Toolbar.test.tsx.snap      | 10 +++++-----
 .../react-core/src/deprecated/components/Chip/Chip.tsx |  8 ++++++--
 .../deprecated/components/Chip/__tests__/Chip.test.tsx |  6 +++---
 .../Chip/__tests__/__snapshots__/Chip.test.tsx.snap    |  4 ++--
 .../__tests__/__snapshots__/Select.test.tsx.snap       |  4 ++--
 6 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index 80c9079ffec..ef6aad79bd6 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -202,13 +202,20 @@ export const Label: React.FunctionComponent<LabelProps> = ({
 
   const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
+  let _closeBtnAriaLabel = 'Close label';
+  if (closeBtnAriaLabel) {
+    _closeBtnAriaLabel = closeBtnAriaLabel;
+  } else if (typeof children === 'string') {
+    _closeBtnAriaLabel = `Close ${children}`;
+  }
+
   const defaultButton = (
     <Button
       type="button"
       variant="plain"
       hasNoPadding
       onClick={onClose}
-      aria-label={closeBtnAriaLabel || `Close ${children}`}
+      aria-label={_closeBtnAriaLabel}
       {...closeBtnProps}
     >
       <TimesIcon />
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index 2c744bf76ca..671e09edef7 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -146,8 +146,8 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     >
                       <button
                         aria-disabled="false"
-                        aria-label="close"
-                        class="pf-v5-c-button pf-m-plain"
+                        aria-label="Close New"
+                        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-2"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
@@ -194,8 +194,8 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     >
                       <button
                         aria-disabled="false"
-                        aria-label="close"
-                        class="pf-v5-c-button pf-m-plain"
+                        aria-label="Close Pending"
+                        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-3"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
@@ -227,7 +227,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                 aria-disabled="false"
                 aria-label="Close chip group"
                 aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
-                class="pf-v5-c-button pf-m-plain"
+                class="pf-v5-c-button pf-m-plain pf-m-no-padding"
                 data-ouia-component-id="OUIA-Generated-Button-plain-4"
                 data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
diff --git a/packages/react-core/src/deprecated/components/Chip/Chip.tsx b/packages/react-core/src/deprecated/components/Chip/Chip.tsx
index 6465b62f9c1..3ec390576b6 100644
--- a/packages/react-core/src/deprecated/components/Chip/Chip.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/Chip.tsx
@@ -82,8 +82,12 @@ class Chip extends React.Component<ChipProps> {
         className={className}
         textMaxWidth={textMaxWidth}
         tooltipPosition={tooltipPosition}
-        {...(!isReadOnly && !isOverflowChip && { onClose: onClick, closeBtnAriaLabel })}
-        {...(isOverflowChip && { onClick, isOverflowLabel: true })}
+        {...(!isReadOnly &&
+          !isOverflowChip && {
+            onClose: onClick,
+            closeBtnAriaLabel: closeBtnAriaLabel ? closeBtnAriaLabel : `Close ${children}`
+          })}
+        {...(isOverflowChip && { onClick, variant: 'overflow' })}
         {...getOUIAProps(
           isOverflowChip ? 'OverflowChip' : Chip.displayName,
           ouiaId !== undefined ? ouiaId : getDefaultOUIAId(Chip.displayName)
diff --git a/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
index 4290827732a..39fcd931d41 100644
--- a/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/Chip.test.tsx
@@ -125,7 +125,7 @@ test(`Renders actions container with class ${styles.labelActions} when isReadOnl
 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`, () => {
@@ -138,7 +138,7 @@ 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`, () => {
@@ -169,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);
 });
diff --git a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 4f2ac4c3b24..d9a98879f1a 100644
--- a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -24,8 +24,8 @@ exports[`Matches snapshot 1`] = `
     >
       <button
         aria-disabled="false"
-        aria-label="Close Chip text,"
-        class="pf-v5-c-button pf-m-plain"
+        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"
diff --git a/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index 0eb7a6c2e48..808a781f31b 100644
--- a/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1886,7 +1886,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                     <button
                       aria-disabled="false"
                       aria-label="Remove"
-                      class="pf-v5-c-button pf-m-plain"
+                      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
                       data-ouia-component-id="OUIA-Generated-Button-plain-1"
                       data-ouia-component-type="PF5/Button"
                       data-ouia-safe="true"
@@ -1934,7 +1934,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                     <button
                       aria-disabled="false"
                       aria-label="Remove"
-                      class="pf-v5-c-button pf-m-plain"
+                      class="pf-v5-c-button pf-m-plain pf-m-no-padding"
                       data-ouia-component-id="OUIA-Generated-Button-plain-2"
                       data-ouia-component-type="PF5/Button"
                       data-ouia-safe="true"

From 65cb5448080432634fdb8d6ec349c335f6234295 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 19 Feb 2024 10:25:24 -0500
Subject: [PATCH 9/9] use Label in ToolbarFilter

---
 .../src/components/Toolbar/ToolbarFilter.tsx      | 15 +++++++--------
 .../__tests__/__snapshots__/Toolbar.test.tsx.snap | 12 +-----------
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
index 64bcb6fb874..41021feb9ca 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ToolbarItem, ToolbarItemProps } from './ToolbarItem';
-import { ChipGroup } from '../../deprecated/components/Chip';
-import { Chip } from '../../deprecated/components/Chip';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { PickOptional } from '../../helpers/typeUtils';
+import { Label, LabelGroup } from '../Label';
 
 export interface ToolbarChipGroup {
   /** A unique key to identify this chip group category */
@@ -107,7 +106,7 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
 
     const chipGroup = chips.length ? (
       <ToolbarItem variant="chip-group">
-        <ChipGroup
+        <LabelGroup
           key={categoryKey}
           categoryName={typeof categoryName === 'string' ? categoryName : categoryName.name}
           isClosable={deleteChipGroup !== undefined}
@@ -117,16 +116,16 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
         >
           {chips.map((chip) =>
             typeof chip === 'string' ? (
-              <Chip key={chip} onClick={() => deleteChip(categoryKey, chip)}>
+              <Label variant="outline" key={chip} onClose={() => deleteChip(categoryKey, chip)}>
                 {chip}
-              </Chip>
+              </Label>
             ) : (
-              <Chip key={chip.key} onClick={() => deleteChip(categoryKey, chip)}>
+              <Label key={chip.key} onClose={() => deleteChip(categoryKey, chip)}>
                 {chip.node}
-              </Chip>
+              </Label>
             )
           )}
-        </ChipGroup>
+        </LabelGroup>
       </ToolbarItem>
     ) : null;
 
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index 671e09edef7..2f8fdfa0ba6 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -118,8 +118,6 @@ exports[`Toolbar should render with custom chip content 1`] = `
               <ul
                 aria-labelledby="pf-random-id-0"
                 class="pf-v5-c-label-group__list"
-                data-ouia-component-type="PF5/ChipGroup"
-                data-ouia-safe="true"
                 role="list"
               >
                 <li
@@ -127,16 +125,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
                 >
                   <span
                     class="pf-v5-c-label pf-m-outline"
-                    data-ouia-component-id="OUIA-Generated-Chip-1"
-                    data-ouia-component-type="PF5/Chip"
-                    data-ouia-safe="true"
                   >
                     <span
                       class="pf-v5-c-label__content"
                     >
                       <span
                         class="pf-v5-c-label__text"
-                        style="--pf-v5-c-label__text--MaxWidth: 16ch;"
                       >
                         New
                       </span>
@@ -175,16 +169,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
                 >
                   <span
                     class="pf-v5-c-label pf-m-outline"
-                    data-ouia-component-id="OUIA-Generated-Chip-2"
-                    data-ouia-component-type="PF5/Chip"
-                    data-ouia-safe="true"
                   >
                     <span
                       class="pf-v5-c-label__content"
                     >
                       <span
                         class="pf-v5-c-label__text"
-                        style="--pf-v5-c-label__text--MaxWidth: 16ch;"
                       >
                         Pending
                       </span>
@@ -225,7 +215,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
             >
               <button
                 aria-disabled="false"
-                aria-label="Close chip group"
+                aria-label="Close label group"
                 aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
                 class="pf-v5-c-button pf-m-plain pf-m-no-padding"
                 data-ouia-component-id="OUIA-Generated-Button-plain-4"