@patternfly/patternfly 6.0.0-alpha.100 → 6.0.0-alpha.101

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 (52) hide show
  1. package/components/Table/table-scrollable.css +12 -15
  2. package/components/Table/table-scrollable.scss +33 -30
  3. package/components/Table/table-tree-view.css +0 -2
  4. package/components/Table/table-tree-view.scss +9 -11
  5. package/components/Table/table.css +118 -55
  6. package/components/Table/table.scss +182 -100
  7. package/docs/components/Table/examples/Table.css +6 -8
  8. package/docs/components/Table/examples/Table.md +79 -92
  9. package/docs/demos/Table/examples/Table.md +28 -28
  10. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  11. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  12. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  13. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +24 -24
  14. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  15. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  16. package/docs/utilities/Display/examples/Display.css +8 -8
  17. package/docs/utilities/Display/examples/Display.md +7 -7
  18. package/docs/utilities/Flex/examples/Flex.css +5 -5
  19. package/docs/utilities/Flex/examples/Flex.md +82 -40
  20. package/docs/utilities/Float/examples/Float.css +2 -2
  21. package/docs/utilities/Float/examples/Float.md +6 -6
  22. package/docs/utilities/Sizing/examples/Sizing.css +4 -4
  23. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  24. package/docs/utilities/Spacing/examples/Spacing.css +1 -1
  25. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  26. package/docs/utilities/Text/examples/Text.md +53 -53
  27. package/package.json +1 -1
  28. package/patternfly-addons.css +91 -371
  29. package/patternfly-no-globals.css +130 -72
  30. package/patternfly-theme-dark-unversioned.css +130 -72
  31. package/patternfly.css +130 -72
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
  34. package/sass-utilities/mixins.scss +2 -2
  35. package/utilities/Alignment/alignment.css +24 -24
  36. package/utilities/Alignment/alignment.scss +4 -4
  37. package/utilities/BackgroundColor/BackgroundColor.css +0 -100
  38. package/utilities/BackgroundColor/BackgroundColor.scss +2 -8
  39. package/utilities/BoxShadow/box-shadow.css +15 -39
  40. package/utilities/BoxShadow/box-shadow.scss +17 -27
  41. package/utilities/Display/display.scss +2 -2
  42. package/utilities/Flex/flex.scss +18 -18
  43. package/utilities/Float/float.css +24 -24
  44. package/utilities/Float/float.scss +4 -4
  45. package/utilities/Sizing/sizing.css +28 -28
  46. package/utilities/Sizing/sizing.scss +17 -17
  47. package/utilities/Text/text.css +0 -155
  48. package/utilities/Text/text.scss +10 -16
  49. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  50. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  51. package/utilities/Text/themes/dark/text.css +0 -0
  52. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/utilities/Flex/examples/Flex.md CHANGED
@@ -17,7 +17,7 @@ section: utility-classes
17
17
 
18
18
  ```html
19
19
  <h2 class="pf-v6-c-title pf-m-lg">Flex row</h2>
20
- <div class="pf-v6-u-display-flex pf-v5-u-flex-direction-row">
20
+ <div class="pf-v6-u-display-flex pf-v6-u-flex-direction-row">
21
21
  <div class="ws-example-flex-item">Flex item 1</div>
22
22
 
23
23
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -26,7 +26,7 @@ section: utility-classes
26
26
  </div>
27
27
  <br />
28
28
  <h2 class="pf-v6-c-title pf-m-lg">Flex row-reverse</h2>
29
- <div class="pf-v6-u-display-flex pf-v5-u-flex-direction-row-reverse">
29
+ <div class="pf-v6-u-display-flex pf-v6-u-flex-direction-row-reverse">
30
30
  <div class="ws-example-flex-item">Flex item 1</div>
31
31
 
32
32
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -35,7 +35,7 @@ section: utility-classes
35
35
  </div>
36
36
  <br />
37
37
  <h2 class="pf-v6-c-title pf-m-lg">Flex column</h2>
38
- <div class="pf-v6-u-display-flex pf-v5-u-flex-direction-column">
38
+ <div class="pf-v6-u-display-flex pf-v6-u-flex-direction-column">
39
39
  <div class="ws-example-flex-item">Flex item 1</div>
40
40
 
41
41
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -44,7 +44,7 @@ section: utility-classes
44
44
  </div>
45
45
  <br />
46
46
  <h2 class="pf-v6-c-title pf-m-lg">Flex column-reverse</h2>
47
- <div class="pf-v6-u-display-flex pf-v5-u-flex-direction-column-reverse">
47
+ <div class="pf-v6-u-display-flex pf-v6-u-flex-direction-column-reverse">
48
48
  <div class="ws-example-flex-item">Flex item 1</div>
49
49
 
50
50
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -58,7 +58,7 @@ section: utility-classes
58
58
 
59
59
  ```html
60
60
  <h2 class="pf-v6-c-title pf-m-lg">Justify content flex-start</h2>
