@patternfly/patternfly 5.0.0-alpha.5 → 5.0.0-alpha.7

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 (21) hide show
  1. package/components/ChipGroup/chip-group.css +29 -17
  2. package/components/ChipGroup/chip-group.scss +39 -22
  3. package/components/EmptyState/empty-state.css +46 -52
  4. package/components/EmptyState/empty-state.scss +58 -57
  5. package/components/Toolbar/toolbar.css +30 -2
  6. package/components/Toolbar/toolbar.scss +37 -3
  7. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  8. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  9. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  10. package/docs/components/Wizard/examples/Wizard.md +4 -7
  11. package/docs/demos/CardView/examples/CardView.md +1 -3
  12. package/docs/demos/DataList/examples/DataList.md +2 -4
  13. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  14. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -6
  15. package/docs/demos/Table/examples/Table.md +18 -32
  16. package/docs/demos/Toolbar/examples/Toolbar.md +1589 -9
  17. package/package.json +1 -1
  18. package/patternfly-no-reset.css +105 -71
  19. package/patternfly.css +105 -71
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/components/Toolbar/toolbar.scss CHANGED
@@ -13,9 +13,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
13
13
  // Item
14
14
  --pf-c-toolbar__item--Display: block;
15
15
  --pf-c-toolbar__item--MinWidth--base: auto;
16
+ --pf-c-toolbar__item--AlignSelf: auto;
16
17
 
17
18
  // Group
18
19
  --pf-c-toolbar__group--Display: flex;
20
+ --pf-c-toolbar__group--AlignItems: baseline;
21
+ --pf-c-toolbar__group--AlignSelf: auto;
19
22
 
20
23
  // Sticky
21
24
  --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
@@ -28,6 +31,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
28
31
 
29
32
  // Content section
30
33
  --pf-c-toolbar__content-section--Display: flex;
34
+ --pf-c-toolbar__content-section--AlignItems: baseline;
31
35
 
32
36
  // Insets
33
37
  --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md); // make this the default inset at breaking change
@@ -208,9 +212,26 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
208
212
 
209
213
  @include pf-hidden-visible(var(--pf-c-toolbar__group--Display));
210
214
 
211
- align-items: center;
215
+ align-items: var(--pf-c-toolbar__group--AlignItems);
216
+ align-self: var(--pf-c-toolbar__group--AlignSelf);
212
217
  margin-right: var(--pf-c-toolbar--spacer);
213
218
 
219
+ &.pf-m-align-items-center {
220
+ align-items: center;
221
+ }
222
+
223
+ &.pf-m-align-items-baseline {
224
+ align-items: baseline;
225
+ }
226
+
227
+ &.pf-m-align-self-center {
228
+ align-self: center;
229
+ }
230
+
231
+ &.pf-m-align-self-baseline {
232
+ align-self: baseline;
233
+ }
234
+
214
235
  // Button group
215
236
  &.pf-m-button-group {
216
237
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
@@ -270,10 +291,19 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
270
291
  @include pf-build-css-variable-stack("--pf-c-toolbar__item--MinWidth--base", "--pf-c-toolbar__item--MinWidth", $pf-c-toolbar--breakpoint-map);
271
292
  @include pf-hidden-visible(var(--pf-c-toolbar__item--Display));
272
293
 
294
+ align-self: var(--pf-c-toolbar__item--AlignSelf);
273
295
  width: var(--pf-c-toolbar__item--Width--base);
274
296
  min-width: var(--pf-c-toolbar__item--MinWidth--base);
275
297
  margin-right: var(--pf-c-toolbar--spacer);
276
298
 
299
+ &.pf-m-align-self-center {
300
+ align-self: center;
301
+ }
302
+
303
+ &.pf-m-align-self-baseline {
304
+ align-self: baseline;
305
+ }
306
+
277
307
  // Overflow menu
278
308
  &.pf-m-overflow-menu {
279
309
  --pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
@@ -329,7 +359,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
329
359
  }
330
360
  }
331
361
 
