@patternfly/patternfly 6.0.0-alpha.167 → 6.0.0-alpha.169

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 (15) hide show
  1. package/components/Switch/switch.css +0 -6
  2. package/components/Switch/switch.scss +0 -8
  3. package/components/Toolbar/toolbar.css +66 -792
  4. package/components/Toolbar/toolbar.scss +4 -14
  5. package/components/Truncate/truncate.css +1 -1
  6. package/components/Truncate/truncate.scss +1 -1
  7. package/components/_index.css +67 -799
  8. package/docs/components/Switch/examples/Switch.md +33 -148
  9. package/docs/demos/DataList/examples/DataList.md +2560 -2634
  10. package/docs/demos/Table/examples/Table.md +8321 -8680
  11. package/package.json +5 -5
  12. package/patternfly-no-globals.css +67 -799
  13. package/patternfly.css +67 -799
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/docs/components/Switch/examples/Switch.md CHANGED
@@ -11,48 +11,19 @@ cssPrefix: pf-v6-c-switch
11
11
  <input
12
12
  class="pf-v6-c-switch__input"
13
13
  type="checkbox"
14
+ role="switch"
14
15
  id="switch-with-label-1"
15
- aria-labelledby="switch-with-label-1-on"
16
+ aria-labelledby="switch-with-label-1-text"
16
17
  checked
17
18
  />
18
19
 
19
20
  <span class="pf-v6-c-switch__toggle"></span>
20
21
 
21
22
  <span
22
- class="pf-v6-c-switch__label pf-m-on"
23
- id="switch-with-label-1-on"
24
- aria-hidden="true"
25
- >Message when on</span>
26
-
27
- <span
28
- class="pf-v6-c-switch__label pf-m-off"
29
- id="switch-with-label-1-off"
23
+ class="pf-v6-c-switch__label"
24
+ id="switch-with-label-1-text"
30
25
  aria-hidden="true"
31
- >Message when off</span>
32
- </label>
33
-
34
- <br />
35
- <br />
36
- <label class="pf-v6-c-switch" for="switch-with-label-2">
37
- <input
38
- class="pf-v6-c-switch__input"
39
- type="checkbox"
40
- id="switch-with-label-2"
41
- aria-labelledby="switch-with-label-2-on"
42
- />
43
- <span class="pf-v6-c-switch__toggle"></span>
44
-
45
- <span
46
- class="pf-v6-c-switch__label pf-m-on"
47
- id="switch-with-label-2-on"
48
- aria-hidden="true"
49
- >Message when on</span>
50
-
51
- <span
52
- class="pf-v6-c-switch__label pf-m-off"
53
- id="switch-with-label-2-off"
54
- aria-hidden="true"
55
- >Message when off</span>
26
+ >Togglable option in basic example</span>
56
27
  </label>
57
28
 
58
29
  ```
@@ -64,8 +35,9 @@ cssPrefix: pf-v6-c-switch
64
35
  <input
65
36
  class="pf-v6-c-switch__input"
66
37
  type="checkbox"
38
+ role="switch"
67
39
  id="switch-reverse-1"
68
- aria-labelledby="switch-reverse-1-on"
40
+ aria-labelledby="switch-reverse-1-text"
69
41
  checked
70
42
  />
71
43
 
@@ -73,52 +45,23 @@ cssPrefix: pf-v6-c-switch
73
45
 
74
46
  <span
75
47
  class="pf-v6-c-switch__label pf-m-on"
76
- id="switch-reverse-1-on"
77
- aria-hidden="true"
78
- >Message when on</span>
79
-
80
- <span
81
- class="pf-v6-c-switch__label pf-m-off"
82
- id="switch-reverse-1-off"
83
- aria-hidden="true"
84
- >Message when off</span>
85
- </label>
86
-
87
- <br />
88
- <br />
89
- <label class="pf-v6-c-switch pf-m-reverse" for="switch-reverse-2">
90
- <input
91
- class="pf-v6-c-switch__input"
92
- type="checkbox"
93
- id="switch-reverse-2"
94
- aria-labelledby="switch-reverse-2-on"
95
- />
96
- <span class="pf-v6-c-switch__toggle"></span>
97
-
98
- <span
99
- class="pf-v6-c-switch__label pf-m-on"
100
- id="switch-reverse-2-on"
101
- aria-hidden="true"
102
- >Message when on</span>
103
-
104
- <span
105
- class="pf-v6-c-switch__label pf-m-off"
106
- id="switch-reverse-2-off"
48
+ id="switch-reverse-1-text"
107
49
  aria-hidden="true"
108
- >Message when off</span>
50
+ >Togglable option in reverse example</span>
109
51
  </label>
110
52
 
111
53
  ```