61
- <div class="pf-v6-u-display-flex pf-v5-u-justify-content-flex-start">
61
+ <div class="pf-v6-u-display-flex pf-v6-u-justify-content-flex-start">
62
62
  <div class="ws-example-flex-item">Flex item 1</div>
63
63
 
64
64
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -67,7 +67,7 @@ section: utility-classes
67
67
  </div>
68
68
  <br />
69
69
  <h2 class="pf-v6-c-title pf-m-lg">Justify content flex-end</h2>
70
- <div class="pf-v6-u-display-flex pf-v5-u-justify-content-flex-end">
70
+ <div class="pf-v6-u-display-flex pf-v6-u-justify-content-flex-end">
71
71
  <div class="ws-example-flex-item">Flex item 1</div>
72
72
 
73
73
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -76,7 +76,7 @@ section: utility-classes
76
76
  </div>
77
77
  <br />
78
78
  <h2 class="pf-v6-c-title pf-m-lg">Justify content center</h2>
79
- <div class="pf-v6-u-display-flex pf-v5-u-justify-content-center">
79
+ <div class="pf-v6-u-display-flex pf-v6-u-justify-content-center">
80
80
  <div class="ws-example-flex-item">Flex item 1</div>
81
81
 
82
82
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -85,7 +85,7 @@ section: utility-classes
85
85
  </div>
86
86
  <br />
87
87
  <h2 class="pf-v6-c-title pf-m-lg">Justify content space-around</h2>
88
- <div class="pf-v6-u-display-flex pf-v5-u-justify-content-space-around">
88
+ <div class="pf-v6-u-display-flex pf-v6-u-justify-content-space-around">
89
89
  <div class="ws-example-flex-item">Flex item 1</div>
90
90
 
91
91
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -94,7 +94,7 @@ section: utility-classes
94
94
  </div>
95
95
  <br />
96
96
  <h2 class="pf-v6-c-title pf-m-lg">Justify content space-between</h2>
97
- <div class="pf-v6-u-display-flex pf-v5-u-justify-content-space-between">
97
+ <div class="pf-v6-u-display-flex pf-v6-u-justify-content-space-between">
98
98
  <div class="ws-example-flex-item">Flex item 1</div>
99
99
 
100
100
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -108,7 +108,7 @@ section: utility-classes
108
108
 
109
109
  ```html
110
110
  <h2 class="pf-v6-c-title pf-m-lg">Align items flex-start</h2>
111
- <div class="pf-v6-u-display-flex pf-v5-u-align-items-flex-start">
111
+ <div class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start">
112
112
  <div class="ws-example-flex-item">Flex item 1</div>
113
113
 
114
114
  <div class="ws-example-flex-item ws-example-u-flex-md">Flex item 2</div>
@@ -117,7 +117,7 @@ section: utility-classes
117
117
  </div>
118
118
  <br />
119
119
  <h2 class="pf-v6-c-title pf-m-lg">Align items flex-end</h2>
120
- <div class="pf-v6-u-display-flex pf-v5-u-align-items-flex-end">
120
+ <div class="pf-v6-u-display-flex pf-v6-u-align-items-flex-end">
121
121
  <div class="ws-example-flex-item">Flex item 1</div>
122
122
 
123
123
  <div class="ws-example-flex-item ws-example-u-flex-md">Flex item 2</div>
@@ -126,7 +126,7 @@ section: utility-classes
126
126
  </div>
127
127
  <br />
128
128
  <h2 class="pf-v6-c-title pf-m-lg">Align items center</h2>
129
- <div class="pf-v6-u-display-flex pf-v5-u-align-items-center">
129
+ <div class="pf-v6-u-display-flex pf-v6-u-align-items-center">
130
130
  <div class="ws-example-flex-item">Flex item 1</div>
131
131
 
132
132
  <div class="ws-example-flex-item ws-example-u-flex-md">Flex item 2</div>
@@ -135,7 +135,7 @@ section: utility-classes
135
135
  </div>
136
136
  <br />
137
137
  <h2 class="pf-v6-c-title pf-m-lg">Align items baseline</h2>
138
- <div class="pf-v6-u-display-flex pf-v5-u-align-items-baseline">
138
+ <div class="pf-v6-u-display-flex pf-v6-u-align-items-baseline">
139
139
  <div class="ws-example-flex-item">Flex item 1</div>
140
140
 
141
141
  <div class="ws-example-flex-item ws-example-u-flex-md">Flex item 2</div>
@@ -144,7 +144,7 @@ section: utility-classes
144
144
  </div>
145
145
  <br />
146
146
  <h2 class="pf-v6-c-title pf-m-lg">Align items stretch</h2>
147
- <div class="pf-v6-u-display-flex pf-v5-u-align-items-stretch">
147
+ <div class="pf-v6-u-display-flex pf-v6-u-align-items-stretch">
148
148
  <div class="ws-example-flex-item">Flex item 1</div>
149
149
 
150
150
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -158,11 +158,11 @@ section: utility-classes
158
158
 
159
159
  ```html
