@patternfly/patternfly 4.174.0 → 4.176.2

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/components/AlertGroup/alert-group.css +36 -0
  2. package/components/AlertGroup/alert-group.scss +41 -0
  3. package/components/Label/label.css +43 -12
  4. package/components/Label/label.scss +45 -13
  5. package/components/Nav/nav.css +11 -0
  6. package/components/Nav/nav.scss +14 -0
  7. package/components/TextInputGroup/text-input-group.css +4 -0
  8. package/components/TextInputGroup/text-input-group.scss +5 -0
  9. package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
  10. package/docs/components/Label/examples/Label.md +33 -67
  11. package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
  12. package/docs/components/LogViewer/examples/LogViewer.md +9 -9
  13. package/docs/components/Menu/examples/Menu.md +43 -42
  14. package/docs/components/Nav/examples/Navigation.md +23 -44
  15. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -1
  16. package/docs/demos/Card/examples/Card.md +0 -22
  17. package/docs/demos/Masthead/examples/Masthead.md +12 -4
  18. package/docs/demos/Tabs/examples/Tabs.md +0 -2
  19. package/package.json +1 -1
  20. package/patternfly-no-reset.css +94 -12
  21. package/patternfly.css +94 -12
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/components/AlertGroup/alert-group.css CHANGED
@@ -4,6 +4,20 @@
4
4
  --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
5
5
  --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
6
6
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
7
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
8
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
10
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
11
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
12
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
13
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
14
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
15
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
16
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
17
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
18
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
19
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
20
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
7
21
  }
8
22
  .pf-c-alert-group > * + * {
9
23
  margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -15,4 +29,26 @@
15
29
  z-index: var(--pf-c-alert-group--m-toast--ZIndex);
16
30
  width: calc(100% - calc(var(--pf-c-alert-group--m-toast--Right) * 2));
17
31
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
32
+ }
33
+
34
+ .pf-c-alert-group__overflow-button {
35
+ position: relative;
36
+ width: 100%;
37
+ padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
38
+ color: var(--pf-c-alert-group__overflow-button--Color);
39
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
40
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
41
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
42
+ }
43
+ .pf-c-alert-group__overflow-button:hover {
44
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
45
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
46
+ }
47
+ .pf-c-alert-group__overflow-button:focus {
48
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
49
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
50
+ }
51
+ .pf-c-alert-group__overflow-button:active {
52
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
53
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
18
54
  }
package/components/AlertGroup/alert-group.scss CHANGED
@@ -9,6 +9,22 @@
9
9
  --pf-c-alert-group--m-toast--MaxWidth: #{pf-size-prem(600px)};
10
10
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
11
11
 
12
+ // Overflow button
13
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
14
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
15
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
16
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
17
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
18
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
19
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
20
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
21
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
22
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
23
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
24
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
25
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
26
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
27
+
12
28
  // Spacing between alerts
13
29
  > * + * {
14
30
  margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -24,3 +40,28 @@
24
40
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
25
41
  }
26
42
  }
43
+
44
+ .pf-c-alert-group__overflow-button {
45
+ position: relative;
46
+ width: 100%;
47
+ padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
48
+ color: var(--pf-c-alert-group__overflow-button--Color);
49
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
50
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
51
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
52
+
53
+ &:hover {
54
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
55
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
56
+ }
57
+
58
+ &:focus {
59
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
60
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
61
+ }
62
+
63
+ &:active {
64
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
65
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
66
+ }
67
+ }
package/components/Label/label.css CHANGED
@@ -95,7 +95,9 @@
95
95
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
96
96
  --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
97
97
  --pf-c-label__content--Color: var(--pf-global--Color--100);
98
+ --pf-c-label__content--MaxWidth: 100%;
98
99
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
100
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
99
101
  --pf-c-label__text--MaxWidth: 16ch;
100
102
  --pf-c-label__icon--Color: var(--pf-global--Color--100);
101
103
  --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
@@ -108,8 +110,6 @@
108
110
  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
109
111
  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
110
112
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
111
- --pf-c-label__editable-text--MaxWidth: 16ch;
112
- --pf-c-label__editable-text--BorderWidth: 0;
113
113
  --pf-c-label--m-editable--Cursor: pointer;
114
114
  --pf-c-label--m-editable--TextDecoration: underline;
115
115
  --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -118,6 +118,12 @@
118
118
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
119
119
  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
120
120
  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
121
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
122
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
123
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
124
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
125
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
126
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
121
127
  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
122
128
  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
123
129
  --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
@@ -151,6 +157,9 @@
151
157
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
152
158
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
153
159
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
160
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
161
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
162
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
154
163
  }
155
164
  .pf-c-label.pf-m-green {
156
165
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
@@ -163,6 +172,9 @@
163
172
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
164
173
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
165
174
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
175
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
176
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
177
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
166
178
  }
