@patternfly/patternfly 5.0.0-alpha.65 → 5.0.0-alpha.66

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.
Files changed (11) hide show
  1. package/components/Masthead/masthead.css +2 -0
  2. package/components/Masthead/masthead.scss +2 -0
  3. package/components/Toolbar/toolbar.css +49 -15
  4. package/components/Toolbar/toolbar.scss +54 -18
  5. package/docs/components/Toolbar/examples/Toolbar.md +4 -2
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +51 -15
  8. package/patternfly-theme-dark-unversioned.css +51 -15
  9. package/patternfly.css +51 -15
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/Masthead/masthead.css CHANGED
@@ -89,6 +89,7 @@
89
89
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
90
90
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
91
91
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
92
+ --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
92
93
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
93
94
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
94
95
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
@@ -161,6 +162,7 @@
161
162
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
162
163
  }
163
164
  .pf-v5-c-masthead .pf-v5-c-toolbar {
165
+ --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
164
166
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
165
167
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
166
168
  --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
package/components/Masthead/masthead.scss CHANGED
@@ -139,6 +139,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
139
139
  --#{$masthead}--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
140
140
 
141
141
  // Toolbar
142
+ --#{$masthead}--c-toolbar--AlignItems--base: center;
142
143
  --#{$masthead}--c-toolbar__content--PaddingRight: 0;
143
144
  --#{$masthead}--c-toolbar__content--PaddingLeft: 0;
144
145
  --#{$masthead}--c-toolbar__expandable-content--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -189,6 +190,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
189
190
  }
190
191
 
191
192
  .#{$toolbar} {
193
+ --#{$toolbar}--AlignItems--base: var(--#{$masthead}--c-toolbar--AlignItems--base);
192
194
  --#{$toolbar}__content--PaddingRight: var(--#{$masthead}--c-toolbar__content--PaddingRight);
193
195
  --#{$toolbar}__content--PaddingLeft: var(--#{$masthead}--c-toolbar__content--PaddingLeft);
194
196
  --#{$toolbar}__expandable-content--PaddingTop: var(--#{$masthead}--c-toolbar__expandable-content--PaddingTop);
package/components/Toolbar/toolbar.css CHANGED
@@ -48,6 +48,7 @@
48
48
  }
49
49
 
50
50
  .pf-v5-c-toolbar {
51
+ --pf-v5-c-toolbar--AlignItems--base: flex-start;
51
52
  --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
52
53
  --pf-v5-c-toolbar--RowGap--base: var(--pf-v5-global--spacer--lg);
53
54
  --pf-v5-c-toolbar--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
@@ -57,18 +58,20 @@
57
58
  --pf-v5-c-toolbar__item--Display: block;
58
59
  --pf-v5-c-toolbar__item--MinWidth--base: auto;
59
60
  --pf-v5-c-toolbar__item--AlignSelf: auto;
61
+ --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
60
62
  --pf-v5-c-toolbar__group--Display: flex;
61
- --pf-v5-c-toolbar__group--AlignItems: baseline;
63
+ --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
62
64
  --pf-v5-c-toolbar__group--AlignSelf: auto;
63
65
  --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
64
66
  --pf-v5-c-toolbar--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
65
67
  --pf-v5-c-toolbar--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
66
68
  --pf-v5-c-toolbar__content--Display: flex;
69
+ --pf-v5-c-toolbar__content--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
67
70
  --pf-v5-c-toolbar__content--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
68
71
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-global--spacer--md);
69
72
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-global--spacer--md);
70
73
  --pf-v5-c-toolbar__content-section--Display: flex;
71
- --pf-v5-c-toolbar__content-section--AlignItems: baseline;
74
+ --pf-v5-c-toolbar__content-section--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
72
75
  --pf-v5-c-toolbar__content-section--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
73
76
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
74
77
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -87,8 +90,8 @@
87
90
  --pf-v5-c-toolbar__group--m-chip-container__item--MarginTop: var(--pf-v5-global--spacer--md);
88
91
  --pf-v5-c-toolbar--spacer--base: var(--pf-v5-global--spacer--md);
89
92
  --pf-v5-c-toolbar__item--spacer: var(--pf-v5-c-toolbar--spacer--base);
90
- --pf-v5-c-toolbar__group--spacer: var(--pf-v5-c-toolbar--spacer--base);
91
93
  --pf-v5-c-toolbar__item--Width: auto;