160
160
  <div class="pf-v6-u-display-flex">
161
- <div class="ws-example-flex-item pf-v5-u-align-self-flex-start">flex-start</div>
162
- <div class="ws-example-flex-item pf-v5-u-align-self-center">center</div>
163
- <div class="ws-example-flex-item pf-v5-u-align-self-flex-end">flex end</div>
164
- <div class="ws-example-flex-item pf-v5-u-align-self-baseline">baseline</div>
165
- <div class="ws-example-flex-item pf-v5-u-align-self-stretch">stretch</div>
161
+ <div class="ws-example-flex-item pf-v6-u-align-self-flex-start">flex-start</div>
162
+ <div class="ws-example-flex-item pf-v6-u-align-self-center">center</div>
163
+ <div class="ws-example-flex-item pf-v6-u-align-self-flex-end">flex end</div>
164
+ <div class="ws-example-flex-item pf-v6-u-align-self-baseline">baseline</div>
165
+ <div class="ws-example-flex-item pf-v6-u-align-self-stretch">stretch</div>
166
166
  </div>
167
167
 
168
168
  ```
@@ -171,7 +171,7 @@ section: utility-classes
171
171
 
172
172
  ```html
173
173
  <h2 class="pf-v6-c-title pf-m-lg">Align content flex-start</h2>
174
- <div class="pf-v6-u-display-flex pf-v5-u-align-content-flex-start">
174
+ <div class="pf-v6-u-display-flex pf-v6-u-align-content-flex-start">
175
175
  <div class="ws-example-flex-item">Flex item 1</div>
176
176
 
177
177
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -184,7 +184,7 @@ section: utility-classes
184
184
  </div>
185
185
  <br />
186
186
  <h2 class="pf-v6-c-title pf-m-lg">Align content flex-end</h2>
187
- <div class="pf-v6-u-display-flex pf-v5-u-align-content-flex-end">
187
+ <div class="pf-v6-u-display-flex pf-v6-u-align-content-flex-end">
188
188
  <div class="ws-example-flex-item">Flex item 1</div>
189
189
 
190
190
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -197,7 +197,7 @@ section: utility-classes
197
197
  </div>
198
198
  <br />
199
199
  <h2 class="pf-v6-c-title pf-m-lg">Align content center</h2>
200
- <div class="pf-v6-u-display-flex pf-v5-u-align-content-center">
200
+ <div class="pf-v6-u-display-flex pf-v6-u-align-content-center">
201
201
  <div class="ws-example-flex-item">Flex item 1</div>
202
202
 
203
203
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -210,7 +210,7 @@ section: utility-classes
210
210
  </div>
211
211
  <br />
212
212
  <h2 class="pf-v6-c-title pf-m-lg">Align content space-around</h2>
213
- <div class="pf-v6-u-display-flex pf-v5-u-align-content-space-around">
213
+ <div class="pf-v6-u-display-flex pf-v6-u-align-content-space-around">
214
214
  <div class="ws-example-flex-item">Flex item 1</div>
215
215
 
216
216
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -223,7 +223,7 @@ section: utility-classes
223
223
  </div>
224
224
  <br />
225
225
  <h2 class="pf-v6-c-title pf-m-lg">Align content space-between</h2>
226
- <div class="pf-v6-u-display-flex pf-v5-u-align-content-space-between">
226
+ <div class="pf-v6-u-display-flex pf-v6-u-align-content-space-between">
227
227
  <div class="ws-example-flex-item">Flex item 1</div>
228
228
 
229
229
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -236,7 +236,7 @@ section: utility-classes
236
236
  </div>
237
237
  <br />
238
238
  <h2 class="pf-v6-c-title pf-m-lg">Align content stretch</h2>
239
- <div class="pf-v6-u-display-flex pf-v5-u-align-content-stretch">
239
+ <div class="pf-v6-u-display-flex pf-v6-u-align-content-stretch">
240
240
  <div class="ws-example-flex-item">Flex item 1</div>
241
241
 
242
242
  <div class="ws-example-flex-item">Flex item 2</div>
@@ -254,8 +254,8 @@ section: utility-classes
254
254
 
255
255
  ```html
256
256
  <div class="pf-v6-u-display-flex">
257
- <div class="ws-example-flex-item pf-v5-u-flex-shrink-0">Flex shrink 0</div>
258
- <div class="ws-example-flex-item pf-v5-u-flex-shrink-1">Flex shrink 1</div>
257
+ <div class="ws-example-flex-item pf-v6-u-flex-shrink-0">Flex shrink 0</div>
258
+ <div class="ws-example-flex-item pf-v6-u-flex-shrink-1">Flex shrink 1</div>
259
259
  </div>
260
260
 
261
261
  ```