167
179
  .pf-c-label.pf-m-orange {
168
180
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
@@ -175,6 +187,9 @@
175
187
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
176
188
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
177
189
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
190
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
191
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
192
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
178
193
  }
179
194
  .pf-c-label.pf-m-red {
180
195
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
@@ -187,6 +202,9 @@
187
202
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
188
203
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
189
204
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
205
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
206
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
207
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
190
208
  }
191
209
  .pf-c-label.pf-m-purple {
192
210
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
@@ -199,6 +217,9 @@
199
217
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
200
218
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
201
219
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
220
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
221
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
222
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
202
223
  }
203
224
  .pf-c-label.pf-m-cyan {
204
225
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
@@ -211,12 +232,18 @@
211
232
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
212
233
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
213
234
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
235
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
236
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
237
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
214
238
  }
215
239
  .pf-c-label.pf-m-outline {
216
240
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
217
241
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
218
242
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
219
243
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
244
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
245
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
246
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
220
247
  }
221
248
  .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
222
249
  .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
@@ -236,6 +263,15 @@
236
263
  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
237
264
  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
238
265
  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
266
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
267
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
268
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
269
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
270
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
271
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
272
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
273
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
274
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
239
275
  }
240
276
  .pf-c-label.pf-m-editable:hover {
241
277
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
@@ -247,19 +283,10 @@
247
283
  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
248
284
  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
249
285
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
250
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
251
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
252
286
  }
253
287
  .pf-c-label.pf-m-editable-active .pf-c-button {
254
288
  visibility: hidden;
255
289
  }
256
- .pf-c-label .pf-c-label__editable-text {
257
- overflow: hidden;
258
- text-overflow: ellipsis;
259
- white-space: nowrap;
260
- max-width: var(--pf-c-label__editable-text--MaxWidth);
261
- border-width: var(--pf-c-label__editable-text--BorderWidth);
262
- }
263
290
  .pf-c-label .pf-c-button {
264
291
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
265
292
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -296,8 +323,12 @@
296
323
  }
297
324
 
298
325
  .pf-c-label__content {
326
+ overflow: hidden;
327
+ text-overflow: ellipsis;
328
+ white-space: nowrap;
329
+ max-width: var(--pf-c-label__content--MaxWidth);
299
330
  color: var(--pf-c-label__content--Color);
300
- border: 0;
331
+ border-width: 0;
301
332
  }
302
333
  .pf-c-label__content::before {
303
334
  position: absolute;
package/components/Label/label.scss CHANGED
@@ -122,7 +122,9 @@
122
122
 
123
123
  // Content
124
124
  --pf-c-label__content--Color: var(--pf-global--Color--100);
125
+ --pf-c-label__content--MaxWidth: 100%;
125
126
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
127
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
126
128
 
127
129
  // text
128
130
  --pf-c-label__text--MaxWidth: 16ch;
@@ -143,8 +145,6 @@
143
145
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
144
146
 
145
147
  // Editable
146
- --pf-c-label__editable-text--MaxWidth: 16ch;
147
- --pf-c-label__editable-text--BorderWidth: 0;
148
148
  --pf-c-label--m-editable--Cursor: pointer;
149
149
  --pf-c-label--m-editable--TextDecoration: underline;
150
150
  --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -153,7 +153,12 @@
153
153
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
154
154
  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
155
155
  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
156
-
156
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
157
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
158
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
159
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
160
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
161
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
157
162
 
158
163
  // Editable active
159
164
  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
@@ -191,6 +196,9 @@
191
196
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
192
197
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
193
198
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
199
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
200
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
201
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
194
202
  }
195
203
 
196
204
  &.pf-m-green {
@@ -204,6 +212,9 @@
204
212
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
205
213
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
206
214
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
215
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
216
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
217
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
207
218
  }
208
219
 
209
220
  &.pf-m-orange {
@@ -217,6 +228,9 @@
217
228
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
218
229
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
219
230
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
231
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
232
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
233
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
220
234
  }
221
235
 
222
236
  &.pf-m-red {
@@ -230,6 +244,9 @@
230
244
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
231
245
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
232
246
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
247
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
248
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
249
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
233
250
  }
234
251
 
235
252
  &.pf-m-purple {
@@ -243,6 +260,9 @@
243
260
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
244
261
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
245
262
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
263
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
264
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
265
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
246
266
  }
247
267
 
248
268
  &.pf-m-cyan {
@@ -256,6 +276,9 @@
256
276
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
257
277
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
258
278
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
279
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
280
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
281
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
259
282
  }
260
283
 
261
284
  &.pf-m-outline {
@@ -263,6 +286,9 @@
263
286
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
264
287
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
265
288
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
289
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
290
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
291
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
266
292
 
267
293
  // stylelint-disable selector-no-qualifying-type, max-nesting-depth
268
294
  a,
@@ -292,6 +318,18 @@
292
318
  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
293
319
  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
294
320
 
321
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
322
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
323
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
324
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
325
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
326
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
327
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
328
+
329
+ // override the outline variant border width
330
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
331
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
332
+
295
333
  &:hover {
296
334
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
297
335
  }
@@ -305,21 +343,12 @@
305
343
  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
306
344
  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
307
345
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
308
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
309
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
310
346
 
311
347
  .pf-c-button {
312
348
  visibility: hidden; // use visibility hidden to retain positioning
313
349
  }
314
350
  }
