Wizard: Deprecate Chip and ChipGroup components

`Chip` and `ChipGroup` components will be deprecated in PF6. This replaces them with recommended `Label` and `LabelGroup`.

src/Components/CreateImageWizard/ChippingInput.tsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 
 import {
   Button,
-  Chip,
-  ChipGroup,
   HelperText,
   HelperTextItem,
+  Label,
+  LabelGroup,
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
@@ -126,25 +126,29 @@ const ChippingInput = ({
         </HelperText>
       )}
       {requiredList && requiredList.length > 0 && (
-        <ChipGroup
+        <LabelGroup
           categoryName="Required by OpenSCAP"
-          numChips={20}
+          numLabels={20}
           className="pf-v5-u-mt-sm pf-v5-u-w-100"
         >
           {requiredList.map((item) => (
-            <Chip key={item} isReadOnly>
+            <Label key={item} isCompact>
               {item}
-            </Chip>
+            </Label>
           ))}
-        </ChipGroup>
+        </LabelGroup>
       )}
-      <ChipGroup numChips={20} className="pf-v5-u-mt-sm pf-v5-u-w-100">
+      <LabelGroup numLabels={20} className="pf-v5-u-mt-sm pf-v5-u-w-100">
         {list?.map((item) => (
-          <Chip key={item} onClick={(e) => handleRemoveItem(e, item)}>
+          <Label
+            key={item}
+            isCompact
+            onClose={(e) => handleRemoveItem(e, item)}
+          >
             {item}
-          </Chip>
+          </Label>
         ))}
-      </ChipGroup>
+      </LabelGroup>
     </>
   );
 };

src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react';
 
 import {
   Button,
-  Chip,
-  ChipGroup,
   FormGroup,
   HelperText,
   HelperTextItem,
+  Label,
+  LabelGroup,
   MenuToggle,
   MenuToggleElement,
   Select,
@@ -174,13 +174,13 @@ const LanguagesDropDown = () => {
           )}`}</HelperTextItem>
         </HelperText>
       )}
-      <ChipGroup numChips={5} className="pf-v5-u-mt-sm pf-v5-u-w-100">
+      <LabelGroup numLabels={5} className="pf-v5-u-mt-sm pf-v5-u-w-100">
         {languages?.map((lang) => (
-          <Chip key={lang} onClick={(e) => handleRemoveLang(e, lang)}>
+          <Label key={lang} onClose={(e) => handleRemoveLang(e, lang)}>
             {lang}
-          </Chip>
+          </Label>
         ))}
-      </ChipGroup>
+      </LabelGroup>
     </FormGroup>
   );
 };

src/Components/ShareImageModal/RegionsSelect.tsx

@@ -8,6 +8,8 @@ import {
   HelperText,
   HelperTextItem,
   FormHelperText,
+  Label,
+  LabelGroup,
   Popover,
   Select,
   SelectOption,
@@ -17,8 +19,6 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  ChipGroup,
-  Chip,
 } from '@patternfly/react-core';
 import { MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle/MenuToggle';
 import {
@@ -168,19 +168,19 @@ const RegionsSelect = ({ composeId, handleClose }: RegionsSelectPropTypes) => {
           placeholder="Select region"
           isExpanded={isOpen}
         >
-          <ChipGroup aria-label="Selected regions">
+          <LabelGroup aria-label="Selected regions">
             {selected.map((selection, index) => (
-              <Chip
+              <Label
                 key={index}
-                onClick={(ev) => {
+                onClose={(ev) => {
                   ev.stopPropagation();
                   onSelect(selection);
                 }}
               >
                 {selection}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities>
           {selected.length > 0 && (

src/test/Components/CreateImageWizard/steps/Kernel/Kernel.test.tsx

@@ -128,7 +128,7 @@ const removeKernelArg = async (kernelArg: string) => {
   const user = userEvent.setup();
 
   const removeNosmtArgButton = await screen.findByRole('button', {
-    name: `close ${kernelArg}`,
+    name: `Close ${kernelArg}`,
   });
   await waitFor(() => user.click(removeNosmtArgButton));
 };

src/test/Components/CreateImageWizard/steps/Services/Services.test.tsx

@@ -101,7 +101,7 @@ const addEnabledService = async (service: string) => {
 const removeService = async (service: string) => {
   const user = userEvent.setup();
   const removeServiceButton = await screen.findByRole('button', {
-    name: `close ${service}`,
+    name: `Close ${service}`,
   });
   await waitFor(() => user.click(removeServiceButton));
 };