@@ -264,8 +264,8 @@ section: utility-classes
264
264
 
265
265
  ```html
266
266
  <div class="pf-v6-u-display-flex">
267
- <div class="ws-example-flex-item pf-v5-u-flex-grow-0">Flex grow 0</div>
268
- <div class="ws-example-flex-item pf-v5-u-flex-grow-1">Flex grow 1</div>
267
+ <div class="ws-example-flex-item pf-v6-u-flex-grow-0">Flex grow 0</div>
268
+ <div class="ws-example-flex-item pf-v6-u-flex-grow-1">Flex grow 1</div>
269
269
  </div>
270
270
 
271
271
  ```
@@ -274,10 +274,10 @@ section: utility-classes
274
274
 
275
275
  ```html
276
276
  <div class="pf-v6-u-display-flex">
277
- <div class="ws-example-flex-item pf-v5-u-flex-basis-0">Flex basis 0</div>
278
- <div class="ws-example-flex-item pf-v5-u-flex-basis-auto">Flex basis auto</div>
279
- <div class="ws-example-flex-item pf-v5-u-flex-basis-none">Flex basis none</div>
280
- <div class="ws-example-flex-item pf-v5-u-flex-1">Flex 1</div>
277
+ <div class="ws-example-flex-item pf-v6-u-flex-basis-0">Flex basis 0</div>
278
+ <div class="ws-example-flex-item pf-v6-u-flex-basis-auto">Flex basis auto</div>
279
+ <div class="ws-example-flex-item pf-v6-u-flex-basis-none">Flex basis none</div>
280
+ <div class="ws-example-flex-item pf-v6-u-flex-1">Flex 1</div>
281
281
  </div>
282
282
 
283
283
  ```
@@ -286,8 +286,8 @@ section: utility-classes
286
286
 
287
287
  ```html
288
288
  <div class="pf-v6-u-display-flex">
289
- <div class="ws-example-flex-item pf-v5-u-flex-none">Flex none</div>
290
- <div class="ws-example-flex-item pf-v5-u-flex-fill">Flex fill</div>
289
+ <div class="ws-example-flex-item pf-v6-u-flex-none">Flex none</div>
290
+ <div class="ws-example-flex-item pf-v6-u-flex-fill">Flex fill</div>
291
291
  </div>
292
292
 
293
293
  ```
@@ -296,30 +296,72 @@ section: utility-classes
296
296
 
297
297
  ```html
298
298
  <h2 class="pf-v6-c-title pf-m-lg">Flex wrap</h2>
299
- <div class="pf-v6-u-display-flex pf-v5-u-flex-wrap">
299
+ <div class="pf-v6-u-display-flex pf-v6-u-flex-wrap">
300
300
  <div class="ws-example-flex-item">Flex item 1</div>
301
301
 
302
302
  <div class="ws-example-flex-item">Flex item 2</div>
303
303
 
304
304
  <div class="ws-example-flex-item">Flex item 3</div>
305
+
306
+ <div class="ws-example-flex-item">Flex item 4</div>
307
+
308
+ <div class="ws-example-flex-item">Flex item 5</div>
309
+
310
+ <div class="ws-example-flex-item">Flex item 6</div>
311
+
312
+ <div class="ws-example-flex-item">Flex item 7</div>
313
+
314
+ <div class="ws-example-flex-item">Flex item 8</div>
315
+
316
+ <div class="ws-example-flex-item">Flex item 9</div>
317
+
318
+ <div class="ws-example-flex-item">Flex item 10</div>
305
319
  </div>
306
320
  <br />
307
321
  <h2 class="pf-v6-c-title pf-m-lg">Flex no wrap</h2>
308
- <div class="pf-v6-u-display-flex pf-v5-u-flex-nowrap">
322
+ <div class="pf-v6-u-display-flex pf-v6-u-flex-nowrap">
309
323
  <div class="ws-example-flex-item">Flex item 1</div>
310
324
 
311
325
  <div class="ws-example-flex-item">Flex item 2</div>
312
326
 
313
327
  <div class="ws-example-flex-item">Flex item 3</div>
328
+
329
+ <div class="ws-example-flex-item">Flex item 4</div>
330
+
331
+ <div class="ws-example-flex-item">Flex item 5</div>
332
+
333
+ <div class="ws-example-flex-item">Flex item 6</div>
334
+
335
+ <div class="ws-example-flex-item">Flex item 7</div>
336
+
337
+ <div class="ws-example-flex-item">Flex item 8</div>
338
+
339
+ <div class="ws-example-flex-item">Flex item 9</div>
340
+
341
+ <div class="ws-example-flex-item">Flex item 10</div>
314
342
  </div>
315
343
  <br />
316
344
  <h2 class="pf-v6-c-title pf-m-lg">Flex wrap reverse</h2>
317
- <div class="pf-v6-u-display-flex pf-v5-u-flex-wrap-reverse">
345
+ <div class="pf-v6-u-display-flex pf-v6-u-flex-wrap-reverse">
318
346
  <div class="ws-example-flex-item">Flex item 1</div>
319
347
 
320
348
  <div class="ws-example-flex-item">Flex item 2</div>
321
349
 
322
350
  <div class="ws-example-flex-item">Flex item 3</div>
351
+
352
+ <div class="ws-example-flex-item">Flex item 4</div>
353
+
354
+ <div class="ws-example-flex-item">Flex item 5</div>
355
+
356
+ <div class="ws-example-flex-item">Flex item 6</div>
357
+
358
+ <div class="ws-example-flex-item">Flex item 7</div>
359
+
360
+ <div class="ws-example-flex-item">Flex item 8</div>
361
+
362
+ <div class="ws-example-flex-item">Flex item 9</div>
363
+
364
+ <div class="ws-example-flex-item">Flex item 10</div>
323
365
  </div>
324
366
 
325
367
  ```