112
54
 
113
- ### Label and check
55
+ ### Label and check icon
114
56
 
115
57
  ```html
116
58
  <label class="pf-v6-c-switch" for="switch-label-check-1">
117
59
  <input
118
60
  class="pf-v6-c-switch__input"
119
61
  type="checkbox"
62
+ role="switch"
120
63
  id="switch-label-check-1"
121
- aria-labelledby="switch-label-check-1-on"
64
+ aria-labelledby="switch-label-check-1-text"
122
65
  checked
123
66
  />
124
67
 
@@ -129,56 +72,23 @@ cssPrefix: pf-v6-c-switch
129
72
  </span>
130
73
  <span
131
74
  class="pf-v6-c-switch__label pf-m-on"
132
- id="switch-label-check-1-on"
133
- aria-hidden="true"
134
- >Message when on</span>
135
-
136
- <span
137
- class="pf-v6-c-switch__label pf-m-off"
138
- id="switch-label-check-1-off"
75
+ id="switch-label-check-1-text"
139
76
  aria-hidden="true"
140
- >Message when off</span>
141
- </label>
142
-
143
- <br />
144
- <br />
145
- <label class="pf-v6-c-switch" for="switch-label-check-2">
146
- <input
147
- class="pf-v6-c-switch__input"
148
- type="checkbox"
149
- id="switch-label-check-2"
150
- aria-labelledby="switch-label-check-2-off"
151
- />
152
-
153
- <span class="pf-v6-c-switch__toggle">
154
- <span class="pf-v6-c-switch__toggle-icon">
155
- <i class="fas fa-check" aria-hidden="true"></i>
156
- </span>
157
- </span>
158
- <span
159
- class="pf-v6-c-switch__label pf-m-on"
160
- id="switch-label-check-2-on"
161
- aria-hidden="true"
162
- >Message when on</span>
163
-
164
- <span
165
- class="pf-v6-c-switch__label pf-m-off"
166
- id="switch-label-check-2-off"
167
- aria-hidden="true"
168
- >Message when off</span>
77
+ >Togglable option in check icon example</span>
169
78
  </label>
170
79
 
171
80
  ```
172
81
 
173
- ### Without label
82
+ ### Without visible text label
174
83
 
175
84
  ```html
176
85
  <label class="pf-v6-c-switch" for="switch-with-icon-1">
177
86
  <input
178
87
  class="pf-v6-c-switch__input"
179
88
  type="checkbox"
89
+ role="switch"
180
90
  id="switch-with-icon-1"
181
- aria-label="switch is off"
91
+ aria-label="Togglable option in no text label example"
182
92
  checked
183
93
  />
184
94
 
@@ -189,22 +99,6 @@ cssPrefix: pf-v6-c-switch
189
99
  </span>
190
100
  </label>
191
101
 
192
- <br />
193
- <br />
194
- <label class="pf-v6-c-switch" for="switch-with-icon-2">
195
- <input
196
- class="pf-v6-c-switch__input"
197
- type="checkbox"
198
- id="switch-with-icon-2"
199
- aria-label="switch is off"
200
- />
201
- <span class="pf-v6-c-switch__toggle">
202
- <span class="pf-v6-c-switch__toggle-icon">
203
- <i class="fas fa-check" aria-hidden="true"></i>
204
- </span>
205
- </span>
206
- </label>
207
-
208
102
  ```
209
103
 
210
104
  ### Disabled
@@ -214,8 +108,9 @@ cssPrefix: pf-v6-c-switch
214
108
  <input
215
109
  class="pf-v6-c-switch__input"
216
110
  type="checkbox"
111
+ role="switch"
217
112
  id="switch-disabled-1"
218
- aria-labelledby="switch-disabled-1-on"
113
+ aria-labelledby="switch-disabled-1-text"
219
114
  disabled
220
115
  checked
221
116
  />
@@ -223,16 +118,10 @@ cssPrefix: pf-v6-c-switch
223
118
  <span class="pf-v6-c-switch__toggle"></span>
224
119
 
225
120
  <span
226
- class="pf-v6-c-switch__label pf-m-on"
227
- id="switch-disabled-1-on"
228
- aria-hidden="true"
229
- >Message when on</span>
230
-
231
- <span
232
- class="pf-v6-c-switch__label pf-m-off"
233
- id="switch-disabled-1-off"
121
+ class="pf-v6-c-switch__label"
122
+ id="switch-disabled-1-text"
234
123
  aria-hidden="true"