332
-
333
362
  .pf-c-toolbar__expand-all-icon {
334
363
  display: inline-block;
335
364
  transition: var(--pf-c-toolbar__expand-all-icon--Transition);
@@ -339,7 +368,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
339
368
  .pf-c-toolbar__content,
340
369
  .pf-c-toolbar__content-section {
341
370
  flex-wrap: wrap;
342
- align-items: center;
343
371
  }
344
372
 
345
373
  // Content
@@ -347,6 +375,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
347
375
  @include pf-hidden-visible(var(--pf-c-toolbar__content--Display));
348
376
 
349
377
  position: relative;
378
+ align-items: center;
350
379
  padding-right: var(--pf-c-toolbar__content--PaddingRight);
351
380
  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
352
381
  }
@@ -355,7 +384,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
355
384
  .pf-c-toolbar__content-section {
356
385
  @include pf-hidden-visible(var(--pf-c-toolbar__content-section--Display));
357
386
 
387
+ align-items: var(--pf-c-toolbar__content-section--AlignItems);
358
388
  width: 100%;
389
+
390
+ &.pf-m-align-items-center {
391
+ align-items: center;
392
+ }
359
393
  }
360
394
 
361
395
  // Expandable content
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -123,9 +123,7 @@ cssPrefix: pf-c-code-editor
123
123
  class="pf-c-empty-state__body"
124
124
  >Drag a file here or browse to upload.</div>
125
125
  <button class="pf-c-button pf-m-primary" type="button">Browse</button>
126
- <div class="pf-c-empty-state__secondary">
127
- <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
128
- </div>
126
+ <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
129
127
  </div>
130
128
  </div>
131
129
  </div>
@@ -157,9 +155,7 @@ cssPrefix: pf-c-code-editor
157
155
  class="pf-c-empty-state__body"
158
156
  >Drag a file here or browse to upload.</div>
159
157
  <button class="pf-c-button pf-m-primary" type="button">Browse</button>
160
- <div class="pf-c-empty-state__secondary">
161
- <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
162
- </div>
158
+ <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
163
159
  </div>
164
160
  </div>
165
161
  </div>
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -9,20 +9,31 @@ cssPrefix: pf-c-empty-state
9
9
  ```html
10
10
  <div class="pf-c-empty-state">
11
11
  <div class="pf-c-empty-state__content">
12
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
12
+ <div class="pf-c-empty-state__header">
13
+ <div class="pf-c-empty-state__icon">
14
+ <i class="fas fa-cubes" aria-hidden="true"></i>
15
+ </div>
16
+ <div class="pf-c-empty-state__title">
17
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
18
+ </div>
19
+ </div>
13
20
 
14
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
15
21
  <div
16
22
  class="pf-c-empty-state__body"
17
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
18
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
19
- <div class="pf-c-empty-state__secondary">
20
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
21
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
22
- <button class="pf-c-button pf-m-link" type="button">Can</button>
23
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
24
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
25
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
23
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
24
+
25
+ <div class="pf-c-empty-state__footer">
26
+ <div class="pf-c-empty-state__actions">
27
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
28
+ </div>
29
+ <div class="pf-c-empty-state__actions">
30
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
31
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
32
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
33
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
34
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
35
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
36
+ </div>
26
37
  </div>
27
38
  </div>
28
39
  </div>
@@ -34,17 +45,31 @@ cssPrefix: pf-c-empty-state
34
45
  ```html
35
46
  <div class="pf-c-empty-state pf-m-xs">
36
47
  <div class="pf-c-empty-state__content">
37
- <h1 class="pf-c-title pf-m-md">Empty state</h1>
48
+ <div class="pf-c-empty-state__header">
49
+ <div class="pf-c-empty-state__title">
50
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
51
+ </div>
52
+ </div>
53
+
38
54
  <div
39
55
  class="pf-c-empty-state__body"
40
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
41
- <div class="pf-c-empty-state__secondary">
42
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
43
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
44
- <button class="pf-c-button pf-m-link" type="button">Can</button>
45
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
46
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
47
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
56
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
57
+
58
+ <div class="pf-c-empty-state__footer">
59
+ <div class="pf-c-empty-state__actions">
60
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Multiple</button>
61
+ <button
62
+ class="pf-c-button pf-m-link pf-m-small"
63
+ type="button"
64
+ >Action buttons</button>
65
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Can</button>
66
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Go here</button>
67
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">In the</button>
68
+ <button
69
+ class="pf-c-button pf-m-link pf-m-small"
70
+ type="button"
71
+ >Action area</button>
72
+ </div>
48
73
  </div>
49
74
  </div>
50
75
  </div>
