@patternfly/react-core 6.0.0-alpha.77 → 6.0.0-alpha.79

package/src/components/Toolbar/{ToolbarChipGroupContent.tsx → ToolbarLabelGroupContent.tsx}

@@ -10,13 +10,13 @@ import { ToolbarGroup } from './ToolbarGroup';
 import { globalBreakpoints } from './ToolbarUtils';
 import { PickOptional } from '../../helpers/typeUtils';
 
-export interface ToolbarChipGroupContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface ToolbarLabelGroupContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar content row */
   className?: string;
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
   isExpanded?: boolean;
-  /** Chip group content reference for passing to data toolbar children */
-  chipGroupContentRef?: RefObject<any>;
+  /** Label group content reference for passing to data toolbar children */
+  labelGroupContentRef?: RefObject<any>;
   /** optional callback for clearing all filters in the toolbar */
   clearAllFilters?: () => void;
   /** Flag indicating that the clear all filters button should be visible */
@@ -27,15 +27,15 @@ export interface ToolbarChipGroupContentProps extends React.HTMLProps<HTMLDivEle
   numberOfFilters: number;
   /** Text to display in the total number of applied filters ToolbarFilter */
   numberOfFiltersText?: (numberOfFilters: number) => string;
-  /** The breakpoint at which the listed filters in chip groups are collapsed down to a summary */
+  /** The breakpoint at which the listed filters in label groups are collapsed down to a summary */
   collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl';
-  /** Custom additional content appended to the generated chips. To maintain spacing and styling, each node should be a ToolbarItem or ToolbarGroup. This property will remove the built in "Clear all filters" button. */
-  customChipGroupContent?: React.ReactNode;
+  /** Custom additional content appended to the generated labels. To maintain spacing and styling, each node should be a ToolbarItem or ToolbarGroup. This property will remove the built in "Clear all filters" button. */
+  customLabelGroupContent?: React.ReactNode;
 }
 
-class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentProps> {
-  static displayName = 'ToolbarChipGroupContent';
-  static defaultProps: PickOptional<ToolbarChipGroupContentProps> = {
+class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentProps> {
+  static displayName = 'ToolbarLabelGroupContent';
+  static defaultProps: PickOptional<ToolbarLabelGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',
     collapseListedFiltersBreakpoint: 'lg',
     numberOfFiltersText: (numberOfFilters: number) => `${numberOfFilters} filters applied`
@@ -45,18 +45,18 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
     const {
       className,
       isExpanded,
-      chipGroupContentRef,
+      labelGroupContentRef,
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
       collapseListedFiltersBreakpoint,
       numberOfFilters,
       numberOfFiltersText,
-      customChipGroupContent,
+      customLabelGroupContent,
       ...props
     } = this.props;
 
-    const clearChipGroups = () => {
+    const clearLabelGroups = () => {
       clearAllFilters();
     };
 
@@ -74,7 +74,7 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
       <div
         className={css(styles.toolbarContent, isHidden && styles.modifiers.hidden, className)}
         {...((numberOfFilters === 0 || isExpanded) && { hidden: true })}
-        ref={chipGroupContentRef}
+        ref={labelGroupContentRef}
         {...props}
       >
         <ToolbarGroup
@@ -87,17 +87,17 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
             <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>
           </ToolbarGroup>
         )}
-        {showClearFiltersButton && !isExpanded && !customChipGroupContent && (
+        {showClearFiltersButton && !isExpanded && !customLabelGroupContent && (
           <ToolbarItem>
-            <Button variant="link" onClick={clearChipGroups} isInline>
+            <Button variant="link" onClick={clearLabelGroups} isInline>
               {clearFiltersButtonText}
             </Button>
           </ToolbarItem>
         )}
-        {customChipGroupContent && customChipGroupContent}
+        {customLabelGroupContent && customLabelGroupContent}
       </div>
     );
   }
 }
 
-export { ToolbarChipGroupContent };
+export { ToolbarLabelGroupContent };

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -149,8 +149,8 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
       | 'rowGap_3xl'
       | 'rowGap_4xl';
   };
