@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

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

@@ -1,7 +1,7 @@
 ---
 id: Toggle group
 section: components
-cssPrefix: pf-c-toggle-group
+cssPrefix: pf-v5-c-toggle-group
 propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -53,6 +53,8 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** 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. */
+  isOverflowContainer?: boolean;
   /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
   innerRef?: React.RefObject<any>;
 }
@@ -69,6 +71,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
       className,
       variant,
       children,
+      isOverflowContainer,
       innerRef,
       ...props
     } = this.props;
@@ -88,6 +91,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
               alignSelf === 'center' && styles.modifiers.alignSelfCenter,
               alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
+              isOverflowContainer && styles.modifiers.overflowContainer,
               className
             )}
             {...props}

package/src/components/Toolbar/ToolbarItem.tsx

@@ -70,6 +70,8 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
   isAllExpanded?: boolean;
+  /** Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation. */
+  isOverflowContainer?: boolean;
   /** Content to be rendered inside the data toolbar item */
   children?: React.ReactNode;
 }
@@ -85,6 +87,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   id,
   children,
   isAllExpanded,
+  isOverflowContainer,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
@@ -116,6 +119,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
                   | 'chipGroup'
               ],
             isAllExpanded && styles.modifiers.expanded,
+            isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToolbarGroup } from '../ToolbarGroup';
+
+describe('ToolbarItem', () => {
+  it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
+    render(<ToolbarGroup data-testid="toolbargroup" isOverflowContainer>Test</ToolbarGroup>);
+    expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
+  });
+});

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 
 describe('ToolbarItem', () => {
@@ -16,4 +16,9 @@ describe('ToolbarItem', () => {
     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>Test</ToolbarItem>);
+    expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
+  });
 });

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

@@ -5,7 +5,7 @@ exports[`Toolbar should render inset 1`] = `
   <div
     class="pf-v5-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
     data-ouia-component-id="OUIA-Generated-Toolbar-1"
-    data-ouia-component-type="PF4/Toolbar"
+    data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
   >
@@ -60,7 +60,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
   <div
     class="pf-v5-c-toolbar pf-m-toggle-group-container"
     data-ouia-component-id="OUIA-Generated-Toolbar-3"
-    data-ouia-component-type="PF4/Toolbar"
+    data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
   >
@@ -83,7 +83,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
               aria-label="Show Filters"
               class="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"
             />
@@ -119,7 +119,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
               aria-disabled="false"
               class="pf-v5-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-3"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"
             >
@@ -133,7 +133,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
               aria-disabled="false"
               class="pf-v5-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-4"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"
             >
@@ -157,7 +157,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
           <div
             aria-labelledby="pf-random-id-0"
             class="pf-v5-c-chip-group pf-m-category"
-            data-ouia-component-type="PF4/ChipGroup"
+            data-ouia-component-type="PF5/ChipGroup"
             data-ouia-safe="true"
             role="group"
           >
@@ -181,7 +181,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   <div
                     class="pf-v5-c-chip"
                     data-ouia-component-id="OUIA-Generated-Chip-1"
-                    data-ouia-component-type="PF4/Chip"
+                    data-ouia-component-type="PF5/Chip"
                     data-ouia-safe="true"
                   >
                     <span
@@ -203,7 +203,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
                         class="pf-v5-c-button pf-m-plain"
                         data-ouia-component-id="close"
-                        data-ouia-component-type="PF4/Button"
+                        data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
                         id="remove_pf-random-id-1"
                         type="button"
@@ -212,8 +212,10 @@ exports[`Toolbar should render with custom chip content 1`] = `
                           aria-hidden="true"
                           class="pf-v5-svg"
                           fill="currentColor"
+                          height="1em"
                           role="img"
                           viewBox="0 0 352 512"
+                          width="1em"
                         >
                           <path
                             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -229,7 +231,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   <div
                     class="pf-v5-c-chip"
                     data-ouia-component-id="OUIA-Generated-Chip-2"
-                    data-ouia-component-type="PF4/Chip"
+                    data-ouia-component-type="PF5/Chip"
                     data-ouia-safe="true"
                   >
                     <span
@@ -251,7 +253,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
                         class="pf-v5-c-button pf-m-plain"
                         data-ouia-component-id="close"