@@ -56,20 +81,32 @@ cssPrefix: pf-c-empty-state
56
81
  ```html
57
82
  <div class="pf-c-empty-state pf-m-sm">
58
83
  <div class="pf-c-empty-state__content">
59
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
84
+ <div class="pf-c-empty-state__header">
85
+ <div class="pf-c-empty-state__icon">
86
+ <i class="fas fa-cubes" aria-hidden="true"></i>
87
+ </div>
88
+ <div class="pf-c-empty-state__title">
89
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
90
+ </div>
91
+ </div>
60
92
 
61
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
62
93
  <div
63
94
  class="pf-c-empty-state__body"
64
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
65
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
66
- <div class="pf-c-empty-state__secondary">
67
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
68
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
69
- <button class="pf-c-button pf-m-link" type="button">Can</button>
70
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
71
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
72
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
95
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
96
+
97
+ <div class="pf-c-empty-state__footer">
98
+ <div class="pf-c-empty-state__actions">
99
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
100
+ </div>
101
+
102
+ <div class="pf-c-empty-state__actions">
103
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
104
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
105
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
106
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
107
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
108
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
109
+ </div>
73
110
  </div>
74
111
  </div>
75
112
  </div>
@@ -81,20 +118,31 @@ cssPrefix: pf-c-empty-state
81
118
  ```html
82
119
  <div class="pf-c-empty-state pf-m-lg">
83
120
  <div class="pf-c-empty-state__content">
84
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
121
+ <div class="pf-c-empty-state__header">
122
+ <div class="pf-c-empty-state__icon">
123
+ <i class="fas fa-cubes" aria-hidden="true"></i>
124
+ </div>
125
+ <div class="pf-c-empty-state__title">
126
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
127
+ </div>
128
+ </div>
85
129
 
86
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
87
130
  <div
88
131
  class="pf-c-empty-state__body"
89
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
90
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
91
- <div class="pf-c-empty-state__secondary">
92
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
93
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
94
- <button class="pf-c-button pf-m-link" type="button">Can</button>
95
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
96
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
97
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
132
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
133
+
134
+ <div class="pf-c-empty-state__footer">
135
+ <div class="pf-c-empty-state__actions">
136
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
137
+ </div>
138
+ <div class="pf-c-empty-state__actions">
139
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
140
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
141
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
142
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
143
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
144
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
145
+ </div>
98
146
  </div>
99
147
  </div>
100
148
  </div>
@@ -106,31 +154,30 @@ cssPrefix: pf-c-empty-state
106
154
  ```html
107
155
  <div class="pf-c-empty-state pf-m-xl">
108
156
  <div class="pf-c-empty-state__content">
109
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
110
-
111
- <h1 class="pf-c-title pf-m-4xl">Empty state</h1>
112
- <div
113
- class="pf-c-empty-state__body"
114
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
115
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
116
- </div>
117
- </div>
118
-
119
- ```
120
-
121
- ### With primary element
122
-
123
- ```html
124
- <div class="pf-c-empty-state">
125
- <div class="pf-c-empty-state__content">
126
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
157
+ <div class="pf-c-empty-state__header">
158
+ <div class="pf-c-empty-state__icon">
159
+ <i class="fas fa-cubes" aria-hidden="true"></i>
160
+ </div>
161
+ <div class="pf-c-empty-state__title">
162
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
163
+ </div>
164
+ </div>
127
165
 
128
- <h1 class="pf-c-title pf-m-lg">Empty State</h1>
129
166
  <div
130
167
  class="pf-c-empty-state__body"
131
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
132
- <div class="pf-c-empty-state__primary">
133
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
168
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
169
+ <div class="pf-c-empty-state__footer">
170
+ <div class="pf-c-empty-state__actions">
171
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
172
+ </div>
173
+ <div class="pf-c-empty-state__actions">
174
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
175
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
176
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
177
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
178
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
179
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
180
+ </div>
134
181
  </div>
135
182
  </div>
136
183
  </div>
@@ -147,18 +194,19 @@ cssPrefix: pf-c-empty-state
147
194
 
148
195
  ### Usage
149
196
 
150
- | Class | Applied to | Outcome |
151
- | ------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
152
- | `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
153
- | `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
154
- | `.pf-c-empty-state__icon` | `<i>`, `<div>` | Creates the empty state icon or icon container when used as a `<div>`. |
155
- | `.pf-c-title` | `<h1>, <h2>, <h3>, <h4>, <h5>, <h6>` | Creates the empty state title. **Required** |
156
- | `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. You can have more than one `.pf-c-empty-state__body` elements. |
157
- | `.pf-c-button.pf-m-primary` | `<button>` | Creates the primary action button. |
158
- | `.pf-c-empty-state__primary` | `<div>` | Container for primary actions. Can be used in lieu of using `.pf-c-button.pf-m-primary`. |
159
- | `.pf-c-empty-state__secondary` | `<div>` | Container secondary actions. |
160
- | `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for a extra small variation and max-width. |
161
- | `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
162
- | `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
163
- | `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an x-large variation and max-width. |
164
- | `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
197
+ | Class | Applied to | Outcome |
198
+ | ------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
199
+ | `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
200
+ | `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
201
+ | `.pf-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
202
+ | `.pf-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
203
+ | `.pf-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
204
+ | `.pf-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
205
+ | `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-c-empty-state__body` elements. |
206
+ | `.pf-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
207
+ | `.pf-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
208
+ | `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
209
+ | `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
210
+ | `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
211
+ | `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
212
+ | `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -26,12 +26,16 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
26
26
 