-  /** Reference to a chip container group for filters inside the toolbar toggle group */
-  chipContainerRef?: React.RefObject<any>;
+  /** Reference to a label container group for filters inside the toolbar toggle group */
+  labelContainerRef?: React.RefObject<any>;
   /** Optional callback for clearing all filters in the toolbar toggle group */
   clearAllFilters?: () => void;
   /** Flag indicating that the clear all filters button should be visible in the toolbar toggle group */
@@ -184,7 +184,7 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       children,
       isExpanded,
       onToggle,
-      chipContainerRef,
+      labelContainerRef,
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
@@ -208,15 +208,15 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                   {({
                     expandableContentRef,
                     expandableContentId,
-                    chipContainerRef: managedChipContainerRef,
+                    labelContainerRef: managedLabelContainerRef,
                     isExpanded: managedIsExpanded,
                     clearAllFilters: clearAllFiltersContext,
                     clearFiltersButtonText: clearFiltersButtonContext,
                     showClearFiltersButton: showClearFiltersButtonContext
                   }) => {
                     const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
-                    const _chipContainerRef =
-                      chipContainerRef !== undefined ? chipContainerRef : managedChipContainerRef;
+                    const _labelContainerRef =
+                      labelContainerRef !== undefined ? labelContainerRef : managedLabelContainerRef;
 
                     const breakpointMod: {
                       md?: 'show';
@@ -234,7 +234,7 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         clearAllFilters={clearAllFilters || clearAllFiltersContext}
                         showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
                         clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
-                        chipContainerRef={_chipContainerRef}
+                        labelContainerRef={_labelContainerRef}
                       >
                         {children}
                       </ToolbarExpandableContent>

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -8,20 +8,20 @@ import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakp
 export interface ToolbarContextProps {
   isExpanded: boolean;
   toggleIsExpanded: () => void;
-  chipGroupContentRef: RefObject<HTMLDivElement>;
+  labelGroupContentRef: RefObject<HTMLDivElement>;
   updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;
   numberOfFilters: number;
   clearAllFilters?: () => void;
   clearFiltersButtonText?: string;
   showClearFiltersButton?: boolean;
   toolbarId?: string;
-  customChipGroupContent?: React.ReactNode;
+  customLabelGroupContent?: React.ReactNode;
 }
 
 export const ToolbarContext = React.createContext<ToolbarContextProps>({
   isExpanded: false,
   toggleIsExpanded: () => {},
-  chipGroupContentRef: null,
+  labelGroupContentRef: null,
   updateNumberFilters: () => {},
   numberOfFilters: 0,
   clearAllFilters: () => {}
@@ -30,7 +30,7 @@ export const ToolbarContext = React.createContext<ToolbarContextProps>({
 interface ToolbarContentContextProps {
   expandableContentRef: RefObject<HTMLDivElement>;
   expandableContentId: string;
-  chipContainerRef: RefObject<any>;
+  labelContainerRef: RefObject<any>;
   isExpanded?: boolean;
   clearAllFilters?: () => void;
   clearFiltersButtonText?: string;
@@ -40,7 +40,7 @@ interface ToolbarContentContextProps {
 export const ToolbarContentContext = React.createContext<ToolbarContentContextProps>({
   expandableContentRef: null,
   expandableContentId: '',
-  chipContainerRef: null,
+  labelContainerRef: null,
   clearAllFilters: () => {}
 });
 

package/src/components/Toolbar/__tests__/Generated/ToolbarChipGroupContent.test.tsx

@@ -3,16 +3,16 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { ToolbarChipGroupContent } from '../../ToolbarChipGroupContent';
+import { ToolbarLabelGroupContent } from '../../ToolbarLabelGroupContent';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 
-it('ToolbarChipGroupContent should match snapshot (auto-generated)', () => {
+it('ToolbarLabelGroupContent should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <ToolbarChipGroupContent
+    <ToolbarLabelGroupContent
       className={'string'}
       isExpanded={true}
-      chipGroupContentRef={{ current: document.createElement('div') }}
+      labelGroupContentRef={{ current: document.createElement('div') }}
       clearAllFilters={() => undefined as void}
       showClearFiltersButton={true}
       clearFiltersButtonText={"'Clear all filters'"}

package/src/components/Toolbar/__tests__/Generated/ToolbarExpandableContent.test.tsx

@@ -13,7 +13,7 @@ it('ToolbarExpandableContent should match snapshot (auto-generated)', () => {
       className={'string'}
       isExpanded={false}
       expandableContentRef={{ current: document.createElement('div') }}
-      chipContainerRef={{ current: document.createElement('div') }}
+      labelContainerRef={{ current: document.createElement('div') }}
       clearAllFilters={() => undefined as void}
       clearFiltersButtonText={"'Clear all filters'"}
       showClearFiltersButton={true}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToolbarChipGroupContent should match snapshot (auto-generated) 1`] = `
+exports[`ToolbarLabelGroupContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar__content pf-m-hidden string"

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

@@ -62,15 +62,15 @@ describe('Toolbar', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render with custom chip content', () => {
+  it('should render with custom label content', () => {
     const items = (
       <React.Fragment>
         <ToolbarToggleGroup toggleIcon={<React.Fragment />} breakpoint="xl">
           <ToolbarGroup variant="filter-group">
             <ToolbarFilter
-              chips={['New', 'Pending']}
-              deleteChip={(_category, _chip) => {}}
-              deleteChipGroup={(_category) => {}}
+              labels={['New', 'Pending']}
+              deleteLabel={(_category, _label) => {}}
+              deleteLabelGroup={(_category) => {}}
               categoryName="Status"
             >
               test content
@@ -80,7 +80,7 @@ describe('Toolbar', () => {
       </React.Fragment>
     );
 
-    const customChipGroupContent = (
+    const customLabelGroupContent = (
       <React.Fragment>
         <ToolbarItem>
           <Button variant="link" onClick={() => {}} isInline>
@@ -100,7 +100,7 @@ describe('Toolbar', () => {
         id="toolbar-with-filter"
         className="pf-m-toggle-group-container"
         collapseListedFiltersBreakpoint="xl"
-        customChipGroupContent={customChipGroupContent}
+        customLabelGroupContent={customLabelGroupContent}
       >
         <ToolbarContent>{items}</ToolbarContent>
       </Toolbar>

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

@@ -47,7 +47,7 @@ exports[`Toolbar should render inset 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Toolbar should render with custom chip content 1`] = `
+exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
@@ -104,7 +104,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
         hidden=""
       >
         <div
-          class="pf-v6-c-toolbar__item pf-m-label-group"
+          class="pf-v6-c-toolbar__item pf-m-label-group pf-m-label-group"
         >
           <div
             class="pf-v6-c-label-group pf-m-category"

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

@@ -89,19 +89,19 @@ Note: The toggle group is aware of the consumer provided breakpoint, the expanda
 
 ### With filters
 
-You can add filters to a toolbar to let users filter the content that a toolbar manages. When a toolbar is filtered, it will expand in height to make space for a row of filter chips and a "Clear all filters" button. Upon clearing the applied filters, the toolbar will return to its default height.
+You can add filters to a toolbar to let users filter the content that a toolbar manages. When a toolbar is filtered, it will expand in height to make space for a row of filter labels and a "Clear all filters" button. Upon clearing the applied filters, the toolbar will return to its default height.
 
-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.
+The `<ToolbarFilter>` component expects applied filters and a delete label handler to be passed in as properties. Pass in a `deleteLabelGroup` property to close the entire label group. Once close, the rendering of labels will be handled responsively by the toolbar.
 
 ```ts file="./ToolbarWithFilters.tsx"
 
 ```
 
-### With custom chip group content
+### With custom label group content
 
-To customize the chip groups generated by toolbar filters, use the `customChipGroupContent` property on the `<Toolbar>`. This property will remove the default `clear all filters` button.
+To customize the label groups generated by toolbar filters, use the `customLabelGroupContent` property on the `<Toolbar>`. This property will remove the default `clear all filters` button.
 
-```ts file="./ToolbarCustomChipGroupContent.tsx"
+```ts file="./ToolbarCustomLabelGroupContent.tsx"
 
 ```
 

package/src/components/Toolbar/examples/{ToolbarCustomChipGroupContent.tsx → ToolbarCustomLabelGroupContent.tsx}

@@ -19,7 +19,7 @@ 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 = () => {
+export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
   const [statusIsExpanded, setStatusIsExpanded] = React.useState<boolean>(false);
   const [riskIsExpanded, setRiskIsExpanded] = React.useState<boolean>(false);
   const [filters, setFilters] = React.useState({
@@ -100,9 +100,9 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
     <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)}
+          labels={filters.status}
+          deleteLabel={(category, label) => onDelete(category as string, label as string)}
+          deleteLabelGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Status"
         >
           <Select
@@ -132,9 +132,9 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
           </Select>
         </ToolbarFilter>
         <ToolbarFilter
-          chips={filters.risk}
-          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-          deleteChipGroup={(category) => onDeleteGroup(category as string)}
+          labels={filters.risk}
+          deleteLabel={(category, label) => onDelete(category as string, label as string)}
+          deleteLabelGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Risk"
         >
           <Select
@@ -186,7 +186,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
     </React.Fragment>
   );
 
-  const customChipGroupContent = (
+  const customLabelGroupContent = (
     <React.Fragment>
       <ToolbarItem>
         <Button variant="link" onClick={() => {}} isInline>
@@ -203,10 +203,10 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
 
   return (
     <Toolbar
-      id="toolbar-with-custom-chip-group"
+      id="toolbar-with-custom-label-group"
       className="pf-m-toggle-group-container"
       collapseListedFiltersBreakpoint="xl"
-      customChipGroupContent={customChipGroupContent}
+      customLabelGroupContent={customLabelGroupContent}
     >
       <ToolbarContent>{toolbarItems}</ToolbarContent>
     </Toolbar>

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

@@ -137,9 +137,9 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
       </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)}
+          labels={filters.status}
+          deleteLabel={(category, label) => onDelete(category as string, label as string)}
+          deleteLabelGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Status"
         >
           <Select
@@ -169,8 +169,8 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
           </Select>
         </ToolbarFilter>
         <ToolbarFilter
-          chips={filters.risk}
-          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          labels={filters.risk}
+          deleteLabel={(category, label) => onDelete(category as string, label as string)}
           categoryName="Risk"
         >
           <Select

package/src/demos/CardView/examples/CardView.tsx

@@ -364,8 +364,8 @@ export const CardViewBasic: React.FunctionComponent = () => {
     return (
       <ToolbarFilter
         categoryName="Products"
-        chips={filters.products}
-        deleteChip={(type, id) => onDelete(type as string, id as string)}
+        labels={filters.products}
+        deleteLabel={(type, id) => onDelete(type as string, id as string)}
       >
         <Select
           aria-label="Products"

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -589,27 +589,27 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
           <ToolbarGroup variant="filter-group">
             <ToolbarItem>{attributeDropdown}</ToolbarItem>
             <ToolbarFilter
-              chips={searchValue !== '' ? [searchValue] : ([] as string[])}
-              deleteChip={() => setSearchValue('')}
-              deleteChipGroup={() => setSearchValue('')}
+              labels={searchValue !== '' ? [searchValue] : ([] as string[])}
+              deleteLabel={() => setSearchValue('')}
+              deleteLabelGroup={() => setSearchValue('')}
               categoryName="Name"
               showToolbarItem={activeAttributeMenu === 'Servers'}
             >
               {searchInput}
             </ToolbarFilter>
             <ToolbarFilter
-              chips={statusSelection !== '' ? [statusSelection] : ([] as string[])}
-              deleteChip={() => setStatusSelection('')}
-              deleteChipGroup={() => setStatusSelection('')}
+              labels={statusSelection !== '' ? [statusSelection] : ([] as string[])}
+              deleteLabel={() => setStatusSelection('')}
+              deleteLabelGroup={() => setStatusSelection('')}
               categoryName="Status"
               showToolbarItem={activeAttributeMenu === 'Status'}
             >
               {statusSelect}
             </ToolbarFilter>
             <ToolbarFilter
-              chips={locationSelections}
-              deleteChip={(category, chip) => onLocationMenuSelect(undefined, chip as string)}
-              deleteChipGroup={() => setLocationSelections([])}
+              labels={locationSelections}
+              deleteLabel={(category, label) => onLocationMenuSelect(undefined, label as string)}
+              deleteLabelGroup={() => setLocationSelections([])}
               categoryName="Location"
               showToolbarItem={activeAttributeMenu === 'Location'}
             >

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -358,9 +358,9 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
         <ToolbarGroup variant="filter-group">
           <ToolbarFilter
-            chips={selections}
-            deleteChip={(category, chip) => onSelect(undefined, chip as string)}
-            deleteChipGroup={() => setSelections([])}
+            labels={selections}
+            deleteLabel={(category, label) => onSelect(undefined, label as string)}
+            deleteLabelGroup={() => setSelections([])}
             categoryName="Location"
           >
             {select}

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -304,11 +304,11 @@ export const FilterFaceted: React.FunctionComponent = () => {
     }
   };
 
-  const onChipDelete = (category: string, chip: string) => {
+  const onLabelDelete = (category: string, label: string) => {
     if (category === 'status') {
-      setStatusSelections(statusSelections.filter((selection) => selection !== chip));
+      setStatusSelections(statusSelections.filter((selection) => selection !== label));
     } else {
-      setLocationSelections(locationSelections.filter((selection) => selection !== chip));
+      setLocationSelections(locationSelections.filter((selection) => selection !== label));
     }
   };
 
@@ -417,18 +417,18 @@ export const FilterFaceted: React.FunctionComponent = () => {
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
         <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           <ToolbarFilter
-            chips={statusSelections}
-            deleteChip={(category, chip) => onChipDelete(category as string, chip as string)}
-            deleteChipGroup={() => setStatusSelections([])}
+            labels={statusSelections}
+            deleteLabel={(category, label) => onLabelDelete(category as string, label as string)}
+            deleteLabelGroup={() => setStatusSelections([])}
             categoryName="Status"
             showToolbarItem={false}
           >
             <div />
           </ToolbarFilter>
           <ToolbarFilter
-            chips={locationSelections}
-            deleteChip={(category, chip) => onChipDelete(category as string, chip as string)}
-            deleteChipGroup={() => setLocationSelections([])}
+            labels={locationSelections}
+            deleteLabel={(category, label) => onLabelDelete(category as string, label as string)}
+            deleteLabelGroup={() => setLocationSelections([])}
             categoryName="Location"
           >
             {select}

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -468,17 +468,17 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
         <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           <ToolbarFilter
-            chips={statusSelection !== '' ? [statusSelection] : ([] as string[])}
-            deleteChip={() => setStatusSelection('')}
-            deleteChipGroup={() => setStatusSelection('')}
+            labels={statusSelection !== '' ? [statusSelection] : ([] as string[])}
+            deleteLabel={() => setStatusSelection('')}
+            deleteLabelGroup={() => setStatusSelection('')}
             categoryName="Status"
           >
             {statusSelect}
           </ToolbarFilter>
           <ToolbarFilter
-            chips={locationSelections}
-            deleteChip={(category, chip) => onLocationMenuSelect(undefined, chip as string)}
-            deleteChipGroup={() => setLocationSelections([])}
+            labels={locationSelections}
+            deleteLabel={(category, label) => onLocationMenuSelect(undefined, label as string)}
+            deleteLabelGroup={() => setLocationSelections([])}
             categoryName="Location"
           >
             {locationSelect}

package/src/demos/Page.md

@@ -41,3 +41,9 @@ This demonstrates a variety of navigation patterns in the context of a full page
 ```ts file='./examples/Page/PageStickySectionBreadcrumb.tsx' isFullscreen
 
 ```
+
+### Context selector/perspective switcher in sidebar
+
+```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
+
+```