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

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -9,6 +9,10 @@ import {
   Card,
   CardBody,
   Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
   Gallery,
   GalleryItem,
   Masthead,
@@ -16,6 +20,8 @@ import {
   MastheadContent,
   MastheadMain,
   MastheadToggle,
+  MenuToggle,
+  MenuToggleElement,
   Nav,
   NavItem,
   NavList,
@@ -33,25 +39,18 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownToggle,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 interface NavOnSelectProps {
   groupId: number | string;
   itemId: number | string;
   to: string;
-  event: React.FormEvent<HTMLInputElement>;
 }
 
 export const PageStickySectionGroup: React.FunctionComponent = () => {
@@ -60,32 +59,32 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState(1);
 
-  const onNavSelect = (selectedItem: NavOnSelectProps) => {
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsDropdownOpen(isOpen);
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
   };
 
   const onDropdownSelect = () => {
-    setIsDropdownOpen(!isDropdownOpen);
+    setIsDropdownOpen(false);
   };
 
-  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsKebabDropdownOpen(isOpen);
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
   const onKebabDropdownSelect = () => {
-    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+    setIsKebabDropdownOpen(false);
   };
 
-  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsFullKebabDropdownOpen(isOpen);
+  const onFullKebabDropdownToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
   const onFullKebabDropdownSelect = () => {
-    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+    setIsFullKebabDropdownOpen(false);
   };
 
   const dashboardBreadcrumb = (
@@ -99,41 +98,23 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     </Breadcrumb>
   );
 
-  const kebabDropdownItems = [
-    <DropdownItemDeprecated key="settings">
-      <CogIcon /> Settings
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="help">
-      <HelpIcon /> Help
-    </DropdownItemDeprecated>
-  ];
-
-  const fullKebabDropdownItems = [
-    <DropdownGroupDeprecated key="group 2">
-      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 user" component="button">
-        User management
-      </DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-    </DropdownGroupDeprecated>,
-    <Divider key="divider" />,
-    <DropdownItemDeprecated key="settings">
-      <CogIcon /> Settings
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="help">
-      <HelpIcon /> Help
-    </DropdownItemDeprecated>
-  ];
-
-  const userDropdownItems = [
-    <DropdownGroupDeprecated key="group 2">
-      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 user" component="button">
-        User management
-      </DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-    </DropdownGroupDeprecated>
-  ];
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem>
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem>
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+  const userDropdownItems = (
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  );
 
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
@@ -155,38 +136,72 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={onKebabDropdownToggle} />}
+            <Dropdown
               isOpen={isKebabDropdownOpen}
-              dropdownItems={kebabDropdownItems}
-            />
+              onSelect={onKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onKebabDropdownToggle}
+                  isExpanded={isKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Settings and help"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={onFullKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={onFullKebabDropdownToggle} />}
+            <Dropdown
               isOpen={isFullKebabDropdownOpen}
-              dropdownItems={fullKebabDropdownItems}
-            />
+              onSelect={onFullKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onFullKebabDropdownToggle}
+                  isExpanded={isFullKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Toolbar menu"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownGroup key="group 2" aria-label="User actions">
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </DropdownGroup>
+              <Divider />
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <DropdownDeprecated
-            isFullHeight
-            onSelect={onDropdownSelect}
+          <Dropdown
             isOpen={isDropdownOpen}
-            toggle={
-              <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={onDropdownToggle}>
+            onSelect={onDropdownSelect}
+            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onDropdownToggle}
+                isFullHeight
+                isExpanded={isDropdownOpen}
+                icon={<Avatar src={imgAvatar} alt="" />}
+              >
                 Ned Username
-              </DropdownToggle>
-            }
-            dropdownItems={userDropdownItems}
-          />
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{userDropdownItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
       </ToolbarContent>
     </Toolbar>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -9,6 +9,10 @@ import {
   Card,
   CardBody,
   Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
   Gallery,
   GalleryItem,
   Masthead,
@@ -16,6 +20,8 @@ import {
   MastheadContent,
   MastheadMain,
   MastheadToggle,
+  MenuToggle,
+  MenuToggleElement,
   Nav,
   NavItem,
   NavList,
@@ -35,25 +41,18 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownToggle,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 interface NavOnSelectProps {
   groupId: number | string;
   itemId: number | string;
   to: string;
-  event: React.FormEvent<HTMLInputElement>;
 }
 
 export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
@@ -62,69 +61,51 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState(1);
 
-  const onNavSelect = (selectedItem: NavOnSelectProps) => {
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsDropdownOpen(isOpen);
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
   };
 
   const onDropdownSelect = () => {
-    setIsDropdownOpen(!isDropdownOpen);
+    setIsDropdownOpen(false);
   };
 
-  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsKebabDropdownOpen(isOpen);
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
   const onKebabDropdownSelect = () => {
-    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+    setIsKebabDropdownOpen(false);
   };
 
-  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsFullKebabDropdownOpen(isOpen);
+  const onFullKebabDropdownToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
   const onFullKebabDropdownSelect = () => {
-    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+    setIsFullKebabDropdownOpen(false);
   };
 
-  const kebabDropdownItems = [
-    <DropdownItemDeprecated key="settings">
-      <CogIcon /> Settings
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="help">
-      <HelpIcon /> Help
-    </DropdownItemDeprecated>
-  ];
-
-  const userDropdownItems = [
-    <DropdownGroupDeprecated key="group 2">
-      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 user" component="button">
-        User management
-      </DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-    </DropdownGroupDeprecated>
-  ];
-
-  const fullKebabDropdownItems = [
-    <DropdownGroupDeprecated key="group 2">
-      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 user" component="button">
-        User management
-      </DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-    </DropdownGroupDeprecated>,
-    <Divider key="divider" />,
-    <DropdownItemDeprecated key="settings">
-      <CogIcon /> Settings
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="help">
-      <HelpIcon /> Help
-    </DropdownItemDeprecated>
-  ];
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem>
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem>
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+  const userDropdownItems = (
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  );
 
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
@@ -146,38 +127,72 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             </ToolbarItem>
           </ToolbarGroup>
           <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={onKebabDropdownToggle} />}
+            <Dropdown
               isOpen={isKebabDropdownOpen}
-              dropdownItems={kebabDropdownItems}
-            />
+              onSelect={onKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onKebabDropdownToggle}
+                  isExpanded={isKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Settings and help"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
           <ToolbarItem visibility={{ md: 'hidden' }}>
-            <DropdownDeprecated
-              isPlain
-              position="right"
-              onSelect={onFullKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={onFullKebabDropdownToggle} />}
+            <Dropdown
               isOpen={isFullKebabDropdownOpen}
-              dropdownItems={fullKebabDropdownItems}
-            />
+              onSelect={onFullKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onFullKebabDropdownToggle}
+                  isExpanded={isFullKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Toolbar menu"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownGroup key="group 2" aria-label="User actions">
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </DropdownGroup>
+              <Divider />
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarGroup>
         <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-          <DropdownDeprecated
-            isFullHeight
-            onSelect={onDropdownSelect}
+          <Dropdown
             isOpen={isDropdownOpen}
-            toggle={
-              <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={onDropdownToggle}>
+            onSelect={onDropdownSelect}
+            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onDropdownToggle}
+                isFullHeight
+                isExpanded={isDropdownOpen}
+                icon={<Avatar src={imgAvatar} alt="" />}
+              >
                 Ned Username
-              </DropdownToggle>
-            }
-            dropdownItems={userDropdownItems}
-          />
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{userDropdownItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
       </ToolbarContent>
     </Toolbar>

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -49,7 +49,6 @@ import {
   ActionsColumn,
   CustomActionsToggleProps
 } from '@patternfly/react-table';
-import { 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';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -136,14 +135,18 @@ export const TablesAndTabs = () => {
     }
   ];
 
-  const customActionsToggle = (props: CustomActionsToggleProps) => (
-    <KebabToggle
+  const customActionsToggle = (props: CustomActionsToggleProps, toggleName: string) => (
+    <MenuToggle
       isDisabled={props.isDisabled}
-      onToggle={(event: any) => {
+      onClick={(event: any) => {
         props.onToggle(event);
         event.stopPropagation();
       }}
-    />
+      variant="plain"
+      aria-label={`${toggleName} actions`}
+    >
+      <EllipsisVIcon />
+    </MenuToggle>
   );
 
   const toolbar = (
@@ -262,7 +265,10 @@ export const TablesAndTabs = () => {
             </Td>
             <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
             <Td key={`${rowIndex}_5`}>
-              <ActionsColumn items={defaultActions} actionsToggle={customActionsToggle} />
+              <ActionsColumn
+                items={defaultActions}
+                actionsToggle={(props: CustomActionsToggleProps) => customActionsToggle(props, repo.name)}
+              />
             </Td>
           </Tr>
         ))}