27
27
  ### Modifiers
28
28
 
29
- | Class | Applied to | Outcome |
30
- | ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
29
+ | Class | Applied to | Outcome |
30
+ | ------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-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-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
36
+ | `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
37
+ | `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
38
+ | `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
35
39
 
36
40
  ### Special notes
37
41
 
@@ -489,7 +493,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
489
493
  role="listbox"
490
494
  aria-labelledby="toolbar-toggle-group-example-select-name-label"
491
495
  hidden
492
- style="width: 175px"
493
496
  >
494
497
  <li role="presentation">
495
498
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -520,7 +523,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
520
523
  </li>
521
524
  </ul>
522
525
  </div>
523
- <div class="pf-c-text-input-group">
526
+ <div class="pf-c-text-input-group" style="width: auto">
524
527
  <div class="pf-c-text-input-group__main pf-m-icon">
525
528
  <span class="pf-c-text-input-group__text">
526
529
  <span class="pf-c-text-input-group__icon">
@@ -810,7 +813,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
810
813
  role="listbox"
811
814
  aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
812
815
  hidden
813
- style="width: 175px"
814
816
  >
815
817
  <li role="presentation">
816
818
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -841,7 +843,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
841
843
  </li>
842
844
  </ul>
843
845
  </div>
844
- <div class="pf-c-text-input-group">
846
+ <div class="pf-c-text-input-group" style="width: auto">
845
847
  <div class="pf-c-text-input-group__main pf-m-icon">
846
848
  <span class="pf-c-text-input-group__text">
847
849
  <span class="pf-c-text-input-group__icon">
@@ -1192,7 +1194,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1192
1194
  role="listbox"
1193
1195
  aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
1194
1196
  hidden
1195
- style="width: 175px"
1196
1197
  >
1197
1198
  <li role="presentation">
1198
1199
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1223,7 +1224,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1223
1224
  </li>
1224
1225
  </ul>
1225
1226
  </div>
1226
- <div class="pf-c-text-input-group">
1227
+ <div class="pf-c-text-input-group" style="width: auto">
1227
1228
  <div class="pf-c-text-input-group__main pf-m-icon">
1228
1229
  <span class="pf-c-text-input-group__text">
1229
1230
  <span class="pf-c-text-input-group__icon">
@@ -1774,7 +1775,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1774
1775
  role="listbox"
1775
1776
  aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
1776
1777
  hidden
1777
- style="width: 175px"
1778
1778
  >
1779
1779
  <li role="presentation">
1780
1780
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1805,7 +1805,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1805
1805
  </li>
1806
1806
  </ul>
1807
1807
  </div>
1808
- <div class="pf-c-text-input-group">
1808
+ <div class="pf-c-text-input-group" style="width: auto">
1809
1809
  <div class="pf-c-text-input-group__main pf-m-icon">
1810
1810
  <span class="pf-c-text-input-group__text">
1811
1811
  <span class="pf-c-text-input-group__icon">
@@ -3842,7 +3842,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3842
3842
  role="listbox"
3843
3843
  aria-labelledby="toolbar-expanded-elements-example-select-name-label"
3844
3844
  hidden
3845
- style="width: 175px"
3846
3845
  >
3847
3846
  <li role="presentation">
3848
3847
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -3873,7 +3872,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3873
3872
  </li>
3874
3873
  </ul>
3875
3874
  </div>
3876
- <div class="pf-c-text-input-group">
3875
+ <div class="pf-c-text-input-group" style="width: auto">
3877
3876
  <div class="pf-c-text-input-group__main pf-m-icon">
3878
3877
  <span class="pf-c-text-input-group__text">
3879
3878
  <span class="pf-c-text-input-group__icon">
@@ -4219,6 +4218,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
4219
4218
  | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4220
4219
  | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4221
4220
  | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4221
+ | `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
4222
+ | `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
4223
+ | `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
4224
+ | `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
4222
4225
  | `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
