@patternfly/react-core 6.0.0-alpha.57 → 6.0.0-alpha.58

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownItem, BadgeToggle } from '@patternfly/react-core/deprecated';
-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 = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownBasic.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-
-export const DropdownBasic: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('toggle-basic');
-    element?.focus();
-  };
-
-  const onSelect = () => {
-    setIsOpen(false);
-    onFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="link" tooltip="Tooltip for enabled link">
-      Link
-    </DropdownItem>,
-    <DropdownItem key="action" component="button" tooltip="Tooltip for enabled 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/deprecated/components/Dropdown/examples/DropdownBasicPanel.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle } from '@patternfly/react-core/deprecated';
-
-export const DropdownBasicPanel: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownDescriptions.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core/deprecated';
-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 = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownDirectionUp.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownDirection
-} from '@patternfly/react-core/deprecated';
-
-export const DropdownDirectionUp: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownDisabled.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-
-export const DropdownDisabled: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownGroups.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownGroup, DropdownItem } from '@patternfly/react-core/deprecated';
-
-export const DropdownGroups: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownIconOnly.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-
-export const DropdownIconOnly: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownImageAndText.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Avatar } from '@patternfly/react-core';
-import {
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator
-} from '@patternfly/react-core/deprecated';
-import avatarImg from '../../../../components/assets/avatarImg.svg';
-
-export const DropdownImageAndText: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownInitialSelection.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-
-export const DropdownInitialSelection: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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}
-    />
-  );
-};

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core/deprecated';
-
-export const DropdownKebab: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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/deprecated/components/Dropdown/examples/DropdownPlainTextToggle.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-
-export const DropdownPlainTextToggle: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, 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}
-    />
-  );
-};