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

package/src/components/DataList/examples/DataListActions.tsx

@@ -6,21 +6,21 @@ import {
   DataListCell,
   DataListItemRow,
   DataListItemCells,
-  DataListAction
+  DataListAction,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownPosition,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DataListActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [isDeleted, setIsDeleted] = React.useState(false);
 
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
   const onSelect = () => {
@@ -77,22 +77,38 @@ export const DataListActions: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect}
-                toggle={<KebabToggle onToggle={onToggle} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen}
+                    onClick={onToggle}
+                    variant="plain"
+                    aria-label="Data list with actions example kebab toggle"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen}
+                onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
         </DataListItem>

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -7,42 +7,43 @@ import {
   DataListItemRow,
   DataListCell,
   DataListCheck,
-  DataListAction
+  DataListAction,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownPosition,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DataListCheckboxes: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [isOpen3, setIsOpen3] = React.useState(false);
 
-  const onToggle1 = (_event: any, isOpen1: boolean) => {
-    setIsOpen1(isOpen1);
+  const onToggle1 = () => {
+    setIsOpen1(!isOpen1);
   };
 
   const onSelect1 = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = (_event: any, isOpen2: boolean) => {
-    setIsOpen2(isOpen2);
+  const onToggle2 = () => {
+    setIsOpen2(!isOpen2);
   };
 
   const onSelect2 = () => {
     setIsOpen2(!isOpen2);
   };
-  const onToggle3 = (_event: any, isOpen3: boolean) => {
-    setIsOpen3(isOpen3);
+  const onToggle3 = () => {
+    setIsOpen3(!isOpen3);
   };
 
   const onSelect3 = () => {
     setIsOpen3(!isOpen3);
   };
+
   return (
     <DataList aria-label="Checkbox and action data list example">
       <DataListItem aria-labelledby="check-action-item1">
@@ -74,22 +75,38 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-label="Actions"
             isPlainButtonAction
           >
-            <DropdownDeprecated
-              isPlain
-              position={DropdownPosition.right}
-              isOpen={isOpen1}
+            <Dropdown
+              popperProps={{ position: 'right' }}
               onSelect={onSelect1}
-              toggle={<KebabToggle onToggle={onToggle1} />}
-              dropdownItems={[
-                <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                <DropdownItemDeprecated key="action" component="button">
-                  Action
-                </DropdownItemDeprecated>,
-                <DropdownItemDeprecated key="disabled link" isDisabled>
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isOpen1}
+                  onClick={onToggle1}
+                  variant="plain"
+                  aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+              isOpen={isOpen1}
+              onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
+            >
+              <DropdownList>
+                <DropdownItem key="action">Action</DropdownItem>
+                {/* Prevent default onClick functionality for example
+                  purposes */}
+                <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                  Link
+                </DropdownItem>
+                <DropdownItem key="disabled action" isDisabled>
+                  Disabled Action
+                </DropdownItem>
+                <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                   Disabled Link
-                </DropdownItemDeprecated>
-              ]}
-            />
+                </DropdownItem>
+              </DropdownList>
+            </Dropdown>
           </DataListAction>
         </DataListItemRow>
       </DataListItem>
@@ -114,21 +131,38 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-label="Actions"
             isPlainButtonAction
           >
-            <DropdownDeprecated
-              isPlain
-              position={DropdownPosition.right}
-              isOpen={isOpen2}
+            <Dropdown
+              popperProps={{ position: 'right' }}
               onSelect={onSelect2}
-              toggle={<KebabToggle onToggle={onToggle2} />}
-              dropdownItems={[
-                <DropdownItemDeprecated key="pri-action2" component="button">
-                  Primary
-                </DropdownItemDeprecated>,
-                <DropdownItemDeprecated key="sec-action2" component="button">
-                  Secondary
-                </DropdownItemDeprecated>
-              ]}
-            />
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isOpen2}
+                  onClick={onToggle2}
+                  variant="plain"
+                  aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+              isOpen={isOpen2}
+              onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
+            >
+              <DropdownList>
+                <DropdownItem key="action2">Action</DropdownItem>
+                {/* Prevent default onClick functionality for example
+                  purposes */}
+                <DropdownItem key="link2" to="#" onClick={(event: any) => event.preventDefault()}>
+                  Link
+                </DropdownItem>
+                <DropdownItem key="disabled action2" isDisabled>
+                  Disabled Action
+                </DropdownItem>
+                <DropdownItem key="disabled link2" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+                  Disabled Link
+                </DropdownItem>
+              </DropdownList>
+            </Dropdown>
           </DataListAction>
           <DataListAction
             visibility={{ default: 'hidden', lg: 'visible' }}
@@ -162,27 +196,38 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-label="Actions"
             isPlainButtonAction
           >
-            <DropdownDeprecated
-              isPlain
-              position={DropdownPosition.right}
-              isOpen={isOpen3}
+            <Dropdown
+              popperProps={{ position: 'right' }}
               onSelect={onSelect3}
-              toggle={<KebabToggle onToggle={onToggle3} />}
-              dropdownItems={[
-                <DropdownItemDeprecated key="pri-action3" component="button">
-                  Primary
-                </DropdownItemDeprecated>,
-                <DropdownItemDeprecated key="sec1-action3" component="button">
-                  Secondary
-                </DropdownItemDeprecated>,
-                <DropdownItemDeprecated key="sec2-action3" component="button">
-                  Secondary
-                </DropdownItemDeprecated>,
-                <DropdownItemDeprecated key="sec3-action3" component="button">
-                  Secondary
-                </DropdownItemDeprecated>
-              ]}
-            />
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isOpen3}
+                  onClick={onToggle3}
+                  variant="plain"
+                  aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+              isOpen={isOpen3}
+              onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}
+            >
+              <DropdownList>
+                <DropdownItem key="action3">Action</DropdownItem>
+                {/* Prevent default onClick functionality for example
+                  purposes */}
+                <DropdownItem key="link3" to="#" onClick={(event: any) => event.preventDefault()}>
+                  Link
+                </DropdownItem>
+                <DropdownItem key="disabled action3" isDisabled>
+                  Disabled Action
+                </DropdownItem>
+                <DropdownItem key="disabled link3" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+                  Disabled Link
+                </DropdownItem>
+              </DropdownList>
+            </Dropdown>
           </DataListAction>
           <DataListAction
             visibility={{ default: 'hidden', xl: 'visible' }}

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -7,14 +7,14 @@ import {
   DataListAction,
   DataListToggle,
   DataListContent,
-  DataListItemCells
+  DataListItemCells,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownPosition,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 
 export const DataListExpandable: React.FunctionComponent = () => {
@@ -23,23 +23,23 @@ export const DataListExpandable: React.FunctionComponent = () => {
   const [isOpen3, setIsOpen3] = React.useState(false);
   const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
 
-  const onToggle1 = (_event: any, isOpen1: boolean) => {
-    setIsOpen1(isOpen1);
+  const onToggle1 = () => {
+    setIsOpen1(!isOpen1);
   };
 
   const onSelect1 = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = (_event: any, isOpen2: boolean) => {
-    setIsOpen2(isOpen2);
+  const onToggle2 = () => {
+    setIsOpen2(!isOpen2);
   };
 
   const onSelect2 = () => {
     setIsOpen2(!isOpen2);
   };
-  const onToggle3 = (_event: any, isOpen3: boolean) => {
-    setIsOpen3(isOpen3);
+  const onToggle3 = () => {
+    setIsOpen3(!isOpen3);
   };
 
   const onSelect3 = () => {
@@ -87,22 +87,38 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen1}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect1}
-                toggle={<KebabToggle onToggle={onToggle1} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen1}
+                    onClick={onToggle1}
+                    variant="plain"
+                    aria-label="Data list exapndable example kebaby toggle 1"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen1}
+                onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
           <DataListContent
@@ -147,22 +163,38 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen2}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect2}
-                toggle={<KebabToggle onToggle={onToggle2} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen2}
+                    onClick={onToggle2}
+                    variant="plain"
+                    aria-label="Data list exapndable example kebaby toggle 2"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen2}
+                onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action2">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link2" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action2" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link2" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
           <DataListContent
@@ -207,22 +239,38 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen3}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect3}
-                toggle={<KebabToggle onToggle={onToggle3} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen3}
+                    onClick={onToggle3}
+                    variant="plain"
+                    aria-label="Data list exapndable example kebaby toggle 3"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen3}
+                onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action3">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link3" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action3" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link3" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
           <DataListContent