@patternfly/react-core 4.214.3 → 4.215.0

package/src/components/Dropdown/examples/DropdownAlignmentOnBreakpoints.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownAlignmentOnBreakpoints: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-breakpoints');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      alignments={{
+        sm: 'left',
+        md: 'right',
+        lg: 'left',
+        xl: 'right',
+        '2xl': 'left'
+      }}
+      toggle={
+        <DropdownToggle id="toggle-breakpoints" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownAppendBodyVsParent.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, Flex } from '@patternfly/react-core';
+
+export const DropdownAppendBodyVsParent: React.FunctionComponent = () => {
+  const [isBodyOpen, setIsBodyOpen] = React.useState(false);
+  const [isParentOpen, setIsParentOpen] = React.useState(false);
+
+  const onBodyToggle = (isBodyOpen: boolean) => {
+    setIsBodyOpen(isBodyOpen);
+  };
+  const onParentToggle = (isParentOpen: boolean) => {
+    setIsParentOpen(isParentOpen);
+  };
+
+  const onBodyFocus = () => {
+    const element = document.getElementById('toggle-append-body');
+    element.focus();
+  };
+  const onParentFocus = () => {
+    const element = document.getElementById('toggle-append-parent');
+    element.focus();
+  };
+
+  const onBodySelect = () => {
+    setIsBodyOpen(false);
+    onBodyFocus();
+  };
+  const onParentSelect = () => {
+    setIsParentOpen(false);
+    onParentFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Flex>
+      <Dropdown
+        onSelect={onBodySelect}
+        toggle={
+          <DropdownToggle id="toggle-append-body" onToggle={onBodyToggle}>
+            Dropdown appended to body
+          </DropdownToggle>
+        }
+        isOpen={isBodyOpen}
+        dropdownItems={dropdownItems}
+        menuAppendTo={() => document.body}
+      />
+      <Dropdown
+        onSelect={onParentSelect}
+        toggle={
+          <DropdownToggle id="toggle-append-parent" onToggle={onParentToggle}>
+            Dropdown appended to parent
+          </DropdownToggle>
+        }
+        isOpen={isParentOpen}
+        dropdownItems={dropdownItems}
+        menuAppendTo="parent"
+      />
+    </Flex>
+  );
+};

package/src/components/Dropdown/examples/DropdownBadge.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+
+export const DropdownBadge: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-badge');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
+      Edit
+    </DropdownItem>,
+    <DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
+      Deployment
+    </DropdownItem>,
+    <DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
+      Applications
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <BadgeToggle id="toggle-badge" onToggle={onToggle}>
+          {dropdownItems.length}
+        </BadgeToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownBasic: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-basic');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-basic" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownBasicPanel.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Dropdown, DropdownToggle } from '@patternfly/react-core';
+
+export const DropdownBasicPanel: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-panel');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-panel" onToggle={onToggle}>
+          Expanded dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+    >
+      [Panel contents here]
+    </Dropdown>
+  );
+};

package/src/components/Dropdown/examples/DropdownDescriptions.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const DropdownDescriptions: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-descriptions');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link" description="This is a description" icon={<CubesIcon />}>
+      Link
+    </DropdownItem>,
+    <DropdownItem
+      key="action"
+      component="button"
+      icon={<BellIcon />}
+      description="This is a very long description that describes the menu item"
+    >
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled description="Disabled link description">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button" description="This is a description">
+      Disabled action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-descriptions" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownDirectionUp.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownDirection } from '@patternfly/react-core';
+
+export const DropdownDirectionUp: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-direction-up');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      direction={DropdownDirection.up}
+      toggle={
+        <DropdownToggle id="toggle-direction-up" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownDisabled.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownDisabled: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-disabled');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-disabled" isDisabled onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownGroups.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core';
+
+export const DropdownGroups: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-groups');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownGroup key="group 1">
+      <DropdownItem key="group 1 link">Link</DropdownItem>
+      <DropdownItem key="group 1 action" component="button">
+        Action
+      </DropdownItem>
+    </DropdownGroup>,
+    <DropdownGroup label="Group 2" key="group 2">
+      <DropdownItem key="group 2 link">Group 2 link</DropdownItem>
+      <DropdownItem key="group 2 action" component="button">
+        Group 2 action
+      </DropdownItem>
+    </DropdownGroup>,
+    <DropdownGroup label="Group 3" key="group 3">
+      <DropdownItem key="group 3 link">Group 3 link</DropdownItem>
+      <DropdownItem key="group 3 action" component="button">
+        Group 3 action
+      </DropdownItem>
+    </DropdownGroup>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-groups" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+      isGrouped
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownIconOnly.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+
+export const DropdownIconOnly: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-icon-only');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle toggleIndicator={null} onToggle={onToggle} aria-label="Applications" id="toggle-icon-only">
+          <ThIcon />
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      isPlain
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownImageAndText.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  Avatar,
+  Dropdown,
+  DropdownGroup,
+  DropdownToggle,
+  DropdownItem,
+  DropdownSeparator
+} from '@patternfly/react-core';
+import avatarImg from '../../Avatar/examples/avatarImg.svg';
+
+export const DropdownImageAndText: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-image-and-text');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownGroup key="group 1">
+      <DropdownItem key="group 1 plaintext" component="div" isPlainText>
+        Text
+      </DropdownItem>
+      <DropdownItem key="group 1 plaintext2" component="div" isPlainText>
+        More text
+      </DropdownItem>
+    </DropdownGroup>,
+    <DropdownSeparator key="dropdown separator" />,
+    <DropdownGroup key="group 2">
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user" component="button">
+        User management
+      </DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </DropdownGroup>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle
+          id="toggle-image-and-text"
+          onToggle={onToggle}
+          icon={<Avatar src={avatarImg} alt="avatar"></Avatar>}
+        >
+          Ned Username
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

package/src/components/Dropdown/examples/DropdownInitialSelection.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownInitialSelection: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-initial-selection');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button" autoFocus>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      Disabled link
+    </DropdownItem>,
+    <DropdownItem
+      key="disabled action"
+      isAriaDisabled
+      component="button"
+      tooltip="Tooltip for disabled item"
+      tooltipProps={{ position: 'top' }}
+    >
+      Disabled action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated action
+    </DropdownItem>
+  ];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-initial-selection" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};