@patternfly/react-core 4.198.12 → 4.198.15

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarToggleGroup.test.tsx.snap

@@ -55,6 +55,400 @@ exports[`Toolbar should render inset 1`] = `
 </div>
 `;
 
+exports[`Toolbar should render with custom chip content 1`] = `
+<div>
+  <div
+    class="pf-c-toolbar pf-m-toggle-group-container"
+    data-ouia-component-id="OUIA-Generated-Toolbar-3"
+    data-ouia-component-type="PF4/Toolbar"
+    data-ouia-safe="true"
+    id="toolbar-with-filter"
+  >
+    <div
+      class="pf-c-toolbar__content"
+    >
+      <div
+        class="pf-c-toolbar__content-section"
+      >
+        <div
+          class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
+        >
+          <div
+            class="pf-c-toolbar__toggle"
+          >
+            <button
+              aria-controls="toolbar-with-filter-expandable-content-3"
+              aria-disabled="false"
+              aria-haspopup="false"
+              aria-label="Show Filters"
+              class="pf-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            />
+          </div>
+          <div
+            class="pf-c-toolbar__group pf-m-filter-group"
+          >
+            <div
+              class="pf-c-toolbar__item"
+            >
+              <div
+                class="pf-c-select pf-m-expanded"
+                data-ouia-component-id="OUIA-Generated-Select-checkbox-2"
+                data-ouia-component-type="PF4/Select"
+                data-ouia-safe="true"
+              >
+                <button
+                  aria-expanded="true"
+                  aria-label="Options menu"
+                  aria-labelledby=" pf-select-toggle-id-1"
+                  class="pf-c-select__toggle"
+                  id="pf-select-toggle-id-1"
+                  type="button"
+                >
+                  <div
+                    class="pf-c-select__toggle-wrapper"
+                  >
+                    <span
+                      class="pf-c-select__toggle-text"
+                    >
+                      Status
+                    </span>
+                    <div
+                      class="pf-c-select__toggle-badge"
+                    >
+                      <span
+                        class="pf-c-badge pf-m-read"
+                      >
+                        2
+                      </span>
+                    </div>
+                  </div>
+                  <span
+                    class="pf-c-select__toggle-arrow"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <ul
+                  aria-label="Status"
+                  class="pf-c-select__menu"
+                  role="listbox"
+                >
+                  <label
+                    class="pf-c-check pf-c-select__menu-item"
+                  >
+                    <input
+                      checked=""
+                      class="pf-c-check__input"
+                      id="pf-random-id-1-New"
+                      type="checkbox"
+                    />
+                    <span
+                      class="pf-c-check__label"
+                    >
+                      New
+                    </span>
+                  </label>
+                  <label
+                    class="pf-c-check pf-c-select__menu-item"
+                  >
+                    <input
+                      checked=""
+                      class="pf-c-check__input"
+                      id="pf-random-id-1-Pending"
+                      type="checkbox"
+                    />
+                    <span
+                      class="pf-c-check__label"
+                    >
+                      Pending
+                    </span>
+                  </label>
+                  <label
+                    class="pf-c-check pf-c-select__menu-item"
+                  >
+                    <input
+                      class="pf-c-check__input"
+                      id="pf-random-id-1-Running"
+                      type="checkbox"
+                    />
+                    <span
+                      class="pf-c-check__label"
+                    >
+                      Running
+                    </span>
+                  </label>
+                  <label
+                    class="pf-c-check pf-c-select__menu-item"
+                  >
+                    <input
+                      class="pf-c-check__input"
+                      id="pf-random-id-1-Cancelled"
+                      type="checkbox"
+                    />
+                    <span
+                      class="pf-c-check__label"
+                    >
+                      Cancelled
+                    </span>
+                  </label>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-c-toolbar__expandable-content"
+        id="toolbar-with-filter-expandable-content-3"
+      >
+        <div
+          class="pf-c-toolbar__group"
+        />
+        <div
+          class="pf-c-toolbar__group pf-m-chip-container"
+        >
+          <div
+            class="pf-c-toolbar__group"
+          />
+          <div
+            class="pf-c-toolbar__item"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-c-button pf-m-link pf-m-inline"
+              data-ouia-component-id="OUIA-Generated-Button-link-3"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              Save filters
+            </button>
+          </div>
+          <div
+            class="pf-c-toolbar__item"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-c-button pf-m-link pf-m-inline"
+              data-ouia-component-id="OUIA-Generated-Button-link-4"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              Clear all filters
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-toolbar__content"
+    >
+      <div
+        aria-hidden="true"
+        class="pf-c-toolbar__group pf-m-hidden"
+        hidden=""
+      >
+        <div
+          class="pf-c-toolbar__item pf-m-chip-group"
+        >
+          <div
+            aria-labelledby="pf-random-id-2"
+            class="pf-c-chip-group pf-m-category"
+            data-ouia-component-type="PF4/ChipGroup"
+            data-ouia-safe="true"
+            role="group"
+          >
+            <div
+              class="pf-c-chip-group__main"
+            >
+              <span
+                class="pf-c-chip-group__label"
+                id="pf-random-id-2"
+              >
+                Status
+              </span>
+              <ul
+                aria-labelledby="pf-random-id-2"
+                class="pf-c-chip-group__list"
+                role="list"
+              >
+                <li
+                  class="pf-c-chip-group__list-item"
+                >
+                  <div
+                    class="pf-c-chip"
+                    data-ouia-component-id="OUIA-Generated-Chip-1"
+                    data-ouia-component-type="PF4/Chip"
+                    data-ouia-safe="true"
+                  >
+                    <span
+                      class="pf-c-chip__text"
+                      id="pf-random-id-3"
+                    >
+                      New
+                    </span>
+                    <button
+                      aria-disabled="false"
+                      aria-label="close"
+                      aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
+                      class="pf-c-button pf-m-plain"
+                      data-ouia-component-id="close"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      id="remove_pf-random-id-3"
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 352 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </li>
+                <li
+                  class="pf-c-chip-group__list-item"
+                >
+                  <div
+                    class="pf-c-chip"
+                    data-ouia-component-id="OUIA-Generated-Chip-2"
+                    data-ouia-component-type="PF4/Chip"
+                    data-ouia-safe="true"
+                  >
+                    <span
+                      class="pf-c-chip__text"
+                      id="pf-random-id-4"
+                    >
+                      Pending
+                    </span>
+                    <button
+                      aria-disabled="false"
+                      aria-label="close"
+                      aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
+                      class="pf-c-button pf-m-plain"
+                      data-ouia-component-id="close"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      id="remove_pf-random-id-4"
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 352 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div
+              class="pf-c-chip-group__close"
+            >
+              <button
+                aria-disabled="false"
+                aria-label="Close chip group"
+                aria-labelledby="remove_group_pf-random-id-2 pf-random-id-2"
+                class="pf-c-button pf-m-plain"
+                data-ouia-component-id="Close chip group"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe="true"
+                id="remove_group_pf-random-id-2"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-c-toolbar__group"
+      >
+        <div
+          class="pf-c-toolbar__item"
+        >
+          2 filters applied
+        </div>
+      </div>
+      <div
+        class="pf-c-toolbar__item"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-link pf-m-inline"
+          data-ouia-component-id="OUIA-Generated-Button-link-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          Save filters
+        </button>
+      </div>
+      <div
+        class="pf-c-toolbar__item"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-link pf-m-inline"
+          data-ouia-component-id="OUIA-Generated-Button-link-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          Clear all filters
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Toolbar should render with page inset flag 1`] = `
 <div>
   <div

package/src/components/Toolbar/examples/Toolbar.md

@@ -253,7 +253,7 @@ const ToolbarItems = () => {
   const [isSticky, setIsSticky] = React.useState(true);
   const [showEvenOnly, setShowEvenOnly] = React.useState(true);
   const array = [...Array(30).keys()];
-  const numbers = showEvenOnly ?  array.filter(number => number % 2 === 0):array;
+  const numbers = showEvenOnly ? array.filter(number => number % 2 === 0) : array;
 
   return (
     <React.Fragment>
@@ -1087,6 +1087,13 @@ class ToolbarWithFilterExample extends React.Component {
 }
 ```
 
