chore(Dropdown): updated deprecated usage to new dropdown

patternfly · Mar 27, 2023 · dbe91f7 · dbe91f7
1 parent 424a94a
commit dbe91f7
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 131 deletions.
diff --git a/packages/react-core/src/components/ActionList/examples/ActionList.md b/packages/react-core/src/components/ActionList/examples/ActionList.md
@@ -7,12 +7,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-DropdownSeparator,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 

diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
@@ -1,46 +1,48 @@
 import React from 'react';
-import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  ActionList,
+  ActionListItem,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
-    isOpen: boolean
-  ) => {
-    event.stopPropagation();
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
-    event.stopPropagation();
+  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
+    event?.stopPropagation();
     setIsOpen(!isOpen);
   };
 
-  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 dropdownItems = (
+    <>
+      <DropdownItem to="#" key="link">
+        Link
+      </DropdownItem>
+      <DropdownItem key="action">Action</DropdownItem>
+      <DropdownItem to="#" key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem to="#" key="separated link">
+        Separated Link
+      </DropdownItem>
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+    </>
+  );
   return (
     <React.Fragment>
       <ActionList>
@@ -69,14 +71,24 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <DropdownDeprecated
+          <Dropdown
             onSelect={onSelect}
-            toggle={<KebabToggle onToggle={onToggle} />}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onToggle}
+                variant="plain"
+                isExpanded={isOpen}
+                aria-label="Action list single group kebab"
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position="right"
-          />
+            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
         </ActionListItem>
       </ActionList>
     </React.Fragment>

diff --git a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
@@ -6,11 +6,6 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-BadgeToggle,
-DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 ## Examples

diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx
@@ -1,29 +1,37 @@
 import React from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  BadgeToggle,
-  DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbHeading,
+  Badge,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
-const dropdownItems: JSX.Element[] = [
-  <DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
+const dropdownItems = [
+  <DropdownItem key="edit">
+    <AngleLeftIcon />
     Edit
-  </DropdownItemDeprecated>,
-  <DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItem>,
+  <DropdownItem key="action">
+    <AngleLeftIcon />
     Deployment
-  </DropdownItemDeprecated>,
-  <DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItem>,
+  <DropdownItem key="apps">
+    <AngleLeftIcon />
     Applications
-  </DropdownItemDeprecated>
+  </DropdownItem>
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const badgeToggleRef = React.useRef<HTMLButtonElement>();
 
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = () => setIsOpen(!isOpen);
 
   const onSelect = () => {
     setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
@@ -34,16 +42,20 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem component="button">Section home</BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <DropdownDeprecated
+        <Dropdown
           onSelect={onSelect}
-          toggle={
-            <BadgeToggle ref={badgeToggleRef} onToggle={onToggle}>
-              {dropdownItems.length}
-            </BadgeToggle>
-          }
+          onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} variant="plainText">
+              <Badge isRead screenReaderText="additional items">
+                {dropdownItems.length}
+              </Badge>
+            </MenuToggle>
+          )}
           isOpen={isOpen}
-          dropdownItems={dropdownItems}
-        />
+        >
+          <DropdownList>{dropdownItems.map((dropdownItem) => dropdownItem)}</DropdownList>
+        </Dropdown>
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Section title</BreadcrumbHeading>
     </Breadcrumb>

diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md
@@ -3,7 +3,6 @@ id: Dropdown
 section: components
 cssPrefix: pf-c-menu
 propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle']
-beta: true
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
@@ -26,24 +26,30 @@ export const DropdownBasic: React.FunctionComponent = () => {
       )}
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="link">
-          Link
-        </DropdownItem>
-        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem itemId={0} key="action">
           Action
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled link">
-          Disabled link
+        <DropdownItem
+          itemId={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled action">
+          Disabled Action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
-          Disabled action
+        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
         </DropdownItem>
         <Divider key="separator" />
-        <DropdownItem itemId={4} key="separated link">
-          Separated link
+        <DropdownItem itemId={4} key="separated action">
+          Separated Action
         </DropdownItem>
-        <DropdownItem itemId={5} key="separated action">
-          Separated action
+        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
         </DropdownItem>
       </DropdownList>
     </Dropdown>

diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const DropdownWithDescriptions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -18,38 +18,33 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
-      toggle={(toggleRef) => (
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle ref={toggleRef} isFullWidth onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
         </MenuToggle>
       )}
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="link" description="This is a description">
-          Link
+        <DropdownItem itemId={0} key="action" description="This is a description">
+          Action
         </DropdownItem>
         <DropdownItem
           itemId={1}
-          key="action"
+          key="link"
           description="This is a very long description that describes the menu item"
           to="#default-link2"
-          onClick={(ev) => ev.preventDefault()}
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
         >
-          Action
-        </DropdownItem>
-        <DropdownItem itemId={2} isDisabled description="Disabled link description" key="disabled link">
-          Disabled link
+          Link
         </DropdownItem>
-        <DropdownItem
-          itemId={3}
-          isDisabled
-          description="This is a description"
-          key="disabled action"
-          to="#default-link4"
-        >
+        <DropdownItem itemId={2} isDisabled description="Disabled link description" key="disabled action">
           Disabled action
         </DropdownItem>
+        <DropdownItem itemId={3} isDisabled description="This is a description" key="disabled link" to="#default-link4">
+          Disabled link
+        </DropdownItem>
       </DropdownList>
     </Dropdown>
   );