@patternfly/react-core 4.267.6 → 4.267.8

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

@@ -0,0 +1,253 @@
+import React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  KebabToggle,
+  Select,
+  SelectOption,
+  SelectOptionObject,
+  SelectVariant,
+  Pagination,
+  Dropdown,
+  DropdownSeparator,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+  DropdownPosition,
+  Divider,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+
+export const ToolbarStacked: React.FunctionComponent = () => {
+  // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
+  // pagination - right aligned
+  const resourceOptions = [
+    { value: 'All resources', disabled: false },
+    { value: 'Deployment', disabled: false },
+    { value: 'Pod', disabled: false }
+  ];
+
+  const statusOptions = [
+    { value: 'Running', disabled: false },
+    { value: 'New', disabled: false },
+    { value: 'Pending', disabled: false },
+    { value: 'Cancelled', disabled: false }
+  ];
+
+  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
+  const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false);
+  const [resourceSelected, setResourceSelected] = React.useState<string | SelectOptionObject>();
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
+  const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onKebabToggle = (isOpen: boolean) => {
+    setKebabIsOpen(isOpen);
+  };
+
+  const onResourceToggle = (isExpanded: boolean) => {
+    setResourceIsExpanded(isExpanded);
+  };
+
+  const onResourceSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string | SelectOptionObject) => {
+    setResourceSelected(selection);
+    setResourceIsExpanded(false);
+  };
+
+  const onResourceSelectDropdown = (event: React.SyntheticEvent<HTMLDivElement, Event> | undefined) => {
+    setResourceSelected(event?.target);
+    setResourceIsExpanded(false);
+  };
+
+  const onStatusToggle = (isExpanded: boolean) => {
+    setStatusIsExpanded(isExpanded);
+  };
+
+  const onStatusSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string | SelectOptionObject) => {
+    setStatusSelected(selection);
+    setStatusIsExpanded(false);
+  };
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {
+    setPage(pageNumber);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    perPage: number,
+    page: number
+  ) => {
+    setPage(page);
+    setPerPage(perPage);
+  };
+
+  const onSplitButtonToggle = (isOpen: boolean) => {
+    setSplitButtonDropdownIsOpen(isOpen);
+  };
+
+  const onSplitButtonSelect = () => {
+    setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen);
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  const splitButtonDropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>
+  ];
+
+  const toggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="label" id="stacked-example-resource-select">
+        Resource
+      </ToolbarItem>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onResourceToggle}
+          onSelect={onResourceSelect}
+          selections={resourceSelected}
+          isOpen={resourceIsExpanded}
+          aria-labelledby="stacked-example-resource-select"
+        >
+          {resourceOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+      <ToolbarItem variant="label" id="stacked-example-status-select">
+        Status
+      </ToolbarItem>
+      <ToolbarItem>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={onStatusToggle}
+          onSelect={onStatusSelect}
+          selections={statusSelected}
+          isOpen={statusIsExpanded}
+          aria-labelledby="stacked-example-status-select"
+        >
+          {statusOptions.map((option, index) => (
+            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
+          ))}
+        </Select>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  const firstRowItems = (
+    <React.Fragment>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="lg">
+            {toggleGroupItems}
+          </ToolbarToggleGroup>
+          <ToolbarItem variant="overflow-menu">
+            <OverflowMenu breakpoint="2xl">
+              <OverflowMenuContent>
+                <OverflowMenuGroup groupType="button">
+                  <OverflowMenuItem>
+                    <Button variant={ButtonVariant.primary}>Primary</Button>
+                  </OverflowMenuItem>
+                  <OverflowMenuItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </OverflowMenuItem>
+                </OverflowMenuGroup>
+              </OverflowMenuContent>
+              <OverflowMenuControl hasAdditionalOptions>
+                <Dropdown
+                  onSelect={onResourceSelectDropdown}
+                  toggle={<KebabToggle onToggle={onKebabToggle} />}
+                  isOpen={kebabIsOpen}
+                  isPlain
+                  dropdownItems={dropdownItems}
+                  position={DropdownPosition.right}
+                />
+              </OverflowMenuControl>
+            </OverflowMenu>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    </React.Fragment>
+  );
+
+  const secondRowItems = (
+    <React.Fragment>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem variant="bulk-select">
+            <Dropdown
+              onSelect={onSplitButtonSelect}
+              toggle={
+                <DropdownToggle
+                  id="stacked-example-toggle"
+                  splitButtonItems={[
+                    <DropdownToggleCheckbox id="example-checkbox-1" key="split-checkbox" aria-label="Select all" />
+                  ]}
+                  onToggle={onSplitButtonToggle}
+                />
+              }
+              isOpen={splitButtonDropdownIsOpen}
+              dropdownItems={splitButtonDropdownItems}
+            />
+          </ToolbarItem>
+          <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+            <Pagination
+              itemCount={37}
+              perPage={perPage}
+              page={page}
+              onSetPage={onSetPage}
+              widgetId="pagination-options-menu-top"
+              onPerPageSelect={onPerPageSelect}
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    </React.Fragment>
+  );
+
+  return (
+    <React.Fragment>
+      {firstRowItems}
+      <Divider />
+      {secondRowItems}
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
+
+export const ToolbarSticky: React.FunctionComponent = () => {
+  const [isSticky, setIsSticky] = React.useState(true);
+  const [showEvenOnly, setShowEvenOnly] = React.useState(true);
+  const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
+  const numbers = showEvenOnly ? array.filter(number => number % 2 === 0) : array;
+
+  return (
+    <React.Fragment>
+      <div style={{ overflowY: 'scroll', height: '200px' }}>
+        <Toolbar id="toolbar-sticky" inset={{ default: 'insetNone' }} isSticky={isSticky}>
+          <ToolbarContent>
+            <ToolbarItem>
+              <SearchInput aria-label="Sticky example search input" />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Checkbox
+                label="Show only even number items"
+                isChecked={showEvenOnly}
+                onChange={setShowEvenOnly}
+                id="showOnlyEvenCheckbox"
+              />
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+        <ul>
+          {numbers.map(number => (
+            <li key={number}>{`item ${number}`}</li>
+          ))}
+        </ul>
+      </div>
+      <Checkbox label="Is toolbar sticky" isChecked={isSticky} onChange={setIsSticky} id="isStickyCheckbox" />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarWidths: React.FunctionComponent = () => {
+  const widths = {
+    default: '100px',
+    sm: '80px',
+    md: '150px',
+    lg: '200px',
+    xl: '250px',
+    '2xl': '300px'
+  };
+
+  const items = (
+    <React.Fragment>
+      <ToolbarItem widths={widths}>
+        <Button variant="secondary" style={{ width: '100%' }}>
+          Action
+        </Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar id="toolbar-widths">
+      <ToolbarContent>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -0,0 +1,222 @@
+import React from 'react';
+import {
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarFilter,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  SelectOptionObject
+} from '@patternfly/react-core';
+import {
+  Button,
+  Select,
+  SelectOption,
+  SelectVariant,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownPosition,
+  KebabToggle,
+  SearchInput
+} from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+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 ToolbarWithFilters: React.FunctionComponent = () => {
+  const [inputValue, setInputValue] = React.useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
+  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
+  const [filters, setFilters] = React.useState({
+    risk: ['Low'],
+    status: ['New', 'Pending']
+  });
+  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
+
+  const onInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const onSelect = (
+    type: string,
+    event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject
+  ) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    setFilters(prev => {
+      const prevSelections = prev[type];
+      return {
+        ...prev,
+        [type]: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+      };
+    });
+  };
+
+  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    onSelect('status', event, selection);
+  };
+
+  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+    onSelect('risk', event, selection);
+  };
+
+  const onDelete = (type: string, id: string) => {
+    if (type === 'Risk') {
+      setFilters({ risk: filters.risk.filter((fil: string) => fil !== id), status: filters.status });
+    } else if (type === 'Status') {
+      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) => fil !== id) });
+    } else {
+      setFilters({ risk: [], status: [] });
+    }
+  };
+
+  const onDeleteGroup = (type: string) => {
+    if (type === 'Risk') {
+      setFilters({ risk: [], status: filters.status });
+    } else if (type === 'Status') {
+      setFilters({ risk: filters.risk, status: [] });
+    }
+  };
+
+  const onStatusToggle = (isExpanded: boolean) => {
+    setStatusIsExpanded(isExpanded);
+  };
+
+  const onRiskToggle = (isExpanded: boolean) => {
+    setRiskIsExpanded(isExpanded);
+  };
+
+  const onKebabToggle = (isOpen: boolean) => {
+    setKebabIsOpen(isOpen);
+  };
+
+  const statusMenuItems = [
+    <SelectOption key="statusNew" value="New" />,
+    <SelectOption key="statusPending" value="Pending" />,
+    <SelectOption key="statusRunning" value="Running" />,
+    <SelectOption key="statusCancelled" value="Cancelled" />
+  ];
+
+  const riskMenuItems = [
+    <SelectOption key="riskLow" value="Low" />,
+    <SelectOption key="riskMedium" value="Medium" />,
+    <SelectOption key="riskHigh" value="High" />
+  ];
+
+  const toggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="search-filter">
+        <SearchInput
+          aria-label="With filters example search input"
+          onChange={onInputChange}
+          value={inputValue}
+          onClear={() => {
+            onInputChange('');
+          }}
+        />
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarFilter
+          chips={filters.status}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          deleteChipGroup={category => onDeleteGroup(category as string)}
+          categoryName="Status"
+        >
+          <Select
+            variant={SelectVariant.checkbox}
+            aria-label="Status"
+            onToggle={onStatusToggle}
+            onSelect={onStatusSelect}
+            selections={filters.status}
+            isOpen={statusIsExpanded}
+            placeholderText="Status"
+          >
+            {statusMenuItems}
+          </Select>
+        </ToolbarFilter>
+        <ToolbarFilter
+          chips={filters.risk}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          categoryName="Risk"
+        >
+          <Select
+            variant={SelectVariant.checkbox}
+            aria-label="Risk"
+            onToggle={onRiskToggle}
+            onSelect={onRiskSelect}
+            selections={filters.risk}
+            isOpen={riskIsExpanded}
+            placeholderText="Risk"
+          >
+            {riskMenuItems}
+          </Select>
+        </ToolbarFilter>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>,
+    <DropdownSeparator key="separator" />,
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
+      Separated Action
+    </DropdownItem>
+  ];
+
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        {toggleGroupItems}
+      </ToolbarToggleGroup>
+      <ToolbarGroup variant="icon-button-group">
+        <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>
+      </ToolbarGroup>
+      <ToolbarItem>
+        <Dropdown
+          toggle={<KebabToggle onToggle={onKebabToggle} />}
+          isOpen={kebabIsOpen}
+          isPlain
+          dropdownItems={dropdownItems}
+          position={DropdownPosition.right}
+        />
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar
+      id="toolbar-with-filter"
+      className="pf-m-toggle-group-container"
+      collapseListedFiltersBreakpoint="xl"
+      clearAllFilters={() => onDelete('', '')}
+    >
+      <ToolbarContent>{toolbarItems}</ToolbarContent>
+    </Toolbar>
+  );
+};