From 735d07a14dccf68b0900815daed011dbabf9be31 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 25 Jun 2024 09:03:42 -0400 Subject: [PATCH 1/3] chore(Toolbar): replaced chip instances with label --- .../src/components/Toolbar/Toolbar.tsx | 24 ++--- .../src/components/Toolbar/ToolbarContent.tsx | 4 +- .../Toolbar/ToolbarExpandableContent.tsx | 18 ++-- .../src/components/Toolbar/ToolbarFilter.tsx | 102 +++++++++--------- .../src/components/Toolbar/ToolbarGroup.tsx | 2 +- .../src/components/Toolbar/ToolbarItem.tsx | 6 +- ...ntent.tsx => ToolbarLabelGroupContent.tsx} | 34 +++--- .../components/Toolbar/ToolbarToggleGroup.tsx | 14 +-- .../src/components/Toolbar/ToolbarUtils.tsx | 10 +- .../ToolbarChipGroupContent.test.tsx | 8 +- .../ToolbarExpandableContent.test.tsx | 2 +- .../ToolbarChipGroupContent.test.tsx.snap | 2 +- .../Toolbar/__tests__/Toolbar.test.tsx | 12 +-- .../__snapshots__/Toolbar.test.tsx.snap | 4 +- .../components/Toolbar/examples/Toolbar.md | 10 +- ...tsx => ToolbarCustomLabelGroupContent.tsx} | 20 ++-- .../Toolbar/examples/ToolbarWithFilters.tsx | 10 +- .../src/demos/CardView/examples/CardView.tsx | 4 +- .../examples/FilterAttributeSearch.tsx | 18 ++-- .../Filters/examples/FilterCheckboxSelect.tsx | 6 +- .../demos/Filters/examples/FilterFaceted.tsx | 18 ++-- .../examples/FilterMixedSelectGroup.tsx | 12 +-- .../PrimaryDetail/PrimaryDetailCardView.tsx | 4 +- .../cypress/integration/toolbar.spec.ts | 10 +- .../demos/ToolbarDemo/ToolbarDemo.tsx | 14 +-- .../src/demos/examples/TableFilterable.tsx | 18 ++-- 26 files changed, 193 insertions(+), 193 deletions(-) rename packages/react-core/src/components/Toolbar/{ToolbarChipGroupContent.tsx => ToolbarLabelGroupContent.tsx} (71%) rename packages/react-core/src/components/Toolbar/examples/{ToolbarCustomChipGroupContent.tsx => ToolbarCustomLabelGroupContent.tsx} (91%) diff --git a/packages/react-core/src/components/Toolbar/Toolbar.tsx b/packages/react-core/src/components/Toolbar/Toolbar.tsx index bc0a5762eb9..225aadae9b1 100644 --- a/packages/react-core/src/components/Toolbar/Toolbar.tsx +++ b/packages/react-core/src/components/Toolbar/Toolbar.tsx @@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar'; import { GenerateId } from '../../helpers/GenerateId/GenerateId'; import { css } from '@patternfly/react-styles'; import { ToolbarContext } from './ToolbarUtils'; -import { ToolbarChipGroupContent } from './ToolbarChipGroupContent'; +import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent'; import { formatBreakpointMods, canUseDOM } from '../../helpers/util'; import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers'; import { PageContext } from '../Page/PageContext'; @@ -20,9 +20,9 @@ export interface ToolbarProps extends React.HTMLProps, OUIAProps clearAllFilters?: () => void; /** Text to display in the clear all filters button */ clearFiltersButtonText?: string; - /** Custom content appended to the filter generated chip group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default "Clear all filters" button. */ - customChipGroupContent?: React.ReactNode; - /** The breakpoint at which the listed filters in chip groups are collapsed down to a summary */ + /** Custom content appended to the filter generated label group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default "Clear all filters" button. */ + customLabelGroupContent?: React.ReactNode; + /** The breakpoint at which the listed filters in label groups are collapsed down to a summary */ collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl'; /** Flag indicating if a data toolbar toggle group's expandable content is expanded */ isExpanded?: boolean; @@ -65,7 +65,7 @@ export interface ToolbarState { /** Flag used if the user has opted NOT to manage the 'isExpanded' state of the toggle group. * Indicates whether or not the toggle group is expanded. */ isManagedToggleExpanded: boolean; - /** Object managing information about how many chips are in each chip group */ + /** Object managing information about how many labels are in each label group */ filterInfo: FilterInfo; /** Used to keep track of window width so we can collapse expanded content when window is resizing */ windowWidth: number; @@ -78,7 +78,7 @@ interface FilterInfo { class Toolbar extends React.Component { static displayName = 'Toolbar'; - chipGroupContentRef = React.createRef(); + labelGroupContentRef = React.createRef(); staticFilterInfo = {}; state = { isManagedToggleExpanded: false, @@ -144,7 +144,7 @@ class Toolbar extends React.Component { isSticky, ouiaId, numberOfFiltersText, - customChipGroupContent, + customLabelGroupContent, colorVariant = ToolbarColorVariant.default, ...props } = this.props; @@ -180,27 +180,27 @@ class Toolbar extends React.Component { value={{ isExpanded, toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded, - chipGroupContentRef: this.chipGroupContentRef, + labelGroupContentRef: this.labelGroupContentRef, updateNumberFilters: this.updateNumberFilters, numberOfFilters, clearAllFilters, clearFiltersButtonText, showClearFiltersButton, toolbarId: randomId, - customChipGroupContent + customLabelGroupContent }} > {children} - diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx index 51f19cc15a4..5c2d848b869 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx @@ -37,7 +37,7 @@ export interface ToolbarContentProps extends React.HTMLProps { class ToolbarContent extends React.Component { static displayName = 'ToolbarContent'; private expandableContentRef = React.createRef(); - private chipContainerRef = React.createRef(); + private labelContainerRef = React.createRef(); private static currentId = 0; static defaultProps: ToolbarContentProps = { @@ -88,7 +88,7 @@ class ToolbarContent extends React.Component { value={{ expandableContentRef: this.expandableContentRef, expandableContentId, - chipContainerRef: this.chipContainerRef, + labelContainerRef: this.labelContainerRef, isExpanded: isExpanded || isExpandedContext, clearAllFilters: clearAllFilters || clearAllFiltersContext, clearFiltersButtonText: clearFiltersButtonText || clearFiltersButtonContext, diff --git a/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx index e125bbb4327..977c2328bb3 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx @@ -16,8 +16,8 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps; - /** Chip container reference for passing to data toolbar children */ - chipContainerRef?: RefObject; + /** Label container reference for passing to data toolbar children */ + labelContainerRef?: RefObject; /** optional callback for clearing all filters in the toolbar */ clearAllFilters?: () => void; /** Text to display in the clear all filters button */ @@ -40,16 +40,16 @@ class ToolbarExpandableContent extends React.Component { + const clearLabelGroups = () => { clearAllFilters(); }; @@ -62,15 +62,15 @@ class ToolbarExpandableContent extends React.Component{children} {numberOfFilters > 0 && ( - - {showClearFiltersButton && !customChipGroupContent && ( + + {showClearFiltersButton && !customLabelGroupContent && ( - )} - {customChipGroupContent && customChipGroupContent} + {customLabelGroupContent && customLabelGroupContent} )} diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx index 41021feb9ca..84de82f41a0 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx @@ -5,41 +5,41 @@ import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils'; import { PickOptional } from '../../helpers/typeUtils'; import { Label, LabelGroup } from '../Label'; -export interface ToolbarChipGroup { - /** A unique key to identify this chip group category */ +export interface ToolbarLabelGroup { + /** A unique key to identify this label group category */ key: string; - /** The category name to display for the chip group */ + /** The category name to display for the label group */ name: string; } -export interface ToolbarChip { - /** A unique key to identify this chip */ +export interface ToolbarLabel { + /** A unique key to identify this label */ key: string; - /** The ReactNode to display in the chip */ + /** The ReactNode to display in the label */ node: React.ReactNode; } export interface ToolbarFilterProps extends ToolbarItemProps { /** Flag indicating when toolbar toggle group is expanded for non-managed toolbar toggle groups. */ isExpanded?: boolean; - /** An array of strings to be displayed as chips in the expandable content */ - chips?: (string | ToolbarChip)[]; - /** Callback passed by consumer used to close the entire chip group */ - deleteChipGroup?: (category: string | ToolbarChipGroup) => void; - /** Callback passed by consumer used to delete a chip from the chips[] */ - deleteChip?: (category: string | ToolbarChipGroup, chip: ToolbarChip | string) => void; - /** Customizable "Show Less" text string for the chip group */ - chipGroupExpandedText?: string; - /** Customizeable template string for the chip group. Use variable "${remaining}" for the overflow chip count. */ - chipGroupCollapsedText?: string; - /** Content to be rendered inside the data toolbar item associated with the chip group */ + /** An array of strings to be displayed as labels in the expandable content */ + labels?: (string | ToolbarLabel)[]; + /** Callback passed by consumer used to close the entire label group */ + deleteLabelGroup?: (category: string | ToolbarLabelGroup) => void; + /** Callback passed by consumer used to delete a label from the labels[] */ + deleteLabel?: (category: string | ToolbarLabelGroup, label: ToolbarLabel | string) => void; + /** Customizable "Show Less" text string for the label group */ + labelGroupExpandedText?: string; + /** Customizeable template string for the label group. Use variable "${remaining}" for the overflow label count. */ + labelGroupCollapsedText?: string; + /** Content to be rendered inside the data toolbar item associated with the label group */ children: React.ReactNode; - /** Unique category name to be used as a label for the chip group */ - categoryName: string | ToolbarChipGroup; + /** Unique category name to be used as a label for the label group */ + categoryName: string | ToolbarLabelGroup; /** Flag to show the toolbar item */ showToolbarItem?: boolean; - /** Reference to a chip container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */ - expandableChipContainerRef?: React.RefObject; + /** Reference to a label container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */ + expandableLabelContainerRef?: React.RefObject; } interface ToolbarFilterState { @@ -51,7 +51,7 @@ class ToolbarFilter extends React.Component; static defaultProps: PickOptional = { - chips: [] as (string | ToolbarChip)[], + labels: [] as (string | ToolbarLabel)[], showToolbarItem: true }; @@ -63,65 +63,65 @@ class ToolbarFilter extends React.Component + const labelGroup = labels.length ? ( + deleteChipGroup(categoryName)} - collapsedText={chipGroupCollapsedText} - expandedText={chipGroupExpandedText} + isClosable={deleteLabelGroup !== undefined} + onClick={() => deleteLabelGroup(categoryName)} + collapsedText={labelGroupCollapsedText} + expandedText={labelGroupExpandedText} > - {chips.map((chip) => - typeof chip === 'string' ? ( - )} - {showClearFiltersButton && !isExpanded && !customChipGroupContent && ( + {showClearFiltersButton && !isExpanded && !customLabelGroupContent && ( - )} - {customChipGroupContent && customChipGroupContent} + {customLabelGroupContent && customLabelGroupContent} ); } } -export { ToolbarChipGroupContent }; +export { ToolbarLabelGroupContent }; diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx index 8c69c32883a..b72a30ebcee 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx +++ b/packages/react-core/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; + /** Reference to a label container group for filters inside the toolbar toggle group */ + labelContainerRef?: React.RefObject; /** 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 { children, isExpanded, onToggle, - chipContainerRef, + labelContainerRef, clearAllFilters, showClearFiltersButton, clearFiltersButtonText, @@ -208,15 +208,15 @@ class ToolbarToggleGroup extends React.Component { {({ 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 { clearAllFilters={clearAllFilters || clearAllFiltersContext} showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext} clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext} - chipContainerRef={_chipContainerRef} + labelContainerRef={_labelContainerRef} > {children} diff --git a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx index 6aec87bf74b..309eaa82bb8 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx +++ b/packages/react-core/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; + labelGroupContentRef: RefObject; 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({ isExpanded: false, toggleIsExpanded: () => {}, - chipGroupContentRef: null, + labelGroupContentRef: null, updateNumberFilters: () => {}, numberOfFilters: 0, clearAllFilters: () => {} @@ -30,7 +30,7 @@ export const ToolbarContext = React.createContext({ interface ToolbarContentContextProps { expandableContentRef: RefObject; expandableContentId: string; - chipContainerRef: RefObject; + labelContainerRef: RefObject; isExpanded?: boolean; clearAllFilters?: () => void; clearFiltersButtonText?: string; @@ -40,7 +40,7 @@ interface ToolbarContentContextProps { export const ToolbarContentContext = React.createContext({ expandableContentRef: null, expandableContentId: '', - chipContainerRef: null, + labelContainerRef: null, clearAllFilters: () => {} }); diff --git a/packages/react-core/src/components/Toolbar/__tests__/Generated/ToolbarChipGroupContent.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/Generated/ToolbarChipGroupContent.test.tsx index 38f59797a2f..658104759bc 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/Generated/ToolbarChipGroupContent.test.tsx +++ b/packages/react-core/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( - undefined as void} showClearFiltersButton={true} clearFiltersButtonText={"'Clear all filters'"} diff --git a/packages/react-core/src/components/Toolbar/__tests__/Generated/ToolbarExpandableContent.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/Generated/ToolbarExpandableContent.test.tsx index dd05587fd75..9494c4122db 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/Generated/ToolbarExpandableContent.test.tsx +++ b/packages/react-core/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} diff --git a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarChipGroupContent.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarChipGroupContent.test.tsx.snap index 4fc91a307cb..440354c260f 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarChipGroupContent.test.tsx.snap +++ b/packages/react-core/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`] = `
{ expect(asFragment()).toMatchSnapshot(); }); - it('should render with custom chip content', () => { + it('should render with custom label content', () => { const items = ( } breakpoint="xl"> {}} - deleteChipGroup={(_category) => {}} + labels={['New', 'Pending']} + deleteLabel={(_category, _label) => {}} + deleteLabelGroup={(_category) => {}} categoryName="Status" > test content @@ -80,7 +80,7 @@ describe('Toolbar', () => { ); - const customChipGroupContent = ( + const customLabelGroupContent = (