94
+ --pf-v5-c-toolbar__group--spacer: var(--pf-v5-c-toolbar--spacer--base);
92
95
  --pf-v5-c-toolbar__group--m-toggle-group--spacer: var(--pf-v5-global--spacer--sm);
93
96
  --pf-v5-c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-v5-c-toolbar__group--spacer);
94
97
  --pf-v5-c-toolbar__group--m-icon-button-group--spacer: var(--pf-v5-c-toolbar__group--spacer);
@@ -113,7 +116,7 @@
113
116
  --pf-v5-c-toolbar--m-full-height--PaddingTop: 0;
114
117
  --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
115
118
  --pf-v5-c-toolbar--m-full-height__item--Display: flex;
116
- --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
119
+ --pf-v5-c-toolbar--m-full-height__item--AlignItems: var(--pf-v5-c-toolbar__group--AlignItems);
117
120
  position: relative;
118
121
  display: grid;
119
122
  row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -163,8 +166,8 @@
163
166
  .pf-v5-c-toolbar.pf-m-full-height .pf-v5-c-toolbar__item {
164
167
  align-self: stretch;
165
168
  }
166
- .pf-v5-c-toolbar.pf-m-full-height .pf-v5-c-toolbar__item {
167
- align-items: var(--pf-v5-c-toolbar--m-full-height__item--AlignItems);
169
+ .pf-v5-c-toolbar.pf-m-full-height :where(.pf-v5-c-toolbar__item) {
170
+ --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--m-full-height__item--AlignItems);
168
171
  }
169
172
  .pf-v5-c-toolbar.pf-m-static,
170
173
  .pf-v5-c-toolbar.pf-m-static .pf-v5-c-toolbar__content {
@@ -186,27 +189,39 @@
186
189
  .pf-v5-c-toolbar__group > .pf-v5-c-divider.pf-m-vertical:last-child {
187
190
  --pf-v5-c-toolbar--spacer: 0;
188
191
  }
189
-
190
- .pf-v5-c-toolbar__group {
191
- --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
192
- --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__group--Display);
193
- row-gap: var(--pf-v5-c-toolbar__group--RowGap);
194
- align-items: var(--pf-v5-c-toolbar__group--AlignItems);
195
- align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
196
- margin-right: var(--pf-v5-c-toolbar--spacer);
192
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-start,
193
+ .pf-v5-c-toolbar__group.pf-m-align-items-start {
194
+ align-items: flex-start;
197
195
  }
196
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-center,
198
197
  .pf-v5-c-toolbar__group.pf-m-align-items-center {
199
198
  align-items: center;
200
199
  }
200
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline,
201
201
  .pf-v5-c-toolbar__group.pf-m-align-items-baseline {
202
202
  align-items: baseline;
203
203
  }
204
+ .pf-v5-c-toolbar__content-section.pf-m-align-self-start,
205
+ .pf-v5-c-toolbar__group.pf-m-align-self-start {
206
+ align-self: flex-start;
207
+ }
208
+ .pf-v5-c-toolbar__content-section.pf-m-align-self-center,
204
209
  .pf-v5-c-toolbar__group.pf-m-align-self-center {
205
210
  align-self: center;
206
211
  }
212
+ .pf-v5-c-toolbar__content-section.pf-m-align-self-baseline,
207
213
  .pf-v5-c-toolbar__group.pf-m-align-self-baseline {
208
214
  align-self: baseline;
209
215
  }
216
+
217
+ .pf-v5-c-toolbar__group {
218
+ --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
219
+ --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__group--Display);
220
+ row-gap: var(--pf-v5-c-toolbar__group--RowGap);
221
+ align-items: var(--pf-v5-c-toolbar__group--AlignItems);
222
+ align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
223
+ margin-right: var(--pf-v5-c-toolbar--spacer);
224
+ }
210
225
  .pf-v5-c-toolbar__group.pf-m-button-group {
211
226
  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--m-button-group--spacer);
212
227
  }
@@ -247,6 +262,7 @@
247
262
  --pf-v5-c-toolbar__item--Width--base: var(--pf-v5-c-toolbar__item--Width);
248
263
  --pf-v5-c-toolbar__item--MinWidth--base: var(--pf-v5-c-toolbar__item--MinWidth);
