@patternfly/react-core 5.0.0-alpha.37 → 5.0.0-alpha.38

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

@@ -2,19 +2,17 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
-  KebabToggle,
   Select,
   SelectOption,
   SelectOptionObject,
   SelectVariant,
   Pagination,
   Dropdown,
-  DropdownSeparator,
   DropdownToggle,
   DropdownToggleCheckbox,
   DropdownItem,
-  DropdownPosition,
   Divider,
+  MenuToggle,
   OverflowMenu,
   OverflowMenuContent,
   OverflowMenuControl,
@@ -25,7 +23,9 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
@@ -52,8 +52,8 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
 
-  const onKebabToggle = (_event: any, isOpen: boolean) => {
-    setKebabIsOpen(isOpen);
+  const onKebabToggle = () => {
+    setKebabIsOpen(!kebabIsOpen);
   };
 
   const onResourceToggle = (_event: any, isExpanded: boolean) => {
@@ -65,7 +65,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     setResourceIsExpanded(false);
   };
 
-  const onResourceSelectDropdown = (event: React.SyntheticEvent<HTMLDivElement, Event> | undefined) => {
+  const onResourceSelectDropdown = (event: React.MouseEvent<Element, MouseEvent>| undefined) => {
     setResourceSelected(event?.target);
     setResourceIsExpanded(false);
   };
@@ -101,21 +101,21 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemNext key="link">Link</DropdownItemNext>,
+    <DropdownItemNext key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemNext>,
+    <DropdownItemNext key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemNext>,
+    <DropdownItemNext 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">
+    </DropdownItemNext>,
+    <Divider key="separator" />,
+    <DropdownItemNext key="separated link">Separated Link</DropdownItemNext>,
+    <DropdownItemNext key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemNext>
   ];
 
   const splitButtonDropdownItems = [
@@ -192,14 +192,23 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                 </OverflowMenuGroup>
               </OverflowMenuContent>
               <OverflowMenuControl hasAdditionalOptions>
-                <Dropdown
-                  onSelect={onResourceSelectDropdown}
-                  toggle={<KebabToggle onToggle={onKebabToggle} />}
-                  isOpen={kebabIsOpen}
-                  isPlain
-                  dropdownItems={dropdownItems}
-                  position={DropdownPosition.right}
-                />
+              <DropdownNext
+                   onSelect={onResourceSelectDropdown}
+                   toggle={toggleRef => (
+                     <MenuToggle
+                       ref={toggleRef}
+                       aria-label="Kebab overflow menu"
+                       variant="plain"
+                       onClick={onKebabToggle}
+                       isExpanded={kebabIsOpen}
+                     >
+                       <EllipsisVIcon />
+                     </MenuToggle>
+                   )}
+                   isOpen={kebabIsOpen}
+                 >
+                   <DropdownList>{dropdownItems}</DropdownList>
+                 </DropdownNext>
               </OverflowMenuControl>
             </OverflowMenu>
           </ToolbarItem>

package/src/demos/Card/Card.md

@@ -18,6 +18,9 @@ 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';
+
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Demos
 
@@ -49,6 +52,7 @@ import {
   EmptyStateActions,
   Gallery,
   KebabToggle,
+  MenuToggle,
   OverflowMenu,
   OverflowMenuControl,
   OverflowMenuDropdownItem,
@@ -67,6 +71,8 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
@@ -120,9 +126,9 @@ class CardViewBasic extends React.Component {
       }));
     };
 
-    this.onToolbarKebabDropdownToggle = (_event, isLowerToolbarKebabDropdownOpen) => {
+    this.onToolbarKebabDropdownToggle = () => {
       this.setState({
-        isLowerToolbarKebabDropdownOpen
+        isOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
     };
 
@@ -495,19 +501,19 @@ class CardViewBasic extends React.Component {
     } = this.state;
 
     const toolbarKebabDropdownItems = [
-      <OverflowMenuDropdownItem key="link">Link</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action" component="button">
+      <OverflowMenuDropdownItem itemId={0} key="link">Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={1} key="action" component="button">
         Action
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="disabled link" isDisabled>
+      <OverflowMenuDropdownItem itemId={2} key="disabled link" isDisabled>
         Disabled Link
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="disabled action" isDisabled component="button">
+      <OverflowMenuDropdownItem itemId={3} key="disabled action" isDisabled component="button">
         Disabled Action
       </OverflowMenuDropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <OverflowMenuDropdownItem key="separated link">Separated Link</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="separated action" component="button">
+      <DropdownSeparator itemId={4} key="separator" />,
+      <OverflowMenuDropdownItem itemId={5} key="separated link">Separated Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={6} key="separated action" component="button">
         Separated Action
       </OverflowMenuDropdownItem>
     ];
@@ -522,15 +528,23 @@ class CardViewBasic extends React.Component {
               <Button variant="primary">Create a project</Button>
             </OverflowMenuItem>
             <OverflowMenuControl hasAdditionalOptions>
-              <Dropdown
+              <DropdownNext
                 onSelect={this.onToolbarKebabDropdownSelect}
-                toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="toggle-id-6" />}
+                toggle={toggleRef => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    aria-label="Toolbar kebab overflow menu"
+                    variant="plain"
+                    onClick={this.onToolbarKebabDropdownToggle}
+                    isExpanded={isLowerToolbarKebabDropdownOpen}
+                  >
+                    <EllipsisVIcon />
+                  </MenuToggle>
+                )}
                 isOpen={isLowerToolbarKebabDropdownOpen}
-                isPlain
-                dropdownItems={toolbarKebabDropdownItems}
-                isFlipEnabled
-                menuAppendTo="parent"
-              />
+              >
+                <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
+              </DropdownNext>
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>

package/src/demos/Tabs.md

@@ -11,6 +11,9 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+
 
 ## Demos
 

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

@@ -11,12 +11,12 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerPanelBody,
-  Dropdown,
   Flex,
   FlexItem,
   KebabToggle,
   Label,
   LabelGroup,
+  MenuToggle,
   OptionsMenu,
   OptionsMenuToggle,
   OverflowMenu,
@@ -52,6 +52,8 @@ import {
   ActionsColumn,
   CustomActionsToggleProps
 } from '@patternfly/react-table';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+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';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -186,13 +188,23 @@ export const TablesAndTabs = () => {
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl hasAdditionalOptions>
-            <Dropdown
+            <DropdownNext
               onSelect={() => {}}
-              toggle={<KebabToggle onToggle={() => {}} />}
+              toggle={toggleRef => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="overflow menu"
+                  variant="plain"
+                  onClick={() => {}}
+                  isExpanded={false}
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
               isOpen={false}
-              isPlain
-              dropdownItems={[]}
-            />
+            >
+              <DropdownList>{[]}</DropdownList>
+            </DropdownNext>
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarContent>