@patternfly/react-core 5.1.1-prerelease.4 → 5.1.1-prerelease.5

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

@@ -34,14 +34,6 @@ exports[`Toolbar should render inset 1`] = `
           Test 3 
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-expandable-content-0"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content pf-m-hidden"
@@ -99,49 +91,6 @@ exports[`Toolbar should render with custom chip content 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-with-filter-expandable-content-3"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-        <div
-          class="pf-v5-c-toolbar__group pf-m-chip-container"
-        >
-          <div
-            class="pf-v5-c-toolbar__group"
-          />
-          <div
-            class="pf-v5-c-toolbar__item"
-          >
-            <button
-              aria-disabled="false"
-              class="pf-v5-c-button pf-m-link pf-m-inline"
-              data-ouia-component-id="OUIA-Generated-Button-link-3"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              type="button"
-            >
-              Save filters
-            </button>
-          </div>
-          <div
-            class="pf-v5-c-toolbar__item"
-          >
-            <button
-              aria-disabled="false"
-              class="pf-v5-c-button pf-m-link pf-m-inline"
-              data-ouia-component-id="OUIA-Generated-Button-link-4"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              type="button"
-            >
-              Clear all filters
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content"
@@ -385,14 +334,6 @@ exports[`Toolbar should render with page inset flag 1`] = `
           Test 3 
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-expandable-content-1"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content pf-m-hidden"

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

@@ -0,0 +1,258 @@
+import React from 'react';
+import {
+  MenuToggle,
+  MenuToggleElement,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarFilter,
+  Badge
+} from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+
+export const Test: React.FunctionComponent = () => {
+  const statusChipContainerRef = React.useRef<HTMLDivElement>();
+  const riskChipContainerRef = React.useRef<HTMLDivElement>();
+
+  const [isStatusGroupExpanded, setIsStatusGroupExpanded] = React.useState(false);
+  const [isRiskGroupExpanded, setIsRiskGroupExpanded] = React.useState(false);
+
+  const [isStatusMenuExpanded, setIsStatusExpanded] = React.useState(false);
+  const [isRiskMenuExpanded, setIsRiskExpanded] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+  const [filters, setFilters] = React.useState({
+    risk: ['Low'],
+    status: ['New', 'Pending']
+  });
+
+  const closeToggleGroups = () => {
+    setIsStatusGroupExpanded(false);
+    setIsRiskGroupExpanded(false);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('resize', closeToggleGroups); // Resize observer to toggle off expand groups is required to properly reformat toolbar when growing
+    return () => {
+      window.removeEventListener('resize', closeToggleGroups);
+    };
+  }, []);
+
+  const onInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const onStatusToggle = () => {
+    setIsStatusExpanded(!isStatusMenuExpanded);
+  };
+
+  const onRiskToggle = () => {
+    setIsRiskExpanded(!isRiskMenuExpanded);
+  };
+
+  const onSelect = (type: string, event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => {
+    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 | undefined, selection: string) => {
+    onSelect('status', event, selection);
+  };
+
+  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => {
+    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 statusToggleGroupItems = (
+    <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">
+        <ToolbarFilter
+          chips={filters.status}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
+          categoryName="Status"
+          isExpanded={isStatusGroupExpanded}
+          expandableChipContainerRef={statusChipContainerRef} // Required to link the toolbar filter chip group to the custom expandable group
+        >
+          <Select
+            aria-label="Status"
+            role="menu"
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onStatusToggle}
+                isExpanded={isStatusMenuExpanded}
+                style={
+                  {
+                    width: '140px'
+                  } as React.CSSProperties
+                }
+              >
+                Status
+                {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}
+              </MenuToggle>
+            )}
+            onSelect={(event, selection) => onStatusSelect(event, selection as string)}
+            selected={filters.status}
+            isOpen={isStatusMenuExpanded}
+            onOpenChange={(isOpen) => setIsStatusExpanded(isOpen)}
+          >
+            <SelectList>
+              <SelectOption hasCheckbox key="statusNew" value="New" isSelected={filters.status.includes('New')}>
+                New
+              </SelectOption>
+              <SelectOption
+                hasCheckbox
+                key="statusPending"
+                value="Pending"
+                isSelected={filters.status.includes('Pending')}
+              >
+                Pending
+              </SelectOption>
+              <SelectOption
+                hasCheckbox
+                key="statusRunning"
+                value="Running"
+                isSelected={filters.status.includes('Running')}
+              >
+                Running
+              </SelectOption>
+              <SelectOption
+                hasCheckbox
+                key="statusCancelled"
+                value="Cancelled"
+                isSelected={filters.status.includes('Cancelled')}
+              >
+                Cancelled
+              </SelectOption>
+            </SelectList>
+          </Select>
+        </ToolbarFilter>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const riskToggleGroupItems = (
+    <ToolbarGroup variant="filter-group">
+      <ToolbarFilter
+        chips={filters.risk}
+        deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+        categoryName="Risk"
+        isExpanded={isRiskGroupExpanded}
+        expandableChipContainerRef={riskChipContainerRef} // Required to link the toolbar filter chip group to the custom expandable group
+      >
+        <Select
+          aria-label="Risk"
+          role="menu"
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={onRiskToggle}
+              isExpanded={isRiskMenuExpanded}
+              style={
+                {
+                  width: '140px'
+                } as React.CSSProperties
+              }
+            >
+              Risk
+              {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}
+            </MenuToggle>
+          )}
+          onSelect={(event, selection) => onRiskSelect(event, selection as string)}
+          selected={filters.risk}
+          isOpen={isRiskMenuExpanded}
+          onOpenChange={(isOpen) => setIsRiskExpanded(isOpen)}
+        >
+          <SelectList>
+            <SelectOption hasCheckbox key="riskLow" value="Low" isSelected={filters.risk.includes('Low')}>
+              Low
+            </SelectOption>
+            <SelectOption hasCheckbox key="riskMedium" value="Medium" isSelected={filters.risk.includes('Medium')}>
+              Medium
+            </SelectOption>
+            <SelectOption hasCheckbox key="riskHigh" value="High" isSelected={filters.risk.includes('High')}>
+              High
+            </SelectOption>
+          </SelectList>
+        </Select>
+      </ToolbarFilter>
+    </ToolbarGroup>
+  );
+
+  return (
+    <Toolbar id="toolbar-multiple-toggle-groups" className="pf-m-toggle-group-container">
+      <ToolbarContent>
+        <ToolbarToggleGroup
+          isExpanded={isStatusGroupExpanded} // Required to control expanded state
+          onToggle={() => {
+            setIsStatusGroupExpanded(!isStatusGroupExpanded);
+            setIsRiskGroupExpanded(false);
+          }} // Required to control expanded state
+          toggleIcon={<FilterIcon />}
+          breakpoint="md"
+          chipContainerRef={statusChipContainerRef}
+          showClearFiltersButton
+          clearAllFilters={() => onDeleteGroup('Status')}
+          clearFiltersButtonText="Clear status filter"
+        >
+          {statusToggleGroupItems}
+        </ToolbarToggleGroup>
+        <ToolbarToggleGroup
+          isExpanded={isRiskGroupExpanded} // Required to control expanded state
+          onToggle={() => {
+            setIsRiskGroupExpanded(!isRiskGroupExpanded);
+            setIsStatusGroupExpanded(false);
+          }} // Required to control expanded state
+          toggleIcon={<FilterIcon />}
+          breakpoint="xl"
+          chipContainerRef={riskChipContainerRef}
+          showClearFiltersButton
+          clearAllFilters={() => onDeleteGroup('Risk')}
+          clearFiltersButtonText={'Clear risk filter'}
+        >
+          {riskToggleGroupItems}
+        </ToolbarToggleGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -14,6 +14,12 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 ## Examples
 
+### TEST - remove before merging
+
+```ts file="./Test.tsx"
+
+```
+
 ### Toolbar items
 
 A toolbar can contain multiple toolbar items, like filters and buttons.
@@ -28,7 +34,7 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
 
-Items are spaced “16px” apart by default. To adjust the size of the space between items, use the `spacer` property of each `<ToolbarItem>`. You can set the `spacer` value at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".  Available `spacer` values include "spacerNone", "spacerSm", "spacerMd", or "spacerLg" into each breakpoint. 
+Items are spaced “16px” apart by default. To adjust the size of the space between items, use the `spacer` property of each `<ToolbarItem>`. You can set the `spacer` value at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl". Available `spacer` values include "spacerNone", "spacerSm", "spacerMd", or "spacerLg" into each breakpoint.
 
 ```ts file="./ToolbarSpacers.tsx"
 
@@ -54,27 +60,28 @@ To adjust a toolbar’s inset, use the `inset` property. You can set the inset v
 
 ### Sticky toolbar
 
-To lock a toolbar and prevent it  from scrolling with other content, use a sticky toolbar. 
+To lock a toolbar and prevent it from scrolling with other content, use a sticky toolbar.
 
 In the following example, toggle the "is toolbar sticky" checkbox to see the difference between a sticky and non-sticky toolbar.
 
 ```ts file="./ToolbarSticky.tsx"
+
 ```
 
 ### With groups of items
 
-You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together. 
+You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together.
 
 Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the [examples with toggle groups and filters](/components/toolbar#examples-with-toggle-groups-and-filters).
 
 ```ts file="./ToolbarGroups.tsx"
 
 ```
+
 ## Examples with toggle groups and filters
 
 The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.
 
-
 ### Component managed toggle groups
 
 A toggle group allows you to collapse a set of items into an overlay panel at a certain breakpoint. For example, when a toggle group contains filter controls, its contents will collapse into an overlay panel when the toolbar adapts to a change in the viewport size. The contents can be toggled by selecting the filter icon in the overlay panel.
@@ -102,7 +109,6 @@ You can add filters to a toolbar to let users filter the content that a toolbar
 
 The `<ToolbarFilter>` component expects applied filters and a delete chip handler to be passed in as properties. Pass in a `deleteChipGroup` property to close the entire chip group. Once close, the rendering of chips will be handled responsively by the toolbar.
 
-
 ```ts file="./ToolbarWithFilters.tsx"
 
 ```
@@ -120,5 +126,5 @@ To customize the chip groups generated by toolbar filters, use the `customChipGr
 When all of a toolbar's required elements cannot fit in a single line, you can split toolbar items into multiple rows.
 
 ```ts file="./ToolbarStacked.tsx"
-```
 
+```

package/src/components/Toolbar/index.ts

@@ -1,6 +1,7 @@
 export * from './Toolbar';
 export * from './ToolbarContent';
 export * from './ToolbarExpandIconWrapper';
+export * from './ToolbarExpandableContent';
 export * from './ToolbarGroup';
 export * from './ToolbarItem';
 export * from './ToolbarFilter';

package/src/components/Alert/__tests__/__snapshots__/AlertGroup.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AlertGroup Alert Group renders without children 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v5-c-alert-group"
-    role="list"
-  />
-</DocumentFragment>
-`;