249
264
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__item--Display);
265
+ align-items: var(--pf-v5-c-toolbar__item--AlignItems);
250
266
  align-self: var(--pf-v5-c-toolbar__item--AlignSelf);
251
267
  width: var(--pf-v5-c-toolbar__item--Width--base);
252
268
  min-width: var(--pf-v5-c-toolbar__item--MinWidth--base);
@@ -302,6 +318,18 @@
302
318
  --pf-v5-c-toolbar__item--MinWidth--base: var(--pf-v5-c-toolbar__item--MinWidth-on-2xl, var(--pf-v5-c-toolbar__item--MinWidth-on-xl, var(--pf-v5-c-toolbar__item--MinWidth-on-lg, var(--pf-v5-c-toolbar__item--MinWidth-on-md, var(--pf-v5-c-toolbar__item--MinWidth-on-sm, var(--pf-v5-c-toolbar__item--MinWidth))))));
303
319
  }
304
320
  }
321
+ .pf-v5-c-toolbar__item.pf-m-align-items-start {
322
+ align-items: flex-start;
323
+ }
324
+ .pf-v5-c-toolbar__item.pf-m-align-items-center {
325
+ align-items: center;
326
+ }
327
+ .pf-v5-c-toolbar__item.pf-m-align-items-baseline {
328
+ align-items: baseline;
329
+ }
330
+ .pf-v5-c-toolbar__item.pf-m-align-self-start {
331
+ align-self: flex-start;
332
+ }
305
333
  .pf-v5-c-toolbar__item.pf-m-align-self-center {
306
334
  align-self: center;
307
335
  }
@@ -358,7 +386,7 @@
358
386
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__content--Display);
359
387
  position: relative;
360
388
  row-gap: var(--pf-v5-c-toolbar__content--RowGap);
361
- align-items: center;
389
+ align-items: var(--pf-v5-c-toolbar__content--AlignItems);
362
390
  padding-right: var(--pf-v5-c-toolbar__content--PaddingRight);
363
391
  padding-left: var(--pf-v5-c-toolbar__content--PaddingLeft);
364
392
  }
@@ -369,9 +397,15 @@
369
397
  align-items: var(--pf-v5-c-toolbar__content-section--AlignItems);
370
398
  width: 100%;
371
399
  }
400
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-start {
401
+ align-items: flex-start;
402
+ }
372
403
  .pf-v5-c-toolbar__content-section.pf-m-align-items-center {
373
404
  align-items: center;
374
405
  }
406
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline {
407
+ align-items: baseline;
408
+ }
375
409
 