-                        data-ouia-component-type="PF4/Button"
+                        data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
                         id="remove_pf-random-id-2"
                         type="button"
@@ -260,8 +262,10 @@ exports[`Toolbar should render with custom chip content 1`] = `
                           aria-hidden="true"
                           class="pf-v5-svg"
                           fill="currentColor"
+                          height="1em"
                           role="img"
                           viewBox="0 0 352 512"
+                          width="1em"
                         >
                           <path
                             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -282,7 +286,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                 aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
                 class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="Close chip group"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
                 id="remove_group_pf-random-id-0"
                 type="button"
@@ -291,8 +295,10 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   aria-hidden="true"
                   class="pf-v5-svg"
                   fill="currentColor"
+                  height="1em"
                   role="img"
                   viewBox="0 0 512 512"
+                  width="1em"
                 >
                   <path
                     d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -319,7 +325,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
           aria-disabled="false"
           class="pf-v5-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="OUIA-Generated-Button-link-1"
-          data-ouia-component-type="PF4/Button"
+          data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
         >
@@ -333,7 +339,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
           aria-disabled="false"
           class="pf-v5-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="OUIA-Generated-Button-link-2"
-          data-ouia-component-type="PF4/Button"
+          data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           type="button"
         >
@@ -350,7 +356,7 @@ exports[`Toolbar should render with page inset flag 1`] = `
   <div
     class="pf-v5-c-toolbar pf-m-page-insets"
     data-ouia-component-id="OUIA-Generated-Toolbar-2"
-    data-ouia-component-type="PF4/Toolbar"
+    data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
   >

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

@@ -1,6 +1,6 @@
 ---
 id: Toolbar
-cssPrefix: pf-c-toolbar
+cssPrefix: pf-v5-c-toolbar
 propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'ToolbarToggleGroup', 'ToolbarFilter']
 section: components
 ---

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

@@ -76,13 +76,15 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
               </MenuToggle>
             )}
             onSelect={onStatusSelect}
-            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}
             selected={statusSelected}
             isOpen={statusIsExpanded}
           >
             <SelectList>
               {statusOptions.map((option, index) => (
-                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+                <SelectOption key={index} value={option}>
+                  {option}
+                </SelectOption>
               ))}
             </SelectList>
           </Select>
@@ -106,11 +108,13 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
             onSelect={onRiskSelect}
             selected={riskSelected}
             isOpen={riskIsExpanded}
-            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}
           >
             <SelectList>
               {riskOptions.map((option, index) => (
-                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+                <SelectOption key={index} value={option}>
+                  {option}
+                </SelectOption>
               ))}
             </SelectList>
           </Select>

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

@@ -81,13 +81,15 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
               </MenuToggle>
             )}
             onSelect={onStatusSelect}
-            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}
             selected={statusSelected}
             isOpen={statusIsExpanded}
           >
             <SelectList>
               {statusOptions.map((option, index) => (
-                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+                <SelectOption key={index} value={option}>
+                  {option}
+                </SelectOption>
               ))}
             </SelectList>
           </Select>
@@ -111,11 +113,13 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
             onSelect={onRiskSelect}
             selected={riskSelected}
             isOpen={riskIsExpanded}
-            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}
           >
             <SelectList>
               {riskOptions.map((option, index) => (
-                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+                <SelectOption key={index} value={option}>
+                  {option}
+                </SelectOption>
               ))}
             </SelectList>
           </Select>

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