235
- >Message when off</span>
124
+ >Togglable option in disabled example</span>
236
125
  </label>
237
126
 
238
127
  <br />
@@ -241,24 +130,19 @@ cssPrefix: pf-v6-c-switch
241
130
  <input
242
131
  class="pf-v6-c-switch__input"
243
132
  type="checkbox"
133
+ role="switch"
244
134
  id="switch-disabled-2"
245
- aria-labelledby="switch-disabled-2-on"
135
+ aria-labelledby="switch-disabled-2-text"
246
136
  disabled
247
137
  />
248
138
 
249
139
  <span class="pf-v6-c-switch__toggle"></span>
250
140
 
251
141
  <span
252
- class="pf-v6-c-switch__label pf-m-on"
253
- id="switch-disabled-2-on"
254
- aria-hidden="true"
255
- >Message when on</span>
256
-
257
- <span
258
- class="pf-v6-c-switch__label pf-m-off"
259
- id="switch-disabled-2-off"
142
+ class="pf-v6-c-switch__label"
143
+ id="switch-disabled-2-text"
260
144
  aria-hidden="true"
261
- >Message when off</span>
145
+ >Togglable option in basic example</span>
262
146
  </label>
263
147
 
264
148
  <br />
@@ -267,8 +151,9 @@ cssPrefix: pf-v6-c-switch
267
151
  <input
268
152
  class="pf-v6-c-switch__input"
269
153
  type="checkbox"
154
+ role="switch"
270
155
  id="switch-with-icon-disabled-1"
271
- aria-label="switch is off"
156
+ aria-label="Togglable option in disabled icon example"
272
157
  disabled
273
158
  checked
274
159
  />
@@ -286,8 +171,9 @@ cssPrefix: pf-v6-c-switch
286
171
  <input
287
172
  class="pf-v6-c-switch__input"
288
173
  type="checkbox"
174
+ role="switch"
289
175
  id="switch-with-icon-disabled-2"
290
- aria-label="switch is off"
176
+ aria-label="Togglable option in disabled icon example"
291
177
  disabled
292
178
  />
293
179
  <span class="pf-v6-c-switch__toggle">
@@ -313,9 +199,10 @@ Use checkbox if your user has to perform additional steps for changes to become
313
199
 
314
200
  | Attribute | Applied to | Outcome |
315
201
  | -- | -- | -- |
316
- | `aria-labelledby="..."` or `aria-label="..."` | `.pf-v6-c-switch__input` | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-v6-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-v6-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
202
+ | `aria-labelledby="..."` or `aria-label="..."` | `.pf-v6-c-switch__input` | Indicates the behavior of the switch. This label should never dynamically change, and should always describe the behavior of the switch when its checked state is true. If an additional text label is included with the switch besides `.pf-v6-c-switch__label`, then `aria-labelledby` can reference the `id` of this text, but it must be in addition to the text of `.pf-v6-c-switch__label`. If there is no visible text label provided, then an `aria-label` must be provided. **Required** |
317
203
  | `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its input id. **Required** |
318
204
  | `id` | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required** |
205
+ | `role="switch"` | `<input type="checkbox">` | Exposes the element as a switch for assistive technologies. **Required** |
319
206
  | `id` | `.pf-v6-c-switch__label` | Each `.pf-v6-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-v6-c-switch__input`. |
320
207
  | `checked` | `.pf-v6-c-switch__input` | Indicates that the input is checked |
321
208
  | `disabled` | `.pf-v6-c-switch__input` | Indicates that the input is disabled |
@@ -330,6 +217,4 @@ Use checkbox if your user has to perform additional steps for changes to become
330
217
  | `.pf-v6-c-switch__toggle` | `<span>` | Initiates the toggle inside the switch. **Required** |
331
218
  | `.pf-v6-c-switch__toggle-icon` | `<span>` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
332
219
  | `.pf-v6-c-switch__label` | `<span>` | Initiates a label inside the switch. |
333
- | `.pf-m-on` | `.pf-v6-c-switch__label` | Modifies the switch label to display the on message. |
334
- | `.pf-m-off` | `.pf-v6-c-switch__label` | Modifies the switch label to display the off message. |
335
220
  | `.pf-m-reverse` | `.pf-v6-c-switch` | Positions the switch toggle to the right of the label. |