376
410
  .pf-v5-c-toolbar__expandable-content {
377
411
  position: absolute;
package/components/Toolbar/toolbar.scss CHANGED
@@ -6,6 +6,7 @@ $pf-v5-c-toolbar--spacer-map: build-spacer-map("none", "sm", "md", "lg");
6
6
  $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
7
7
 
8
8
  .#{$toolbar} {
9
+ --#{$toolbar}--AlignItems--base: flex-start;
9
10
  --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
10
11
  --#{$toolbar}--RowGap--base: var(--#{$pf-global}--spacer--lg); // row-gap between toolbar content elements
11
12
  --#{$toolbar}--RowGap: var(--#{$toolbar}--RowGap--base);
@@ -17,10 +18,11 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
17
18
  --#{$toolbar}__item--Display: block;
18
19
  --#{$toolbar}__item--MinWidth--base: auto;
19
20
  --#{$toolbar}__item--AlignSelf: auto;
21
+ --#{$toolbar}__item--AlignItems: var(--#{$toolbar}--AlignItems--base);
20
22
 
21
23
  // Group
22
24
  --#{$toolbar}__group--Display: flex;
23
- --#{$toolbar}__group--AlignItems: baseline;
25
+ --#{$toolbar}__group--AlignItems: var(--#{$toolbar}--AlignItems--base);
24
26
  --#{$toolbar}__group--AlignSelf: auto;
25
27
  --#{$toolbar}__group--RowGap: var(--#{$toolbar}--item--RowGap--base);
26
28
 
@@ -30,13 +32,14 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
30
32
 
31
33
  // Content
32
34
  --#{$toolbar}__content--Display: flex;
35
+ --#{$toolbar}__content--AlignItems: var(--#{$toolbar}--AlignItems--base);
33
36
  --#{$toolbar}__content--RowGap: var(--#{$toolbar}--RowGap--base);
34
37
  --#{$toolbar}__content--PaddingRight: var(--#{$pf-global}--spacer--md); // remove at breaking change
35
38
  --#{$toolbar}__content--PaddingLeft: var(--#{$pf-global}--spacer--md); // remove at breaking change
36
39
 
37
40
  // Content section
38
41
  --#{$toolbar}__content-section--Display: flex;
39
- --#{$toolbar}__content-section--AlignItems: baseline;
42
+ --#{$toolbar}__content-section--AlignItems: var(--#{$toolbar}--AlignItems--base);
40
43
  --#{$toolbar}__content-section--RowGap: var(--#{$toolbar}--item--RowGap--base);
41
44
 
42
45
  // Insets
@@ -67,8 +70,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
67
70
 
68
71
  // Spacer values
69
72
  --#{$toolbar}__item--spacer: var(--#{$toolbar}--spacer--base);
70
- --#{$toolbar}__group--spacer: var(--#{$toolbar}--spacer--base);
71
73
  --#{$toolbar}__item--Width: auto;
74
+ --#{$toolbar}__group--spacer: var(--#{$toolbar}--spacer--base);
72
75
 
73
76
  // Toggle group
74
77
  --#{$toolbar}__group--m-toggle-group--spacer: var(--#{$pf-global}--spacer--sm);
@@ -123,7 +126,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
123
126
  --#{$toolbar}--m-full-height--PaddingTop: 0;
124
127
  --#{$toolbar}--m-full-height--PaddingBottom: 0;
125
128
  --#{$toolbar}--m-full-height__item--Display: flex;
126
- --#{$toolbar}--m-full-height__item--AlignItems: center;
129
+ --#{$toolbar}--m-full-height__item--AlignItems: var(--#{$toolbar}__group--AlignItems);
127
130
 
128
131
  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
129
132
  --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__expandable-content--lg--PaddingRight);
@@ -177,8 +180,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
177
180
  align-self: stretch;
178
181
  }
179
182
 
180
- .#{$toolbar}__item {
181
- align-items: var(--#{$toolbar}--m-full-height__item--AlignItems);
183
+ :where(.#{$toolbar}__item) {
184
+ --#{$toolbar}__item--AlignItems: var(--#{$toolbar}--m-full-height__item--AlignItems);
182
185
  }
183
186
  }
184
187
 
@@ -209,18 +212,10 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
209
212
  --#{$toolbar}--spacer: 0;
210
213
  }
211
214
  }
