@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.50

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  SelectOptionObject
+} from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+
+export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
+  const [inputValue, setInputValue] = React.useState<string>('');
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
+  const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
+  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
+  const [riskSelected, setRiskSelected] = React.useState<string | SelectOptionObject>();
+
+  const statusOptions = [
+    { value: 'Status', disabled: false, isPlaceholder: true },
+    { value: 'New', disabled: false },
+    { value: 'Pending', disabled: false },
+    { value: 'Running', disabled: false },
+    { value: 'Cancelled', disabled: false }
+  ];
+
+  const riskOptions = [
+    { value: 'Risk', disabled: false, isPlaceholder: true },
+    { value: 'Low', disabled: false },
+    { value: 'Medium', disabled: false },
+    { value: 'High', disabled: false }
+  ];
+
+  const onInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const onStatusToggle = (_event: any, isExpanded: boolean) => {
+    setStatusIsExpanded(isExpanded);
+  };
+
+  const onStatusSelect = (
+    _event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject,
+    isPlaceholder: boolean | undefined
+  ) => {
+    if (isPlaceholder) {
+      clearStatusSelection();
+    }
+    setStatusSelected(selection);
+    setStatusIsExpanded(false);
+  };
+
+  const clearStatusSelection = () => {
+    setStatusSelected(undefined);
+    setStatusIsExpanded(false);
+  };
+
+  const onRiskToggle = (_event: any, isExpanded: boolean) => {
+    setRiskIsExpanded(isExpanded);
+  };
+
+  const onRiskSelect = (
+    _event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject,
+    isPlaceholder: boolean | undefined
+  ) => {
+    if (isPlaceholder) {
+      clearRiskSelection();
+    }
+    setRiskSelected(selection);
+    setRiskIsExpanded(false);
+  };
+
+  const clearRiskSelection = () => {
+    setRiskSelected(undefined);
+    setRiskIsExpanded(false);
+  };
+
+  const toggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="search-filter">
+        <SearchInput
+          aria-label="Component toggle groups example search input"
+          onChange={(_event, value) => onInputChange(value)}
+          value={inputValue}
+          onClear={() => {
+            onInputChange('');
+          }}
+        />
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarItem>
+          <Select
+            variant={SelectVariant.single}
+            aria-label="Select Input"
+            onToggle={onStatusToggle}
+            onSelect={onStatusSelect}
+            selections={statusSelected}
+            isOpen={statusIsExpanded}
+          >
+            {statusOptions.map((option, index) => (
+              <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+            ))}
+          </Select>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Select
+            variant={SelectVariant.single}
+            aria-label="Select Input"
+            onToggle={onRiskToggle}
+            onSelect={onRiskSelect}
+            selections={riskSelected}
+            isOpen={riskIsExpanded}
+          >
+            {riskOptions.map((option, index) => (
+              <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+            ))}
+          </Select>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const items = (
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      {toggleGroupItems}
+    </ToolbarToggleGroup>
+  );
+
+  return (
+    <Toolbar id="toolbar-component-managed-toggle-groups" className="pf-m-toggle-group-container">
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -0,0 +1,147 @@
+import React from 'react';
+import {
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  SelectOptionObject
+} from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+
+export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
+  const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
+  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
+  const [riskSelected, setRiskSelected] = React.useState<string | SelectOptionObject>();
+
+  const toggleIsExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const statusOptions = [
+    { value: 'Status', disabled: false, isPlaceholder: true },
+    { value: 'New', disabled: false },
+    { value: 'Pending', disabled: false },
+    { value: 'Running', disabled: false },
+    { value: 'Cancelled', disabled: false }
+  ];
+
+  const riskOptions = [
+    { value: 'Risk', disabled: false, isPlaceholder: true },
+    { value: 'Low', disabled: false },
+    { value: 'Medium', disabled: false },
+    { value: 'High', disabled: false }
+  ];
+
+  const onInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const onStatusToggle = (_event: any, isExpanded: boolean) => {
+    setStatusIsExpanded(isExpanded);
+  };
+
+  const onStatusSelect = (
+    _event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject,
+    isPlaceholder: boolean | undefined
+  ) => {
+    if (isPlaceholder) {
+      clearStatusSelection();
+    }
+    setStatusSelected(selection);
+    setStatusIsExpanded(false);
+  };
+
+  const clearStatusSelection = () => {
+    setStatusSelected(undefined);
+    setStatusIsExpanded(false);
+  };
+
+  const onRiskToggle = (_event: any, isExpanded: boolean) => {
+    setRiskIsExpanded(isExpanded);
+  };
+
+  const onRiskSelect = (
+    _event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject,
+    isPlaceholder: boolean | undefined
+  ) => {
+    if (isPlaceholder) {
+      clearRiskSelection();
+    }
+    setRiskSelected(selection);
+    setRiskIsExpanded(false);
+  };
+
+  const clearRiskSelection = () => {
+    setRiskSelected(undefined);
+    setRiskIsExpanded(false);
+  };
+
+  const toggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="search-filter">
+        <SearchInput
+          aria-label="Consumer toggle groups example search input"
+          onChange={(_event, value) => onInputChange(value)}
+          value={inputValue}
+          onClear={() => {
+            onInputChange('');
+          }}
+        />
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarItem>
+          <Select
+            variant={SelectVariant.single}
+            aria-label="Select Input"
+            onToggle={onStatusToggle}
+            onSelect={onStatusSelect}
+            selections={statusSelected}
+            isOpen={statusIsExpanded}
+          >
+            {statusOptions.map((option, index) => (
+              <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+            ))}
+          </Select>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Select
+            variant={SelectVariant.single}
+            aria-label="Select Input"
+            onToggle={onRiskToggle}
+            onSelect={onRiskSelect}
+            selections={riskSelected}
+            isOpen={riskIsExpanded}
+          >
+            {riskOptions.map((option, index) => (
+              <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+            ))}
+          </Select>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const items = (
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      {toggleGroupItems}
+    </ToolbarToggleGroup>
+  );
+
+  return (
+    <Toolbar
+      id="toolbar-consumer-managed-toggle-groups"
+      isExpanded={isExpanded}
+      className="pf-m-toggle-group-container"
+      toggleIsExpanded={toggleIsExpanded}
+    >
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -82,7 +82,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
           <Select
             variant={SelectVariant.checkbox}
             aria-label="Status"
-            onToggle={(isExpanded: boolean) => setStatusIsExpanded(isExpanded)}
+            onToggle={(_event: any, isExpanded: boolean) => setStatusIsExpanded(isExpanded)}
             onSelect={(event, selection) => onSelect('Status', event, selection as string)}
             selections={filters.status}
             isOpen={statusIsExpanded}
@@ -100,7 +100,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
           <Select
             variant={SelectVariant.checkbox}
             aria-label="Risk"
-            onToggle={(isExpanded: boolean) => setRiskIsExpanded(isExpanded)}
+            onToggle={(_event: any, isExpanded: boolean) => setRiskIsExpanded(isExpanded)}
             onSelect={(event, selection) => onSelect('Risk', event, selection as string)}
             selections={filters.risk}
             isOpen={riskIsExpanded}

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

@@ -0,0 +1,158 @@
+import React from 'react';
+import { SelectOptionObject, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
+import { Button, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+
+export const ToolbarGroups: React.FunctionComponent = () => {
+  const firstOptions = [
+    { value: 'Filter 1', disabled: false, isPlaceholder: true },
+    { value: 'A', disabled: false },
+    { value: 'B', disabled: false },
+    { value: 'C', disabled: false }
+  ];
+
+  const secondOptions = [
+    { value: 'Filter 2', disabled: false, isPlaceholder: true },
+    { value: '1', disabled: false },
+    { value: '2', disabled: false },
+    { value: '3', disabled: false }
+  ];
+
+  const thirdOptions = [
+    { value: 'Filter 3', disabled: false, isPlaceholder: true },
+    { value: 'I', disabled: false },
+    { value: 'II', disabled: false },
+    { value: 'III', disabled: false }
+  ];
+
+  const [firstIsExpanded, setFirstIsExpanded] = React.useState(false);
+  const [firstSelected, setFirstSelected] = React.useState<string | SelectOptionObject>();
+  const [secondIsExpanded, setSecondIsExpanded] = React.useState(false);
+  const [secondSelected, setSecondSelected] = React.useState<string | SelectOptionObject>();
+  const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false);
+  const [thirdSelected, setThirdSelected] = React.useState<string | SelectOptionObject>();
+
+  const onFirstToggle = (_event: any, isExpanded: boolean) => {
+    setFirstIsExpanded(isExpanded);
+  };
+
+  const onFirstSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    setFirstSelected(selection);
+    setFirstIsExpanded(false);
+  };
+
+  const onSecondToggle = (_event: any, isExpanded: boolean) => {
+    setSecondIsExpanded(isExpanded);
+  };
+
+  const onSecondSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    setSecondSelected(selection);
+    setSecondIsExpanded(false);
+  };
+
+  const onThirdToggle = (_event: any, isExpanded: boolean) => {
+    setThirdIsExpanded(isExpanded);
+  };
+
+  const onThirdSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    setThirdSelected(selection);
+    setThirdIsExpanded(false);
+  };
+
+  const filterGroupItems = (
+    <React.Fragment>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onFirstToggle}
+          onSelect={onFirstSelect}
+          selections={firstSelected}
+          isOpen={firstIsExpanded}
+        >
+          {firstOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onSecondToggle}
+          onSelect={onSecondSelect}
+          selections={secondSelected}
+          isOpen={secondIsExpanded}
+        >
+          {secondOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onThirdToggle}
+          onSelect={onThirdSelect}
+          selections={thirdSelected}
+          isOpen={thirdIsExpanded}
+        >
+          {thirdOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const iconButtonGroupItems = (
+    <React.Fragment>
+      <ToolbarItem>
+        <Button variant="plain" aria-label="edit">
+          <EditIcon />
+        </Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="plain" aria-label="clone">
+          <CloneIcon />
+        </Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="plain" aria-label="sync">
+          <SyncIcon />
+        </Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const buttonGroupItems = (
+    <React.Fragment>
+      <ToolbarItem>
+        <Button variant="primary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Secondary</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="tertiary">Tertiary</Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const items = (
+    <React.Fragment>
+      <ToolbarGroup variant="filter-group">{filterGroupItems}</ToolbarGroup>
+      <ToolbarGroup variant="icon-button-group">{iconButtonGroupItems}</ToolbarGroup>
+      <ToolbarGroup variant="button-group">{buttonGroupItems}</ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar id="toolbar-group-types">
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarInsets: React.FunctionComponent = () => {
+  const items = (
+    <React.Fragment>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="primary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar
+      id="toolbar-insets"
+      inset={{
+        default: 'insetNone',
+        md: 'insetSm',
+        xl: 'inset2xl',
+        '2xl': 'insetLg'
+      }}
+    >
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
+import { Button, SearchInput } from '@patternfly/react-core';
+
+export const ToolbarItems: React.FunctionComponent = () => {
+  const items = (
+    <React.Fragment>
+      <ToolbarItem variant="search-filter">
+        <SearchInput aria-label="Items example search input" />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem variant="separator" />
+      <ToolbarItem>
+        <Button variant="primary">Action</Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar id="toolbar-items">
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarSpacers: React.FunctionComponent = () => {
+  const items = (
+    <React.Fragment>
+      <ToolbarItem spacer={{ default: 'spacerNone' }}>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem spacer={{ default: 'spacerSm' }}>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem spacer={{ default: 'spacerMd' }}>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem spacer={{ default: 'spacerLg' }}>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarItem
+        spacer={{
+          default: 'spacerNone',
+          md: 'spacerSm',
+          lg: 'spacerMd',
+          xl: 'spacerLg'
+        }}
+      >
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="primary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup spaceItems={{ lg: 'spaceItemsLg' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar id="toolbar-spacers">
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};