@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.30

package/src/components/Tabs/examples/Tabs.md

@@ -36,15 +36,13 @@ Tabs can be styled as 'default' or 'boxed':
 ```ts file="./TabsDefault.tsx"
 ```
 
-### Boxed light tabs
+### Boxed secondary tabs
 
-To change the background color of boxed tabs, use the `variant` property. 
+To change the background color of boxed tabs or the tab content, use the `variant` property. 
 
-The following example passes `variant={isTabsLightScheme ? 'light300' : 'default'}` into the `<Tabs>` component to style the tabs with a lighter color.
+Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.
 
-Toggle the tab color by selecting the 'Tabs light variation' checkbox in the following example.
-
-```ts file="./TabsBoxLight.tsx"
+```ts file="./TabsBoxSecondary.tsx"
 ```
 
 ### Vertical tabs
@@ -132,11 +130,11 @@ To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the ico
 ```ts file="./TabsIconAndText.tsx"
 ```
 
-### Secondary tabs
+### Subtabs
 
-Use secondary tabs as "sub tabs" or within other components, like modals. Secondary tabs have less visually prominent styling. 
+Use subtabs within other components, like modals. Subtabs have less visually prominent styling. 
 
-To apply secondary styling to tabs, use the `isSecondary` property. 
+To apply subtab styling to tabs, use the `isSubtab` property. 
 
 ```ts file="./TabsSubtabs.tsx"
 ```
@@ -157,11 +155,11 @@ Nav tabs should use the `href` property to link the tab to the URL of another pa
 ```ts file="./TabsNav.tsx"
 ```
 
-### Secondary tabs linked to nav elements
+### Subtabs linked to nav elements
 
-Secondary tabs can also link to nav elements. 
+Subtabs can also link to nav elements. 
 
-```ts file="./TabsNavSecondary.tsx"
+```ts file="./TabsNavSubtab.tsx"
 ```
 
 ### With separate content

