chore(Toolbar): replaced chip instances with label

packages/react-core/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>

packages/react-core/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,

packages/react-core/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>

packages/react-core/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>

packages/react-core/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>;
 }
 

packages/react-core/src/components/Toolbar/ToolbarItem.tsx

@@ -9,15 +9,15 @@ export enum ToolbarItemVariant {
   separator = 'separator',
   pagination = 'pagination',
   label = 'label',
-  'chip-group' = 'chip-group',
+  'label-group' = 'label-group',
   'expand-all' = 'expand-all'
 }
 
 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)),