@patternfly/react-core 6.0.0-alpha.32 → 6.0.0-alpha.34

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.31","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.33","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.31","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.33","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.31","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.33","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.32",
+  "version": "6.0.0-alpha.34",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.11",
-    "@patternfly/react-styles": "^6.0.0-alpha.11",
-    "@patternfly/react-tokens": "^6.0.0-alpha.11",
+    "@patternfly/react-icons": "^6.0.0-alpha.12",
+    "@patternfly/react-styles": "^6.0.0-alpha.12",
+    "@patternfly/react-tokens": "^6.0.0-alpha.12",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.69",
+    "@patternfly/patternfly": "6.0.0-alpha.84",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c496543a1dc5cbdfdee8b12841e603f7eac7bf01"
+  "gitHead": "63b08e20d51c68fd202a07d2dadf798b994226ad"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -259,7 +259,7 @@ export const CalendarMonth = ({
   const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
       <div className={styles.calendarMonthHeader}>
-        <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.prevMonth)}>
+        <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-prev-month')}>
           <Button
             variant="plain"
             aria-label={prevMonthAriaLabel}
@@ -334,7 +334,7 @@ export const CalendarMonth = ({
             </div>
           </InputGroupItem>
         </InputGroup>
-        <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
+        <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-next-month')}>
           <Button
             variant="plain"
             aria-label={nextMonthAriaLabel}

package/src/components/Divider/examples/Divider.md

@@ -10,45 +10,53 @@ propComponents: ['Divider']
 ### Using hr
 
 ```ts file='./DividerUsingHr.tsx'
+
 ```
 
 ### Using li
 
 ```ts file='./DividerUsingLi.tsx'
+
 ```
 
 ### Using div
 
 ```ts file='./DividerUsingDiv.tsx'
+
 ```
 
 ### Inset medium
 
 ```ts file='./DividerInsetMedium.tsx'
+
 ```
 
 ### Inset at various breakpoints
 
 ```ts file='./DividerInsetVariousBreakpoints.tsx'
+
 ```
 
 ### Vertical in flex layout
 
 ```ts file='./DividerVerticalFlex.tsx'
+
 ```
 
-### Vertical in flex layout, inset medium
+### Vertical in flex layout, inset small
+
+```ts file='./DividerVerticalFlexInsetSmall.tsx'
 
-```ts file='./DividerVerticalFlexInsetMedium.tsx'
 ```
 
 ### Vertical in flex layout, inset at various breakpoints
 
 ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
+
 ```
 
 ### Switch orientation at various breakpoints
 
 ```ts file='./DividerOrientationVariousBreakpoints.tsx'
-```
 
+```

package/src/components/Divider/examples/{DividerVerticalFlexInsetMedium.tsx → DividerVerticalFlexInsetSmall.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 
-export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
+export const DividerVerticalFlexInsetSmall: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
     <Divider
       orientation={{
         default: 'vertical'
       }}
-      inset={{ default: 'insetMd' }}
+      inset={{ default: 'insetSm' }}
     />
     <FlexItem>second item</FlexItem>
   </Flex>

package/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 />

package/src/components/Menu/Menu.tsx

@@ -248,7 +248,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       ouiaId,
       ouiaSafe,
       containsFlyout,
-      isNavFlyout,
       containsDrilldown,
       isMenuDrilledIn,
       isPlain,
@@ -265,6 +264,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       isRootMenu,
       activeMenu,
       role,
+      isNavFlyout,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -325,7 +325,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             isPlain && styles.modifiers.plain,
             isScrollable && styles.modifiers.scrollable,
             containsFlyout && styles.modifiers.flyout,
-            isNavFlyout && styles.modifiers.nav,
+            isNavFlyout && 'pf-m-nav',
             containsDrilldown && styles.modifiers.drilldown,
             _isMenuDrilledIn && styles.modifiers.drilledIn,
             className

package/src/components/Menu/MenuItem.tsx

@@ -441,7 +441,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         _isOnPath && styles.modifiers.currentPath,
         isLoadButton && styles.modifiers.load,
         isLoading && styles.modifiers.loading,
-        isFocused && styles.modifiers.focus,
+        isFocused && 'pf-m-focus',
         isDanger && styles.modifiers.danger,
         className
       )}

package/src/components/Menu/MenuItemAction.tsx

@@ -48,7 +48,7 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
             <button
               className={css(
                 styles.menuItemAction,
-                isFavorited !== null && styles.modifiers.favorite,
+                isFavorited !== null && 'pf-m-favorite',
                 isFavorited && styles.modifiers.favorited,
                 className
               )}

package/src/components/Menu/__tests__/Menu.test.tsx

@@ -40,17 +40,6 @@ describe('Menu', () => {
     });
   });
 
-  describe('with isNavFlyout', () => {
-    test('should render Menu with nav flyout styles applied', () => {
-      render(
-        <Menu activeItemId={0} onSelect={jest.fn()} isNavFlyout>
-          content
-        </Menu>
-      );
-      expect(screen.getByText('content')).toHaveClass('pf-m-nav');
-    });
-  });
-
   describe('with hasCheckbox', () => {
     test('should render Menu with checkbox items', () => {
       render(

package/src/components/MenuToggle/MenuToggle.tsx

@@ -112,7 +112,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       variant === 'primary' && styles.modifiers.primary,
       variant === 'secondary' && styles.modifiers.secondary,
       (isPlain || isPlainText) && styles.modifiers.plain,
-      isPlainText && styles.modifiers.text,
+      isPlainText && 'pf-m-text',
       isFullHeight && styles.modifiers.fullHeight,
       isFullWidth && styles.modifiers.fullWidth,
       isDisabled && styles.modifiers.disabled,

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -9,8 +9,8 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  ChipGroup,
-  Chip,
+  Label,
+  LabelGroup,
   Button
 } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -153,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 && (

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -9,8 +9,8 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  ChipGroup,
-  Chip,
+  Label,
+  LabelGroup,
   Button
 } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -163,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 && (

package/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';
+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>

package/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 '../Chip';
-import { Chip } from '../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;
 

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -103,57 +103,48 @@ 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"
                 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"
-                    data-ouia-component-id="OUIA-Generated-Chip-1"
-                    data-ouia-component-type="PF5/Chip"
-                    data-ouia-safe="true"
+                  <span
+                    class="pf-v5-c-label pf-m-outline"
                   >
                     <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"
                       >
                         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"
+                        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"
-                        id="remove_pf-random-id-1"
                         type="button"
                       >
                         <svg
@@ -171,39 +162,33 @@ 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"
-                    data-ouia-component-id="OUIA-Generated-Chip-2"
-                    data-ouia-component-type="PF5/Chip"
-                    data-ouia-safe="true"
+                  <span
+                    class="pf-v5-c-label pf-m-outline"
                   >
                     <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"
                       >
                         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"
+                        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"
-                        id="remove_pf-random-id-2"
                         type="button"
                       >
                         <svg
@@ -221,19 +206,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-label="Close label 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"
+                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"
                 id="remove_group_pf-random-id-0"

package/src/components/TreeView/TreeViewListItem.tsx

@@ -208,7 +208,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
             <Component
               className={css(
                 styles.treeViewNode,
-                children && (isSelectable || hasCheckbox) && styles.modifiers.selectable,
+                children && (isSelectable || hasCheckbox) && 'pf-m-selectable',
                 (!children || isSelectable) &&
                   activeItems &&
                   activeItems.length > 0 &&

package/src/components/TreeView/__tests__/TreeViewListItem.test.tsx

@@ -371,7 +371,7 @@ test(`Does not render ${styles.treeViewNode} element with additional classes by
   expect(treeViewNode).toHaveClass(styles.treeViewNode, { exact: true });
 });
 