package/src/components/Tabs/examples/{TabsBoxLight.tsx → TabsBoxSecondary.tsx}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 
-export const TabsBoxLight: React.FunctionComponent = () => {
+export const TabsBoxSecondary: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isTabsLightScheme, setIsTabsLightScheme] = React.useState<boolean>(true);
+  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = React.useState<boolean>(true);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -13,7 +13,7 @@ export const TabsBoxLight: React.FunctionComponent = () => {
   };
 
   const toggleScheme = (checked: boolean) => {
-    setIsTabsLightScheme(checked);
+    setIsTabsBoxSecondary(checked);
   };
 
   const tooltip = (
@@ -24,7 +24,7 @@ export const TabsBoxLight: React.FunctionComponent = () => {
       <Tabs
         activeKey={activeTabKey}
         onSelect={handleTabClick}
-        variant={isTabsLightScheme ? 'light300' : 'default'}
+        variant={isTabsBoxSecondary ? 'secondary' : 'default'}
         isBox
         aria-label="Tabs in the box light variation example"
         role="region"
@@ -50,12 +50,11 @@ export const TabsBoxLight: React.FunctionComponent = () => {
       </Tabs>
       <div style={{ marginTop: '20px' }}>
         <Checkbox
-          label="Tabs light variation"
-          isChecked={isTabsLightScheme}
+          label="Tabs secondary variant"
+          isChecked={isTabsBoxSecondary}
           onChange={(_event, checked) => toggleScheme(checked)}
-          aria-label="show light scheme variation checkbox"
-          id="toggle-scheme"
-          name="toggle-scheme"
+          id="toggle-tabs-variant"
+          name="toggle-tabs-variant"
         />
       </div>
     </div>

package/src/components/Tabs/examples/{TabsNavSecondary.tsx → TabsNavSubtab.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
 
-export const TabsNavSecondary: React.FunctionComponent = () => {
+export const TabsNavSubtab: React.FunctionComponent = () => {
   const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
   const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
 
@@ -31,7 +31,7 @@ export const TabsNavSecondary: React.FunctionComponent = () => {
       <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#" aria-label="Subtabs with nav content users">
         <Tabs
           activeKey={activeTabKey2}
-          isSecondary
+          isSubtab
           onSelect={handleTabClickSecond}
           aria-label="Local secondary"
           component={TabsComponent.nav}

package/src/components/Tabs/examples/TabsSubtabs.tsx

@@ -14,7 +14,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
     setActiveTabKey1(tabIndex);
   };
 
-  // Toggle currently active secondary tab
+  // Toggle currently active subtab
   const handleTabClickSecond = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
     tabIndex: string | number
@@ -37,35 +37,35 @@ export const TabsSubtabs: React.FunctionComponent = () => {
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Tabs with subtabs content users">
           <Tabs
-            aria-label="secondary tabs for users"
+            aria-label="subtabs for users"
             role="region"
             activeKey={activeTabKey2}
-            isSecondary
+            isSubtab
             onSelect={handleTabClickSecond}
           >
-            <Tab eventKey={20} title={<TabTitleText>Secondary tab item 1</TabTitleText>}>
-              Secondary tab item 1 item section
+            <Tab eventKey={20} title={<TabTitleText>Subtab item 1</TabTitleText>}>
+              Subtab item 1 item section
             </Tab>
-            <Tab eventKey={21} title={<TabTitleText>Secondary tab item 2</TabTitleText>}>
-              Secondary tab item 2 section
+            <Tab eventKey={21} title={<TabTitleText>Subtab item 2</TabTitleText>}>
+              Subtab item 2 section
             </Tab>
-            <Tab eventKey={22} title={<TabTitleText>Secondary tab item 3</TabTitleText>}>
-              Secondary tab item 3 section
+            <Tab eventKey={22} title={<TabTitleText>Subtab item 3</TabTitleText>}>
+              Subtab item 3 section
             </Tab>
-            <Tab eventKey={23} title={<TabTitleText>Secondary tab item 4</TabTitleText>}>
-              Secondary tab item 4 section
+            <Tab eventKey={23} title={<TabTitleText>Subtab item 4</TabTitleText>}>
+              Subtab item 4 section
             </Tab>
-            <Tab eventKey={24} title={<TabTitleText>Secondary tab item 5</TabTitleText>}>
-              Secondary tab item 5 section
+            <Tab eventKey={24} title={<TabTitleText>Subtab item 5</TabTitleText>}>
+              Subtab item 5 section
             </Tab>
-            <Tab eventKey={25} title={<TabTitleText>Secondary tab item 6</TabTitleText>}>
-              Secondary tab item 6 section
+            <Tab eventKey={25} title={<TabTitleText>Subtab item 6</TabTitleText>}>
+              Subtab item 6 section
             </Tab>
-            <Tab eventKey={26} title={<TabTitleText>Secondary tab item 7</TabTitleText>}>
-              Secondary tab item 7 section
+            <Tab eventKey={26} title={<TabTitleText>Subtab item 7</TabTitleText>}>
+              Subtab item 7 section
             </Tab>
-            <Tab eventKey={27} title={<TabTitleText>Secondary tab item 8</TabTitleText>}>
-              Secondary tab item 8 section
+            <Tab eventKey={27} title={<TabTitleText>Subtab item 8</TabTitleText>}>
+              Subtab item 8 section
             </Tab>
           </Tabs>
         </Tab>
@@ -106,8 +106,8 @@ export const TabsSubtabs: React.FunctionComponent = () => {
           isChecked={isBox}
           onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with sub tabs"
-          id="toggle-box-secondary"
-          name="toggle-box-secondary"
+          id="toggle-box-subtab"
+          name="toggle-box-subtab"
         />
       </div>
     </div>

package/src/components/Text/examples/Text.md

@@ -51,7 +51,7 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 
 ```
 
-### Visited
+### Link and visited link
 
 ```ts file="./TextVisited.tsx"
 

package/src/components/Text/examples/TextVisited.tsx

@@ -4,16 +4,16 @@ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 export const TextVisited: React.FunctionComponent = () => (
   <>
     <TextContent>
-      <Text component={TextVariants.h3}>Visited link example</Text>
+      <Text component={TextVariants.h3}>Link example</Text>
       <Text component={TextVariants.p}>
         <Text component={TextVariants.a} isVisitedLink href="#">
-          Visited link
+          Click to visit link
         </Text>
       </Text>
     </TextContent>
     <br />
     <TextContent isVisited>
-      <Text component={TextVariants.h3}>Visited content example</Text>
+      <Text component={TextVariants.h3}>Link content example</Text>
       <Text component={TextVariants.p}>
         <Text component={TextVariants.a} href="#">
           content link 1

package/src/components/Tile/examples/Tile.css

@@ -0,0 +1,6 @@
+:is(.ws-react-c-tile, .ws-react-demos-c-tile) > [role="listbox"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  gap: var(--pf-t--global--spacer--sm);
+}

package/src/components/Tile/examples/Tile.md

@@ -7,6 +7,7 @@ propComponents: ['Tile']
 
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import './Tile.css';
 
 ## Examples
 

package/src/components/Title/Title.tsx

@@ -12,15 +12,6 @@ export enum TitleSizes {
   '4xl' = '4xl'
 }
 
-enum headingLevelSizeMap {
-  h1 = '2xl',
-  h2 = 'xl',
-  h3 = 'lg',
-  h4 = 'md',
-  h5 = 'md',
-  h6 = 'md'
-}
-
 type Size = 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 
 export interface TitleProps extends Omit<React.HTMLProps<HTMLHeadingElement>, 'size' | 'className'>, OUIAProps {
@@ -42,7 +33,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
   className = '',
   children = '',
   headingLevel: HeadingLevel,
-  size = headingLevelSizeMap[HeadingLevel],
+  size,
   ouiaId,
   ouiaSafe = true,
   ...props
@@ -52,7 +43,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
     <HeadingLevel
       {...ouiaProps}
       {...props}
-      className={css(styles.title, size && styles.modifiers[size as Size], className)}
+      className={css(styles.title, size ? styles.modifiers[size as Size] : styles.modifiers[HeadingLevel], className)}
     >
       {children}
     </HeadingLevel>

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

@@ -22,9 +22,9 @@ test(`Renders with the ${styles.title}`, () => {
   expect(screen.getByRole('heading')).toHaveClass(styles.title);
 });
 
-test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers['2xl']} by default`, () => {
+test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers.h1} by default`, () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers['2xl']}`, { exact: true });
+  expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers.h1}`, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {
@@ -36,34 +36,34 @@ test('Renders with custom class name when className prop is passed', () => {
   expect(screen.getByRole('heading')).toHaveClass('test-class');
 });
 
-test('Renders with class name pf-m-2xl by default when "h1" is passed as heading level', () => {
+test('Renders with class name pf-m-h1 by default when "h1" is passed as heading level', () => {
   render(<Title headingLevel="h1">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h1');
 });
 
-test('Renders with class name pf-m-xl by default when "h2" is passed as heading level', () => {
+test('Renders with class name pf-m-h2 by default when "h2" is passed as heading level', () => {
   render(<Title headingLevel="h2">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-xl');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h2');
 });
 
-test('Renders with class name pf-m-lg by default when "h3" is passed as heading level', () => {
+test('Renders with class name pf-m-h3 by default when "h3" is passed as heading level', () => {
   render(<Title headingLevel="h3">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-lg');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h3');
 });
 
-test('Renders with class name pf-m-md by default when "h4" is passed as heading level', () => {
+test('Renders with class name pf-m-h4 by default when "h4" is passed as heading level', () => {
   render(<Title headingLevel="h4">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h4');
 });
 
-test('Renders with class name pf-m-md by default when "h5" is passed as heading level', () => {
+test('Renders with class name pf-m-h5 by default when "h5" is passed as heading level', () => {
   render(<Title headingLevel="h5">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h5');
 });
 
-test('Renders with class name pf-m-md by default when "h6" is passed as heading level', () => {
+test('Renders with class name pf-m-h6 by default when "h6" is passed as heading level', () => {
   render(<Title headingLevel="h6">Test</Title>);
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-md');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-h6');
 });
 
 test('Renders with class name pf-m-md when "md" is passed as title size', () => {

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v5-c-title pf-m-2xl"
+    class="pf-v5-c-title pf-m-h1"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF5/Title"
     data-ouia-safe="true"

package/src/components/Title/examples/TitleCustomSizes.tsx

@@ -4,22 +4,22 @@ import { Title, TitleSizes } from '@patternfly/react-core';
 export const TitleCustomSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Title headingLevel="h1" size={TitleSizes['4xl']}>
-      h1 as 4xl
+      4xl title
     </Title>
     <Title headingLevel="h2" size="3xl">
-      h2 as 3xl
+      3xl title
     </Title>
     <Title headingLevel="h3" size={TitleSizes['2xl']}>
-      h3 as 2xl
+      2xl title
     </Title>
     <Title headingLevel="h4" size="xl">
-      h4 as xl
+      xl title
     </Title>
     <Title headingLevel="h5" size={TitleSizes.lg}>
-      h5 as lg
+      lg title
     </Title>
     <Title headingLevel="h6" size="md">
-      h6 as md Title
+      md title
     </Title>
   </React.Fragment>
 );

package/src/components/Title/examples/TitleDefaultSizes.tsx

@@ -3,11 +3,11 @@ import { Title } from '@patternfly/react-core';
 
 export const TitleDefaultSizes: React.FunctionComponent = () => (
   <React.Fragment>
-    <Title headingLevel="h1">h1 defaults to 2xl</Title>
-    <Title headingLevel="h2">h2 defaults to xl</Title>
-    <Title headingLevel="h3">h3 defaults to lg</Title>
-    <Title headingLevel="h4">h4 defaults to md</Title>
-    <Title headingLevel="h5">h5 defaults to md</Title>
-    <Title headingLevel="h6">h6 defaults to md</Title>
+    <Title headingLevel="h1">H1-styled title</Title>
+    <Title headingLevel="h2">H2-styled title</Title>
+    <Title headingLevel="h3">H3-styled title</Title>
+    <Title headingLevel="h4">H4-styled title</Title>
+    <Title headingLevel="h5">H5-styled title</Title>
+    <Title headingLevel="h6">H6-styled title</Title>
   </React.Fragment>
 );

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -28,9 +28,9 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
   className,
   isDisabled = false,
   isSelected = false,
-  'aria-label': ariaLabel = '',
+  'aria-label': ariaLabel,
   onChange = () => {},
-  buttonId = '',
+  buttonId,
   ...props
 }: ToggleGroupItemProps) => {
   const handleChange = (event: any): void => {
@@ -49,12 +49,12 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
         className={css(styles.toggleGroupButton, isSelected && styles.modifiers.selected)}
         aria-pressed={isSelected}
         onClick={handleChange}
-        {...(ariaLabel && { 'aria-label': ariaLabel })}
-        {...(isDisabled && { disabled: true })}
-        {...(buttonId && { id: buttonId })}
+        aria-label={ariaLabel}
+        disabled={isDisabled}
+        id={buttonId}
       >
-        {icon ? <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement> : null}
-        {text ? <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement> : null}
+        {icon && <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>}
+        {text && <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement>}
       </button>
     </div>
   );

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

@@ -16,9 +16,6 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
   };
   return (
     <Stack hasGutter>
-      <StackItem>
-        <Button onClick={disableAllClick}>{disableAll ? 'Enable back' : 'Disable all'}</Button>
-      </StackItem>
       <StackItem>
         <ToggleGroup areAllGroupsDisabled={disableAll} aria-label="Default with multiple selectable">
           <ToggleGroupItem
@@ -38,6 +35,9 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
           <ToggleGroupItem text="Option 3" key={2} isDisabled />
         </ToggleGroup>
       </StackItem>
+      <StackItem>
+        <Button onClick={disableAllClick}>{disableAll ? 'Enable back' : 'Disable all'}</Button>
+      </StackItem>
     </Stack>
   );
 };

package/src/components/Toolbar/ToolbarChipGroupContent.tsx

@@ -72,12 +72,7 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
 
     return (
       <div
-        className={css(
-          styles.toolbarContent,
-          !isHidden && !collapseListedFilters && styles.modifiers.chipContainer,
-          isHidden && styles.modifiers.hidden,
-          className
-        )}
+        className={css(styles.toolbarContent, isHidden && styles.modifiers.hidden, className)}
         {...((numberOfFilters === 0 || isExpanded) && { hidden: true })}
         ref={chipGroupContentRef}
         {...props}

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -61,7 +61,7 @@ class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentP
       >
         <ToolbarGroup>{children}</ToolbarGroup>
         {numberOfFilters > 0 && (
-          <ToolbarGroup className={styles.modifiers.chipContainer}>
+          <ToolbarGroup>
             <ToolbarGroup ref={chipContainerRef} />
             {showClearFiltersButton && !customChipGroupContent && (
               <ToolbarItem>

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -6,15 +6,14 @@ import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarGroupVariant {
   'filter-group' = 'filter-group',
-  'icon-button-group' = 'icon-button-group',
-  'button-group' = 'button-group'
+  'icon-button-group' = 'icon-button-group'
 }
 
 export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */
-  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group';
+  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -82,7 +81,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
           <div
             className={css(
               styles.toolbarGroup,
-              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,18 +1,13 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import cssWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
-
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
 import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarItemVariant {
   separator = 'separator',
-  'bulk-select' = 'bulk-select',
-  'overflow-menu' = 'overflow-menu',
   pagination = 'pagination',
-  'search-filter' = 'search-filter',
   label = 'label',
   'chip-group' = 'chip-group',
   'expand-all' = 'expand-all'
@@ -22,16 +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
-    | 'bulk-select'
-    | 'overflow-menu'
-    | 'pagination'
-    | 'search-filter'
-    | 'label'
-    | 'chip-group'
-    | 'separator'
-    | 'expand-all';
+  variant?: ToolbarItemVariant | 'pagination' | 'label' | 'chip-group' | 'separator' | 'expand-all';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -60,15 +46,6 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
     '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
   };
-  /** Widths 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 */
@@ -84,7 +61,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   variant,
   visibility,
   spacer,
-  widths,
   align,
   alignSelf,
   alignItems,
@@ -95,15 +71,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
-    return <Divider className={css(styles.modifiers.vertical, className)} {...props} />;
-  }
-
-  const widthStyles: any = {};
-  if (widths) {
-    Object.entries(widths || {}).map(
-      ([breakpoint, value]) =>
-        (widthStyles[`${cssWidth.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
-    );
+    return <Divider className={css(className)} orientation={{ default: 'vertical' }} {...props} />;
   }
 
   return (
@@ -112,16 +80,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
         <div
           className={css(
             styles.toolbarItem,
-            variant &&
-              styles.modifiers[
-                toCamel(variant) as
-                  | 'bulkSelect'
-                  | 'overflowMenu'
-                  | 'pagination'
-                  | 'searchFilter'
-                  | 'label'
-                  | 'chipGroup'
-              ],
+            variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label' | 'chipGroup'],
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
@@ -138,7 +97,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
           {...props}
-          {...(widths && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
         >
           {children}
         </div>

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -162,8 +162,7 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         className={css(
                           styles.toolbarGroup,
                           styles.modifiers.toggleGroup,
-                          variant &&
-                            styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+                          variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
                           formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),

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

@@ -3,20 +3,6 @@ import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 
 describe('ToolbarItem', () => {
-  it('should map width breakpoints', () => {
-    const widths = {
-      default: '100px',
-      sm: '80px',
-      md: '150px',
-      lg: '200px',
-      xl: '250px',
-      '2xl': '300px'
-    };
-
-    const { asFragment } = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
     render(
       <ToolbarItem data-testid="toolbaritem" isOverflowContainer>