@@ -328,13 +370,13 @@ section: utility-classes
328
370
 
329
371
  ### Overview
330
372
 
331
- For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-flex-row-on-lg**
373
+ For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-flex-row-on-lg**
332
374
 
333
375
  <!-- ## Accessibility
334
376
 
335
377
  | Attribute | Applied to | Outcome |
336
378
  | -- | -- | -- |
337
- | `role` or `aria` | `pf-v5-u-flex` | accessibility notes. |
379
+ | `role` or `aria` | `pf-v6-u-flex` | accessibility notes. |
338
380
  -->
339
381
 
340
382
  ### Usage
package/docs/utilities/Float/examples/Float.css CHANGED
@@ -1,5 +1,5 @@
1
- .ws-core-u-float .pf-v5-u-float-left,
2
- .ws-core-u-float .pf-v5-u-float-right {
1
+ .ws-core-u-float .pf-v6-u-float-inline-start,
2
+ .ws-core-u-float .pf-v6-u-float-inline-end {
3
3
  padding: .5rem !important;
4
4
  border: 2px dashed #393f44;
5
5
  }
package/docs/utilities/Float/examples/Float.md CHANGED
@@ -8,9 +8,9 @@ section: utility-classes
8
8
  ### Basic
9
9
 
10
10
  ```html
11
- <div class="pf-v6-u-float-left">Float left</div>
12
- <div class="pf-v6-u-float-right">Float right</div>
13
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum, odit fugit eaque ad assumenda fuga alias aut ipsum repudiandae enim pariatur ullam distinctio omnis dolorem at voluptatum saepe, beatae officiis?</p>
11
+ <div class="pf-v6-u-float-inline-start">Float inline-start</div>
12
+ <div class="pf-v6-u-float-inline-end">Float inline-end</div>
13
+ <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum, odit fugit eaque ad assuminline-enda fuga alias aut ipsum repudiandae enim pariatur ullam distinctio omnis dolorem at voluptatum saepe, beatae officiis?</p>
14
14
 
15
15
  ```
16
16
 
@@ -18,11 +18,11 @@ section: utility-classes
18
18
 
19
19
  ### Overview
20
20
 
21
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-text-left-on-lg**
21
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-float-inline-start-on-lg**
22
22
 
23
23
  ### Usage
24
24
 
25
25
  | Class | Applied to | Outcome |
26
26
  | -- | -- | -- |
27
- | `.pf-v6-u-float-left{-on-[breakpoint]}` | `*` | Float element left |
28
- | `.pf-v6-u-float-right{-on-[breakpoint]}` | `*` | Float element right |
27
+ | `.pf-v6-u-float-inline-start{-on-[breakpoint]}` | `*` | Float element inline-start |
28
+ | `.pf-v6-u-float-inline-end{-on-[breakpoint]}` | `*` | Float element inline-end |
package/docs/utilities/Sizing/examples/Sizing.css CHANGED
@@ -1,7 +1,7 @@
1
- .pf-v5-u-min-width,
2
- .pf-v5-u-max-width,
3
- .pf-v5-u-min-height,
4
- .pf-v5-u-max-height,
1
+ .pf-v6-u-min-width,
2
+ .pf-v6-u-max-width,
3
+ .pf-v6-u-min-height,
4
+ .pf-v6-u-max-height,
5
5
  .ws-example-u-sizing-item {
6
6
  padding: .5rem !important;
7
7
  border: 2px dashed #393f44;
package/docs/utilities/Sizing/examples/Sizing.md CHANGED
@@ -8,21 +8,21 @@ section: utility-classes
8
8
  ### Width base and percentage units
9
9
 
10
10
  ```html
11
- <div class="ws-example-u-sizing-item pf-v5-u-w-0">.pf-v5-u-w-0</div>
12
- <div class="ws-example-u-sizing-item pf-v5-u-w-25">.pf-v5-u-w-25</div>
13
- <div class="ws-example-u-sizing-item pf-v5-u-w-50">.pf-v5-u-w-50</div>
14
- <div class="ws-example-u-sizing-item pf-v5-u-w-75">.pf-v5-u-w-75</div>
15
- <div class="ws-example-u-sizing-item pf-v5-u-w-100">.pf-v5-u-w-100</div>
11
+ <div class="ws-example-u-sizing-item pf-v6-u-w-0">.pf-v6-u-w-0</div>
12
+ <div class="ws-example-u-sizing-item pf-v6-u-w-25">.pf-v6-u-w-25</div>
13
+ <div class="ws-example-u-sizing-item pf-v6-u-w-50">.pf-v6-u-w-50</div>
14
+ <div class="ws-example-u-sizing-item pf-v6-u-w-75">.pf-v6-u-w-75</div>
15
+ <div class="ws-example-u-sizing-item pf-v6-u-w-100">.pf-v6-u-w-100</div>
16
16
  <div
17
- class="ws-example-u-sizing-item pf-v5-u-w-initial"
18
- >.pf-v5-u-w-initial (auto)</div>
19
- <div class="ws-example-u-sizing-item pf-v5-u-w-inherit">.pf-v5-u-w-inherit</div>
17
+ class="ws-example-u-sizing-item pf-v6-u-w-initial"
18
+ >.pf-v6-u-w-initial (auto)</div>
19
+ <div class="ws-example-u-sizing-item pf-v6-u-w-inherit">.pf-v6-u-w-inherit</div>
20
20
 
21
21
  ```
22
22
 
23
23
  ### Usage
24
24
 
25
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-w-initial-on-lg**
25
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-w-initial-on-lg**
26
26
 
27
27
  | Class | Applied to | Outcome |
28
28
  | -- | -- | -- |
@@ -39,18 +39,18 @@ section: utility-classes
39
39
  ### Width viewport units
40
40
 
41
41
  ```html isFullscreen
42
- <div class="ws-example-u-sizing-item pf-v5-u-w-25vw">.pf-v5-u-w-25vw</div>
43
- <div class="ws-example-u-sizing-item pf-v5-u-w-33vw">.pf-v5-u-w-33vw</div>
44
- <div class="ws-example-u-sizing-item pf-v5-u-w-50vw">.pf-v5-u-w-50vw</div>
45
- <div class="ws-example-u-sizing-item pf-v5-u-w-66vw">.pf-v5-u-w-66vw</div>
46
- <div class="ws-example-u-sizing-item pf-v5-u-w-75vw">.pf-v5-u-w-75vw</div>
47
- <div class="ws-example-u-sizing-item pf-v5-u-w-100vw">.pf-v5-u-w-100vw</div>
42
+ <div class="ws-example-u-sizing-item pf-v6-u-w-25vw">.pf-v6-u-w-25vw</div>
43
+ <div class="ws-example-u-sizing-item pf-v6-u-w-33vw">.pf-v6-u-w-33vw</div>
44
+ <div class="ws-example-u-sizing-item pf-v6-u-w-50vw">.pf-v6-u-w-50vw</div>
45
+ <div class="ws-example-u-sizing-item pf-v6-u-w-66vw">.pf-v6-u-w-66vw</div>
46
+ <div class="ws-example-u-sizing-item pf-v6-u-w-75vw">.pf-v6-u-w-75vw</div>
47
+ <div class="ws-example-u-sizing-item pf-v6-u-w-100vw">.pf-v6-u-w-100vw</div>
48
48
 
49
49
  ```
50
50
 
51
51
  ### Usage
52
52
 
53
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v5-u-w-25vw-on-lg**
53
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v6-u-w-25vw-on-lg**
54
54
 
55
55
  | Class | Applied to | Outcome |
56
56
  | -- | -- | -- |
@@ -65,32 +65,32 @@ section: utility-classes
65
65
 
66
66
  ```html
67
67
  <div
68
- class="ws-example-u-sizing-item pf-v5-u-h-0 pf-v5-u-display-inline-block"
69
- >.pf-v5-u-h-0</div>
68
+ class="ws-example-u-sizing-item pf-v6-u-h-0 pf-v6-u-display-inline-block"
69
+ >.pf-v6-u-h-0</div>
70
70
  <div
71
- class="ws-example-u-sizing-item pf-v5-u-h-25 pf-v5-u-display-inline-block"
72
- >.pf-v5-u-h-25</div>
71
+ class="ws-example-u-sizing-item pf-v6-u-h-25 pf-v6-u-display-inline-block"
72
+ >.pf-v6-u-h-25</div>
73
73
  <div
74
- class="ws-example-u-sizing-item pf-v5-u-h-50 pf-v5-u-display-inline-block"
75
- >.pf-v5-u-h-50</div>
74
+ class="ws-example-u-sizing-item pf-v6-u-h-50 pf-v6-u-display-inline-block"
75
+ >.pf-v6-u-h-50</div>
76
76
  <div
77
- class="ws-example-u-sizing-item pf-v5-u-h-75 pf-v5-u-display-inline-block"
78
- >.pf-v5-u-h-75</div>
77
+ class="ws-example-u-sizing-item pf-v6-u-h-75 pf-v6-u-display-inline-block"
78
+ >.pf-v6-u-h-75</div>
79
79
  <div
80
- class="ws-example-u-sizing-item pf-v5-u-h-100 pf-v5-u-display-inline-block"
81
- >.pf-v5-u-h-100</div>
80
+ class="ws-example-u-sizing-item pf-v6-u-h-100 pf-v6-u-display-inline-block"
81
+ >.pf-v6-u-h-100</div>
82
82
  <div
83
- class="ws-example-u-sizing-item pf-v5-u-h-initial pf-v5-u-display-inline-block"
84
- >.pf-v5-u-h-initial (auto)</div>
83
+ class="ws-example-u-sizing-item pf-v6-u-h-initial pf-v6-u-display-inline-block"
84
+ >.pf-v6-u-h-initial</div>
85
85
  <div
86
- class="ws-example-u-sizing-item pf-v5-u-h-inherit pf-v5-u-display-inline-block"
87
- >.pf-v5-u-h-inherit</div>
86
+ class="ws-example-u-sizing-item pf-v6-u-h-inherit pf-v6-u-display-inline-block"
87
+ >.pf-v6-u-h-inherit</div>
88
88
 
89
89
  ```
90
90
 
91
91
  ### Usage
92
92
 
93
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v5-u-h-initial-on-lg**
93
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v6-u-h-initial-on-lg**
94
94
 
95
95
  | Class | Applied to | Outcome |
96
96
  | -- | -- | -- |
@@ -108,29 +108,29 @@ section: utility-classes
108
108
 
109
109
  ```html isFullscreen
110
110
  <div
111
- class="ws-example-u-sizing-item pf-v5-u-h-25vh pf-v5-u-display-inline-block"
112
- >.pf-v5-u-h-25vh</div>
111
+ class="ws-example-u-sizing-item pf-v6-u-h-25vh pf-v6-u-display-inline-block"
112
+ >.pf-v6-u-h-25vh</div>
113
113
  <div
114
- class="ws-example-u-sizing-item pf-v5-u-h-33vh pf-v5-u-display-inline-block"
115
- >.pf-v5-u-h-33vh</div>
114
+ class="ws-example-u-sizing-item pf-v6-u-h-33vh pf-v6-u-display-inline-block"
115
+ >.pf-v6-u-h-33vh</div>
116
116
  <div
117
- class="ws-example-u-sizing-item pf-v5-u-h-50vh pf-v5-u-display-inline-block"
118
- >.pf-v5-u-h-50vh</div>
117
+ class="ws-example-u-sizing-item pf-v6-u-h-50vh pf-v6-u-display-inline-block"
118
+ >.pf-v6-u-h-50vh</div>
119
119
  <div
120
- class="ws-example-u-sizing-item pf-v5-u-h-66vh pf-v5-u-display-inline-block"
121
- >.pf-v5-u-h-66vh</div>
120
+ class="ws-example-u-sizing-item pf-v6-u-h-66vh pf-v6-u-display-inline-block"
121
+ >.pf-v6-u-h-66vh</div>
122
122
  <div
123
- class="ws-example-u-sizing-item pf-v5-u-h-75vh pf-v5-u-display-inline-block"
124
- >.pf-v5-u-h-75vh</div>
123
+ class="ws-example-u-sizing-item pf-v6-u-h-75vh pf-v6-u-display-inline-block"
124
+ >.pf-v6-u-h-75vh</div>
125
125
  <div
126
- class="ws-example-u-sizing-item pf-v5-u-h-100vh pf-v5-u-display-inline-block"
127
- >.pf-v5-u-h-100vh</div>
126
+ class="ws-example-u-sizing-item pf-v6-u-h-100vh pf-v6-u-display-inline-block"
127
+ >.pf-v6-u-h-100vh</div>
128
128
 
129
129
  ```
130
130
 
131
131
  ### Usage
132
132
 
133
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v5-u-h-25vh-on-lg**
133
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-v6-u-h-25vh-on-lg**
134
134
 
135
135
  | Class | Applied to | Outcome |
136
136
  | -- | -- | -- |
@@ -145,8 +145,8 @@ section: utility-classes
145
145
 
146
146
  ```html
147
147
  <div
148
- class="pf-v5-u-min-width"
149
- style="--pf-v5-u-min-width--MinWidth: 50ch;"
148
+ class="pf-v6-u-min-width"
149
+ style="--pf-v6-u-min-width--MinWidth: 50ch;"
150
150
  >Min-width 50ch example</div>
151
151
 
152
152
  ```
@@ -155,8 +155,8 @@ section: utility-classes
155
155
 
156
156
  ```html
157
157
  <div
158
- class="pf-v5-u-max-width"
159
- style="--pf-v5-u-max-width--MaxWidth: 50ch;"
158
+ class="pf-v6-u-max-width"
159
+ style="--pf-v6-u-max-width--MaxWidth: 50ch;"
160
160
  >Max-width 50ch example</div>
161
161
 
162
162
  ```
@@ -165,8 +165,8 @@ section: utility-classes
165
165
 
166
166
  ```html
167
167
  <div
168
- class="pf-v5-u-min-width pf-v5-u-max-width"
169
- style="--pf-v5-u-min-width--MinWidth: 30ch; --pf-v5-u-max-width--MaxWidth: 50ch;"
168
+ class="pf-v6-u-min-width pf-v6-u-max-width"
169
+ style="--pf-v6-u-min-width--MinWidth: 30ch; --pf-v6-u-max-width--MaxWidth: 50ch;"
170
170
  >Min-width 30ch, max-width 50ch example</div>
171
171
 
172
172
  ```
@@ -175,8 +175,8 @@ section: utility-classes
175
175
 
176
176
  ```html
177
177
  <div
178
- class="pf-v5-u-min-width pf-v5-u-max-width"
179
- style="--pf-v5-u-min-width--MinWidth: 20ch; --pf-v5-u-max-width--MaxWidth: 30ch; --pf-v5-u-max-width--MaxWidth-on-md: 50ch; --pf-v5-u-max-width--MaxWidth-on-xl: 70ch;"
178
+ class="pf-v6-u-min-width pf-v6-u-max-width"
179
+ style="--pf-v6-u-min-width--MinWidth: 20ch; --pf-v6-u-max-width--MaxWidth: 30ch; --pf-v6-u-max-width--MaxWidth-on-md: 50ch; --pf-v6-u-max-width--MaxWidth-on-xl: 70ch;"
180
180
  >Min-width 20ch, max-width 30ch, max-width-on-md 50ch, max-width-on-xl 70ch example</div>
181
181
 
182
182
  ```
@@ -199,8 +199,8 @@ section: utility-classes
199
199
 
200
200
  ```html
201
201
  <div
202
- class="pf-v5-u-min-height"
203
- style="--pf-v5-u-min-height--MinHeight: 50ch;"
202
+ class="pf-v6-u-min-height"
203
+ style="--pf-v6-u-min-height--MinHeight: 50ch;"
204
204
  >Min-height 50ch example</div>
205
205
 
206
206
  ```
@@ -209,8 +209,8 @@ section: utility-classes
209
209
 
210
210
  ```html
211
211
  <div
212
- class="pf-v5-u-max-height"
213
- style="--pf-v5-u-max-height--MaxHeight: 50ch;"
212
+ class="pf-v6-u-max-height"
213
+ style="--pf-v6-u-max-height--MaxHeight: 50ch;"
214
214
  >Max-height 50ch example</div>
215
215
 
216
216
  ```
@@ -219,8 +219,8 @@ section: utility-classes
219
219
 
220
220
  ```html
221
221
  <div
222
- class="pf-v5-u-min-height pf-v5-u-max-height"
223
- style="--pf-v5-u-min-height--MinHeight: 30ch; --pf-v5-u-max-height--MaxHeight: 50ch;"
222
+ class="pf-v6-u-min-height pf-v6-u-max-height"
223
+ style="--pf-v6-u-min-height--MinHeight: 30ch; --pf-v6-u-max-height--MaxHeight: 50ch;"
224
224
  >Min-height 30ch, max-height 50ch example</div>
225
225
 
226
226
  ```
@@ -229,8 +229,8 @@ section: utility-classes
229
229
 
230
230
  ```html
231
231
  <div
232
- class="pf-v5-u-min-height pf-v5-u-max-height"
233
- style="--pf-v5-u-min-height--MinHeight: 20ch; --pf-v5-u-max-height--MaxHeight: 30ch; --pf-v6-u-max-height--MaxHeight-on-md: 50ch; --pf-v6-u-max-height--MaxHeight-on-xl: 70ch;"
232
+ class="pf-v6-u-min-height pf-v6-u-max-height"
233
+ style="--pf-v6-u-min-height--MinHeight: 20ch; --pf-v6-u-max-height--MaxHeight: 30ch; --pf-v6-u-max-height--MaxHeight-on-md: 50ch; --pf-v6-u-max-height--MaxHeight-on-xl: 70ch;"
234
234
  >Min-height 20ch, max-height 30ch, max-height-on-md 50ch, max-height-on-xl 70ch example</div>
235
235
 
236
236
  ```
package/docs/utilities/Spacing/examples/Spacing.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ws-core-u-spacing .ws-example-flex-item,
2
- .ws-core-u-spacing .pf-v5-u-display-flex {
2
+ .ws-core-u-spacing .pf-v6-u-display-flex {
3
3
  padding: .5rem;
4
4
  border: 2px dashed #393f44;
5
5
  }