4223
4226
  | `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
4224
4227
  | `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -1214,10 +1214,9 @@ wrapperTag: div
1214
1214
  <div class="pf-l-bullseye">
1215
1215
  <div class="pf-c-empty-state pf-m-lg">
1216
1216
  <div class="pf-c-empty-state__content">
1217
- <i
1218
- class="fas fa- fa-cogs pf-c-empty-state__icon"
1219
- aria-hidden="true"
1220
- ></i>
1217
+ <div class="pf-c-empty-state__icon">
1218
+ <i class="fas fa- fa-cogs" aria-hidden="true"></i>
1219
+ </div>
1221
1220
 
1222
1221
  <h1
1223
1222
  class="pf-c-title pf-m-lg"
@@ -1251,9 +1250,7 @@ wrapperTag: div
1251
1250
  <div
1252
1251
  class="pf-c-empty-state__body"
1253
1252
  >Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
1254
- <div class="pf-c-empty-state__secondary">
1255
- <button class="pf-c-button pf-m-link" type="button">Cancel</button>
1256
- </div>
1253
+ <button class="pf-c-button pf-m-link" type="button">Cancel</button>
1257
1254
  </div>
1258
1255
  </div>
1259
1256
  </div>
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -1263,9 +1263,7 @@ section: demos
1263
1263
  <div class="pf-c-empty-state__content">
1264
1264
  <i class="fas fa-plus-circle pf-c-empty-state__icon"></i>
1265
1265
  <h2 class="pf-c-title pf-m-md">Add a new card to your page</h2>
1266
- <div class="pf-c-empty-state__secondary">
1267
- <button class="pf-c-button pf-m-link" type="button">Add card</button>
1268
- </div>
1266
+ <button class="pf-c-button pf-m-link" type="button">Add card</button>
1269
1267
  </div>
1270
1268
  </div>
1271
1269
  </div>
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -3995,7 +3995,6 @@ wrapperTag: div
3995
3995
  role="listbox"
3996
3996
  aria-labelledby="-select-name-label"
3997
3997
  hidden
3998
- style="width: 175px"
3999
3998
  >
4000
3999
  <li role="presentation">
4001
4000
  <button
@@ -4035,7 +4034,7 @@ wrapperTag: div
4035
4034
  </li>
4036
4035
  </ul>
4037
4036
  </div>
4038
- <div class="pf-c-text-input-group">
4037
+ <div class="pf-c-text-input-group" style="width: auto">
4039
4038
  <div class="pf-c-text-input-group__main pf-m-icon">
4040
4039
  <span class="pf-c-text-input-group__text">
4041
4040
  <span class="pf-c-text-input-group__icon">
@@ -6039,7 +6038,6 @@ wrapperTag: div
6039
6038
  role="listbox"
6040
6039
  aria-labelledby="-select-name-label"
6041
6040
  hidden
6042
- style="width: 175px"
6043
6041
  >
6044
6042
  <li role="presentation">
6045
6043
  <button
@@ -6079,7 +6077,7 @@ wrapperTag: div
6079
6077
  </li>
6080
6078
  </ul>
6081
6079
  </div>
6082
- <div class="pf-c-text-input-group">
6080
+ <div class="pf-c-text-input-group" style="width: auto">
6083
6081
  <div class="pf-c-text-input-group__main pf-m-icon">
6084
6082
  <span class="pf-c-text-input-group__text">
6085
6083
  <span class="pf-c-text-input-group__icon">