@patternfly/react-core 4.214.3 → 4.215.0

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core';
+
+export const DropdownKebab: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-kebab');
+    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={<KebabToggle id="toggle-kebab" onToggle={onToggle} />}
+      isOpen={isOpen}
+      isPlain
+      dropdownItems={dropdownItems}
+    />
+  );
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownPlainTextToggle: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-plain-text');
+    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
+      isText
+      isPlain
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-plain-text" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition } from '@patternfly/react-core';
+
+export const DropdownPositionRight: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-position-right');
+    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}
+      position={DropdownPosition.right}
+      toggle={
+        <DropdownToggle id="toggle-position-right" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownPrimaryToggle: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-primary');
+    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-primary" isPrimary onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import { Link } from '@reach/router';
+
+export const DropdownRouterLink: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-router-link');
+    element.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const dropdownItems = [<DropdownItem key="routerlink" component={<Link to="/">@reach/router Link</Link>} />];
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <DropdownToggle id="toggle-router-link" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+
+export const DropdownPrimaryToggle: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-secondary');
+    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-secondary" toggleVariant="secondary" onToggle={onToggle}>
+          Dropdown
+        </DropdownToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownSeparator
+} from '@patternfly/react-core';
+
+export const DropdownSplitButton: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-split-button');
+    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
+          splitButtonItems={[
+            <DropdownToggleCheckbox id="split-button-checkbox" key="split-checkbox" aria-label="Select all" />
+          ]}
+          onToggle={onToggle}
+          id="toggle-split-button"
+        />
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const DropdownSplitButtonAction: React.FunctionComponent = () => {
+  const [isActionOpen, setIsActionOpen] = React.useState(false);
+  const [isCogOpen, setIsCogOpen] = React.useState(false);
+
+  const onActionToggle = (isActionOpen: boolean) => {
+    setIsActionOpen(isActionOpen);
+  };
+  const onCogToggle = (isCogOpen: boolean) => {
+    setIsCogOpen(isCogOpen);
+  };
+
+  const onActionClick = () => {
+    window.alert('You selected an action button!');
+  };
+  const onCogClick = () => {
+    window.alert('You selected the Cog!');
+  };
+
+  const onActionFocus = () => {
+    const element = document.getElementById('toggle-split-button-action');
+    element.focus();
+  };
+  const onCogFocus = () => {
+    const element = document.getElementById('toggle-split-button-cog');
+    element.focus();
+  };
+
+  const onActionSelect = () => {
+    setIsActionOpen(false);
+    onActionFocus();
+  };
+  const onCogSelect = () => {
+    setIsCogOpen(false);
+    onCogFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="action" component="button" onClick={onActionClick}>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" component="button" isDisabled onClick={onActionClick}>
+      Disabled action
+    </DropdownItem>,
+    <DropdownItem key="other action" component="button" onClick={onActionClick}>
+      Other action
+    </DropdownItem>
+  ];
+
+  const dropdownIconItems = [
+    <DropdownItem key="action" component="button" icon={<CogIcon />} onClick={onActionClick}>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" component="button" icon={<BellIcon />} isDisabled onClick={onActionClick}>
+      Disabled action
+    </DropdownItem>,
+    <DropdownItem key="other action" component="button" icon={<CubesIcon />} onClick={onActionClick}>
+      Other action
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <Dropdown
+        onSelect={onActionSelect}
+        toggle={
+          <DropdownToggle
+            id="toggle-split-button-action"
+            splitButtonItems={[
+              <DropdownToggleAction key="action" onClick={onActionClick}>
+                Action
+              </DropdownToggleAction>
+            ]}
+            splitButtonVariant="action"
+            onToggle={onActionToggle}
+          />
+        }
+        isOpen={isActionOpen}
+        dropdownItems={dropdownItems}
+      />{' '}
+      <Dropdown
+        onSelect={onCogSelect}
+        toggle={
+          <DropdownToggle
+            id="toggle-split-button-cog"
+            splitButtonItems={[
+              <DropdownToggleAction key="cog-action" aria-label="Action" onClick={onCogClick}>
+                <CogIcon />
+              </DropdownToggleAction>
+            ]}
+            splitButtonVariant="action"
+            onToggle={onCogToggle}
+          />
+        }
+        isOpen={isCogOpen}
+        dropdownItems={dropdownIconItems}
+      />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const DropdownSplitButtonActionPrimary: React.FunctionComponent = () => {
+  const [isActionOpen, setIsActionOpen] = React.useState(false);
+  const [isCogOpen, setIsCogOpen] = React.useState(false);
+
+  const onActionToggle = (isActionOpen: boolean) => {
+    setIsActionOpen(isActionOpen);
+  };
+  const onCogToggle = (isCogOpen: boolean) => {
+    setIsCogOpen(isCogOpen);
+  };
+
+  const onActionClick = () => {
+    window.alert('You selected an action button!');
+  };
+  const onCogClick = () => {
+    window.alert('You selected the Cog!');
+  };
+
+  const onActionFocus = () => {
+    const element = document.getElementById('toggle-split-button-action-primary');
+    element.focus();
+  };
+  const onCogFocus = () => {
+    const element = document.getElementById('toggle-split-button-cog-primary');
+    element.focus();
+  };
+
+  const onActionSelect = () => {
+    setIsActionOpen(false);
+    onActionFocus();
+  };
+  const onCogSelect = () => {
+    setIsCogOpen(false);
+    onCogFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="action" component="button" onClick={onActionClick}>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" component="button" isDisabled onClick={onActionClick}>
+      Disabled action
+    </DropdownItem>,
+    <DropdownItem key="other action" component="button" onClick={onActionClick}>
+      Other action
+    </DropdownItem>
+  ];
+
+  const dropdownIconItems = [
+    <DropdownItem key="action" component="button" icon={<CogIcon />} onClick={onActionClick}>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" component="button" icon={<BellIcon />} isDisabled onClick={onActionClick}>
+      Disabled action
+    </DropdownItem>,
+    <DropdownItem key="other action" component="button" icon={<CubesIcon />} onClick={onActionClick}>
+      Other action
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <Dropdown
+        onSelect={onActionSelect}
+        toggle={
+          <DropdownToggle
+            id="toggle-split-button-action-primary"
+            splitButtonItems={[
+              <DropdownToggleAction key="action" onClick={onActionClick}>
+                Action
+              </DropdownToggleAction>
+            ]}
+            toggleVariant="primary"
+            splitButtonVariant="action"
+            onToggle={onActionToggle}
+          />
+        }
+        isOpen={isActionOpen}
+        dropdownItems={dropdownItems}
+      />{' '}
+      <Dropdown
+        onSelect={onCogSelect}
+        toggle={
+          <DropdownToggle
+            id="toggle-split-button-cog-primary"
+            splitButtonItems={[
+              <DropdownToggleAction key="cog-action" aria-label="Action" onClick={onCogClick}>
+                <CogIcon />
+              </DropdownToggleAction>
+            ]}
+            toggleVariant="primary"
+            splitButtonVariant="action"
+            onToggle={onCogToggle}
+          />
+        }
+        isOpen={isCogOpen}
+        dropdownItems={dropdownIconItems}
+      />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownSeparator
+} from '@patternfly/react-core';
+
+export const DropdownSplitButtonDisabled: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('toggle-split-button');
+    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
+          splitButtonItems={[
+            <DropdownToggleCheckbox
+              isDisabled
+              id="split-button-disabled-checkbox"
+              key="split-checkbox"
+              aria-label="Select all"
+            />
+          ]}
+          onToggle={onToggle}
+          isDisabled
+          id="toggle-split-button-disabled"
+        />
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};