diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx index 9a0b31d2d93..27968ecc0d1 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx @@ -36,7 +36,7 @@ export interface ToolbarGroupProps extends Omit, alignSelf?: 'start' | 'center' | 'baseline' | 'default'; /** Sets both the column and row gap at various breakpoints. */ gap?: { - default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl'; + default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | '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'; @@ -148,112 +148,6 @@ export interface ToolbarGroupProps extends Omit, | 'rowGao_3xl' | 'rowGap_4xl'; }; - /** Sets the margin-inline-start at various breakpoints. */ - marginInlineStart?: { - default?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - md?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - lg?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - xl?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - '2xl'?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - }; - /** Sets the margin-inline-end at various breakpoints. */ - marginInlineEnd?: { - default?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - md?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - lg?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - xl?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - '2xl'?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - }; /** Content to be rendered inside the data toolbar group */ children?: React.ReactNode; /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */ @@ -272,8 +166,6 @@ class ToolbarGroupWithRef extends React.Component { gap, columnGap, rowGap, - marginInlineStart, - marginInlineEnd, className, variant, children, @@ -294,8 +186,6 @@ class ToolbarGroupWithRef extends React.Component { formatBreakpointMods(gap, styles, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)), - formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)), - formatBreakpointMods(marginInlineEnd, 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 19261704d48..5d4338a8100 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx @@ -152,112 +152,6 @@ export interface ToolbarItemProps extends React.HTMLProps { | 'rowGao_3xl' | 'rowGap_4xl'; }; - /** Sets the margin-inline-start at various breakpoints. */ - marginInlineStart?: { - default?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - md?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - lg?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - xl?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - '2xl'?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - }; - /** Sets the margin-inline-end at various breakpoints. */ - marginInlineEnd?: { - default?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - md?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - lg?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - xl?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - '2xl'?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - }; /** id for this data toolbar item */ id?: string; /** Flag indicating if the expand-all variant is expanded or not */ @@ -275,8 +169,6 @@ export const ToolbarItem: React.FunctionComponent = ({ gap, columnGap, rowGap, - marginInlineStart, - marginInlineEnd, align, alignSelf, alignItems, @@ -305,8 +197,6 @@ export const ToolbarItem: React.FunctionComponent = ({ formatBreakpointMods(gap, styles, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)), - formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)), - formatBreakpointMods(marginInlineEnd, 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 b5a6ca4b866..5c662b67b1a 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx @@ -149,112 +149,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps { | 'rowGao_3xl' | 'rowGap_4xl'; }; - /** Sets the margin-inline-start at various breakpoints. */ - marginInlineStart?: { - default?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - md?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - lg?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - xl?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - '2xl'?: - | 'marginInlineStartNone' - | 'marginInlineStartXl' - | 'marginInlineStartSm' - | 'marginInlineStartMd' - | 'marginInlineStartLg' - | 'marginInlineStartXl' - | 'marginInlineStart2xl' - | 'marginInlineStart3xl' - | 'marginInlineStart4xl'; - }; - /** Sets the margin-inline-end at various breakpoints. */ - marginInlineEnd?: { - default?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - md?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - lg?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - xl?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - '2xl'?: - | 'marginInlineEndNone' - | 'marginInlineEndXs' - | 'marginInlineEndSm' - | 'marginInlineEndMd' - | 'marginInlineEndLg' - | 'marginInlineEndXl' - | 'marginInlineEnd2xl' - | 'marginInlineEnd3xl' - | 'marginInlineEnd4xl'; - }; /** Reference to a chip container group for filters inside the toolbar toggle group */ chipContainerRef?: React.RefObject; /** Optional callback for clearing all filters in the toolbar toggle group */ @@ -286,8 +180,6 @@ class ToolbarToggleGroup extends React.Component { gap, columnGap, rowGap, - marginInlineStart, - marginInlineEnd, className, children, isExpanded, @@ -376,8 +268,6 @@ class ToolbarToggleGroup extends React.Component { formatBreakpointMods(gap, styles, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)), - formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)), - formatBreakpointMods(marginInlineEnd, 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 0babb575c5c..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 via their parents' `gap` or `columnGap` property. To adjust the size of the space between individual items, use the `marginInlineStart` and `marginInlineEnd` properties of each ``. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl". +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 c0c868e7d0b..fc34b5631cd 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx @@ -8,24 +8,17 @@ export const ToolbarSpacers: React.FunctionComponent = () => { - + - + - + - +