@patternfly/react-core 6.6.2 → 6.7.0-prerelease.1

package/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
@@ -24,7 +24,7 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
 
   return (
     <TextInputGroup>
-      <TextInputGroupMain icon={<SearchIcon />} value={inputValue} onChange={handleInputChange} />
+      <TextInputGroupMain icon={<RhMicronsSearchIcon />} value={inputValue} onChange={handleInputChange} />
       {showUtilities && (
         <TextInputGroupUtilities>
           {showClearButton && (

package/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx

@@ -8,7 +8,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupWithStatus: React.FunctionComponent = () => {
@@ -37,7 +37,7 @@ export const TextInputGroupWithStatus: React.FunctionComponent = () => {
       <FlexItem>
         <TextInputGroup validated={ValidatedOptions.warning}>
           <TextInputGroupMain
-            icon={<SearchIcon />}
+            icon={<RhMicronsSearchIcon />}
             value={warningValue}
             onChange={(_event, value) => setWarningValue(value)}
           />
@@ -46,7 +46,7 @@ export const TextInputGroupWithStatus: React.FunctionComponent = () => {
       <FlexItem>
         <TextInputGroup validated={ValidatedOptions.error}>
           <TextInputGroupMain
-            icon={<SearchIcon />}
+            icon={<RhMicronsSearchIcon />}
             value={errorValue}
             onChange={(_event, value) => setErrorValue(value)}
           />

package/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroupItemElement.test.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`empty 1`] = `
 <DocumentFragment>
-  <span
-    class=""
-  />
+  <span />
 </DocumentFragment>
 `;
 

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -9,7 +9,7 @@ import './toggleGroup.css';
 
 import { useRef, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
@@ -24,7 +24,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
         onChange={handleItemClick}
       />
       <ToggleGroupItem
-        icon={<UndoIcon />}
+        icon={<RhUiUndoIcon />}
         aria-label="undo"
         buttonId="toggle-group-icons-2"
         isSelected={isSelected['toggle-group-icons-2']}

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
@@ -25,7 +25,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           onChange={handleItemClick}
         />
         <ToggleGroupItem
-          icon={<UndoIcon />}
+          icon={<RhUiUndoIcon />}
           text="Undo"
           buttonId="toggle-group-text-icons-2"
           isSelected={isSelected['toggle-group-text-icons-2']}
@@ -50,7 +50,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           onChange={handleItemClick}
         />
         <ToggleGroupItem
-          icon={<UndoIcon />}
+          icon={<RhUiUndoIcon />}
           iconPosition="end"
           text="Undo"
           buttonId="toggle-group-text-icons-5"

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -46,6 +46,13 @@ interface ToolbarFilterState {
   isMounted: boolean;
 }
 
+const getCategoryKey = (categoryName: string | ToolbarLabelGroup): string => {
+  if (typeof categoryName === 'string') {
+    return categoryName;
+  }
+  return categoryName.key;
+};
+
 class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
   static contextType = ToolbarContext;
@@ -63,24 +70,16 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
   }
 
   componentDidMount() {
-    const { categoryName, labels } = this.props;
-    this.context.updateNumberFilters(
-      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
-        ? categoryName.key
-        : categoryName.toString(),
-      labels.length
-    );
+    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), this.props.labels.length);
     this.setState({ isMounted: true });
   }
 
   componentDidUpdate() {
-    const { categoryName, labels } = this.props;
-    this.context.updateNumberFilters(
-      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
-        ? categoryName.key
-        : categoryName.toString(),
-      labels.length
-    );
+    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), this.props.labels.length);
+  }
+
+  componentWillUnmount() {
+    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), 0);
   }
 
   render() {
@@ -99,10 +98,7 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     } = this.props;
     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 categoryKey = getCategoryKey(categoryName);
 
     const labelGroup = labels.length ? (
       <ToolbarItem variant="label-group">
@@ -116,11 +112,11 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
         >
           {labels.map((label) =>
             typeof label === 'string' ? (
-              <Label variant="outline" key={label} onClose={() => deleteLabel(categoryKey, label)}>
+              <Label variant="outline" key={label} onClose={() => deleteLabel?.(categoryKey, label)}>
                 {label}
               </Label>
             ) : (
-              <Label key={label.key} onClose={() => deleteLabel(categoryKey, label)}>
+              <Label key={label.key} onClose={() => deleteLabel?.(categoryKey, label)}>
                 {label.node}
               </Label>
             )

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -174,6 +174,15 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     xl?: 'wrap' | 'nowrap';
     '2xl'?: 'wrap' | 'nowrap';
   };
+  /** Sets flex-grow at various breakpoints to allow the group to consume available main-axis space */
+  flexGrow?: {
+    default?: 'flexGrow';
+    sm?: 'flexGrow';
+    md?: 'flexGrow';
+    lg?: 'flexGrow';
+    xl?: 'flexGrow';
+    '2xl'?: 'flexGrow';
+  };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
   /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */
@@ -194,6 +203,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
       columnGap,
       rowGap,
       rowWrap,
+      flexGrow,
       className,
       variant,
       children,
@@ -224,6 +234,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
               formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(flexGrow, styles, '', getBreakpoint(width)),
               alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,8 +1,9 @@
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import { formatBreakpointMods, toCamel } from '../../helpers/util';
+import { formatBreakpointMods, setBreakpointCssVars, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
 import { PageContext } from '../Page/PageContext';
+import cssToolbarItemWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
 
 export enum ToolbarItemVariant {
   separator = 'separator',
@@ -168,6 +169,24 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'wrap' | 'nowrap';
     '2xl'?: 'wrap' | 'nowrap';
   };
+  /** Sets flex-grow at various breakpoints to allow the item to consume available main-axis space */
+  flexGrow?: {
+    default?: 'flexGrow';
+    sm?: 'flexGrow';
+    md?: 'flexGrow';
+    lg?: 'flexGrow';
+    xl?: 'flexGrow';
+    '2xl'?: 'flexGrow';
+  };
+  /** Width at various breakpoints. */
+  widths?: {
+    default?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+  };
   /** id for this data toolbar item */
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
@@ -187,6 +206,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   columnGap,
   rowGap,
   rowWrap,
+  flexGrow,
+  widths,
   align,
   alignSelf,
   alignItems,
@@ -195,6 +216,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   isAllExpanded,
   isOverflowContainer,
   role,
+  style,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
@@ -203,12 +225,15 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
       <Divider
         className={css(className)}
         orientation={{ default: 'vertical' }}
+        style={style}
         {...props}
         {...(isDividerRoleValid && { role: role as 'separator' | 'presentation' })}
       />
     );
   }
 
+  const responsiveWidths = widths ? setBreakpointCssVars(widths, cssToolbarItemWidth.name) : {};
+
   return (
     <PageContext.Consumer>
       {({ width, getBreakpoint, height, getVerticalBreakpoint }) => (
@@ -226,6 +251,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(flexGrow, styles, '', getBreakpoint(width)),
             alignItems === 'start' && styles.modifiers.alignItemsStart,
             alignItems === 'center' && styles.modifiers.alignItemsCenter,
             alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
@@ -237,6 +263,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
           role={role}
+          style={{ ...style, ...responsiveWidths }}
           {...props}
         >
           {children}

package/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -63,4 +63,20 @@ describe('ToolbarGroup', () => {
       expect(screen.getByTestId('toolbargroup')).toHaveClass(expectedClass);
     });
   });
+
+  describe('ToolbarGroup flexGrow', () => {
+    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+    describe.each(bps)(`flexGrow at various breakpoints`, (bp) => {
+      it(`should render with pf-m-flex-grow when flexGrow is set at ${bp}`, () => {
+        render(
+          <ToolbarGroup data-testid="toolbargroup" flexGrow={{ [bp]: 'flexGrow' }}>
+            Test
+          </ToolbarGroup>
+        );
+        const bpFlexGrowClass = bp === 'default' ? 'pf-m-flex-grow' : `pf-m-flex-grow-on-${bp}`;
+        expect(screen.getByTestId('toolbargroup')).toHaveClass(bpFlexGrowClass);
+      });
+    });
+  });
 });

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -63,4 +63,46 @@ describe('ToolbarItem', () => {
       expect(screen.getByTestId('toolbaritem')).toHaveClass(expectedClass);
     });
   });
