Skip to content

Commit

Permalink
chore(Toolbar): add different gap props to examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfrances17
mfrances17 committed Jan 17, 2025
1 parent b6b8582 commit b075c2a
Show file tree
Hide file tree
Showing 2 changed files with 233 additions and 15 deletions.
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Toolbar/examples/Toolbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".

```ts file="./ToolbarSpacers.tsx"

Expand Down
246 changes: 232 additions & 14 deletions packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,264 @@ import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/
import { Button } from '@patternfly/react-core';

export const ToolbarSpacers: React.FunctionComponent = () => {
const items = (
const groupGapItems = (
<React.Fragment>
<ToolbarGroup variant="action-group">
<ToolbarItem>
<Button variant="secondary">Action</Button>
<Button variant="secondary">Default Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Action</Button>
<Button variant="secondary">Default Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup variant="action-group" gap={{ default: 'gapNone' }}>
<ToolbarItem>
<Button variant="secondary">Action</Button>
<Button variant="secondary">No Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Action</Button>
<Button variant="secondary">No Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup variant="action-group" gap={{ lg: 'gapSm' }}>
<ToolbarGroup variant="action-group" gap={{ default: 'gapSm' }}>
<ToolbarItem>
<Button variant="secondary">Action</Button>
<Button variant="secondary">Small Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="primary">Action</Button>
<Button variant="secondary">Small Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup variant="action-group" gap={{ lg: 'gapLg' }}>
<ToolbarGroup variant="action-group" gap={{ default: 'gapXl' }}>
<ToolbarItem>
<Button variant="secondary">Extra Large Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Gap</Button>
</ToolbarItem>
</ToolbarGroup>
</React.Fragment>
);

const groupColumnGapItems = (
<React.Fragment>
<ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapNone' }}>
<ToolbarItem className="pf-m-wrap">
<Button variant="secondary">No Column Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Column Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapSm' }}>
<ToolbarItem className="pf-m-wrap">
<Button variant="secondary">Small Column Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Small Column Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapXl' }}>
<ToolbarItem className="pf-m-wrap">
<Button variant="secondary">Extra Large Column Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Column Gap</Button>
</ToolbarItem>
</ToolbarGroup>
</React.Fragment>
);

const groupRowGapItems = (
<React.Fragment>
<ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapNone' }}>
<ToolbarItem>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
</ToolbarGroup>
<ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapSm' }}>
<ToolbarItem>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Action</Button>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Action</Button>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
</ToolbarGroup>
<ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapXl' }}>
<ToolbarItem>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
</ToolbarGroup>
</React.Fragment>
);

const itemGapItems = (
<React.Fragment>
<ToolbarGroup className="pf-m-wrap" variant="action-group">
<ToolbarItem gap={{ default: 'gapNone' }}>
<Button variant="secondary">No Gap</Button>
<Button variant="secondary">No Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarItem gap={{ default: 'gapSm' }}>
<Button variant="secondary">Small Gap</Button>
<Button variant="secondary">Small Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarItem gap={{ default: 'gapXl' }}>
<Button variant="secondary">Extra Large Gap</Button>
<Button variant="secondary">Extra Large Gap</Button>
</ToolbarItem>
</ToolbarGroup>
</React.Fragment>
);

const itemColumnGapItems = (
<React.Fragment>
<ToolbarGroup className="pf-m-wrap" variant="action-group">
<ToolbarItem columnGap={{ default: 'columnGapNone' }}>
<Button variant="secondary">No Column Gap</Button>
<Button variant="secondary">No Column Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarItem columnGap={{ default: 'columnGapSm' }}>
<Button variant="secondary">Small Column Gap</Button>
<Button variant="secondary">Small Column Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarItem columnGap={{ default: 'columnGapXl' }}>
<Button variant="secondary">Extra Large Column Gap</Button>
<Button variant="secondary">Extra Large Column Gap</Button>
</ToolbarItem>
</ToolbarGroup>
</React.Fragment>
);

const itemRowGapItems = (
<React.Fragment>
<ToolbarGroup variant="action-group">
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
<Button variant="secondary">No Row Gap</Button>
<Button variant="secondary">No Row Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
<Button variant="secondary">Small Row Gap</Button>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
<Button variant="secondary">Extra Large Row Gap</Button>
<Button variant="secondary">Extra Large Row Gap</Button>
</ToolbarItem>
</ToolbarGroup>
</React.Fragment>
);

return (
<Toolbar id="toolbar-spacers">
<ToolbarContent>{items}</ToolbarContent>
</Toolbar>
<>
<strong>Toolbar Group Spacing:</strong>
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{groupGapItems}</ToolbarContent>
</Toolbar>
<strong>Using column gap</strong>
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{groupColumnGapItems}</ToolbarContent>
</Toolbar>
<strong>Using row gap</strong>
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{groupRowGapItems}</ToolbarContent>
</Toolbar>
<br />
<strong>Toolbar Item Spacing:</strong>
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{itemGapItems}</ToolbarContent>
</Toolbar>
<strong>Using column gap</strong>
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{itemColumnGapItems}</ToolbarContent>
</Toolbar>
<strong>Using row gap</strong>
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{itemRowGapItems}</ToolbarContent>
</Toolbar>
</>
);
};

0 comments on commit b075c2a

Please sign in to comment.