diff --git a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap index 53ac8c5e49e..487baaedfdf 100644 --- a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap +++ b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap @@ -49,7 +49,7 @@ exports[`Chart 1`] = ` @@ -80,7 +80,7 @@ exports[`Chart 1`] = ` @@ -111,7 +111,7 @@ exports[`Chart 1`] = ` @@ -142,7 +142,7 @@ exports[`Chart 1`] = ` @@ -173,7 +173,7 @@ exports[`Chart 1`] = ` @@ -218,7 +218,7 @@ exports[`Chart 1`] = ` @@ -249,7 +249,7 @@ exports[`Chart 1`] = ` @@ -280,7 +280,7 @@ exports[`Chart 1`] = ` @@ -311,7 +311,7 @@ exports[`Chart 1`] = ` @@ -342,7 +342,7 @@ exports[`Chart 1`] = ` @@ -415,7 +415,7 @@ exports[`Chart 2`] = ` @@ -446,7 +446,7 @@ exports[`Chart 2`] = ` @@ -477,7 +477,7 @@ exports[`Chart 2`] = ` @@ -508,7 +508,7 @@ exports[`Chart 2`] = ` @@ -539,7 +539,7 @@ exports[`Chart 2`] = ` @@ -584,7 +584,7 @@ exports[`Chart 2`] = ` @@ -615,7 +615,7 @@ exports[`Chart 2`] = ` @@ -646,7 +646,7 @@ exports[`Chart 2`] = ` @@ -677,7 +677,7 @@ exports[`Chart 2`] = ` @@ -708,7 +708,7 @@ exports[`Chart 2`] = ` @@ -879,7 +879,7 @@ exports[`renders axis and component children 1`] = ` @@ -910,7 +910,7 @@ exports[`renders axis and component children 1`] = ` @@ -941,7 +941,7 @@ exports[`renders axis and component children 1`] = ` @@ -972,7 +972,7 @@ exports[`renders axis and component children 1`] = ` @@ -1003,7 +1003,7 @@ exports[`renders axis and component children 1`] = ` @@ -1034,7 +1034,7 @@ exports[`renders axis and component children 1`] = ` @@ -1065,7 +1065,7 @@ exports[`renders axis and component children 1`] = ` @@ -1110,7 +1110,7 @@ exports[`renders axis and component children 1`] = ` @@ -1141,7 +1141,7 @@ exports[`renders axis and component children 1`] = ` @@ -1172,7 +1172,7 @@ exports[`renders axis and component children 1`] = ` @@ -1203,7 +1203,7 @@ exports[`renders axis and component children 1`] = ` diff --git a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap index 1338f02c715..e645a9e2b25 100644 --- a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap +++ b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap @@ -46,7 +46,7 @@ exports[`ChartAxis 1`] = ` @@ -77,7 +77,7 @@ exports[`ChartAxis 1`] = ` @@ -108,7 +108,7 @@ exports[`ChartAxis 1`] = ` @@ -139,7 +139,7 @@ exports[`ChartAxis 1`] = ` @@ -170,7 +170,7 @@ exports[`ChartAxis 1`] = ` @@ -201,7 +201,7 @@ exports[`ChartAxis 1`] = ` @@ -270,7 +270,7 @@ exports[`ChartAxis 2`] = ` @@ -301,7 +301,7 @@ exports[`ChartAxis 2`] = ` @@ -332,7 +332,7 @@ exports[`ChartAxis 2`] = ` @@ -363,7 +363,7 @@ exports[`ChartAxis 2`] = ` @@ -394,7 +394,7 @@ exports[`ChartAxis 2`] = ` @@ -425,7 +425,7 @@ exports[`ChartAxis 2`] = ` @@ -595,7 +595,7 @@ exports[`renders component data 1`] = ` @@ -626,7 +626,7 @@ exports[`renders component data 1`] = ` @@ -657,7 +657,7 @@ exports[`renders component data 1`] = ` @@ -702,7 +702,7 @@ exports[`renders component data 1`] = ` @@ -733,7 +733,7 @@ exports[`renders component data 1`] = ` @@ -764,7 +764,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap index f4962584b2f..74ad8d67d6a 100644 --- a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap @@ -491,7 +491,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -522,7 +522,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -553,7 +553,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -584,7 +584,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -629,7 +629,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -660,7 +660,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -691,7 +691,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -722,7 +722,7 @@ A 0 0 0 0 1, 246.5, 150 diff --git a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap index e18d78f798f..ec48b1e3097 100644 --- a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap @@ -709,7 +709,7 @@ exports[`renders component data 1`] = ` @@ -740,7 +740,7 @@ exports[`renders component data 1`] = ` @@ -771,7 +771,7 @@ exports[`renders component data 1`] = ` @@ -802,7 +802,7 @@ exports[`renders component data 1`] = ` @@ -847,7 +847,7 @@ exports[`renders component data 1`] = ` @@ -878,7 +878,7 @@ exports[`renders component data 1`] = ` @@ -909,7 +909,7 @@ exports[`renders component data 1`] = ` @@ -940,7 +940,7 @@ exports[`renders component data 1`] = ` @@ -971,7 +971,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap index 93964090999..530bca81609 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap @@ -49,7 +49,7 @@ exports[`ChartBulletQualitativeRange 1`] = ` @@ -134,7 +134,7 @@ exports[`ChartBulletQualitativeRange 2`] = ` @@ -231,7 +231,7 @@ exports[`renders component data 1`] = ` @@ -262,7 +262,7 @@ exports[`renders component data 1`] = ` @@ -293,7 +293,7 @@ exports[`renders component data 1`] = ` @@ -324,7 +324,7 @@ exports[`renders component data 1`] = ` @@ -355,7 +355,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap index d08f63d6905..6f958bfe860 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap @@ -77,7 +77,7 @@ exports[`renders component data 1`] = ` @@ -86,7 +86,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap index 5f17c0fd4de..3bf48d07eaa 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap @@ -77,7 +77,7 @@ exports[`renders component data 1`] = ` @@ -86,7 +86,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap index 1ee5f5d3353..e18ba13ae6d 100644 --- a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap @@ -98,7 +98,7 @@ exports[`renders container via ChartLegend 1`] = ` @@ -115,7 +115,7 @@ exports[`renders container via ChartLegend 1`] = ` @@ -132,7 +132,7 @@ exports[`renders container via ChartLegend 1`] = ` diff --git a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap index 097c9507d4d..f8bcb968fb8 100644 --- a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap @@ -16,7 +16,7 @@ exports[`renders component text 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap index 3307abd7bb8..12d6c6a3634 100644 --- a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap @@ -53,7 +53,7 @@ exports[`ChartLegend 1`] = ` @@ -70,7 +70,7 @@ exports[`ChartLegend 1`] = ` @@ -145,7 +145,7 @@ exports[`ChartLegend 2`] = ` @@ -162,7 +162,7 @@ exports[`ChartLegend 2`] = ` @@ -237,7 +237,7 @@ exports[`renders component data 1`] = ` @@ -254,7 +254,7 @@ exports[`renders component data 1`] = ` @@ -271,7 +271,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap index d8caaebb7a0..a905f383ebf 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap @@ -59,7 +59,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -90,7 +90,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -121,7 +121,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -152,7 +152,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -207,7 +207,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -248,7 +248,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -289,7 +289,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -467,7 +467,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -484,7 +484,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -501,7 +501,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -518,7 +518,7 @@ exports[`allows tooltip via container component 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap index 882be696921..74f994bc502 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap @@ -16,7 +16,7 @@ exports[`renders component text 1`] = ` @@ -33,7 +33,7 @@ exports[`renders component text 1`] = ` diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap index ffed7e2ae52..51d9931f24d 100644 --- a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap @@ -251,7 +251,7 @@ exports[`renders component data 1`] = ` @@ -282,7 +282,7 @@ exports[`renders component data 1`] = ` @@ -313,7 +313,7 @@ exports[`renders component data 1`] = ` @@ -344,7 +344,7 @@ exports[`renders component data 1`] = ` @@ -375,7 +375,7 @@ exports[`renders component data 1`] = ` @@ -406,7 +406,7 @@ exports[`renders component data 1`] = ` @@ -437,7 +437,7 @@ exports[`renders component data 1`] = ` @@ -482,7 +482,7 @@ exports[`renders component data 1`] = ` @@ -513,7 +513,7 @@ exports[`renders component data 1`] = ` @@ -544,7 +544,7 @@ exports[`renders component data 1`] = ` @@ -575,7 +575,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap index 829db52f901..dcb39352b63 100644 --- a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap @@ -53,7 +53,7 @@ exports[`ChartPoint 1`] = ` @@ -70,7 +70,7 @@ exports[`ChartPoint 1`] = ` @@ -145,7 +145,7 @@ exports[`ChartPoint 2`] = ` @@ -162,7 +162,7 @@ exports[`ChartPoint 2`] = ` @@ -247,7 +247,7 @@ exports[`renders component data 1`] = ` @@ -264,7 +264,7 @@ exports[`renders component data 1`] = ` @@ -281,7 +281,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap index b65eb308af3..32a4e72ae63 100644 --- a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap +++ b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap @@ -1181,7 +1181,7 @@ exports[`renders component data 1`] = ` @@ -1212,7 +1212,7 @@ exports[`renders component data 1`] = ` @@ -1243,7 +1243,7 @@ exports[`renders component data 1`] = ` @@ -1274,7 +1274,7 @@ exports[`renders component data 1`] = ` @@ -1305,7 +1305,7 @@ exports[`renders component data 1`] = ` @@ -1336,7 +1336,7 @@ exports[`renders component data 1`] = ` @@ -1367,7 +1367,7 @@ exports[`renders component data 1`] = ` @@ -1412,7 +1412,7 @@ exports[`renders component data 1`] = ` @@ -1443,7 +1443,7 @@ exports[`renders component data 1`] = ` @@ -1474,7 +1474,7 @@ exports[`renders component data 1`] = ` @@ -1505,7 +1505,7 @@ exports[`renders component data 1`] = ` @@ -1536,7 +1536,7 @@ exports[`renders component data 1`] = ` @@ -1567,7 +1567,7 @@ exports[`renders component data 1`] = ` @@ -1598,7 +1598,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap index d82be9c98f6..401e1eab773 100644 --- a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap +++ b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap @@ -361,7 +361,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -392,7 +392,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -423,7 +423,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -454,7 +454,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -499,7 +499,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -530,7 +530,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -561,7 +561,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -592,7 +592,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -623,7 +623,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 diff --git a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap index ec669d02c84..6d8ee5955dd 100644 --- a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap @@ -179,7 +179,7 @@ exports[`renders component data 1`] = ` @@ -210,7 +210,7 @@ exports[`renders component data 1`] = ` @@ -241,7 +241,7 @@ exports[`renders component data 1`] = ` @@ -272,7 +272,7 @@ exports[`renders component data 1`] = ` @@ -303,7 +303,7 @@ exports[`renders component data 1`] = ` @@ -348,7 +348,7 @@ exports[`renders component data 1`] = ` @@ -379,7 +379,7 @@ exports[`renders component data 1`] = ` @@ -410,7 +410,7 @@ exports[`renders component data 1`] = ` @@ -441,7 +441,7 @@ exports[`renders component data 1`] = ` @@ -472,7 +472,7 @@ exports[`renders component data 1`] = ` @@ -503,7 +503,7 @@ exports[`renders component data 1`] = ` diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 638e6500223..63615d9d0c2 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -55,7 +55,7 @@ "tslib": "^2.6.2" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.180", + "@patternfly/patternfly": "6.0.0-alpha.187", "case-anything": "^2.1.13", "css": "^3.0.0", "fs-extra": "^11.2.0" diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx index 4629b16cb0f..5ecf9d6dfdc 100644 --- a/packages/react-core/src/components/Page/Page.tsx +++ b/packages/react-core/src/components/Page/Page.tsx @@ -170,7 +170,7 @@ class Page extends React.Component { isMobile = () => // eslint-disable-next-line radix - this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10); + this.getWindowWidth() < Number.parseInt(globalBreakpointXl.value, 10) * 16; resize = (_event?: MouseEvent | TouchEvent | React.KeyboardEvent) => { const { onPageResize } = this.props; diff --git a/packages/react-core/src/components/Toolbar/Toolbar.tsx b/packages/react-core/src/components/Toolbar/Toolbar.tsx index 225aadae9b1..dd014ca1ec4 100644 --- a/packages/react-core/src/components/Toolbar/Toolbar.tsx +++ b/packages/react-core/src/components/Toolbar/Toolbar.tsx @@ -38,8 +38,6 @@ export interface ToolbarProps extends React.HTMLProps, OUIAProps isFullHeight?: boolean; /** Flag indicating the toolbar is static */ isStatic?: boolean; - /** Flag indicating the toolbar should use the Page insets */ - usePageInsets?: boolean; /** Flag indicating the toolbar should stick to the top of its container */ isSticky?: boolean; /** Insets at various breakpoints. */ @@ -140,7 +138,6 @@ class Toolbar extends React.Component { isFullHeight, isStatic, inset, - usePageInsets, isSticky, ouiaId, numberOfFiltersText, @@ -164,7 +161,6 @@ class Toolbar extends React.Component { styles.toolbar, isFullHeight && styles.modifiers.fullHeight, isStatic && styles.modifiers.static, - usePageInsets && styles.modifiers.pageInsets, isSticky && styles.modifiers.sticky, formatBreakpointMods(inset, styles, '', getBreakpoint(width)), colorVariant === 'primary' && styles.modifiers.primary, 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..970f6741e2c 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'; @@ -180,7 +189,15 @@ class ToolbarGroupWithRef extends React.Component {
{ }; /** 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..d4df42263ac 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 && !customLabelGroupContent; return (
- {collapseListedFilters && numberOfFilters > 0 && !isExpanded && ( - - {numberOfFiltersText(numberOfFilters)} + {(showNumberOfFilters || showDefaultClearFilter || customLabelGroupContent) && ( + + {showNumberOfFilters && {numberOfFiltersText(numberOfFilters)}} + {showDefaultClearFilter && ( + + + + )} + {customLabelGroupContent && customLabelGroupContent} )} - {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..298b6b7e6e3 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, @@ -260,10 +251,17 @@ class ToolbarToggleGroup extends React.Component { className={css( styles.toolbarGroup, styles.modifiers.toggleGroup, - variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'], + variant && + styles.modifiers[ + toCamel(variant) as + | 'filterGroup' + | 'actionGroup' + | 'actionGroupInline' + | 'actionGroupPlain' + | 'labelGroup' + ], 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/ToolbarUtils.tsx b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx index 309eaa82bb8..dc68a0ae67f 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx @@ -45,8 +45,8 @@ export const ToolbarContentContext = React.createContext { expect(asFragment()).toMatchSnapshot(); }); - it('should render with page inset flag', () => { - const items = ( - - Test - Test 2 - - Test 3 - - ); - - const { asFragment } = render( - - {items} - - ); - - expect(asFragment()).toMatchSnapshot(); - }); - it('should render with custom label content', () => { const items = ( 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..f56e91da1cf 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 @@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
2 filters applied
-
-
- -
-
- -
-
- - -`; - -exports[`Toolbar should render with page inset flag 1`] = ` - -
-
-
- Test -
-
- Test 2 +
-
- Test 3 +
- `; 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..19c6a9fabb1 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx @@ -5,27 +5,31 @@ import { Button } from '@patternfly/react-core'; export const ToolbarSpacers: React.FunctionComponent = () => { const items = ( - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - + + + + + + + + - + diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx index aa696dae80f..3ba89ed6a1d 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx @@ -203,11 +203,11 @@ export const ToolbarStacked: React.FunctionComponent = () => { - } breakpoint="lg"> + } breakpoint="lg"> {toggleGroupItems} - + diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx index 9f2fc9e2a3a..37979549db4 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx @@ -15,7 +15,7 @@ export const ToolbarSticky: React.FunctionComponent = () => { - + { } breakpoint="xl"> {toggleGroupItems} - +