@@ -62,35 +62,20 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
 
   const statusMenuItems = (
     <SelectList>
-      <SelectOption
-        hasCheckbox
-        key="statusNew"
-        itemId="New"
-        isSelected={filters.status.includes("New")}
-      >
+      <SelectOption hasCheckbox key="statusNew" value="New" isSelected={filters.status.includes('New')}>
         New
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="statusPending"
-        itemId="Pending"
-        isSelected={filters.status.includes("Pending")}
-      >
+      <SelectOption hasCheckbox key="statusPending" value="Pending" isSelected={filters.status.includes('Pending')}>
         Pending
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="statusRunning"
-        itemId="Running"
-        isSelected={filters.status.includes("Running")}
-      >
+      <SelectOption hasCheckbox key="statusRunning" value="Running" isSelected={filters.status.includes('Running')}>
         Running
       </SelectOption>
       <SelectOption
         hasCheckbox
         key="statusCancelled"
-        itemId="Cancelled"
-        isSelected={filters.status.includes("Cancelled")}
+        value="Cancelled"
+        isSelected={filters.status.includes('Cancelled')}
       >
         Cancelled
       </SelectOption>
@@ -99,28 +84,13 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
 
   const riskMenuItems = (
     <SelectList>
-      <SelectOption
-        hasCheckbox
-        key="riskLow"
-        itemId="Low"
-        isSelected={filters.risk.includes("Low")}
-      >
+      <SelectOption hasCheckbox key="riskLow" value="Low" isSelected={filters.risk.includes('Low')}>
         Low
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="riskMedium"
-        itemId="Medium"
-        isSelected={filters.risk.includes("Medium")}
-      >
+      <SelectOption hasCheckbox key="riskMedium" value="Medium" isSelected={filters.risk.includes('Medium')}>
         Medium
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="riskHigh"
-        itemId="High"
-        isSelected={filters.risk.includes("High")}
-      >
+      <SelectOption hasCheckbox key="riskHigh" value="High" isSelected={filters.risk.includes('High')}>
         High
       </SelectOption>
     </SelectList>
@@ -132,7 +102,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
         <ToolbarFilter
           chips={filters.status}
           deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-          deleteChipGroup={category => onDeleteGroup(category as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Status"
         >
           <Select
@@ -153,10 +123,10 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
                 {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}
               </MenuToggle>
             )}
-            onSelect={(event, selection) => onSelect("Status", event, selection as string)}
+            onSelect={(event, selection) => onSelect('Status', event, selection as string)}
             selected={filters.status}
             isOpen={statusIsExpanded}
-            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}
           >
             {statusMenuItems}
           </Select>
@@ -164,7 +134,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
         <ToolbarFilter
           chips={filters.risk}
           deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-          deleteChipGroup={category => onDeleteGroup(category as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Risk"
         >
           <Select
@@ -185,10 +155,10 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
                 {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}
               </MenuToggle>
             )}
-            onSelect={(event, selection) => onSelect("Risk", event, selection as string)}
+            onSelect={(event, selection) => onSelect('Risk', event, selection as string)}
             selected={filters.risk}
             isOpen={riskIsExpanded}
-            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}
           >
             {riskMenuItems}
           </Select>

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

@@ -29,13 +29,13 @@ export const ToolbarGroups: React.FunctionComponent = () => {
 
   const onToggle = (filterName: string) => {
     switch (filterName) {
-      case "first":
+      case 'first':
         setFirstIsExpanded(!firstIsExpanded);
         break;
-      case "second":
+      case 'second':
         setSecondIsExpanded(!secondIsExpanded);
         break;
-      case "third":
+      case 'third':
         setThirdIsExpanded(!thirdIsExpanded);
         break;
     }
@@ -63,7 +63,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
               ref={toggleRef}
-              onClick={() => onToggle("first")}
+              onClick={() => onToggle('first')}
               isExpanded={firstIsExpanded}
               style={
                 {
@@ -75,13 +75,15 @@ export const ToolbarGroups: React.FunctionComponent = () => {
             </MenuToggle>
           )}
           onSelect={onFirstSelect}
-          onOpenChange={isOpen => setFirstIsExpanded(isOpen)}
+          onOpenChange={(isOpen) => setFirstIsExpanded(isOpen)}
           selected={firstSelected}
           isOpen={firstIsExpanded}
         >
           <SelectList>
             {firstOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              <SelectOption key={index} value={option}>
+                {option}
+              </SelectOption>
             ))}
           </SelectList>
         </Select>
@@ -91,7 +93,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
               ref={toggleRef}
-              onClick={() => onToggle("second")}
+              onClick={() => onToggle('second')}
               isExpanded={secondIsExpanded}
               style={
                 {
@@ -104,12 +106,14 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           )}
           onSelect={onSecondSelect}
           selected={secondSelected}
-          onOpenChange={isOpen => setSecondIsExpanded(isOpen)}
+          onOpenChange={(isOpen) => setSecondIsExpanded(isOpen)}
           isOpen={secondIsExpanded}
         >
           <SelectList>
             {secondOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              <SelectOption key={index} value={option}>
+                {option}
+              </SelectOption>
             ))}
           </SelectList>
         </Select>
