@patternfly/patternfly 6.0.0-alpha.135 → 6.0.0-alpha.136
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Toolbar/toolbar.css +108 -54
- package/components/Toolbar/toolbar.scss +2 -1
- package/components/_index.css +108 -54
- package/docs/components/Toolbar/examples/Toolbar.md +6 -3
- package/package.json +1 -1
- package/patternfly-no-globals.css +108 -54
- package/patternfly.css +108 -54
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -6,14 +6,16 @@ cssPrefix: pf-v6-c-toolbar
|
|
|
6
6
|
|
|
7
7
|
<!-- TODO: add documentation for resize observer/responsive variable usage -->
|
|
8
8
|
|
|
9
|
-
Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolbar__item`), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default `column-gap` value for items and groups is set to `--pf-v6-c--ColumnGap`, whose value is `--pf-t--global--spacer--sm` or 8px.
|
|
9
|
+
Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolbar__item`), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default `column-gap` value for items and groups is set to `--pf-v6-c--ColumnGap`, whose value is `--pf-t--global--spacer--md` or 16px. The default `row-gap` value for items and groups is set to `--pf-v6-c--RowGap`, whose value is `--pf-t--global--spacer--sm` or 8px.
|
|
10
10
|
|
|
11
11
|
### Default spacing for items and groups:
|
|
12
12
|
|
|
13
13
|
| Class | CSS Variable | Computed Value |
|
|
14
14
|
| -- | -- | -- |
|
|
15
|
-
| `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `
|
|
16
|
-
| `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `
|
|
15
|
+
| `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
|
|
16
|
+
| `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
|
|
17
|
+
| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
18
|
+
| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
17
19
|
|
|
18
20
|
### Toolbar item types
|
|
19
21
|
|
|
@@ -2245,3 +2247,4 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
2245
2247
|
| Class | Applied to | Outcome |
|
|
2246
2248
|
| -- | -- | -- |
|
|
2247
2249
|
| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
2250
|
+
| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|