212
- }
213
-
214
- // Group
215
- .#{$toolbar}__group {
216
- --#{$toolbar}--spacer: var(--#{$toolbar}__group--spacer);
217
-
218
- @include pf-v5-hidden-visible(var(--#{$toolbar}__group--Display));
219
215
 
220
- row-gap: var(--#{$toolbar}__group--RowGap);
221
- align-items: var(--#{$toolbar}__group--AlignItems);
222
- align-self: var(--#{$toolbar}__group--AlignSelf);
223
- margin-right: var(--#{$toolbar}--spacer);
216
+ &.pf-m-align-items-start {
217
+ align-items: flex-start;
218
+ }
224
219
 
225
220
  &.pf-m-align-items-center {
226
221
  align-items: center;
@@ -230,6 +225,10 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
230
225
  align-items: baseline;
231
226
  }
232
227
 
228
+ &.pf-m-align-self-start {
229
+ align-self: flex-start;
230
+ }
231
+
233
232
  &.pf-m-align-self-center {
234
233
  align-self: center;
235
234
  }
@@ -237,6 +236,18 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
237
236
  &.pf-m-align-self-baseline {
238
237
  align-self: baseline;
239
238
  }
239
+ }
240
+
241
+ // Group
242
+ .#{$toolbar}__group {
243
+ --#{$toolbar}--spacer: var(--#{$toolbar}__group--spacer);
244
+
245
+ @include pf-v5-hidden-visible(var(--#{$toolbar}__group--Display));
246
+
247
+ row-gap: var(--#{$toolbar}__group--RowGap);
248
+ align-items: var(--#{$toolbar}__group--AlignItems);
249
+ align-self: var(--#{$toolbar}__group--AlignSelf);
250
+ margin-right: var(--#{$toolbar}--spacer);
240
251
 
241
252
  // Button group
242
253
  &.pf-m-button-group {
@@ -297,11 +308,28 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
297
308
  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v5-c-toolbar--breakpoint-map);
298
309
  @include pf-v5-hidden-visible(var(--#{$toolbar}__item--Display));
299
310
 
311
+ align-items: var(--#{$toolbar}__item--AlignItems);
300
312
  align-self: var(--#{$toolbar}__item--AlignSelf);
301
313
  width: var(--#{$toolbar}__item--Width--base);
302
314
  min-width: var(--#{$toolbar}__item--MinWidth--base);
303
315
  margin-right: var(--#{$toolbar}--spacer);
304
316
 
317
+ &.pf-m-align-items-start {
318
+ align-items: flex-start;
319
+ }
320
+
321
+ &.pf-m-align-items-center {
322
+ align-items: center;
323
+ }
324
+
325
+ &.pf-m-align-items-baseline {
326
+ align-items: baseline;
327
+ }
328
+
329
+ &.pf-m-align-self-start {
330
+ align-self: flex-start;
331
+ }
332
+
305
333
  &.pf-m-align-self-center {
306
334
  align-self: center;
307
335
  }
@@ -382,7 +410,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
382
410
 
383
411
  position: relative;
384
412
  row-gap: var(--#{$toolbar}__content--RowGap);
385
- align-items: center;
413
+ align-items: var(--#{$toolbar}__content--AlignItems);
386
414
  padding-right: var(--#{$toolbar}__content--PaddingRight);
387
415
  padding-left: var(--#{$toolbar}__content--PaddingLeft);
388
416
  }
@@ -395,9 +423,17 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
395
423
  align-items: var(--#{$toolbar}__content-section--AlignItems);
396
424
  width: 100%;
397
425
 
426
+ &.pf-m-align-items-start {
427
+ align-items: flex-start;
428
+ }
429
+
398
430
  &.pf-m-align-items-center {
399
431
  align-items: center;
400
432
  }
433
+
434
+ &.pf-m-align-items-baseline {
435
+ align-items: baseline;
436
+ }
401
437
  }
402
438
 
403
439
  // Expandable content
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -32,8 +32,10 @@ Toolbar relies on groups (`.pf-v5-c-toolbar__group`) and items (`.pf-v5-c-toolba
32
32
  | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
33
  | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
34
  | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
35
- | `.pf-m-align-items-center` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
36
- | `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
35
+ | `.pf-m-align-items-start` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align children to flex-start. |
36
+ | `.pf-m-align-items-center` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align children to center. |
37
+ | `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar group to vertically align children to baseline. |
38
+ | `.pf-m-align-self-start` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to flex-start. |
37
39
  | `.pf-m-align-self-center` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
38
40
  | `.pf-m-align-self-baseline` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
39
41
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.65",
4
+ "version": "5.0.0-alpha.66",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -10875,6 +10875,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10875
10875
  }
10876
10876
 
10877
10877
  .pf-v5-c-toolbar {
10878
+ --pf-v5-c-toolbar--AlignItems--base: flex-start;
10878
10879
  --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
10879
10880
  --pf-v5-c-toolbar--RowGap--base: var(--pf-v5-global--spacer--lg);
10880
10881
  --pf-v5-c-toolbar--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
@@ -10884,18 +10885,20 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10884
10885
  --pf-v5-c-toolbar__item--Display: block;
10885
10886
  --pf-v5-c-toolbar__item--MinWidth--base: auto;
10886
10887
  --pf-v5-c-toolbar__item--AlignSelf: auto;
10888
+ --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
10887
10889
  --pf-v5-c-toolbar__group--Display: flex;
10888
- --pf-v5-c-toolbar__group--AlignItems: baseline;
10890
+ --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
10889
10891
  --pf-v5-c-toolbar__group--AlignSelf: auto;
10890
10892
  --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
10891
10893
  --pf-v5-c-toolbar--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
10892
10894
  --pf-v5-c-toolbar--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
10893
10895
  --pf-v5-c-toolbar__content--Display: flex;
10896
+ --pf-v5-c-toolbar__content--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
10894
10897
  --pf-v5-c-toolbar__content--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
10895
10898
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-global--spacer--md);
10896
10899
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-global--spacer--md);
10897
10900
  --pf-v5-c-toolbar__content-section--Display: flex;
10898
- --pf-v5-c-toolbar__content-section--AlignItems: baseline;
10901
+ --pf-v5-c-toolbar__content-section--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
10899
10902
  --pf-v5-c-toolbar__content-section--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
10900
10903
  --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
10901
10904
  --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -10914,8 +10917,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10914
10917
  --pf-v5-c-toolbar__group--m-chip-container__item--MarginTop: var(--pf-v5-global--spacer--md);
10915
10918
  --pf-v5-c-toolbar--spacer--base: var(--pf-v5-global--spacer--md);
10916
10919
  --pf-v5-c-toolbar__item--spacer: var(--pf-v5-c-toolbar--spacer--base);
10917
- --pf-v5-c-toolbar__group--spacer: var(--pf-v5-c-toolbar--spacer--base);
10918
10920
  --pf-v5-c-toolbar__item--Width: auto;
10921
+ --pf-v5-c-toolbar__group--spacer: var(--pf-v5-c-toolbar--spacer--base);
10919
10922
  --pf-v5-c-toolbar__group--m-toggle-group--spacer: var(--pf-v5-global--spacer--sm);
10920
10923
  --pf-v5-c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-v5-c-toolbar__group--spacer);
10921
10924
  --pf-v5-c-toolbar__group--m-icon-button-group--spacer: var(--pf-v5-c-toolbar__group--spacer);
@@ -10940,7 +10943,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10940
10943
  --pf-v5-c-toolbar--m-full-height--PaddingTop: 0;
10941
10944
  --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
10942
10945
  --pf-v5-c-toolbar--m-full-height__item--Display: flex;
10943
- --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
10946
+ --pf-v5-c-toolbar--m-full-height__item--AlignItems: var(--pf-v5-c-toolbar__group--AlignItems);
10944
10947
  position: relative;
10945
10948
  display: grid;
10946
10949
  row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -10990,8 +10993,8 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
10990
10993
  .pf-v5-c-toolbar.pf-m-full-height .pf-v5-c-toolbar__item {
10991
10994
  align-self: stretch;
10992
10995
  }
10993
- .pf-v5-c-toolbar.pf-m-full-height .pf-v5-c-toolbar__item {
10994
- align-items: var(--pf-v5-c-toolbar--m-full-height__item--AlignItems);
10996
+ .pf-v5-c-toolbar.pf-m-full-height :where(.pf-v5-c-toolbar__item) {
10997
+ --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--m-full-height__item--AlignItems);
10995
10998
  }
10996
10999
  .pf-v5-c-toolbar.pf-m-static,
10997
11000
  .pf-v5-c-toolbar.pf-m-static .pf-v5-c-toolbar__content {
@@ -11013,27 +11016,39 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11013
11016
  .pf-v5-c-toolbar__group > .pf-v5-c-divider.pf-m-vertical:last-child {
11014
11017
  --pf-v5-c-toolbar--spacer: 0;
11015
11018
  }
11016
-
11017
- .pf-v5-c-toolbar__group {
11018
- --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
11019
- --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__group--Display);
11020
- row-gap: var(--pf-v5-c-toolbar__group--RowGap);
11021
- align-items: var(--pf-v5-c-toolbar__group--AlignItems);
11022
- align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
11023
- margin-right: var(--pf-v5-c-toolbar--spacer);
11019
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-start,
11020
+ .pf-v5-c-toolbar__group.pf-m-align-items-start {
11021
+ align-items: flex-start;
11024
11022
  }
11023
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-center,
11025
11024
  .pf-v5-c-toolbar__group.pf-m-align-items-center {
11026
11025
  align-items: center;
11027
11026
  }
11027
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline,
11028
11028
  .pf-v5-c-toolbar__group.pf-m-align-items-baseline {
11029
11029
  align-items: baseline;
11030
11030
  }
11031
+ .pf-v5-c-toolbar__content-section.pf-m-align-self-start,
11032
+ .pf-v5-c-toolbar__group.pf-m-align-self-start {
11033
+ align-self: flex-start;
11034
+ }
11035
+ .pf-v5-c-toolbar__content-section.pf-m-align-self-center,
11031
11036
  .pf-v5-c-toolbar__group.pf-m-align-self-center {
11032
11037
  align-self: center;
11033
11038
  }
11039
+ .pf-v5-c-toolbar__content-section.pf-m-align-self-baseline,
11034
11040
  .pf-v5-c-toolbar__group.pf-m-align-self-baseline {
11035
11041
  align-self: baseline;
11036
11042
  }
11043
+
11044
+ .pf-v5-c-toolbar__group {
11045
+ --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
11046
+ --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__group--Display);
11047
+ row-gap: var(--pf-v5-c-toolbar__group--RowGap);
11048
+ align-items: var(--pf-v5-c-toolbar__group--AlignItems);
11049
+ align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
11050
+ margin-right: var(--pf-v5-c-toolbar--spacer);
11051
+ }
11037
11052
  .pf-v5-c-toolbar__group.pf-m-button-group {
11038
11053
  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--m-button-group--spacer);
11039
11054
  }
@@ -11074,6 +11089,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11074
11089
  --pf-v5-c-toolbar__item--Width--base: var(--pf-v5-c-toolbar__item--Width);
11075
11090
  --pf-v5-c-toolbar__item--MinWidth--base: var(--pf-v5-c-toolbar__item--MinWidth);
11076
11091
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__item--Display);
11092
+ align-items: var(--pf-v5-c-toolbar__item--AlignItems);
11077
11093
  align-self: var(--pf-v5-c-toolbar__item--AlignSelf);
11078
11094
  width: var(--pf-v5-c-toolbar__item--Width--base);
11079
11095
  min-width: var(--pf-v5-c-toolbar__item--MinWidth--base);
@@ -11129,6 +11145,18 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11129
11145
  --pf-v5-c-toolbar__item--MinWidth--base: var(--pf-v5-c-toolbar__item--MinWidth-on-2xl, var(--pf-v5-c-toolbar__item--MinWidth-on-xl, var(--pf-v5-c-toolbar__item--MinWidth-on-lg, var(--pf-v5-c-toolbar__item--MinWidth-on-md, var(--pf-v5-c-toolbar__item--MinWidth-on-sm, var(--pf-v5-c-toolbar__item--MinWidth))))));
11130
11146
  }
11131
11147
  }
11148
+ .pf-v5-c-toolbar__item.pf-m-align-items-start {
11149
+ align-items: flex-start;
11150
+ }
11151
+ .pf-v5-c-toolbar__item.pf-m-align-items-center {
11152
+ align-items: center;
11153
+ }
11154
+ .pf-v5-c-toolbar__item.pf-m-align-items-baseline {
11155
+ align-items: baseline;
11156
+ }
11157
+ .pf-v5-c-toolbar__item.pf-m-align-self-start {
11158
+ align-self: flex-start;
11159
+ }
11132
11160
  .pf-v5-c-toolbar__item.pf-m-align-self-center {
11133
11161
  align-self: center;
11134
11162
  }
@@ -11185,7 +11213,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11185
11213
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__content--Display);
11186
11214
  position: relative;
11187
11215
  row-gap: var(--pf-v5-c-toolbar__content--RowGap);
11188
- align-items: center;
11216
+ align-items: var(--pf-v5-c-toolbar__content--AlignItems);
11189
11217
  padding-right: var(--pf-v5-c-toolbar__content--PaddingRight);
11190
11218
  padding-left: var(--pf-v5-c-toolbar__content--PaddingLeft);
11191
11219
  }
@@ -11196,9 +11224,15 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11196
11224
  align-items: var(--pf-v5-c-toolbar__content-section--AlignItems);
11197
11225
  width: 100%;
11198
11226
  }
11227
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-start {
11228
+ align-items: flex-start;
11229
+ }
11199
11230
  .pf-v5-c-toolbar__content-section.pf-m-align-items-center {
11200
11231
  align-items: center;
11201
11232
  }
11233
+ .pf-v5-c-toolbar__content-section.pf-m-align-items-baseline {
11234
+ align-items: baseline;
11235
+ }
11202
11236
 
11203
11237
  .pf-v5-c-toolbar__expandable-content {
11204
11238
  position: absolute;
@@ -16993,6 +17027,7 @@ ul.pf-v5-c-list {
16993
17027
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
16994
17028
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
16995
17029
  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
17030
+ --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
16996
17031
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
16997
17032
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
16998
17033
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
@@ -17065,6 +17100,7 @@ ul.pf-v5-c-list {
17065
17100
  --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
17066
17101
  }
17067
17102
  .pf-v5-c-masthead .pf-v5-c-toolbar {
17103
+ --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
17068
17104
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
17069
17105
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
17070
17106
  --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);