@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

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']
 ---
 

package/src/components/Tooltip/examples/TooltipOptions.tsx

@@ -1,5 +1,16 @@
 import React from 'react';
-import { Button, Tooltip, Checkbox, Select, SelectList, SelectOption, MenuToggle, MenuToggleElement, TextInput, TooltipPosition } from '@patternfly/react-core';
+import {
+  Button,
+  Tooltip,
+  Checkbox,
+  Select,
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuToggleElement,
+  TextInput,
+  TooltipPosition
+} from '@patternfly/react-core';
 
 export const TooltipOptions: React.FunctionComponent = () => {
   const [trigger, setTrigger] = React.useState(['mouseenter', 'focus']);
@@ -34,7 +45,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             label="trigger: mouseenter"
             isChecked={trigger.includes('mouseenter')}
             onChange={(_event, checked) => {
-              const updatedTrigger = checked ? trigger.concat('mouseenter') : trigger.filter(t => t !== 'mouseenter');
+              const updatedTrigger = checked ? trigger.concat('mouseenter') : trigger.filter((t) => t !== 'mouseenter');
               setIsVisible(false);
               setTrigger(updatedTrigger);
             }}
@@ -45,7 +56,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             label="trigger: focus"
             isChecked={trigger.includes('focus')}
             onChange={(_event, checked) => {
-              const updatedTrigger = checked ? trigger.concat('focus') : trigger.filter(t => t !== 'focus');
+              const updatedTrigger = checked ? trigger.concat('focus') : trigger.filter((t) => t !== 'focus');
               setIsVisible(false);
               setTrigger(updatedTrigger);
             }}
@@ -56,7 +67,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             label="trigger: click"
             isChecked={trigger.includes('click')}
             onChange={(_event, checked) => {
-              const updatedTrigger = checked ? trigger.concat('click') : trigger.filter(t => t !== 'click');
+              const updatedTrigger = checked ? trigger.concat('click') : trigger.filter((t) => t !== 'click');
               setIsVisible(false);
               setTimeout(() => setTrigger(updatedTrigger));
             }}
@@ -67,7 +78,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             label="trigger: manual"
             isChecked={trigger.includes('manual')}
             onChange={(_event, checked) => {
-              const updatedTrigger = checked ? trigger.concat('manual') : trigger.filter(t => t !== 'manual');
+              const updatedTrigger = checked ? trigger.concat('manual') : trigger.filter((t) => t !== 'manual');
               setIsVisible(false);
               setTrigger(updatedTrigger);
             }}
@@ -99,7 +110,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
                 ref={toggleRef}
-                onClick={()=>setPositionSelectOpen(!positionSelectOpen)}
+                onClick={() => setPositionSelectOpen(!positionSelectOpen)}
                 isExpanded={positionSelectOpen}
                 style={
                   {
@@ -119,19 +130,19 @@ export const TooltipOptions: React.FunctionComponent = () => {
             selected={position}
           >
             <SelectList>
-              <SelectOption itemId={TooltipPosition.auto}>{TooltipPosition.auto}</SelectOption>
-              <SelectOption itemId={TooltipPosition.top}>{TooltipPosition.top}</SelectOption>
-              <SelectOption itemId={TooltipPosition.bottom}>{TooltipPosition.bottom}</SelectOption>
-              <SelectOption itemId={TooltipPosition.left}>{TooltipPosition.left}</SelectOption>
-              <SelectOption itemId={TooltipPosition.right}>{TooltipPosition.right}</SelectOption>
-              <SelectOption itemId={TooltipPosition.topStart}>{TooltipPosition.topStart}</SelectOption>
-              <SelectOption itemId={TooltipPosition.topEnd}>{TooltipPosition.topEnd}</SelectOption>
-              <SelectOption itemId={TooltipPosition.bottomStart}>{TooltipPosition.bottomStart}</SelectOption>
-              <SelectOption itemId={TooltipPosition.bottomEnd}>{TooltipPosition.bottomEnd}</SelectOption>
-              <SelectOption itemId={TooltipPosition.leftStart}>{TooltipPosition.leftStart}</SelectOption>
-              <SelectOption itemId={TooltipPosition.leftEnd}>{TooltipPosition.leftEnd}</SelectOption>
-              <SelectOption itemId={TooltipPosition.rightStart}>{TooltipPosition.rightStart}</SelectOption>
-              <SelectOption itemId={TooltipPosition.rightEnd}>{TooltipPosition.rightEnd}</SelectOption>
+              <SelectOption value={TooltipPosition.auto}>{TooltipPosition.auto}</SelectOption>
+              <SelectOption value={TooltipPosition.top}>{TooltipPosition.top}</SelectOption>
+              <SelectOption value={TooltipPosition.bottom}>{TooltipPosition.bottom}</SelectOption>
+              <SelectOption value={TooltipPosition.left}>{TooltipPosition.left}</SelectOption>
+              <SelectOption value={TooltipPosition.right}>{TooltipPosition.right}</SelectOption>
+              <SelectOption value={TooltipPosition.topStart}>{TooltipPosition.topStart}</SelectOption>
+              <SelectOption value={TooltipPosition.topEnd}>{TooltipPosition.topEnd}</SelectOption>
+              <SelectOption value={TooltipPosition.bottomStart}>{TooltipPosition.bottomStart}</SelectOption>
+              <SelectOption value={TooltipPosition.bottomEnd}>{TooltipPosition.bottomEnd}</SelectOption>
+              <SelectOption value={TooltipPosition.leftStart}>{TooltipPosition.leftStart}</SelectOption>
+              <SelectOption value={TooltipPosition.leftEnd}>{TooltipPosition.leftEnd}</SelectOption>
+              <SelectOption value={TooltipPosition.rightStart}>{TooltipPosition.rightStart}</SelectOption>
+              <SelectOption value={TooltipPosition.rightEnd}>{TooltipPosition.rightEnd}</SelectOption>
             </SelectList>
           </Select>
         </div>
@@ -182,7 +193,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
                 ref={toggleRef}
-                onClick={()=>setFlipSelectOpen(!flipSelectOpen)}
+                onClick={() => setFlipSelectOpen(!flipSelectOpen)}
                 isExpanded={flipSelectOpen}
                 style={
                   {
@@ -195,8 +206,10 @@ export const TooltipOptions: React.FunctionComponent = () => {
             )}
           >
             <SelectList>
-              <SelectOption itemId="flip">flip</SelectOption>
-              <SelectOption itemId="clockwise">['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']</SelectOption>
+              <SelectOption value="flip">flip</SelectOption>
+              <SelectOption value="clockwise">
+                ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']
+              </SelectOption>
             </SelectList>
           </Select>
         </div>

package/src/components/TreeView/TreeViewList.tsx

@@ -24,7 +24,7 @@ export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({
         <Divider />
       </React.Fragment>
     )}
-    <ul className={css('pf-c-tree-view__list')} role={isNested ? 'group' : 'tree'} {...props}>
+    <ul className={css('pf-v5-c-tree-view__list')} role={isNested ? 'group' : 'tree'} {...props}>
       {children}
     </ul>
   </>

package/src/components/TreeView/TreeViewSearch.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 /** Renders a search input for the tree view. This sub-component should be passed into the
  * tree view component's toolbar property.
@@ -29,15 +30,14 @@ export const TreeViewSearch: React.FunctionComponent<TreeViewSearchProps> = ({
   ...props
 }: TreeViewSearchProps) => (
   <div className={css(styles.treeViewSearch, className)}>
-    <input
-      className={css(formStyles.formControl, formStyles.modifiers.search)}
-      onChange={onSearch}
-      id={id}
-      name={name}
-      aria-label={ariaLabel}
-      type="search"
-      {...props}
-    />
+    <div className={css(formStyles.formControl, formStyles.modifiers.icon)}>
+      <input onChange={onSearch} id={id} name={name} aria-label={ariaLabel} type="search" {...props} />
+      <div className={css(formStyles.formControlUtilities)}>
+        <div className={css(formStyles.formControlIcon)}>
+          <SearchIcon />
+        </div>
+      </div>
+    </div>
   </div>
 );
 TreeViewSearch.displayName = 'TreeViewSearch';