Skip to content

chore(Toolbar): add different gap props to examples #11440

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thatblindgeye merged 4 commits into from
Jan 28, 2025
Merged

chore(Toolbar): add different gap props to examples #11440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
43413ec
chore(Toolbar): add different gap props to examples
mfrances17 Jan 17, 2025
812c1cb
use h4 for example headings
mfrances17 Jan 23, 2025
77716f8
rm redundant wrap classes
mfrances17 Jan 23, 2025
fefa4b4
reformat and restructure examples
mfrances17 Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions packages/react-core/src/components/Toolbar/examples/Toolbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,6 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive

```

### Toolbar item spacers

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".

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

```

### With adjusted inset

To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.
Expand Down Expand Up @@ -120,3 +110,20 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
```ts file="./ToolbarStacked.tsx"

```

## Examples with toolbar spacers
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 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".

### Toolbar group spacers

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

```

### Toolbar item spacers

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

```
185 changes: 185 additions & 0 deletions packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
import React from 'react';
import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
import { Button } from '@patternfly/react-core';

export const ToolbarGroupSpacers: React.FunctionComponent = () => {
const groupGapItems = (
<React.Fragment>
<ToolbarGroup>
<ToolbarItem>
<Button variant="secondary">Default Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Default Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup gap={{ default: 'gapNone' }}>
<ToolbarItem>
<Button variant="secondary">No Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup gap={{ default: 'gapSm' }}>
<ToolbarItem>
<Button variant="secondary">Small Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Small Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup 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 columnGap={{ default: 'columnGapNone' }}>
<ToolbarItem>
<Button variant="secondary">No Column Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">No Column Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup columnGap={{ default: 'columnGapSm' }}>
<ToolbarItem>
<Button variant="secondary">Small Column Gap</Button>
</ToolbarItem>
<ToolbarItem>
<Button variant="secondary">Small Column Gap</Button>
</ToolbarItem>
</ToolbarGroup>
<ToolbarItem variant="separator"></ToolbarItem>
<ToolbarGroup columnGap={{ default: 'columnGapXl' }}>
<ToolbarItem>
<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" 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" 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">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>
<Button variant="secondary">Small Row Gap</Button>
</ToolbarItem>
<ToolbarItem variant="separator"></ToolbarItem>
</ToolbarGroup>
<ToolbarGroup className="pf-m-wrap" 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>
);

return (
<>
Using gap
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{groupGapItems}</ToolbarContent>
</Toolbar>
Using column gap
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{groupColumnGapItems}</ToolbarContent>
</Toolbar>
Using row gap
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{groupRowGapItems}</ToolbarContent>
</Toolbar>
<br />
</>
);
};
91 changes: 91 additions & 0 deletions packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React from 'react';
import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
import { Button } from '@patternfly/react-core';

export const ToolbarItemSpacers: React.FunctionComponent = () => {
const itemGapItems = (
<React.Fragment>
<ToolbarGroup className="pf-m-wrap">
<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">
<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>
<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 (
<>
Using gap
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{itemGapItems}</ToolbarContent>
</Toolbar>
Using column gap
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{itemColumnGapItems}</ToolbarContent>
</Toolbar>
Using row gap
<br />
<br />
<Toolbar id="toolbar-spacers">
<ToolbarContent>{itemRowGapItems}</ToolbarContent>
</Toolbar>
</>
);
};
48 changes: 0 additions & 48 deletions packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
View file
Open in desktop

This file was deleted.

Loading