-test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.selectable} class when hasCheckbox and children are passed`, () => {
+test(`Renders ${styles.treeViewNode} element with pf-m-selectable class when hasCheckbox and children are passed`, () => {
   render(
     <TreeViewListItem hasCheckbox {...requiredProps}>
       Content
@@ -380,10 +380,10 @@ test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.selectable}
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveClass(styles.modifiers.selectable);
+  expect(treeViewNode).toHaveClass('pf-m-selectable');
 });
 
-test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.selectable} class when isSelectable and children are passed`, () => {
+test(`Renders ${styles.treeViewNode} element with pf-m-selectable class when isSelectable and children are passed`, () => {
   render(
     <TreeViewListItem isSelectable {...requiredProps}>
       Content
@@ -392,15 +392,15 @@ test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.selectable}
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveClass(styles.modifiers.selectable);
+  expect(treeViewNode).toHaveClass('pf-m-selectable');
 });
 
-test(`Does not render ${styles.treeViewNode} element with ${styles.modifiers.selectable} if children are not passed`, () => {
+test(`Does not render ${styles.treeViewNode} element with pf-m-selectable if children are not passed`, () => {
   render(<TreeViewListItem hasCheckbox isSelectable {...requiredProps} />);
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).not.toHaveClass(styles.modifiers.selectable);
+  expect(treeViewNode).not.toHaveClass('pf-m-selectable');
 });
 
 test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.current} class when isSelectable and activeItems are passed`, () => {

package/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';

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -9,9 +9,9 @@ import {
   MenuList,
   MenuItem,
   Popper,
-  Chip,
-  ChipGroup,
-  Divider
+  Divider,
+  Label,
+  LabelGroup
 } 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';
@@ -224,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>