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 081c5d999c4..a74b63d5b53 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
@@ -380,7 +380,7 @@ A 0 0 0 0 1, 312.5, 85
index="0"
role="presentation"
shape-rendering="auto"
- style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--200, #92c5f9); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
+ style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--200, #e0e0e0); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
/>
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index b7dee972d53..8f0cd49695c 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -55,7 +55,7 @@
"tslib": "^2.5.0"
},
"devDependencies": {
- "@patternfly/patternfly": "6.0.0-alpha.135",
+ "@patternfly/patternfly": "6.0.0-alpha.139",
"@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-replace": "^5.0.2",
diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index 770618fe846..033fd9ce414 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -34,21 +34,119 @@ export interface ToolbarGroupProps extends Omit,
alignItems?: 'start' | 'center' | 'baseline' | 'default';
/** Vertical alignment */
alignSelf?: 'start' | 'center' | 'baseline' | 'default';
- /** Spacers at various breakpoints. */
- spacer?: {
- default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- md?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- lg?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
+ /** Sets both the column and row gap at various breakpoints. */
+ gap?: {
+ default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
};
- /** Space items at various breakpoints. */
- spaceItems?: {
- default?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
- md?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
- lg?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
- xl?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
- '2xl'?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
+ /** Sets only the column gap at various breakpoints. */
+ columnGap?: {
+ default?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ md?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ lg?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ xl?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ '2xl'?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ };
+ /** Sets only the row gap at various breakpoints. */
+ rowGap?: {
+ default?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ md?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ lg?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ xl?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ '2xl'?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
};
/** Content to be rendered inside the data toolbar group */
children?: React.ReactNode;
@@ -65,8 +163,9 @@ class ToolbarGroupWithRef extends React.Component {
align,
alignItems,
alignSelf,
- spacer,
- spaceItems,
+ gap,
+ columnGap,
+ rowGap,
className,
variant,
children,
@@ -84,8 +183,9 @@ class ToolbarGroupWithRef extends React.Component {
variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
formatBreakpointMods(align, styles, '', getBreakpoint(width)),
- formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
- formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
alignItems === 'start' && styles.modifiers.alignItemsStart,
alignItems === 'center' && styles.modifiers.alignItemsCenter,
alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
index e0134b2b60f..5d4338a8100 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
@@ -38,13 +38,119 @@ export interface ToolbarItemProps extends React.HTMLProps {
alignItems?: 'start' | 'center' | 'baseline' | 'default';
/** Vertical alignment */
alignSelf?: 'start' | 'center' | 'baseline' | 'default';
- /** Spacers at various breakpoints. */
- spacer?: {
- default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- md?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- lg?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
+ /** Sets both the column and row gap at various breakpoints. */
+ gap?: {
+ default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ };
+ /** Sets only the column gap at various breakpoints. */
+ columnGap?: {
+ default?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ md?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ lg?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ xl?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ '2xl'?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ };
+ /** Sets only the row gap at various breakpoints. */
+ rowGap?: {
+ default?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ md?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ lg?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ xl?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ '2xl'?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
};
/** id for this data toolbar item */
id?: string;
@@ -60,7 +166,9 @@ export const ToolbarItem: React.FunctionComponent = ({
className,
variant,
visibility,
- spacer,
+ gap,
+ columnGap,
+ rowGap,
align,
alignSelf,
alignItems,
@@ -86,7 +194,9 @@ export const ToolbarItem: React.FunctionComponent = ({
isOverflowContainer && styles.modifiers.overflowContainer,
formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
formatBreakpointMods(align, styles, '', getBreakpoint(width)),
- formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
alignItems === 'start' && styles.modifiers.alignItemsStart,
alignItems === 'center' && styles.modifiers.alignItemsCenter,
alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
index f6f1d075164..5c662b67b1a 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
@@ -35,21 +35,119 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
xl?: 'alignEnd' | 'alignStart';
'2xl'?: 'alignEnd' | 'alignStart';
};
- /** Spacers at various breakpoints. */
- spacer?: {
- default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- md?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- lg?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
- '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
+ /** Sets both the column and row gap at various breakpoints. */
+ gap?: {
+ default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+ '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
};
- /** Space items at various breakpoints. */
- spaceItems?: {
- default?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
- md?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
- lg?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
- xl?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
- '2xl'?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
+ /** Sets only the column gap at various breakpoints. */
+ columnGap?: {
+ default?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ md?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ lg?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ xl?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ '2xl'?:
+ | 'columnGapNone'
+ | 'columnGapXs'
+ | 'columnGapSm'
+ | 'columnGapMd'
+ | 'columnGapLg'
+ | 'columnGapXl'
+ | 'columnGap_2xl'
+ | 'columnGap_3xl'
+ | 'columnGap_4xl';
+ };
+ /** Sets only the row gap at various breakpoints. */
+ rowGap?: {
+ default?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ md?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ lg?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ xl?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
+ '2xl'?:
+ | 'rowGapNone'
+ | 'rowGapXs'
+ | 'rowGapSm'
+ | 'rowGapMd'
+ | 'rowGapLg'
+ | 'rowGapXl'
+ | 'rowGap_2xl'
+ | 'rowGao_3xl'
+ | 'rowGap_4xl';
};
/** Reference to a chip container group for filters inside the toolbar toggle group */
chipContainerRef?: React.RefObject;
@@ -79,8 +177,9 @@ class ToolbarToggleGroup extends React.Component {
visibility,
breakpoint,
alignment,
- spacer,
- spaceItems,
+ gap,
+ columnGap,
+ rowGap,
className,
children,
isExpanded,
@@ -166,8 +265,9 @@ class ToolbarToggleGroup extends React.Component {
formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
- formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
- formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
+ formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
className
)}
{...props}
diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index d662a229a4d..50a1bd1c7e5 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -28,7 +28,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 ``. 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 via their parents' `gap` or `columnGap` property. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
```ts file="./ToolbarSpacers.tsx"
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
index 8afb2db24b7..fc34b5631cd 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
@@ -5,34 +5,27 @@ import { Button } from '@patternfly/react-core';
export const ToolbarSpacers: React.FunctionComponent = () => {
const items = (
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
index cfc57f6a492..3dd6cf313ab 100644
--- a/packages/react-core/src/demos/DashboardHeader.tsx
+++ b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -101,7 +101,7 @@ export const DashboardHeader: React.FC = ({ notificationBa
{notificationBadge ?? (
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index b309911b911..a5b7926f9b6 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -176,7 +176,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
const headerToolbar = (
-
+
{
const headerToolbar = (
-
+
{
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
index 8e60337b025..61173162015 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
@@ -366,7 +366,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 1a4de934f38..2d5a6a9ab12 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -383,7 +383,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index f181f47ce8b..b9e6cf5ed9d 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -130,7 +130,7 @@ export const NavFlyout: React.FunctionComponent = () => {
} onClick={() => {}} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index 9da33b2b550..211db676128 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -109,7 +109,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
} onClick={() => {}} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index 02b1b9fa24f..e45c2e7960f 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -158,7 +158,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
} onClick={() => {}} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index af51b03a45e..6576ce96001 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -125,7 +125,7 @@ export const NavManual: React.FunctionComponent = () => {
} onClick={() => {}} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index a21f7faaf62..39dff1f8a09 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -121,7 +121,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 29cc583798d..1ce3e7bd3e2 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -121,7 +121,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 92ffd0064e3..c268083c9c3 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -113,7 +113,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
} />
diff --git a/packages/react-core/src/helpers/util.ts b/packages/react-core/src/helpers/util.ts
index 88ba6a266ca..a688901585a 100644
--- a/packages/react-core/src/helpers/util.ts
+++ b/packages/react-core/src/helpers/util.ts
@@ -273,12 +273,14 @@ export const setBreakpointCssVars = (
export interface Mods {
default?: string;
+ xs?: string;
sm?: string;
md?: string;
lg?: string;
xl?: string;
'2xl'?: string;
'3xl'?: string;
+ '4xl'?: string;
}
/**
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 48f876967b1..b4891e491dc 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
"test:a11y": "patternfly-a11y --config patternfly-a11y.config"
},
"dependencies": {
- "@patternfly/patternfly": "6.0.0-alpha.135",
+ "@patternfly/patternfly": "6.0.0-alpha.139",
"@patternfly/react-charts": "^8.0.0-alpha.21",
"@patternfly/react-code-editor": "^6.0.0-alpha.59",
"@patternfly/react-core": "^6.0.0-alpha.59",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 79c8ff83971..2a97cd39a6c 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -33,7 +33,7 @@
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-regular-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
- "@patternfly/patternfly": "6.0.0-alpha.135",
+ "@patternfly/patternfly": "6.0.0-alpha.139",
"fs-extra": "^11.1.1",
"glob": "^7.1.2",
"rimraf": "^2.6.2",
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index d1ae2e42b4f..bfb7b327183 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
"clean": "rimraf dist css"
},
"devDependencies": {
- "@patternfly/patternfly": "6.0.0-alpha.135",
+ "@patternfly/patternfly": "6.0.0-alpha.139",
"camel-case": "^3.0.0",
"css": "^2.2.3",
"fs-extra": "^11.1.1",
diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx
index 347fc665b46..1a6ccc6ab28 100644
--- a/packages/react-table/src/demos/DashboardHeader.tsx
+++ b/packages/react-table/src/demos/DashboardHeader.tsx
@@ -101,7 +101,7 @@ export const DashboardHeader: React.FC = ({ notificationBa
{notificationBadge ?? (
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 88a0c0ed191..0ac39171178 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,7 +29,7 @@
"clean": "rimraf dist"
},
"devDependencies": {
- "@patternfly/patternfly": "6.0.0-alpha.135",
+ "@patternfly/patternfly": "6.0.0-alpha.139",
"css": "^2.2.3",
"fs-extra": "^11.1.1",
"glob": "^7.1.2",
diff --git a/yarn.lock b/yarn.lock
index bd7c6b4a1cf..cf158bb14e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2920,10 +2920,10 @@
puppeteer-cluster "^0.23.0"
xmldoc "^1.1.2"
-"@patternfly/patternfly@6.0.0-alpha.135":
- version "6.0.0-alpha.135"
- resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.135.tgz#c085ec494b9afba978b971388b78c6923d82d9e0"
- integrity sha512-e3w5Yh8UWWaIjOvaSCHjZeewK94P0AJtAodf/KweXZET9OyEsDXFb4RhWI5f28HYRbzR6cyRkR+YZY2KYQq0Wg==
+"@patternfly/patternfly@6.0.0-alpha.139":
+ version "6.0.0-alpha.139"
+ resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.139.tgz#417d6d3cf5e923a9cff28c99ecd8a3489fa935ff"
+ integrity sha512-RfM0pvIhWwaSzobKh/mjkTqYMnAdeOqC1wH9zg9zTab9GyUQdeGkRkd9gpDEQhuuN/bhNpO03W6jpaqauxfpmA==
"@pkgjs/parseargs@^0.11.0":
version "0.11.0"