+
+  describe('ToolbarItem flexGrow', () => {
+    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+    describe.each(bps)(`flexGrow at various breakpoints`, (bp) => {
+      it(`should render with pf-m-flex-grow when flexGrow is set at ${bp}`, () => {
+        render(
+          <ToolbarItem data-testid="toolbaritem" flexGrow={{ [bp]: 'flexGrow' }}>
+            Test
+          </ToolbarItem>
+        );
+        const bpFlexGrowClass = bp === 'default' ? 'pf-m-flex-grow' : `pf-m-flex-grow-on-${bp}`;
+        expect(screen.getByTestId('toolbaritem')).toHaveClass(bpFlexGrowClass);
+      });
+    });
+  });
+
+  describe('ToolbarItem widths', () => {
+    it('should apply width CSS variable when widths prop is set', () => {
+      render(
+        <ToolbarItem data-testid="toolbaritem" widths={{ default: '200px' }}>
+          Test
+        </ToolbarItem>
+      );
+      const item = screen.getByTestId('toolbaritem');
+      expect(item).toHaveStyle('--pf-v6-c-toolbar__item--Width: 200px');
+    });
+
+    it('should apply responsive width CSS variables when widths prop has breakpoint values', () => {
+      render(
+        <ToolbarItem data-testid="toolbaritem" widths={{ default: '100px', md: '200px', xl: '300px' }}>
+          Test
+        </ToolbarItem>
+      );
+      const item = screen.getByTestId('toolbaritem');
+      expect(item).toHaveStyle({
+        '--pf-v6-c-toolbar__item--Width': '100px',
+        '--pf-v6-c-toolbar__item--Width-on-md': '200px',
+        '--pf-v6-c-toolbar__item--Width-on-xl': '300px'
+      });
+    });
+  });
 });

