@patternfly/react-core 6.0.0-alpha.78 → 6.0.0-alpha.79

package/helpers/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/helpers/index.js",
   "module": "../dist/esm/helpers/index.js",
   "typings": "../dist/esm/helpers/index.d.ts",
-  "version": "6.0.0-alpha.77",
+  "version": "6.0.0-alpha.78",
   "private": true
 }

package/layouts/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/layouts/index.js",
   "module": "../dist/esm/layouts/index.js",
   "typings": "../dist/esm/layouts/index.d.ts",
-  "version": "6.0.0-alpha.77",
+  "version": "6.0.0-alpha.78",
   "private": true
 }

package/next/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/next/index.js",
   "module": "../dist/esm/next/index.js",
   "typings": "../dist/esm/next/index.d.ts",
-  "version": "6.0.0-alpha.77",
+  "version": "6.0.0-alpha.78",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.78",
+  "version": "6.0.0-alpha.79",
   "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",
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "4eb47e70a3ba0ce15d70b03b8cf9602f7a7215f3"
+  "gitHead": "cb1098099e5ccc766571bcd64adc642ee9687f3b"
 }

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -168,10 +168,12 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   };
 
   resize = () => {
-    const { offsetWidth } = this.expandableContentRef.current;
-    if (this.state.previousWidth !== offsetWidth) {
-      this.setState({ previousWidth: offsetWidth });
-      this.checkToggleVisibility();
+    if (this.expandableContentRef) {
+      const { offsetWidth } = this.expandableContentRef.current;
+      if (this.state.previousWidth !== offsetWidth) {
+        this.setState({ previousWidth: offsetWidth });
+        this.checkToggleVisibility();
+      }
     }
   };
   handleResize = debounce(this.resize, 250);

package/src/components/Toolbar/Toolbar.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContext } from './ToolbarUtils';
-import { ToolbarChipGroupContent } from './ToolbarChipGroupContent';
+import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent';
 import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
 import { PageContext } from '../Page/PageContext';
@@ -20,9 +20,9 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   clearAllFilters?: () => void;
   /** Text to display in the clear all filters button */
   clearFiltersButtonText?: string;
-  /** Custom content appended to the filter generated chip group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default "Clear all filters" button. */
-  customChipGroupContent?: React.ReactNode;
-  /** The breakpoint at which the listed filters in chip groups are collapsed down to a summary */
+  /** Custom content appended to the filter generated label group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default "Clear all filters" button. */
+  customLabelGroupContent?: React.ReactNode;
+  /** The breakpoint at which the listed filters in label groups are collapsed down to a summary */
   collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl';
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
   isExpanded?: boolean;