@@ -119,7 +123,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
               ref={toggleRef}
-              onClick={() => onToggle("third")}
+              onClick={() => onToggle('third')}
               isExpanded={thirdIsExpanded}
               style={
                 {
@@ -132,12 +136,14 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           )}
           onSelect={onThirdSelect}
           selected={thirdSelected}
-          onOpenChange={isOpen => setThirdIsExpanded(isOpen)}
+          onOpenChange={(isOpen) => setThirdIsExpanded(isOpen)}
           isOpen={thirdIsExpanded}
         >
           <SelectList>
             {thirdOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              <SelectOption key={index} value={option}>
+                {option}
+              </SelectOption>
             ))}
           </SelectList>
         </Select>

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

@@ -106,11 +106,11 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   );
   const splitButtonDropdownItems = (
     <>
-      <DropdownItem itemId={0} key="action">
+      <DropdownItem value={0} key="action">
         Action
       </DropdownItem>
       <DropdownItem
-        itemId={1}
+        value={1}
         key="link"
         to="#default-link2"
         // Prevent the default onClick functionality for example purposes
@@ -118,10 +118,10 @@ export const ToolbarStacked: React.FunctionComponent = () => {
       >
         Link
       </DropdownItem>
-      <DropdownItem itemId={2} isDisabled key="disabled action">
+      <DropdownItem value={2} isDisabled key="disabled action">
         Disabled Action
       </DropdownItem>
-      <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+      <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
         Disabled Link
       </DropdownItem>
     </>
@@ -156,7 +156,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         >
           <SelectList>
             {resourceOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>
+              <SelectOption key={index} value={option}>
                 {option}
               </SelectOption>
             ))}
@@ -189,7 +189,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         >
           <SelectList>
             {statusOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>
+              <SelectOption key={index} value={option}>
                 {option}
               </SelectOption>
             ))}

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

@@ -89,19 +89,19 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const statusMenuItems = (
     <SelectList>
-      <SelectOption hasCheckbox key="statusNew" itemId="New" isSelected={filters.status.includes('New')}>
+      <SelectOption hasCheckbox key="statusNew" value="New" isSelected={filters.status.includes('New')}>
         New
       </SelectOption>
-      <SelectOption hasCheckbox key="statusPending" itemId="Pending" isSelected={filters.status.includes('Pending')}>
+      <SelectOption hasCheckbox key="statusPending" value="Pending" isSelected={filters.status.includes('Pending')}>
         Pending
       </SelectOption>
-      <SelectOption hasCheckbox key="statusRunning" itemId="Running" isSelected={filters.status.includes('Running')}>
+      <SelectOption hasCheckbox key="statusRunning" value="Running" isSelected={filters.status.includes('Running')}>
         Running
       </SelectOption>
       <SelectOption
         hasCheckbox
         key="statusCancelled"
-        itemId="Cancelled"
+        value="Cancelled"
         isSelected={filters.status.includes('Cancelled')}
       >
         Cancelled
@@ -111,13 +111,13 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const riskMenuItems = (
     <SelectList>
-      <SelectOption hasCheckbox key="riskLow" itemId="Low" isSelected={filters.risk.includes('Low')}>
+      <SelectOption hasCheckbox key="riskLow" value="Low" isSelected={filters.risk.includes('Low')}>
         Low
       </SelectOption>
-      <SelectOption hasCheckbox key="riskMedium" itemId="Medium" isSelected={filters.risk.includes('Medium')}>
+      <SelectOption hasCheckbox key="riskMedium" value="Medium" isSelected={filters.risk.includes('Medium')}>
         Medium
       </SelectOption>
-      <SelectOption hasCheckbox key="riskHigh" itemId="High" isSelected={filters.risk.includes('High')}>
+      <SelectOption hasCheckbox key="riskHigh" value="High" isSelected={filters.risk.includes('High')}>
         High
       </SelectOption>
     </SelectList>

package/src/components/Tooltip/examples/Tooltip.md

@@ -1,7 +1,7 @@
 ---
 id: Tooltip
 section: components
-cssPrefix: pf-c-tooltip
+cssPrefix: pf-v5-c-tooltip
 propComponents: ['Tooltip']
 ---