@patternfly/react-core 5.0.0-alpha.118 → 5.0.0-alpha.119

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/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/demos/Card/Card.md

@@ -443,16 +443,56 @@ class CardViewBasic extends React.Component {
 
     const filterDropdownItems = (
       <SelectList>
-        <SelectOption hasCheckbox key="patternfly" itemId="PatternFly" isSelected={filters.products.includes("PatternFly")}>PatternFly</SelectOption>
-        <SelectOption hasCheckbox key="activemq" itemId="ActiveMQ" isSelected={filters.products.includes("ActiveMQ")}>ActiveMQ</SelectOption>
-        <SelectOption hasCheckbox key="apachespark" itemId="Apache Spark" isSelected={filters.products.includes("Apache Spark")}>Apache Spark</SelectOption>
-        <SelectOption hasCheckbox key="avro" itemId="Avro" isSelected={filters.products.includes("Avro")}>Avro</SelectOption>
-        <SelectOption hasCheckbox key="azureservices" itemId="Azure Services" isSelected={filters.products.includes("Azure Services")}>Azure Services</SelectOption>
-        <SelectOption hasCheckbox key="crypto" itemId="Crypto" isSelected={filters.products.includes("Crypto")}>Crypto</SelectOption>
-        <SelectOption hasCheckbox key="dropbox" itemId="DropBox" isSelected={filters.products.includes("DropBox")}>DropBox</SelectOption>
-        <SelectOption hasCheckbox key="jbossdatagrid" itemId="JBoss Data Grid" isSelected={filters.products.includes("JBoss Data Grid")}>JBoss Data Grid</SelectOption>
-        <SelectOption hasCheckbox key="rest" itemId="REST" isSelected={filters.products.includes("REST")}>REST</SelectOption>
-        <SelectOption hasCheckbox key="swagger" itemId="SWAGGER" isSelected={filters.products.includes("SWAGGER")}>SWAGGER</SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="patternfly"
+          value="PatternFly"
+          isSelected={filters.products.includes('PatternFly')}
+        >
+          PatternFly
+        </SelectOption>
+        <SelectOption hasCheckbox key="activemq" value="ActiveMQ" isSelected={filters.products.includes('ActiveMQ')}>
+          ActiveMQ
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="apachespark"
+          value="Apache Spark"
+          isSelected={filters.products.includes('Apache Spark')}
+        >
+          Apache Spark
+        </SelectOption>
+        <SelectOption hasCheckbox key="avro" value="Avro" isSelected={filters.products.includes('Avro')}>
+          Avro
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="azureservices"
+          value="Azure Services"
+          isSelected={filters.products.includes('Azure Services')}
+        >
+          Azure Services
+        </SelectOption>
+        <SelectOption hasCheckbox key="crypto" value="Crypto" isSelected={filters.products.includes('Crypto')}>
+          Crypto
+        </SelectOption>
+        <SelectOption hasCheckbox key="dropbox" value="DropBox" isSelected={filters.products.includes('DropBox')}>
+          DropBox
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="jbossdatagrid"
+          value="JBoss Data Grid"
+          isSelected={filters.products.includes('JBoss Data Grid')}
+        >
+          JBoss Data Grid
+        </SelectOption>
+        <SelectOption hasCheckbox key="rest" value="REST" isSelected={filters.products.includes('REST')}>
+          REST
+        </SelectOption>
+        <SelectOption hasCheckbox key="swagger" value="SWAGGER" isSelected={filters.products.includes('SWAGGER')}>
+          SWAGGER
+        </SelectOption>
       </SelectList>
     );
 
@@ -462,11 +502,7 @@ class CardViewBasic extends React.Component {
           aria-label="Products"
           role="menu"
           toggle={(toggleRef) => (
-            <MenuToggle
-              ref={toggleRef}
-              onClick={this.onToolbarDropdownToggle}
-              isExpanded={isLowerToolbarDropdownOpen}
-            >
+            <MenuToggle ref={toggleRef} onClick={this.onToolbarDropdownToggle} isExpanded={isLowerToolbarDropdownOpen}>
               Filter by creator name
               {filters.products.length > 0 && <Badge isRead>{filters.products.length}</Badge>}
             </MenuToggle>
@@ -576,7 +612,7 @@ class CardViewBasic extends React.Component {
       restIcon,
       swaggerIcon
     };
-    
+
     const filtered =
       filters.products.length > 0
         ? data.filter((card) => {

package/src/demos/CardDemos.md

@@ -1277,16 +1277,16 @@ const UtilizationCard3: React.FunctionComponent = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -2556,16 +2556,16 @@ const TrendCard1: React.FunctionComponent = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -2753,16 +2753,16 @@ CardLogViewDemo = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -2887,13 +2887,13 @@ CardEventViewDemo = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption itemId="Success" key="option1">
+      <SelectOption value="Success" key="option1">
         Success
       </SelectOption>
-      <SelectOption itemId="Error" key="option2">
+      <SelectOption value="Error" key="option2">
         Error
       </SelectOption>
-      <SelectOption itemId="Warning" key="option3">
+      <SelectOption value="Warning" key="option3">
         Error
       </SelectOption>
     </SelectList>