@patternfly/react-core 5.0.0-alpha.9 → 5.0.0-alpha.90

package/src/demos/PrimaryDetail.md

@@ -1,8 +1,9 @@
 ---
 id: Primary-detail
-section: demos
+section: patterns
 ---
 
+import { Select as SelectDeprecated, SelectOption as SelectOptionDeprecated, SelectVariant } from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
@@ -13,7 +14,6 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import pfIcon from './Card/pf-logo-small.svg';
 import activeMQIcon from './Card/activemq-core_200x150.png';
 import avroIcon from './Card/camel-avro_200x150.png';
@@ -24,6 +24,7 @@ import sparkIcon from './Card/camel-spark_200x150.png';
 import swaggerIcon from './Card/camel-swagger-java_200x150.png';
 import azureIcon from './Card/FuseConnector_Icons_AzureServices.png';
 import restIcon from './Card/FuseConnector_Icons_REST.png';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Demos
 
@@ -60,9 +61,6 @@ import {
   PageSection,
   PageSectionVariants,
   Progress,
-  Select,
-  SelectOption,
-  SelectVariant,
   Stack,
   StackItem,
   Text,
@@ -70,6 +68,11 @@ import {
   TextInput,
   Title
 } from '@patternfly/react-core';
+import {
+  Select as SelectDeprecated,
+  SelectOption as SelectOptionDeprecated,
+  SelectVariant
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -79,6 +82,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class PrimaryDetailFullPage extends React.Component {
   constructor(props) {
@@ -112,11 +116,11 @@ class PrimaryDetailFullPage extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -137,7 +141,7 @@ class PrimaryDetailFullPage extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });
@@ -158,7 +162,7 @@ class PrimaryDetailFullPage extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (_event, id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,
@@ -208,7 +212,7 @@ class PrimaryDetailFullPage extends React.Component {
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
           <ToolbarItem>
-            <Select
+            <SelectDeprecated
               variant={SelectVariant.single}
               aria-label="Select Input"
               onToggle={this.onStatusToggle}
@@ -217,12 +221,12 @@ class PrimaryDetailFullPage extends React.Component {
               isExpanded={statusIsExpanded}
             >
               {this.statusOptions.map((option, index) => (
-                <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
               ))}
-            </Select>
+            </SelectDeprecated>
           </ToolbarItem>
           <ToolbarItem>
-            <Select
+            <SelectDeprecated
               variant={SelectVariant.single}
               aria-label="Select Input"
               onToggle={this.onRiskToggle}
@@ -231,9 +235,9 @@ class PrimaryDetailFullPage extends React.Component {
               isExpanded={riskIsExpanded}
             >
               {this.riskOptions.map((option, index) => (
-                <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
               ))}
-            </Select>
+            </SelectDeprecated>
           </ToolbarItem>
         </ToolbarGroup>
       </React.Fragment>
@@ -520,9 +524,6 @@ import {
   PageSection,
   PageSectionVariants,
   Progress,
-  Select,
-  SelectOption,
-  SelectVariant,
   Stack,
   StackItem,
   Text,
@@ -530,6 +531,11 @@ import {
   TextInput,
   Title
 } from '@patternfly/react-core';
+import {
+  Select as SelectDeprecated,
+  SelectOption as SelectOptionDeprecated,
+  SelectVariant
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -572,11 +578,11 @@ class PrimaryDetailContentPadding extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -597,7 +603,7 @@ class PrimaryDetailContentPadding extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });
@@ -618,7 +624,7 @@ class PrimaryDetailContentPadding extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (_event, id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,
@@ -668,7 +674,7 @@ class PrimaryDetailContentPadding extends React.Component {
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
           <ToolbarItem>
-            <Select
+            <SelectDeprecated
               variant={SelectVariant.single}
               aria-label="Select Input"
               onToggle={this.onStatusToggle}
@@ -677,12 +683,12 @@ class PrimaryDetailContentPadding extends React.Component {
               isExpanded={statusIsExpanded}
             >
               {this.statusOptions.map((option, index) => (
-                <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
               ))}
-            </Select>
+            </SelectDeprecated>
           </ToolbarItem>
           <ToolbarItem>
-            <Select
+            <SelectDeprecated
               variant={SelectVariant.single}
               aria-label="Select Input"
               onToggle={this.onRiskToggle}
@@ -691,9 +697,9 @@ class PrimaryDetailContentPadding extends React.Component {
               isExpanded={riskIsExpanded}
             >
               {this.riskOptions.map((option, index) => (
-                <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
               ))}
-            </Select>
+            </SelectDeprecated>
           </ToolbarItem>
         </ToolbarGroup>
       </React.Fragment>
@@ -955,18 +961,11 @@ import React from 'react';
 import {
   Button,
   Card,
-  CardActions,
   CardHeader,
   CardBody,
   CardTitle,
   Checkbox,
   Divider,
-  Dropdown,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-  DropdownItem,
-  DropdownPosition,
-  DropdownSeparator,
   Drawer,
   DrawerActions,
   DrawerPanelBody,
@@ -975,17 +974,20 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelContent,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
   Flex,
   FlexItem,
   Gallery,
-  KebabToggle,
+  MenuToggle,
+  MenuToggleCheckbox,
   PageSection,
   PageSectionVariants,
   Pagination,
   Progress,
   Select,
   SelectOption,
-  SelectVariant,
   TextContent,
   Text,
   Title,
@@ -1006,6 +1008,7 @@ import sparkIcon from './camel-spark_200x150.png';
 import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {
@@ -1033,27 +1036,27 @@ class PrimaryDetailCardView extends React.Component {
       activeItem: 0
     };
 
-    this.onToolbarDropdownToggle = isLowerToolbarDropdownOpen => {
-      this.setState(prevState => ({
+    this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
+      this.setState((prevState) => ({
         isLowerToolbarDropdownOpen
       }));
     };
 
-    this.onToolbarDropdownSelect = _event => {
+    this.onToolbarDropdownSelect = (_event) => {
       this.setState({
         isLowerToolbarDropdownOpen: !this.state.isLowerToolbarDropdownOpen
       });
     };
 
-    this.onToolbarKebabDropdownToggle = isLowerToolbarKebabDropdownOpen => {
-      this.setState({
-        isLowerToolbarKebabDropdownOpen
-      });
+    this.onToolbarKebabDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isLowerToolbarKebabDropdownOpen: !prevState.isLowerToolbarKebabDropdownOpen
+      }));
     };
 
-    this.onToolbarKebabDropdownSelect = _event => {
+    this.onToolbarKebabDropdownSelect = () => {
       this.setState({
-        isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen
+        isLowerToolbarKebabDropdownOpen: false
       });
     };
 
@@ -1066,12 +1069,14 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onNameSelect = (event, selection) => {
       const checked = event.target.checked;
-      this.setState(prevState => {
+      this.setState((prevState) => {
         const prevSelections = prevState.filters.products;
         return {
           filters: {
             ...prevState.filters,
-            ['products']: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+            ['products']: checked
+              ? [...prevSelections, selection]
+              : prevSelections.filter((value) => value !== selection)
           }
         };
       });
@@ -1079,8 +1084,8 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onDelete = (type = '', id = '') => {
       if (type) {
-        this.setState(prevState => {
-          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
+        this.setState((prevState) => {
+          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);
           return {
             filters: prevState.filters
           };
@@ -1103,10 +1108,10 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onCheckboxClick = (event, productId) => {
       event.stopPropagation();
-      this.setState(prevState =>
+      this.setState((prevState) =>
         prevState.selectedItems.includes(productId * 1) || this.state.selectedItems.includes(productId * 1)
           ? {
-              selectedItems: [...this.state.selectedItems.filter(id => productId * 1 !== id)],
+              selectedItems: [...this.state.selectedItems.filter((id) => productId * 1 !== id)],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
             }
           : {
@@ -1116,7 +1121,7 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.onCardClick = event => {
+    this.onCardClick = (event) => {
       if (event.currentTarget.id === this.state.activeCard) {
         this.setState({
           isDrawerExpanded: !this.state.isDrawerExpanded,
@@ -1133,7 +1138,7 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
-    this.onChange = (labelledById, _event) => {
+    this.onChange = (_event, labelledById) => {
       if (labelledById === this.state.activeCard) {
         return;
       }
@@ -1196,7 +1201,7 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.splitCheckboxSelectAll = e => {
+    this.splitCheckboxSelectAll = (e) => {
       const { checked } = e.target;
       const { isChecked } = this.state;
       let collection = [];
@@ -1219,47 +1224,46 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.onSplitButtonSelect = _event => {
-      this.setState((prevState, _props) => ({
-        splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen,
+    this.onSplitButtonSelect = () => {
+      this.setState((prevState) => ({
+        splitButtonDropdownIsOpen: false,
         isDrawerExpanded: false,
         activeCard: null
       }));
     };
 
-    this.onSplitButtonToggle = isOpen => {
-      this.setState({
-        splitButtonDropdownIsOpen: isOpen
-      });
+    this.onSplitButtonToggle = () => {
+      this.setState((prevState) => ({
+        splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen
+      }));
     };
 
-    this.onCardKebabDropdownToggle = (event, key, isCardKebabDropdownOpen) => {
-      event.stopPropagation();
-      this.setState({
-        [key]: isCardKebabDropdownOpen
-      });
+    this.onCardKebabDropdownToggle = (key) => {
+      this.setState((prevState) => ({
+        [key]: !prevState[key]
+      }));
     };
 
-    this.onCardKebabDropdownSelect = (key, _event) => {
+    this.onCardKebabDropdownSelect = (key) => {
       this.setState({
-        [key]: !this.state[key]
+        [key]: false
       });
     };
 
     this.deleteItem = (event, item) => {
       event.stopPropagation();
-      const filter = getter => val => getter(val) !== item.id;
+      const filter = (getter) => (val) => getter(val) !== item.id;
       const filteredCards = this.state.res.filter(filter(({ id }) => id));
       this.setState({
         res: filteredCards,
-        selectedItems: this.state.selectedItems.filter(filter(id => id)),
+        selectedItems: this.state.selectedItems.filter(filter((id) => id)),
         totalItemCount: this.state.totalItemCount - 1,
         isDrawerExpanded: false,
         activeCard: null
       });
     };
 
-    this.onKeyDown = event => {
+    this.onKeyDown = (event) => {
       if (event.target !== event.currentTarget) {
         return;
       }
@@ -1294,49 +1298,16 @@ class PrimaryDetailCardView extends React.Component {
 
   fetch(page, perPage) {
     fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then(resp => resp.json())
-      .then(resp => this.setState({ res: resp, perPage, page }))
+      .then((resp) => resp.json())
+      .then((resp) => this.setState({ res: resp, perPage, page }))
       .then(() => this.updateSelected())
-      .catch(err => this.setState({ error: err }));
+      .catch((err) => this.setState({ error: err }));
   }
 
   componentDidMount() {
     this.fetch(this.state.page, this.state.perPage);
   }
 
-  buildFilterDropdown() {
-    const { isLowerToolbarDropdownOpen, filters } = this.state;
-
-    const filterDropdownItems = [
-      <SelectOption key="patternfly" value="Patternfly" />,
-      <SelectOption key="activemq" value="ActiveMQ" />,
-      <SelectOption key="apachespark" value="Apache Spark" />,
-      <SelectOption key="avro" value="Avro" />,
-      <SelectOption key="azureservices" value="Azure Services" />,
-      <SelectOption key="crypto" value="Crypto" />,
-      <SelectOption key="dropbox" value="DropBox" />,
-      <SelectOption key="jbossdatagrid" value="JBoss Data Grid" />,
-      <SelectOption key="rest" value="REST" />,
-      <SelectOption key="swagger" value="SWAGGER" />
-    ];
-
-    return (
-      <ToolbarFilter categoryName="Products" chips={filters.products} deleteChip={this.onDelete}>
-        <Select
-          variant={SelectVariant.checkbox}
-          aria-label="Products"
-          onToggle={this.onToolbarDropdownToggle}
-          onSelect={this.onNameSelect}
-          selections={filters.products}
-          isExpanded={isLowerToolbarDropdownOpen}
-          placeholderText="Creator"
-        >
-          {filterDropdownItems}
-        </Select>
-      </ToolbarFilter>
-    );
-  }
-
   buildSelectDropdown() {
     const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
     const numSelected = selectedItems.length;
@@ -1344,73 +1315,85 @@ class PrimaryDetailCardView extends React.Component {
     const anySelected = numSelected > 0;
     const someChecked = anySelected ? null : false;
     const isChecked = allSelected ? true : someChecked;
-    const splitButtonDropdownItems = [
-      <DropdownItem key="item-1" onClick={this.selectNone}>
-        Select none (0 items)
-      </DropdownItem>,
-      <DropdownItem key="item-2" onClick={this.selectPage}>
-        Select page ({this.state.res.length} items)
-      </DropdownItem>,
-      <DropdownItem key="item-3" onClick={this.selectAll}>
-        Select all ({this.state.totalItemCount} items)
-      </DropdownItem>
-    ];
+    const splitButtonDropdownItems = (
+      <>
+        <DropdownItem key="item-1" onClick={this.selectNone.bind(this)}>
+          Select none (0 items)
+        </DropdownItem>
+        <DropdownItem key="item-2" onClick={this.selectPage.bind(this)}>
+          Select page ({this.state.perPage} items)
+        </DropdownItem>
+        <DropdownItem key="item-3" onClick={this.selectAll.bind(this)}>
+          Select all ({this.state.totalItemCount} items)
+        </DropdownItem>
+      </>
+    );
 
     return (
       <Dropdown
-        position={DropdownPosition.left}
         onSelect={this.onSplitButtonSelect}
-        toggle={
-          <DropdownToggle
-            splitButtonItems={[
-              <DropdownToggleCheckbox
-                id="example-checkbox-2"
-                key="split-checkbox"
-                aria-label={anySelected ? 'Deselect all' : 'Select all'}
-                isChecked={areAllSelected}
-                onClick={this.splitCheckboxSelectAll}
-              >
-                {numSelected !== 0 && `${numSelected} selected`}
-              </DropdownToggleCheckbox>
-            ]}
-            onToggle={this.onSplitButtonToggle}
-          ></DropdownToggle>
-        }
         isOpen={splitButtonDropdownIsOpen}
-        dropdownItems={splitButtonDropdownItems}
-      />
+        onOpenChange={(isOpen) => this.setState({ splitButtonDropdownIsOpen: isOpen })}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={splitButtonDropdownIsOpen}
+            onClick={this.onSplitButtonToggle}
+            aria-label="Select cards"
+            splitButtonOptions={{
+              items: [
+                <MenuToggleCheckbox
+                  id="split-dropdown-checkbox"
+                  key="split-dropdown-checkbox"
+                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                  isChecked={areAllSelected}
+                  onClick={this.splitCheckboxSelectAll.bind(this)}
+                >
+                  {numSelected !== 0 && `${numSelected} selected`}
+                </MenuToggleCheckbox>
+              ]
+            }}
+          ></MenuToggle>
+        )}
+      >
+        <DropdownList>{splitButtonDropdownItems}</DropdownList>
+      </Dropdown>
     );
   }
 
   render() {
-    const {
-      isDrawerExpanded,
-      isChecked,
-      selectedItems,
-      activeCard,
-      isLowerToolbarKebabDropdownOpen,
-      filters,
-      res
-    } = this.state;
-
-    const toolbarKebabDropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-
+    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, res } =
+      this.state;
+
+    const toolbarKebabDropdownItems = (
+      <>
+        <DropdownItem itemId={0} key="action">
+          Action
+        </DropdownItem>
+        <DropdownItem
+          itemId={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled action">
+          Disabled Action
+        </DropdownItem>
+        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
+        </DropdownItem>
+        <Divider component="li" key="separator" />
+        <DropdownItem itemId={4} key="separated action">
+          Separated Action
+        </DropdownItem>
+        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
+        </DropdownItem>
+      </>
+    );
     const toolbarItems = (
       <React.Fragment>
         <ToolbarItem>{this.buildSelectDropdown()}</ToolbarItem>
@@ -1420,23 +1403,32 @@ class PrimaryDetailCardView extends React.Component {
         <ToolbarItem>
           <Button variant="secondary">Action</Button>
         </ToolbarItem>
-        <ToolbarItem hasAdditionalOptions>
+        <ToolbarItem>
           <Dropdown
             onSelect={this.onToolbarKebabDropdownSelect}
-            toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="card-view-data-toolbar-dropdown" />}
             isOpen={isLowerToolbarKebabDropdownOpen}
-            isPlain
-            dropdownItems={toolbarKebabDropdownItems}
-            isFlipEnabled
-            menuAppendTo="parent"
-          />
+            onOpenChange={(isOpen) => this.setState({ isLowerToolbarKebabDropdownOpen: isOpen })}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={isLowerToolbarKebabDropdownOpen}
+                variant="plain"
+                onClick={this.onToolbarKebabDropdownToggle}
+                aria-label="Toolbar actions"
+              >
+                <EllipsisVIcon aria-hidden="true" />
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
       </React.Fragment>
     );
 
     const filtered =
       filters.products.length > 0
-        ? res.filter(card => filters.products.length === 0 || filters.products.includes(card.name))
+        ? res.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
         : res;
 
     const icons = {
@@ -1456,7 +1448,6 @@ class PrimaryDetailCardView extends React.Component {
       <Gallery hasGutter role="region" aria-label="Selectable card container">
         {filtered.map((product, key) => (
           <Card
-            isHoverable
             key={product.name}
             id={'card-view-' + key}
             onKeyDown={this.onKeyDown}
@@ -1466,37 +1457,47 @@ class PrimaryDetailCardView extends React.Component {
             isSelected={activeCard === 'card-view-' + key}
             hasSelectableInput
           >
-            <CardHeader>
-              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
-              <CardActions>
-                <Dropdown
-                  isPlain
-                  position="right"
-                  onSelect={e => this.onCardKebabDropdownSelect(key, e)}
-                  toggle={
-                    <KebabToggle
-                      onToggle={(isCardKebabDropdownOpen, event) =>
-                        this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen)
-                      }
+            <CardHeader
+              actions={{
+                actions: (
+                  <>
+                    <Dropdown
+                      onSelect={() => this.onCardKebabDropdownSelect(key)}
+                      isOpen={this.state[key] || false}
+                      onOpenChange={(isOpen) => this.setState({ [key]: isOpen })}
+                      popperProps={{ position: 'right' }}
+                      toggle={(toggleRef) => (
+                        <MenuToggle
+                          ref={toggleRef}
+                          isExpanded={this.state[key] || false}
+                          aria-label={`${product.name} actions`}
+                          variant="plain"
+                          onClick={() => this.onCardKebabDropdownToggle(key)}
+                        >
+                          <EllipsisVIcon aria-hidden="true" />
+                        </MenuToggle>
+                      )}
+                    >
+                      <DropdownList>
+                        <DropdownItem key="trash" onClick={(e) => this.deleteItem(e, product)}>
+                          <TrashIcon />
+                          Delete
+                        </DropdownItem>
+                      </DropdownList>
+                    </Dropdown>
+                    <Checkbox
+                      checked={isChecked}
+                      onClick={(event) => this.onCheckboxClick(event, product.id)}
+                      value={product.id}
+                      isChecked={selectedItems.includes(product.id)}
+                      aria-label="card checkbox example"
+                      id={`check-${product.id}`}
                     />
-                  }
-                  isOpen={this.state[key]}
-                  dropdownItems={[
-                    <DropdownItem key="trash" onClick={e => this.deleteItem(e, product)} position="right">
-                      <TrashIcon />
-                      Delete
-                    </DropdownItem>
-                  ]}
-                />
-                <Checkbox
-                  checked={isChecked}
-                  onClick={event => this.onCheckboxClick(event, product.id)}
-                  value={product.id}
-                  isChecked={selectedItems.includes(product.id)}
-                  aria-label="card checkbox example"
-                  id={`check-${product.id}`}
-                />
-              </CardActions>
+                  </>
+                )
+              }}
+            >
+              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
             </CardHeader>
             <CardTitle>{product.name}</CardTitle>
             <CardBody>{product.description}</CardBody>
@@ -1751,10 +1752,11 @@ import {
   DrawerPanelBody,
   DrawerPanelContent,
   Dropdown,
-  DropdownToggle,
   DropdownItem,
+  DropdownList,
   Flex,
   FlexItem,
+  MenuToggle,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -1763,7 +1765,6 @@ import {
   Title
 } from '@patternfly/react-core';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 class PrimaryDetailDataListInCard extends React.Component {
   constructor(props) {
@@ -1777,14 +1778,14 @@ class PrimaryDetailDataListInCard extends React.Component {
       isExpanded: false
     };
 
-    this.onDropdownToggle = isOpen => {
-      this.setState({
-        isDropdownOpen: isOpen
-      });
+    this.onDropdownToggle = () => {
+      this.setState((prevState) => ({
+        isDropdownOpen: !prevState.isDropdownOpen
+      }));
     };
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = () => {
       this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
+        isDropdownOpen: false
       });
       this.onDropdownFocus();
     };
@@ -1792,7 +1793,7 @@ class PrimaryDetailDataListInCard extends React.Component {
       const element = document.getElementById('toggle-id');
       element.focus();
     };
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (_event, id) => {
       this.setState({
         selectedDataListItemId: id,
         drawerPanelBodyContent: id.charAt(id.length - 1),
@@ -1846,11 +1847,6 @@ class PrimaryDetailDataListInCard extends React.Component {
       </DrawerPanelContent>
     );
 
-    const dropdownItems = [
-      <DropdownItem key="option1">Option 1</DropdownItem>,
-      <DropdownItem key="option2">Option 2</DropdownItem>
-    ];
-
     const drawerContent = (
       <React.Fragment>
         <Toolbar id="data-list-data-toolbar" usePageInsets>
@@ -1858,20 +1854,19 @@ class PrimaryDetailDataListInCard extends React.Component {
             <ToolbarItem>
               <Dropdown
                 onSelect={this.onDropdownSelect}
-                toggle={
-                  <DropdownToggle
-                    id="data-list-toggle-id"
-                    onToggle={this.onDropdownToggle}
-                    iconComponent={CaretDownIcon}
-                  >
-                    Dropdown
-                  </DropdownToggle>
-                }
                 isOpen={isDropdownOpen}
-                dropdownItems={dropdownItems}
-                isFlipEnabled
-                menuAppendTo="parent"
-              />
+                onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
+                toggle={(toggleRef) => (
+                  <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={this.onDropdownToggle}>
+                    Dropdown
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem key="option1">Option 1</DropdownItem>
+                  <DropdownItem key="option2">Option 2</DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
@@ -2004,9 +1999,6 @@ import {
   PageSection,
   PageSectionVariants,
   Progress,
-  Select,
-  SelectOption,
-  SelectVariant,
   Stack,
   StackItem,
   Text,
@@ -2014,6 +2006,11 @@ import {
   TextInput,
   Title
 } from '@patternfly/react-core';
+import {
+  Select as SelectDeprecated,
+  SelectOption as SelectOptionDeprecated,
+  SelectVariant
+} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -2056,11 +2053,11 @@ class PrimaryDetailInlineModifier extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -2081,7 +2078,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });
@@ -2102,7 +2099,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (_event, id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,
@@ -2152,7 +2149,7 @@ class PrimaryDetailInlineModifier extends React.Component {
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
           <ToolbarItem>
-            <Select
+            <SelectDeprecated
               variant={SelectVariant.single}
               aria-label="Select Input"
               onToggle={this.onStatusToggle}
@@ -2161,12 +2158,12 @@ class PrimaryDetailInlineModifier extends React.Component {
               isExpanded={statusIsExpanded}
             >
               {this.statusOptions.map((option, index) => (
-                <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
               ))}
-            </Select>
+            </SelectDeprecated>
           </ToolbarItem>
           <ToolbarItem>
-            <Select
+            <SelectDeprecated
               variant={SelectVariant.single}
               aria-label="Select Input"
               onToggle={this.onRiskToggle}
@@ -2175,9 +2172,9 @@ class PrimaryDetailInlineModifier extends React.Component {
               isExpanded={riskIsExpanded}
             >
               {this.riskOptions.map((option, index) => (
-                <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+                <SelectOptionDeprecated isDisabled={option.disabled} key={index} value={option.value} />
               ))}
-            </Select>
+            </SelectDeprecated>
           </ToolbarItem>
         </ToolbarGroup>
       </React.Fragment>