+### With custom chip group content
+
+The chip groups generated by toolbar filters may be further customized through the `customChipGroupContent` property, which will append to the filter chip groups. This property will remove the default `Clear all filters` button.
+
+```ts file="./ToolbarCustomChipGroupContent.tsx"
+```
+
 ### Stacked example
 
 There may be situations where all of the required elements simply cannot fit in a single line.

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

@@ -0,0 +1,166 @@
+import React from 'react';
+import {
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarFilter,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  Button,
+  Select,
+  SelectOption,
+  SelectVariant
+} 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 ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
+  const [statusIsExpanded, setStatusIsExpanded] = React.useState<boolean>(false);
+  const [riskIsExpanded, setRiskIsExpanded] = React.useState<boolean>(false);
+  const [filters, setFilters] = React.useState({
+    risk: ['Low'],
+    status: ['New', 'Pending']
+  });
+
+  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 onSelect = (type: 'Risk' | 'Status', event: React.MouseEvent | React.ChangeEvent, selection: string) => {
+    const checked = (event.target as any).checked;
+    if (type === 'Risk') {
+      setFilters({
+        risk: checked ? [...filters.risk, selection] : filters.risk.filter((fil: string) => fil !== selection),
+        status: filters.status
+      });
+    } else if (type === 'Status') {
+      setFilters({
+        risk: filters.risk,
+        status: checked ? [...filters.status, selection] : filters.status.filter((fil: string) => fil !== selection)
+      });
+    }
+  };
+
+  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>
+      <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={(isExpanded: boolean) => setStatusIsExpanded(isExpanded)}
+            onSelect={(event, selection) => onSelect('Status', event, selection as string)}
+            selections={filters.status}
+            isOpen={statusIsExpanded}
+            placeholderText="Status"
+          >
+            {statusMenuItems}
+          </Select>
+        </ToolbarFilter>
+        <ToolbarFilter
+          chips={filters.risk}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          deleteChipGroup={category => onDeleteGroup(category as string)}
+          categoryName="Risk"
+        >
+          <Select
+            variant={SelectVariant.checkbox}
+            aria-label="Risk"
+            onToggle={(isExpanded: boolean) => setRiskIsExpanded(isExpanded)}
+            onSelect={(event, selection) => onSelect('Risk', event, selection as string)}
+            selections={filters.risk}
+            isOpen={riskIsExpanded}
+            placeholderText="Risk"
+          >
+            {riskMenuItems}
+          </Select>
+        </ToolbarFilter>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  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>
+    </React.Fragment>
+  );
+
+  const customChipGroupContent = (
+    <React.Fragment>
+      <ToolbarItem>
+        <Button variant="link" onClick={() => {}} isInline>
+          Save filters
+        </Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="link" onClick={() => onDelete('', '')} isInline>
+          Clear all filters
+        </Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar
+      id="toolbar-with-filter"
+      className="pf-m-toggle-group-container"
+      collapseListedFiltersBreakpoint="xl"
+      customChipGroupContent={customChipGroupContent}
+    >
+      <ToolbarContent>{toolbarItems}</ToolbarContent>
+    </Toolbar>
+  );
+};

package/src/demos/Nav.md

@@ -7,6 +7,7 @@ import { DashboardBreadcrumb } from './examples/DashboardWrapper';
 import DashboardHeader from './examples/DashboardHeader';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
@@ -382,6 +383,7 @@ import {
 import { DashboardBreadcrumb } from './examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
@@ -481,7 +483,7 @@ class PageLayoutHorizontalNav extends React.Component {
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
             <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <HelpIcon />
+              <QuestionCircleIcon />
             </Button>
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
@@ -738,6 +740,7 @@ import {
 import { DashboardBreadcrumb } from './examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
@@ -850,7 +853,7 @@ class HorizontalNavWithSubnav extends React.Component {
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
             <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <HelpIcon />
+              <QuestionCircleIcon />
             </Button>
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
@@ -1200,6 +1203,7 @@ import {
 } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
@@ -1327,7 +1331,7 @@ class PageLayoutManualNav extends React.Component {
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
             <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <HelpIcon />
+              <QuestionCircleIcon />
             </Button>
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>