@patternfly/react-core 5.0.0-alpha.87 → 5.0.0-alpha.89

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import {
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
   Toolbar,
   ToolbarItem,
   ToolbarContent,
@@ -7,7 +11,6 @@ import {
   ToolbarToggleGroup,
   ToolbarGroup,
   Badge,
-  Button,
   MenuToggle,
   MenuToggleElement,
   SearchInput,
@@ -15,37 +18,27 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  DropdownPosition,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
+  const [isStatusExpanded, setIsStatusExpanded] = React.useState(false);
+  const [isRiskExpanded, setIsRiskExpanded] = React.useState(false);
   const [filters, setFilters] = React.useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });
-  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
+  const [isKebabOpen, setIsKebabOpen] = React.useState(false);
 
   const onInputChange = (newValue: string) => {
     setInputValue(newValue);
   };
 
-  const onSelect = (
-    type: string,
-    event: React.MouseEvent | React.ChangeEvent,
-    selection: string
-  ) => {
+  const onSelect = (type: string, event: React.MouseEvent | React.ChangeEvent, selection: string) => {
     const checked = (event.target as HTMLInputElement).checked;
     setFilters((prev) => {
       const prevSelections = prev[type];
@@ -83,48 +76,33 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
   };
 
   const onStatusToggle = () => {
-    setStatusIsExpanded(!statusIsExpanded);
+    setIsStatusExpanded(!isStatusExpanded);
   };
 
   const onRiskToggle = () => {
-    setRiskIsExpanded(!statusIsExpanded);
+    setIsRiskExpanded(!isRiskExpanded);
   };
 
-  const onKebabToggle = (_event: any, isOpen: boolean) => {
-    setKebabIsOpen(isOpen);
+  const onKebabToggle = () => {
+    setIsKebabOpen(!isKebabOpen);
   };
 
   const statusMenuItems = (
     <SelectList>
-      <SelectOption
-        hasCheckbox
-        key="statusNew"
-        itemId="New"
-        isSelected={filters.status.includes("New")}
-      >
+      <SelectOption hasCheckbox key="statusNew" itemId="New" isSelected={filters.status.includes('New')}>
         New
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="statusPending"
-        itemId="Pending"
-        isSelected={filters.status.includes("Pending")}
-      >
+      <SelectOption hasCheckbox key="statusPending" itemId="Pending" isSelected={filters.status.includes('Pending')}>
         Pending
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="statusRunning"
-        itemId="Running"
-        isSelected={filters.status.includes("Running")}
-      >
+      <SelectOption hasCheckbox key="statusRunning" itemId="Running" isSelected={filters.status.includes('Running')}>
         Running
       </SelectOption>
       <SelectOption
         hasCheckbox
         key="statusCancelled"
         itemId="Cancelled"
-        isSelected={filters.status.includes("Cancelled")}
+        isSelected={filters.status.includes('Cancelled')}
       >
         Cancelled
       </SelectOption>
@@ -133,28 +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" itemId="Low" isSelected={filters.risk.includes('Low')}>
         Low
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="riskMedium"
-        itemId="Medium"
-        isSelected={filters.risk.includes("Medium")}
-      >
+      <SelectOption hasCheckbox key="riskMedium" itemId="Medium" isSelected={filters.risk.includes('Medium')}>
         Medium
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="riskHigh"
-        itemId="High"
-        isSelected={filters.risk.includes("High")}
-      >
+      <SelectOption hasCheckbox key="riskHigh" itemId="High" isSelected={filters.risk.includes('High')}>
         High
       </SelectOption>
     </SelectList>
@@ -186,7 +149,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onStatusToggle}
-                isExpanded={statusIsExpanded}
+                isExpanded={isStatusExpanded}
                 style={
                   {
                     width: '140px'
@@ -199,8 +162,8 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
             )}
             onSelect={onStatusSelect}
             selected={filters.status}
-            isOpen={statusIsExpanded}
-            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+            isOpen={isStatusExpanded}
+            onOpenChange={(isOpen) => setIsStatusExpanded(isOpen)}
           >
             {statusMenuItems}
           </Select>
@@ -217,7 +180,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onRiskToggle}
-                isExpanded={riskIsExpanded}
+                isExpanded={isRiskExpanded}
                 style={
                   {
                     width: '140px'
@@ -230,8 +193,8 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
             )}
             onSelect={onRiskSelect}
             selected={filters.risk}
-            isOpen={riskIsExpanded}
-            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
+            isOpen={isRiskExpanded}
+            onOpenChange={(isOpen) => setIsRiskExpanded(isOpen)}
           >
             {riskMenuItems}
           </Select>
@@ -240,24 +203,6 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
     </React.Fragment>
   );
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItemDeprecated>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="separated action" component="button">
-      Separated Action
-    </DropdownItemDeprecated>
-  ];
-
   const toolbarItems = (
     <React.Fragment>
       <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
@@ -281,13 +226,37 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem>
-        <DropdownDeprecated
-          toggle={<KebabToggle onToggle={onKebabToggle} />}
-          isOpen={kebabIsOpen}
-          isPlain
-          dropdownItems={dropdownItems}
-          position={DropdownPosition.right}
-        />
+        <Dropdown
+          popperProps={{ position: 'right' }}
+          isOpen={isKebabOpen}
+          onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded={isKebabOpen}
+              onClick={onKebabToggle}
+              variant="plain"
+              aria-label="Toolbar with filters example kebab toggle"
+            >
+              <EllipsisVIcon aria-hidden="true" />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem>Action</DropdownItem>
+            <DropdownItem
+              to="#default-link2"
+              // Prevent the default onClick functionality for example purposes
+              onClick={(ev: any) => ev.preventDefault()}
+            >
+              Link
+            </DropdownItem>
+            <DropdownItem isDisabled>Disabled Action</DropdownItem>
+            <DropdownItem isDisabled to="#default-link4">
+              Disabled Link
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
       </ToolbarItem>
     </React.Fragment>
   );

package/src/components/TreeView/examples/TreeView.md

@@ -5,11 +5,6 @@ cssPrefix: pf-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
 import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';
 
 ## Examples
@@ -863,14 +858,18 @@ class CustomBadgesTreeView extends React.Component {
 
 ```js
 import React from 'react';
-import { TreeView, Button } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  TreeView,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class IconTreeView extends React.Component {
   constructor(props) {
@@ -887,13 +886,13 @@ class IconTreeView extends React.Component {
       }
     };
 
-    this.onToggle = (_event, isOpen) => {
+    this.onToggle = () => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen
       });
     };
 
-    this.onAppLaunchSelect = (event) => {
+    this.onAppLaunchSelect = () => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -902,30 +901,43 @@ class IconTreeView extends React.Component {
 
   render() {
     const { activeItems, isOpen } = this.state;
-    const dropdownItems = [
-      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="action" component="button">
-        Action
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="disabled link" isDisabled href="www.google.com">
-        Disabled Link
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItemDeprecated>
-    ];
+
     const options = [
       {
         name: 'Application launcher',
         id: 'example7-AppLaunch',
         action: (
-          <DropdownDeprecated
+          <Dropdown
             onSelect={this.onAppLaunchSelect}
-            toggle={<KebabToggle onToggle={this.onToggle} />}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-          />
+            onOpenChange={(isOpen) => this.setState({ isOpen })}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={isOpen}
+                onClick={this.onToggle}
+                variant="plain"
+                aria-label="Tree view with actions example kebab toggle"
+              >
+                <EllipsisVIcon aria-hidden="true" />
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>
+              <DropdownItem>Action</DropdownItem>
+              <DropdownItem
+                to="#default-link2"
+                // Prevent the default onClick functionality for example purposes
+                onClick={(ev) => ev.preventDefault()}
+              >
+                Link
+              </DropdownItem>
+              <DropdownItem isDisabled>Disabled Action</DropdownItem>
+              <DropdownItem isDisabled to="#default-link4">
+                Disabled Link
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
         ),
         children: [
           {

package/src/demos/AlertGroup.md

@@ -5,14 +5,9 @@ section: components
 
 import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from './examples/DashboardWrapper';
 import DashboardHeader from './examples/DashboardHeader';
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-KebabToggle,
-DropdownPosition
-} from '@patternfly/react-core/deprecated';
 
 ## Demos
 

package/src/demos/Card/Card.md

@@ -20,16 +20,6 @@ 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';
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownToggle,
-DropdownItem as DropdownItemDeprecated,
-DropdownSeparator,
-DropdownPosition,
-DropdownToggleCheckbox,
-KebabToggle,
-} from '@patternfly/react-core/deprecated';
-
 ## Demos
 
 This demonstrates how you can assemble a full page view that contains a grid of equal sized cards that includes a toolbar for managing card grid contents.
@@ -47,7 +37,9 @@ import {
   CardTitle,
   CardBody,
   Checkbox,
+  Divider,
   Dropdown,
+  DropdownItem,
   DropdownList,
   EmptyState,
   EmptyStateHeader,
@@ -57,6 +49,7 @@ import {
   EmptyStateActions,
   Gallery,
   MenuToggle,
+  MenuToggleCheckbox,
   OverflowMenu,
   OverflowMenuControl,
   OverflowMenuDropdownItem,
@@ -75,15 +68,6 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  DropdownPosition,
-  DropdownToggleCheckbox,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
@@ -150,10 +134,10 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onCardKebabDropdownToggle = (key, isCardKebabDropdownOpen) => {
-      this.setState({
-        [key]: isCardKebabDropdownOpen
-      });
+    this.onCardKebabDropdownToggle = (key) => {
+      this.setState((prevState) => ({
+        [key]: !prevState[key]
+      }));
     };
 
     this.onCardKebabDropdownSelect = (key, event) => {
@@ -182,15 +166,15 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onSplitButtonToggle = (_event, isOpen) => {
-      this.setState({
-        splitButtonDropdownIsOpen: isOpen
-      });
+    this.onSplitButtonToggle = () => {
+      this.setState((prevState) => ({
+        splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen
+      }));
     };
 
-    this.onSplitButtonSelect = (event) => {
-      this.setState((prevState, props) => {
-        return { splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen };
+    this.onSplitButtonSelect = () => {
+      this.setState({
+        splitButtonDropdownIsOpen: false
       });
     };
 
@@ -227,7 +211,6 @@ class CardViewBasic extends React.Component {
     };
 
     this.onKeyDown = (event, productId) => {
-      console.log(productId);
       if (event.target !== event.currentTarget) {
         return;
       }
@@ -422,41 +405,48 @@ class CardViewBasic extends React.Component {
     const anySelected = numSelected > 0;
     const someChecked = anySelected ? null : false;
     const isChecked = allSelected ? true : someChecked;
-    const splitButtonDropdownItems = [
-      <DropdownItemDeprecated key="item-1" onClick={this.selectNone.bind(this)}>
-        Select none (0 items)
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="item-2" onClick={this.selectPage.bind(this)}>
-        Select page ({this.state.perPage} items)
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="item-3" onClick={this.selectAll.bind(this)}>
-        Select all ({this.state.totalItemCount} items)
-      </DropdownItemDeprecated>
-    ];
-
+    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 (
-      <DropdownDeprecated
-        position={DropdownPosition.left}
+      <Dropdown
         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.bind(this)}
-              >
-                {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>
     );
   }
 
@@ -540,7 +530,7 @@ class CardViewBasic extends React.Component {
       <OverflowMenuDropdownItem itemId={3} key="disabled action" isDisabled component="button">
         Disabled Action
       </OverflowMenuDropdownItem>,
-      <DropdownSeparator itemId={4} key="separator" />,
+      <Divider key="separator" />,
       <OverflowMenuDropdownItem itemId={5} key="separated link">
         Separated Link
       </OverflowMenuDropdownItem>,
@@ -573,6 +563,7 @@ class CardViewBasic extends React.Component {
                   </MenuToggle>
                 )}
                 isOpen={isLowerToolbarKebabDropdownOpen}
+                onOpenChange={(isOpen) => this.setState({ isLowerToolbarKebabDropdownOpen: isOpen })}
               >
                 <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
               </Dropdown>
@@ -650,25 +641,29 @@ class CardViewBasic extends React.Component {
                     actions={{
                       actions: (
                         <>
-                          <DropdownDeprecated
-                            isPlain
-                            position="right"
-                            onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
-                            toggle={
-                              <KebabToggle
-                                onToggle={(_event, isCardKebabDropdownOpen) =>
-                                  this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
-                                }
-                              />
-                            }
+                          <Dropdown
                             isOpen={this.state[key]}
-                            dropdownItems={[
-                              <DropdownItemDeprecated key="trash" onClick={this.deleteItem(product)} position="right">
+                            onOpenChange={(isOpen) => this.setState({ [key]: isOpen })}
+                            toggle={(toggleRef) => (
+                              <MenuToggle
+                                ref={toggleRef}
+                                aria-label={`${product.name} actions`}
+                                variant="plain"
+                                onClick={() => this.onCardKebabDropdownToggle(key)}
+                                isExpanded={this.state[key]}
+                              >
+                                <EllipsisVIcon />
+                              </MenuToggle>
+                            )}
+                            popperProps={{ position: 'right' }}
+                          >
+                            <DropdownList>
+                              <DropdownItem key="trash" onClick={this.deleteItem(product)}>
                                 <TrashIcon />
                                 Delete
-                              </DropdownItemDeprecated>
-                            ]}
-                          />
+                              </DropdownItem>
+                            </DropdownList>
+                          </Dropdown>
                           <Checkbox
                             checked={isChecked}
                             value={product.id}