From 8f19135f53bca76d20885e8d3edbec5add38cdc1 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 27 Jun 2024 14:15:11 -0400 Subject: [PATCH 1/9] fix(Toolbar): updated for parity with Core updates --- .../src/components/Toolbar/ToolbarContent.tsx | 8 +-- .../src/components/Toolbar/ToolbarGroup.tsx | 27 ++++++--- .../src/components/Toolbar/ToolbarItem.tsx | 14 ++--- .../Toolbar/ToolbarLabelGroupContent.tsx | 22 +++---- .../components/Toolbar/ToolbarToggleGroup.tsx | 10 ---- .../__snapshots__/Toolbar.test.tsx.snap | 58 ++++++++----------- .../ToolbarCustomLabelGroupContent.tsx | 2 +- .../Toolbar/examples/ToolbarGroups.tsx | 2 +- .../Toolbar/examples/ToolbarInsets.tsx | 2 +- .../Toolbar/examples/ToolbarSpacers.tsx | 2 +- .../Toolbar/examples/ToolbarWithFilters.tsx | 2 +- .../react-core/src/demos/DashboardHeader.tsx | 4 +- .../examples/NotificationDrawerBasic.tsx | 4 +- .../examples/NotificationDrawerGrouped.tsx | 4 +- .../src/demos/RTL/examples/PaginatedTable.jsx | 4 +- .../src/demos/RTL/examples/PaginatedTable.tsx | 4 +- .../Masthead/MastheadWithHorizontalNav.tsx | 4 +- ...stheadWithUtilitiesAndUserDropdownMenu.tsx | 4 +- .../src/demos/examples/Nav/NavFlyout.tsx | 4 +- .../src/demos/examples/Nav/NavHorizontal.tsx | 4 +- .../examples/Nav/NavHorizontalWithSubnav.tsx | 4 +- .../src/demos/examples/Nav/NavManual.tsx | 4 +- .../Page/PageStickySectionBreadcrumb.tsx | 4 +- .../examples/Page/PageStickySectionGroup.tsx | 4 +- .../Page/PageStickySectionGroupAlternate.tsx | 4 +- .../demos/ToolbarDemo/ToolbarDemo.tsx | 2 +- .../react-table/src/demos/DashboardHeader.tsx | 4 +- .../examples/TableSortableResponsive.tsx | 2 +- 28 files changed, 100 insertions(+), 113 deletions(-) diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx index 5c2d848b869..7c98951712c 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx @@ -16,8 +16,6 @@ export interface ToolbarContentProps extends React.HTMLProps { xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }; - /** Vertical alignment. */ - alignSelf?: 'start' | 'center' | 'baseline' | 'default'; /** Vertical alignment of children */ alignItems?: 'start' | 'center' | 'baseline' | 'default'; /** Content to be rendered as children of the content row */ @@ -56,7 +54,6 @@ class ToolbarContent extends React.Component { clearAllFilters, showClearFiltersButton, clearFiltersButtonText, - alignSelf, ...props } = this.props; @@ -100,10 +97,7 @@ class ToolbarContent extends React.Component { styles.toolbarContentSection, alignItems === 'center' && styles.modifiers.alignItemsCenter, alignItems === 'start' && styles.modifiers.alignItemsStart, - alignItems === 'baseline' && styles.modifiers.alignItemsBaseline, - alignSelf === 'center' && styles.modifiers.alignSelfCenter, - alignSelf === 'start' && styles.modifiers.alignSelfStart, - alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline + alignItems === 'baseline' && styles.modifiers.alignItemsBaseline )} > {children} diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx index 7628993cdc5..4c805a20297 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx @@ -6,14 +6,23 @@ import { PageContext } from '../Page/PageContext'; export enum ToolbarGroupVariant { 'filter-group' = 'filter-group', - 'icon-button-group' = 'icon-button-group' + 'action-group' = 'action-group', + 'action-group-inline' = 'action-group-inline', + 'action-group-plain' = 'action-group-plain', + 'label-group' = 'label-group' } export interface ToolbarGroupProps extends Omit, 'ref'> { /** Classes applied to root element of the data toolbar group */ className?: string; /** A type modifier which modifies spacing specifically depending on the type of group */ - variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group'; + variant?: + | ToolbarGroupVariant + | 'filter-group' + | 'action-group' + | 'action-group-inline' + | 'action-group-plain' + | 'label-group'; /** Visibility at various breakpoints. */ visibility?: { default?: 'hidden' | 'visible'; @@ -24,16 +33,16 @@ export interface ToolbarGroupProps extends Omit, }; /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */ align?: { - default?: 'alignEnd' | 'alignStart'; - md?: 'alignEnd' | 'alignStart'; - lg?: 'alignEnd' | 'alignStart'; - xl?: 'alignEnd' | 'alignStart'; - '2xl'?: 'alignEnd' | 'alignStart'; + default?: 'alignEnd' | 'alignStart' | 'alignCenter'; + md?: 'alignEnd' | 'alignStart' | 'alignCenter'; + lg?: 'alignEnd' | 'alignStart' | 'alignCenter'; + xl?: 'alignEnd' | 'alignStart' | 'alignCenter'; + '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter'; }; /** Vertical alignment of children */ - alignItems?: 'start' | 'center' | 'baseline' | 'default'; + alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'; /** Vertical alignment */ - alignSelf?: 'start' | 'center' | 'baseline' | 'default'; + alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'; /** Sets both the column and row gap at various breakpoints. */ gap?: { default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx index 265c4397095..47c23d21131 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx @@ -28,16 +28,16 @@ export interface ToolbarItemProps extends React.HTMLProps { }; /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */ align?: { - default?: 'alignEnd' | 'alignStart'; - md?: 'alignEnd' | 'alignStart'; - lg?: 'alignEnd' | 'alignStart'; - xl?: 'alignEnd' | 'alignStart'; - '2xl'?: 'alignEnd' | 'alignStart'; + default?: 'alignEnd' | 'alignStart' | 'alignCenter'; + md?: 'alignEnd' | 'alignStart' | 'alignCenter'; + lg?: 'alignEnd' | 'alignStart' | 'alignCenter'; + xl?: 'alignEnd' | 'alignStart' | 'alignCenter'; + '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter'; }; /** Vertical alignment of children */ - alignItems?: 'start' | 'center' | 'baseline' | 'default'; + alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'; /** Vertical alignment */ - alignSelf?: 'start' | 'center' | 'baseline' | 'default'; + alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'; /** Sets both the column and row gap at various breakpoints. */ gap?: { default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; diff --git a/packages/react-core/src/components/Toolbar/ToolbarLabelGroupContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarLabelGroupContent.tsx index 2992fd03c2d..69016828a3a 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarLabelGroupContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarLabelGroupContent.tsx @@ -69,6 +69,8 @@ class ToolbarLabelGroupContent extends React.Component 0 && !isExpanded; + const showDefaultClearFilter = showClearFiltersButton && !isExpanded && !customChipGroupContent; return (
- {collapseListedFilters && numberOfFilters > 0 && !isExpanded && ( + {(showNumberOfFilters || showDefaultClearFilter || customChipGroupContent) && ( - {numberOfFiltersText(numberOfFilters)} + {showDefaultClearFilter && ( + + + + )} + {customChipGroupContent && customChipGroupContent} + {showNumberOfFilters && {numberOfFiltersText(numberOfFilters)}} )} - {showClearFiltersButton && !isExpanded && !customLabelGroupContent && ( - - - - )} - {customLabelGroupContent && customLabelGroupContent}
); } diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx index b72a30ebcee..912f8b01515 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx @@ -27,14 +27,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps { xl?: 'hidden' | 'visible'; '2xl'?: 'hidden' | 'visible'; }; - /** Alignment at various breakpoints. */ - alignment?: { - default?: 'alignEnd' | 'alignStart'; - md?: 'alignEnd' | 'alignStart'; - lg?: 'alignEnd' | 'alignStart'; - xl?: 'alignEnd' | 'alignStart'; - '2xl'?: 'alignEnd' | 'alignStart'; - }; /** Sets both the column and row gap at various breakpoints. */ gap?: { default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; @@ -176,7 +168,6 @@ class ToolbarToggleGroup extends React.Component { variant, visibility, breakpoint, - alignment, gap, columnGap, rowGap, @@ -263,7 +254,6 @@ class ToolbarToggleGroup extends React.Component { variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'], formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)), formatBreakpointMods(visibility, styles, '', getBreakpoint(width)), - formatBreakpointMods(alignment, styles, '', getBreakpoint(width)), formatBreakpointMods(gap, styles, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)), diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap index 9d382bfb2e2..2feec65b22c 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap @@ -264,44 +264,36 @@ exports[`Toolbar should render with custom label content 1`] = `
- 2 filters applied -
- -
- -
-
-
+
- Clear all filters - - + +
+
+ 2 filters applied +
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx index 7405fca722a..b56b4527a98 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx @@ -172,7 +172,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => { } breakpoint="xl"> {toggleGroupItems} - + - + diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx index fc34b5631cd..7e91d1d4a1c 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx @@ -25,7 +25,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => { - + diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx index e1c3a336786..f9dfa122bbd 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx @@ -208,7 +208,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { } breakpoint="xl"> {toggleGroupItems} - +