@patternfly/patternfly 5.0.0-alpha.6 → 5.0.0-alpha.8

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 (23) hide show
  1. package/base/_common.scss +0 -22
  2. package/base/patternfly-common.css +0 -10
  3. package/components/Card/card.css +9 -12
  4. package/components/Card/card.scss +11 -17
  5. package/components/ChipGroup/chip-group.css +29 -17
  6. package/components/ChipGroup/chip-group.scss +39 -22
  7. package/components/EmptyState/empty-state.css +46 -52
  8. package/components/EmptyState/empty-state.scss +58 -57
  9. package/docs/components/Card/examples/Card.md +61 -44
  10. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  11. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  12. package/docs/components/Wizard/examples/Wizard.md +4 -7
  13. package/docs/demos/Card/examples/Card.md +141 -106
  14. package/docs/demos/CardView/examples/CardView.md +1 -3
  15. package/docs/demos/Table/examples/Table.md +7 -10
  16. package/package.json +1 -1
  17. package/patternfly-base-no-reset.css +0 -10
  18. package/patternfly-base.css +0 -10
  19. package/patternfly-no-reset.css +84 -91
  20. package/patternfly.css +84 -91
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
  23. package/sass-utilities/scss-variables.scss +0 -1
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/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>