@patternfly/react-core 6.0.0-alpha.77 → 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.76",
+  "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.76",
+  "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.76",
+  "version": "6.0.0-alpha.78",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.77",
+  "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.28",
-    "@patternfly/react-styles": "^6.0.0-alpha.27",
-    "@patternfly/react-tokens": "^6.0.0-alpha.27",
+    "@patternfly/react-icons": "^6.0.0-alpha.29",
+    "@patternfly/react-styles": "^6.0.0-alpha.28",
+    "@patternfly/react-tokens": "^6.0.0-alpha.28",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.166",
+    "@patternfly/patternfly": "6.0.0-alpha.180",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "6aa99644b0c6023e74c89dfc428522e09e0420ee"
+  "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/JumpLinks/JumpLinks.tsx

@@ -249,11 +249,13 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                 onClick={() => setIsExpanded(!isExpanded)}
                 aria-label={toggleAriaLabel}
                 aria-expanded={isExpanded}
+                icon={
+                  <span className={styles.jumpLinksToggleIcon}>
+                    <AngleRightIcon />
+                  </span>
+                }
               >
-                <span className={styles.jumpLinksToggleIcon}>
-                  <AngleRightIcon />
-                </span>
-                {label && <span className={css(styles.jumpLinksToggleText)}> {label} </span>}
+                {label && label}
               </Button>
             </div>
           )}

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

@@ -26,7 +26,7 @@ exports[`expandable vertical with subsection 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__text"
+              class="pf-v6-c-button__icon pf-m-start"
             >
               <span
                 class="pf-v6-c-jump-links__toggle-icon"
@@ -45,11 +45,11 @@ exports[`expandable vertical with subsection 1`] = `
                   />
                 </svg>
               </span>
-              <span
-                class="pf-v6-c-jump-links__toggle-text"
-              >
-                 Jump to section 
-              </span>
+            </span>
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Jump to section
             </span>
           </button>
         </div>

package/src/components/Page/PageSidebarBody.tsx

@@ -11,6 +11,8 @@ export interface PageSidebarBodyProps extends React.HTMLProps<HTMLDivElement> {
   usePageInsets?: boolean;
   /** Flag indicating that the page sidebar body should fill the available vertical space. */
   isFilled?: boolean;
+  /** Flag indicating that the page sidebar body is for a context selector/perspective switcher */
+  isContextSelector?: boolean;
 }
 
 export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
@@ -18,6 +20,7 @@ export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
   className,
   usePageInsets,
   isFilled,
+  isContextSelector,
   ...props
 }: PageSidebarBodyProps) => (
   <div
@@ -26,6 +29,7 @@ export const PageSidebarBody: React.FunctionComponent<PageSidebarBodyProps> = ({
       usePageInsets && styles.modifiers.pageInsets,
       isFilled === false && styles.modifiers.noFill,
       isFilled === true && styles.modifiers.fill,
+      isContextSelector === true && styles.modifiers.contextSelector,
       className
     )}
     {...props}

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -55,10 +55,13 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   const sidebar = (
     <PageSidebar isSidebarOpen={isSidebarOpen} id="multiple-sidebar-body-sidebar">
-      <PageSidebarBody usePageInsets>First sidebar body (with insets)</PageSidebarBody>
-      <PageSidebarBody isFilled={true}>Second sidebar body (with fill)</PageSidebarBody>
+      <PageSidebarBody isContextSelector>
+        First sidebar body (for a context selector/perspective switcher)
+      </PageSidebarBody>
+      <PageSidebarBody usePageInsets>Second sidebar body (with insets)</PageSidebarBody>
+      <PageSidebarBody isFilled={true}>Third sidebar body (with fill)</PageSidebarBody>
       <PageSidebarBody isFilled={false} usePageInsets>
-        Third sidebar body (with insets and no fill)
+        Fourth sidebar body (with insets and no fill)
       </PageSidebarBody>
     </PageSidebar>
   );

package/src/components/Tabs/Tabs.tsx

@@ -521,15 +521,13 @@ class Tabs extends React.Component<TabsProps, TabsState> {
                       aria-expanded={isExpandedLocal}
                       id={`${randomId}-button`}
                       aria-labelledby={`${randomId}-text ${randomId}-button`}
-                    >
-                      <span className={css(styles.tabsToggleIcon)}>
-                        <AngleRightIcon arian-hidden="true" />
-                      </span>
-                      {toggleText && (
-                        <span className={css(styles.tabsToggleText)} id={`${randomId}-text`}>
-                          {toggleText}
+                      icon={
+                        <span className={css(styles.tabsToggleIcon)}>
+                          <AngleRightIcon />
                         </span>
-                      )}
+                      }
+                    >
+                      {toggleText && <span id={`${randomId}-text`}>{toggleText}</span>}
                     </Button>
                   </div>
                 </div>

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

@@ -417,14 +417,13 @@ exports[`should render expandable vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon pf-m-start"
           >
             <span
               class="pf-v6-c-tabs__toggle-icon"
             >
               <svg
                 aria-hidden="true"
-                arian-hidden="true"
                 class="pf-v6-svg"
                 fill="currentColor"
                 height="1em"
@@ -437,8 +436,11 @@ exports[`should render expandable vertical tabs 1`] = `
                 />
               </svg>
             </span>
+          </span>
+          <span
+            class="pf-v6-c-button__text"
+          >
             <span
-              class="pf-v6-c-tabs__toggle-text"
               id="generated-id-text"
             >
               toggle

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)),