Skip to content

Commit

Permalink
feat(Toolbar): updated spacer props to gap (#10418)
Browse files Browse the repository at this point in the history 
* feat(Toolbar): updated spacer props to gap

* Updated additional examples/demos

* Removed margin props

* Definitely did not forget to add underscore back

* Updated core versions

* Updated snapshots
  • Loading branch information
@thatblindgeye
thatblindgeye authored May 23, 2024
1 parent 053a1d9 commit 29578a2
Show file tree
Hide file tree
Showing 28 changed files with 392 additions and 87 deletions.
4 changes: 2 additions & 2 deletions packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
/>
</g>
<g
Expand All @@ -399,7 +399,7 @@ A 0 0 0 0 1, 225, 85
index="0"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--100, #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--100, #f2f2f2); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
/>
</g>
<g
Expand Down
6 changes: 3 additions & 3 deletions ...charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ A 0 0 0 0 1, 399.99999999976666, 104.8
index="0"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--300, #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--300, #c7c7c7); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
/>
</g>
<g
Expand All @@ -102,7 +102,7 @@ A 0 0 0 0 1, 399.9999999995882, 104.8
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;"
/>
</g>
<g
Expand All @@ -121,7 +121,7 @@ A 0 0 0 0 1, 399.9999999993, 104.8
index="0"
role="presentation"
shape-rendering="auto"
style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--100, #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--100, #f2f2f2); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
/>
</g>
</svg>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
136 changes: 118 additions & 18 deletions packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,119 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
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;
Expand All @@ -65,8 +163,9 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
align,
alignItems,
alignSelf,
spacer,
spaceItems,
gap,
columnGap,
rowGap,
className,
variant,
children,
Expand All @@ -84,8 +183,9 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
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,
Expand Down
128 changes: 119 additions & 9 deletions packages/react-core/src/components/Toolbar/ToolbarItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,119 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
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;
Expand All @@ -60,7 +166,9 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
className,
variant,
visibility,
spacer,
gap,
columnGap,
rowGap,
align,
alignSelf,
alignItems,
Expand All @@ -86,7 +194,9 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
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,
Expand Down
Loading

0 comments on commit 29578a2

Please sign in to comment.