315
351
 
316
- .pf-c-label__editable-text {
317
- @include pf-text-overflow;
318
-
319
- max-width: var(--pf-c-label__editable-text--MaxWidth);
320
- border-width: var(--pf-c-label__editable-text--BorderWidth);
321
- }
322
-
323
352
  .pf-c-button {
324
353
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
325
354
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -358,8 +387,11 @@
358
387
  }
359
388
 
360
389
  .pf-c-label__content {
390
+ @include pf-text-overflow;
391
+
392
+ max-width: var(--pf-c-label__content--MaxWidth);
361
393
  color: var(--pf-c-label__content--Color);
362
- border: 0;
394
+ border-width: 0;
363
395
 
364
396
  &::before {
365
397
  position: absolute;
package/components/Nav/nav.css CHANGED
@@ -271,6 +271,8 @@
271
271
  --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
272
272
  --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
273
273
  --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
274
+ --pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-global--BorderWidth--lg);
275
+ --pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-global--FontWeight--bold);
274
276
  --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
275
277
  --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
276
278
  --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
@@ -399,6 +401,15 @@
399
401
  --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
400
402
  background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
401
403
  }
404
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) {
405
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
406
+ }
407
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item {
408
+ --pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
409
+ }
410
+ .pf-c-nav .pf-c-menu__item-toggle-icon {
411
+ margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
412
+ }
402
413
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
403
414
  content: none;
404
415
  }
package/components/Nav/nav.scss CHANGED
@@ -329,6 +329,8 @@
329
329
  --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
330
330
  --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
331
331
  --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
332
+ --pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-global--BorderWidth--lg);
333
+ --pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-global--FontWeight--bold);
332
334
 
333
335
  // Menu item
334
336
  --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
@@ -489,6 +491,18 @@
489
491
  }
490
492
  }
491
493
 
494
+ .pf-c-menu__list-item:where(.pf-m-drill-up) {
495
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
496
+
497
+ > .pf-c-menu__item {
498
+ --pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
499
+ }
500
+ }
501
+
502
+ .pf-c-menu__item-toggle-icon {
503
+ margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
504
+ }
505
+
492
506
  &.pf-m-horizontal,
493
507
  &.pf-m-tertiary {
494
508
  .pf-c-nav__link::after {
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -15,6 +15,7 @@
15
15
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
16
16
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
17
17
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
18
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
18
19
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
19
20
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
20
21
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -121,6 +122,9 @@
121
122
  .pf-c-text-input-group__text-input.pf-m-hint {
122
123
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
123
124
  }
125
+ .pf-c-text-input-group__text-input::placeholder {
126
+ color: var(--pf-c-text-input-group--placeholder--Color);
127
+ }
124
128
 
125
129
  .pf-c-text-input-group__utilities {
126
130
  display: flex;
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -24,6 +24,7 @@
24
24
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
25
25
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
26
26
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200); // matches placeholder text color
27
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
27
28
 
28
29
  // Icon
29
30
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
@@ -157,6 +158,10 @@
157
158
  &.pf-m-hint {
158
159
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
159
160
  }
161
+
162
+ &::placeholder {
163
+ color: var(--pf-c-text-input-group--placeholder--Color);
164
+ }
160
165
  }
161
166
 
162
167
  .pf-c-text-input-group__utilities {
package/docs/components/AlertGroup/examples/AlertGroup.md CHANGED
@@ -139,6 +139,10 @@ cssPrefix: pf-c-alert-group
139
139
  </div>
140
140
  </div>
141
141
  </li>
142
+
143
+ <li class="pf-c-alert-group__item">
144
+ <button class="pf-c-alert-group__overflow-button">View 3 more notifications</button>
145
+ </li>
142
146
  </ul>
143
147
 
144
148
  ```
@@ -158,9 +162,10 @@ For sighted users, interactive elements can be included in this message in one o
158
162
 
159
163
  ### Modifiers
160
164
 
161
- | Class | Applied to | Outcome |
162
- | ------------- | ------------------- | ---------------------------------------------- |
163
- | `.pf-m-toast` | `.pf-c-alert-group` | Applies toast alert styling to an alert group. |
165
+ | Class | Applied to | Outcome |
166
+ | ------------------------------------ | ------------------- | ------------------------------------------------------------------ |
167
+ | `.pf-m-toast` | `.pf-c-alert-group` | Applies toast alert styling to an alert group. |
168
+ | `.pf-c-alert-group__overflow-button` | `<button>` | Applies overflow button styling to an alert group overflow button. |
164
169
 
165
170
  ## Documentation
166
171