package/src/components/Toolbar/examples/Toolbar.md

@@ -8,11 +8,11 @@ section: components
 import { Fragment, useState, useLayoutEffect, useRef } from 'react';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
-import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 ## Examples
 
@@ -154,3 +154,11 @@ The toolbar content section will wrap by default, but you can set the `rowRap` p
 ```ts file="./ToolbarItemSpacers.tsx"
 
 ```
+
+### FlexGrow and widths
+
+You can use the `flexGrow` prop to make toolbar items or groups expand to fill available space. The `widths` prop allows you to set custom widths at various breakpoints.
+
+```ts file="./ToolbarFlexGrowAndWidths.tsx"
+
+```

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -12,7 +12,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -63,6 +63,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => onStatusToggle()}
                 isExpanded={statusIsExpanded}
@@ -93,6 +94,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => onRiskToggle()}
                 isExpanded={riskIsExpanded}
@@ -124,7 +126,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
   );
 
   const items = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -12,7 +12,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -68,6 +68,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => onStatusToggle()}
                 isExpanded={statusIsExpanded}
@@ -98,6 +99,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => onRiskToggle()}
                 isExpanded={riskIsExpanded}
@@ -129,7 +131,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
   );
 
   const items = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );

package/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx

@@ -14,10 +14,10 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
-import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
 
 export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
   const [statusIsExpanded, setStatusIsExpanded] = useState<boolean>(false);
@@ -110,6 +110,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setStatusIsExpanded(!statusIsExpanded)}
                 isExpanded={statusIsExpanded}
@@ -142,6 +143,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setRiskIsExpanded(!riskIsExpanded)}
                 isExpanded={riskIsExpanded}
@@ -169,7 +171,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <Fragment>
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
       <ToolbarGroup variant="action-group-plain">
@@ -177,10 +179,10 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
           <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
+          <Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
+          <Button variant="plain" aria-label="sync" icon={<RhUiSyncIcon />} />
         </ToolbarItem>
       </ToolbarGroup>
     </Fragment>

package/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx

@@ -0,0 +1,104 @@
+import { Fragment } from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent, Button, SearchInput } from '@patternfly/react-core';
+
+export const ToolbarFlexGrowAndWidths: React.FunctionComponent = () => {
+  const flexGrowItems = (
+    <Fragment>
+      <ToolbarItem>
+        <Button variant="secondary">Item 1</Button>
+      </ToolbarItem>
+      <ToolbarItem flexGrow={{ default: 'flexGrow' }}>
+        <SearchInput aria-label="Flex grow search input" />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Item 2</Button>
+      </ToolbarItem>
+    </Fragment>
+  );
+
+  const flexGrowGroupItems = (
+    <Fragment>
+      <ToolbarGroup>
+        <ToolbarItem>
+          <Button variant="secondary">Item 1</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Item 2</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup flexGrow={{ default: 'flexGrow' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Flex grow group item 1</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Flex grow group item 2</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup>
+        <ToolbarItem>
+          <Button variant="secondary">Item 3</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </Fragment>
+  );
+
+  const widthItems = (
+    <Fragment>
+      <ToolbarItem widths={{ default: '200px' }}>
+        <SearchInput aria-label="Search input with fixed width" />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Regular item</Button>
+      </ToolbarItem>
+      <ToolbarItem widths={{ default: '300px' }}>
+        <SearchInput aria-label="Search input with wider fixed width" />
+      </ToolbarItem>
+    </Fragment>
+  );
+
+  const responsiveWidthItems = (
+    <Fragment>
+      <ToolbarItem widths={{ default: '100px', md: '200px', xl: '300px' }}>
+        <SearchInput aria-label="Search input with responsive width" />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Regular item</Button>
+      </ToolbarItem>
+    </Fragment>
+  );
+
+  return (
+    <>
+      Using flexGrow on ToolbarItem
+      <br />
+      <br />
+      <Toolbar id="toolbar-flex-grow-item">
+        <ToolbarContent>{flexGrowItems}</ToolbarContent>
+      </Toolbar>
+      <br />
+      <br />
+      Using flexGrow on ToolbarGroup
+      <br />
+      <br />
+      <Toolbar id="toolbar-flex-grow-group">
+        <ToolbarContent>{flexGrowGroupItems}</ToolbarContent>
+      </Toolbar>
+      <br />
+      <br />
+      Using widths on ToolbarItem
+      <br />
+      <br />
+      <Toolbar id="toolbar-widths">
+        <ToolbarContent>{widthItems}</ToolbarContent>
+      </Toolbar>
+      <br />
+      <br />
+      Using responsive widths on ToolbarItem
+      <br />
+      <br />
+      <Toolbar id="toolbar-responsive-widths">
+        <ToolbarContent>{responsiveWidthItems}</ToolbarContent>
+      </Toolbar>
+    </>
+  );
+};