@@ -65,7 +65,7 @@ export interface ToolbarState {
   /** Flag used if the user has opted NOT to manage the 'isExpanded' state of the toggle group.
    *  Indicates whether or not the toggle group is expanded. */
   isManagedToggleExpanded: boolean;
-  /** Object managing information about how many chips are in each chip group */
+  /** Object managing information about how many labels are in each label group */
   filterInfo: FilterInfo;
   /** Used to keep track of window width so we can collapse expanded content when window is resizing */
   windowWidth: number;
@@ -78,7 +78,7 @@ interface FilterInfo {
 
 class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
-  chipGroupContentRef = React.createRef<HTMLDivElement>();
+  labelGroupContentRef = React.createRef<HTMLDivElement>();
   staticFilterInfo = {};
   state = {
     isManagedToggleExpanded: false,
@@ -144,7 +144,7 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
       isSticky,
       ouiaId,
       numberOfFiltersText,
-      customChipGroupContent,
+      customLabelGroupContent,
       colorVariant = ToolbarColorVariant.default,
       ...props
     } = this.props;
@@ -180,27 +180,27 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
               value={{
                 isExpanded,
                 toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
-                chipGroupContentRef: this.chipGroupContentRef,
+                labelGroupContentRef: this.labelGroupContentRef,
                 updateNumberFilters: this.updateNumberFilters,
                 numberOfFilters,
                 clearAllFilters,
                 clearFiltersButtonText,
                 showClearFiltersButton,
                 toolbarId: randomId,
-                customChipGroupContent
+                customLabelGroupContent
               }}
             >
               {children}
-              <ToolbarChipGroupContent
+              <ToolbarLabelGroupContent
                 isExpanded={isExpanded}
-                chipGroupContentRef={this.chipGroupContentRef}
+                labelGroupContentRef={this.labelGroupContentRef}
                 clearAllFilters={clearAllFilters}
                 showClearFiltersButton={showClearFiltersButton}
                 clearFiltersButtonText={clearFiltersButtonText}
                 numberOfFilters={numberOfFilters}
                 numberOfFiltersText={numberOfFiltersText}
                 collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
-                customChipGroupContent={customChipGroupContent}
+                customLabelGroupContent={customLabelGroupContent}
               />
             </ToolbarContext.Provider>
           </div>

package/src/components/Toolbar/ToolbarContent.tsx

@@ -37,7 +37,7 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
 class ToolbarContent extends React.Component<ToolbarContentProps> {
   static displayName = 'ToolbarContent';
   private expandableContentRef = React.createRef<HTMLDivElement>();
-  private chipContainerRef = React.createRef<HTMLDivElement>();
+  private labelContainerRef = React.createRef<HTMLDivElement>();
   private static currentId = 0;
 
   static defaultProps: ToolbarContentProps = {
@@ -88,7 +88,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                     value={{
                       expandableContentRef: this.expandableContentRef,
                       expandableContentId,
-                      chipContainerRef: this.chipContainerRef,
+                      labelContainerRef: this.labelContainerRef,
                       isExpanded: isExpanded || isExpandedContext,
                       clearAllFilters: clearAllFilters || clearAllFiltersContext,
                       clearFiltersButtonText: clearFiltersButtonText || clearFiltersButtonContext,

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -16,8 +16,8 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
   isExpanded?: boolean;
   /** Expandable content reference for passing to data toolbar children */
   expandableContentRef?: RefObject<HTMLDivElement>;
-  /** Chip container reference for passing to data toolbar children */
-  chipContainerRef?: RefObject<any>;
+  /** Label container reference for passing to data toolbar children */
+  labelContainerRef?: RefObject<any>;
   /** optional callback for clearing all filters in the toolbar */
   clearAllFilters?: () => void;
   /** Text to display in the clear all filters button */
@@ -40,16 +40,16 @@ class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentP
       children,
       className,
       expandableContentRef,
-      chipContainerRef,
+      labelContainerRef,
       isExpanded,
       clearAllFilters,
       clearFiltersButtonText,
       showClearFiltersButton,
       ...props
     } = this.props;
-    const { numberOfFilters, customChipGroupContent } = this.context;
+    const { numberOfFilters, customLabelGroupContent } = this.context;
 
-    const clearChipGroups = () => {
+    const clearLabelGroups = () => {
       clearAllFilters();
     };
 
@@ -62,15 +62,15 @@ class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentP
         <ToolbarGroup>{children}</ToolbarGroup>
         {numberOfFilters > 0 && (
           <ToolbarGroup>
-            <ToolbarGroup ref={chipContainerRef} />
-            {showClearFiltersButton && !customChipGroupContent && (
+            <ToolbarGroup ref={labelContainerRef} />
+            {showClearFiltersButton && !customLabelGroupContent && (
               <ToolbarItem>
-                <Button variant="link" onClick={clearChipGroups} isInline>
+                <Button variant="link" onClick={clearLabelGroups} isInline>
                   {clearFiltersButtonText}
                 </Button>
               </ToolbarItem>
             )}
-            {customChipGroupContent && customChipGroupContent}
+            {customLabelGroupContent && customLabelGroupContent}
           </ToolbarGroup>
         )}
       </div>

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -5,41 +5,41 @@ 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 */
+export interface ToolbarLabelGroup {
+  /** A unique key to identify this label group category */
   key: string;
-  /** The category name to display for the chip group */
+  /** The category name to display for the label group */
   name: string;
 }
 
-export interface ToolbarChip {
-  /** A unique key to identify this chip */
+export interface ToolbarLabel {
+  /** A unique key to identify this label */
   key: string;
-  /** The ReactNode to display in the chip */
+  /** The ReactNode to display in the label */
   node: React.ReactNode;
 }
 
 export interface ToolbarFilterProps extends ToolbarItemProps {
   /** Flag indicating when toolbar toggle group is expanded for non-managed toolbar toggle groups. */
   isExpanded?: boolean;
-  /** An array of strings to be displayed as chips in the expandable content */
-  chips?: (string | ToolbarChip)[];
-  /** Callback passed by consumer used to close the entire chip group */
-  deleteChipGroup?: (category: string | ToolbarChipGroup) => void;
-  /** Callback passed by consumer used to delete a chip from the chips[] */
-  deleteChip?: (category: string | ToolbarChipGroup, chip: ToolbarChip | string) => void;
-  /** Customizable "Show Less" text string for the chip group */
-  chipGroupExpandedText?: string;
-  /** Customizeable template string for the chip group. Use variable "${remaining}" for the overflow chip count. */
-  chipGroupCollapsedText?: string;
-  /** Content to be rendered inside the data toolbar item associated with the chip group */
+  /** An array of strings to be displayed as labels in the expandable content */
+  labels?: (string | ToolbarLabel)[];
+  /** Callback passed by consumer used to close the entire label group */
+  deleteLabelGroup?: (category: string | ToolbarLabelGroup) => void;
+  /** Callback passed by consumer used to delete a label from the labels[] */
+  deleteLabel?: (category: string | ToolbarLabelGroup, label: ToolbarLabel | string) => void;
+  /** Customizable "Show Less" text string for the label group */
+  labelGroupExpandedText?: string;
+  /** Customizeable template string for the label group. Use variable "${remaining}" for the overflow label count. */
+  labelGroupCollapsedText?: string;
+  /** Content to be rendered inside the data toolbar item associated with the label group */
   children: React.ReactNode;
-  /** Unique category name to be used as a label for the chip group */
-  categoryName: string | ToolbarChipGroup;
+  /** Unique category name to be used as a label for the label group */
+  categoryName: string | ToolbarLabelGroup;
   /** Flag to show the toolbar item */
   showToolbarItem?: boolean;
-  /** Reference to a chip container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
-  expandableChipContainerRef?: React.RefObject<HTMLDivElement>;
+  /** Reference to a label container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
+  expandableLabelContainerRef?: React.RefObject<HTMLDivElement>;
 }
 
 interface ToolbarFilterState {
@@ -51,7 +51,7 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
   static defaultProps: PickOptional<ToolbarFilterProps> = {
-    chips: [] as (string | ToolbarChip)[],
+    labels: [] as (string | ToolbarLabel)[],
     showToolbarItem: true
   };
 
@@ -63,65 +63,65 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
   }
 
   componentDidMount() {
-    const { categoryName, chips } = this.props;
+    const { categoryName, labels } = this.props;
     this.context.updateNumberFilters(
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString(),
-      chips.length
+      labels.length
     );
     this.setState({ isMounted: true });
   }
 
   componentDidUpdate() {
-    const { categoryName, chips } = this.props;
+    const { categoryName, labels } = this.props;
     this.context.updateNumberFilters(
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString(),
-      chips.length
+      labels.length
     );
   }
 
   render() {
     const {
       children,
-      chips,
-      deleteChipGroup,
-      deleteChip,
-      chipGroupExpandedText,
-      chipGroupCollapsedText,
+      labels,
+      deleteLabelGroup,
+      deleteLabel,
+      labelGroupExpandedText,
+      labelGroupCollapsedText,
       categoryName,
       showToolbarItem,
       isExpanded,
-      expandableChipContainerRef,
+      expandableLabelContainerRef,
       ...props
     } = this.props;
-    const { isExpanded: managedIsExpanded, chipGroupContentRef } = this.context;
+    const { isExpanded: managedIsExpanded, labelGroupContentRef } = this.context;
     const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
     const categoryKey =
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
         : categoryName.toString();
 
-    const chipGroup = chips.length ? (
-      <ToolbarItem variant="chip-group">
+    const labelGroup = labels.length ? (
+      <ToolbarItem variant="label-group">
         <LabelGroup
           key={categoryKey}
           categoryName={typeof categoryName === 'string' ? categoryName : categoryName.name}
-          isClosable={deleteChipGroup !== undefined}
-          onClick={() => deleteChipGroup(categoryName)}
-          collapsedText={chipGroupCollapsedText}
-          expandedText={chipGroupExpandedText}
+          isClosable={deleteLabelGroup !== undefined}
+          onClick={() => deleteLabelGroup(categoryName)}
+          collapsedText={labelGroupCollapsedText}
+          expandedText={labelGroupExpandedText}
         >
-          {chips.map((chip) =>
-            typeof chip === 'string' ? (
-              <Label variant="outline" key={chip} onClose={() => deleteChip(categoryKey, chip)}>
-                {chip}
+          {labels.map((label) =>
+            typeof label === 'string' ? (
+              <Label variant="outline" key={label} onClose={() => deleteLabel(categoryKey, label)}>
+                {label}
               </Label>
             ) : (
-              <Label key={chip.key} onClose={() => deleteChip(categoryKey, chip)}>
-                {chip.node}
+              <Label key={label.key} onClose={() => deleteLabel(categoryKey, label)}>
+                {label.node}
               </Label>
             )
           )}
@@ -133,20 +133,20 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {ReactDOM.createPortal(chipGroup, chipGroupContentRef.current.firstElementChild)}
+          {ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
         </React.Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
-        {({ chipContainerRef }) => (
+        {({ labelContainerRef }) => (
           <React.Fragment>
             {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-            {chipContainerRef.current && ReactDOM.createPortal(chipGroup, chipContainerRef.current)}
-            {expandableChipContainerRef &&
-              expandableChipContainerRef.current &&
-              ReactDOM.createPortal(chipGroup, expandableChipContainerRef.current)}
+            {labelContainerRef.current && ReactDOM.createPortal(labelGroup, labelContainerRef.current)}
+            {expandableLabelContainerRef &&
+              expandableLabelContainerRef.current &&
+              ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
           </React.Fragment>
         )}
       </ToolbarContentContext.Consumer>

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -152,7 +152,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   children?: React.ReactNode;
   /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */
   isOverflowContainer?: boolean;
-  /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
+  /** @hide Reference to pass to this group if it has .pf-m-label-container modifier */
   innerRef?: React.RefObject<any>;
 }
 

package/src/components/Toolbar/ToolbarItem.tsx

@@ -9,7 +9,7 @@ export enum ToolbarItemVariant {
   separator = 'separator',
   pagination = 'pagination',
   label = 'label',
-  'chip-group' = 'chip-group',
+  'label-group' = 'label-group',
   'expand-all' = 'expand-all'
 }
 
@@ -17,7 +17,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar item */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of item */
-  variant?: ToolbarItemVariant | 'pagination' | 'label' | 'chip-group' | 'separator' | 'expand-all';
+  variant?: ToolbarItemVariant | 'pagination' | 'label' | 'label-group' | 'separator' | 'expand-all';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -189,7 +189,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           className={css(
             styles.toolbarItem,
             variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label'],
-            variant === ToolbarItemVariant['chip-group'] && styles.modifiers.labelGroup,
+            variant === ToolbarItemVariant['label-group'] && styles.modifiers.labelGroup,
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/{ToolbarChipGroupContent.tsx → ToolbarLabelGroupContent.tsx}

@@ -10,13 +10,13 @@ import { ToolbarGroup } from './ToolbarGroup';
 import { globalBreakpoints } from './ToolbarUtils';
 import { PickOptional } from '../../helpers/typeUtils';
 
-export interface ToolbarChipGroupContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface ToolbarLabelGroupContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar content row */
   className?: string;
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
   isExpanded?: boolean;
-  /** Chip group content reference for passing to data toolbar children */
-  chipGroupContentRef?: RefObject<any>;
+  /** Label group content reference for passing to data toolbar children */
+  labelGroupContentRef?: RefObject<any>;
   /** optional callback for clearing all filters in the toolbar */
   clearAllFilters?: () => void;
   /** Flag indicating that the clear all filters button should be visible */
@@ -27,15 +27,15 @@ export interface ToolbarChipGroupContentProps extends React.HTMLProps<HTMLDivEle
   numberOfFilters: number;
   /** Text to display in the total number of applied filters ToolbarFilter */
   numberOfFiltersText?: (numberOfFilters: number) => string;
-  /** The breakpoint at which the listed filters in chip groups are collapsed down to a summary */
+  /** The breakpoint at which the listed filters in label groups are collapsed down to a summary */
   collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl';
-  /** Custom additional content appended to the generated chips. To maintain spacing and styling, each node should be a ToolbarItem or ToolbarGroup. This property will remove the built in "Clear all filters" button. */
-  customChipGroupContent?: React.ReactNode;
+  /** Custom additional content appended to the generated labels. To maintain spacing and styling, each node should be a ToolbarItem or ToolbarGroup. This property will remove the built in "Clear all filters" button. */
+  customLabelGroupContent?: React.ReactNode;
 }
 
-class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentProps> {
-  static displayName = 'ToolbarChipGroupContent';
-  static defaultProps: PickOptional<ToolbarChipGroupContentProps> = {
+class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentProps> {
+  static displayName = 'ToolbarLabelGroupContent';
+  static defaultProps: PickOptional<ToolbarLabelGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',
     collapseListedFiltersBreakpoint: 'lg',
     numberOfFiltersText: (numberOfFilters: number) => `${numberOfFilters} filters applied`
@@ -45,18 +45,18 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
     const {
       className,
       isExpanded,
-      chipGroupContentRef,
+      labelGroupContentRef,
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
       collapseListedFiltersBreakpoint,
       numberOfFilters,
       numberOfFiltersText,
-      customChipGroupContent,
+      customLabelGroupContent,
       ...props
     } = this.props;
 
-    const clearChipGroups = () => {
+    const clearLabelGroups = () => {
       clearAllFilters();
     };
 
@@ -74,7 +74,7 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
       <div
         className={css(styles.toolbarContent, isHidden && styles.modifiers.hidden, className)}
         {...((numberOfFilters === 0 || isExpanded) && { hidden: true })}
-        ref={chipGroupContentRef}
+        ref={labelGroupContentRef}
         {...props}
       >
         <ToolbarGroup
@@ -87,17 +87,17 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
             <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>
           </ToolbarGroup>
         )}
-        {showClearFiltersButton && !isExpanded && !customChipGroupContent && (
+        {showClearFiltersButton && !isExpanded && !customLabelGroupContent && (
           <ToolbarItem>
-            <Button variant="link" onClick={clearChipGroups} isInline>
+            <Button variant="link" onClick={clearLabelGroups} isInline>
               {clearFiltersButtonText}
             </Button>
           </ToolbarItem>
         )}
-        {customChipGroupContent && customChipGroupContent}
+        {customLabelGroupContent && customLabelGroupContent}
       </div>
     );
   }
 }
 
-export { ToolbarChipGroupContent };
+export { ToolbarLabelGroupContent };

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -149,8 +149,8 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
       | 'rowGap_3xl'
       | 'rowGap_4xl';
   };
-  /** Reference to a chip container group for filters inside the toolbar toggle group */
-  chipContainerRef?: React.RefObject<any>;
+  /** Reference to a label container group for filters inside the toolbar toggle group */
+  labelContainerRef?: React.RefObject<any>;
   /** Optional callback for clearing all filters in the toolbar toggle group */
   clearAllFilters?: () => void;
   /** Flag indicating that the clear all filters button should be visible in the toolbar toggle group */
@@ -184,7 +184,7 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       children,
       isExpanded,
       onToggle,
-      chipContainerRef,
+      labelContainerRef,
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
@@ -208,15 +208,15 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                   {({
                     expandableContentRef,
                     expandableContentId,
-                    chipContainerRef: managedChipContainerRef,
+                    labelContainerRef: managedLabelContainerRef,
                     isExpanded: managedIsExpanded,
                     clearAllFilters: clearAllFiltersContext,
                     clearFiltersButtonText: clearFiltersButtonContext,
                     showClearFiltersButton: showClearFiltersButtonContext
                   }) => {
                     const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
-                    const _chipContainerRef =
-                      chipContainerRef !== undefined ? chipContainerRef : managedChipContainerRef;
+                    const _labelContainerRef =
+                      labelContainerRef !== undefined ? labelContainerRef : managedLabelContainerRef;
 
                     const breakpointMod: {
                       md?: 'show';
@@ -234,7 +234,7 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         clearAllFilters={clearAllFilters || clearAllFiltersContext}
                         showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
                         clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
-                        chipContainerRef={_chipContainerRef}
+                        labelContainerRef={_labelContainerRef}
                       >
                         {children}
                       </ToolbarExpandableContent>

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -8,20 +8,20 @@ import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakp
 export interface ToolbarContextProps {
   isExpanded: boolean;
   toggleIsExpanded: () => void;
-  chipGroupContentRef: RefObject<HTMLDivElement>;
+  labelGroupContentRef: RefObject<HTMLDivElement>;
   updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;
   numberOfFilters: number;
   clearAllFilters?: () => void;
   clearFiltersButtonText?: string;
   showClearFiltersButton?: boolean;
   toolbarId?: string;
-  customChipGroupContent?: React.ReactNode;
+  customLabelGroupContent?: React.ReactNode;
 }
 
 export const ToolbarContext = React.createContext<ToolbarContextProps>({
   isExpanded: false,
   toggleIsExpanded: () => {},
-  chipGroupContentRef: null,
+  labelGroupContentRef: null,
   updateNumberFilters: () => {},
   numberOfFilters: 0,
   clearAllFilters: () => {}
@@ -30,7 +30,7 @@ export const ToolbarContext = React.createContext<ToolbarContextProps>({
 interface ToolbarContentContextProps {
   expandableContentRef: RefObject<HTMLDivElement>;
   expandableContentId: string;
-  chipContainerRef: RefObject<any>;
+  labelContainerRef: RefObject<any>;
   isExpanded?: boolean;
   clearAllFilters?: () => void;
   clearFiltersButtonText?: string;
@@ -40,7 +40,7 @@ interface ToolbarContentContextProps {
 export const ToolbarContentContext = React.createContext<ToolbarContentContextProps>({
   expandableContentRef: null,
   expandableContentId: '',
-  chipContainerRef: null,
+  labelContainerRef: null,
   clearAllFilters: () => {}
 });
 

package/src/components/Toolbar/__tests__/Generated/ToolbarChipGroupContent.test.tsx

@@ -3,16 +3,16 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { ToolbarChipGroupContent } from '../../ToolbarChipGroupContent';
+import { ToolbarLabelGroupContent } from '../../ToolbarLabelGroupContent';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 
-it('ToolbarChipGroupContent should match snapshot (auto-generated)', () => {
+it('ToolbarLabelGroupContent should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <ToolbarChipGroupContent
+    <ToolbarLabelGroupContent
       className={'string'}
       isExpanded={true}
-      chipGroupContentRef={{ current: document.createElement('div') }}
+      labelGroupContentRef={{ current: document.createElement('div') }}
       clearAllFilters={() => undefined as void}
       showClearFiltersButton={true}
       clearFiltersButtonText={"'Clear all filters'"}