@patternfly/patternfly 4.176.0 → 4.176.1

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 (11) hide show
  1. package/components/Label/label.css +43 -12
  2. package/components/Label/label.scss +45 -13
  3. package/docs/components/Label/examples/Label.md +33 -67
  4. package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
  5. package/docs/demos/Card/examples/Card.md +0 -22
  6. package/docs/demos/Tabs/examples/Tabs.md +0 -2
  7. package/package.json +1 -1
  8. package/patternfly-no-reset.css +43 -12
  9. package/patternfly.css +43 -12
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
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/docs/components/Label/examples/Label.md CHANGED
@@ -18,7 +18,6 @@ cssPrefix: pf-c-label
18
18
  <span class="pf-c-label__icon">
19
19
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
20
20
  </span>
21
-
22
21
  Grey icon
23
22
  </span>
24
23
  </span>
@@ -41,7 +40,6 @@ cssPrefix: pf-c-label
41
40
  <span class="pf-c-label__icon">
42
41
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
43
42
  </span>
44
-
45
43
  Grey icon removable
46
44
  </span>
47
45
  <button
@@ -102,7 +100,6 @@ cssPrefix: pf-c-label
102
100
  <span class="pf-c-label__icon">
103
101
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
104
102
  </span>
105
-
106
103
  Blue icon
107
104
  </span>
108
105
  </span>
@@ -125,7 +122,6 @@ cssPrefix: pf-c-label
125
122
  <span class="pf-c-label__icon">
126
123
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
127
124
  </span>
128
-
129
125
  Blue icon removable
130
126
  </span>
131
127
  <button
@@ -186,7 +182,6 @@ cssPrefix: pf-c-label
186
182
  <span class="pf-c-label__icon">
187
183
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
188
184
  </span>
189
-
190
185
  Green icon
191
186
  </span>
192
187
  </span>
@@ -209,7 +204,6 @@ cssPrefix: pf-c-label
209
204
  <span class="pf-c-label__icon">
210
205
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
211
206
  </span>
212
-
213
207
  Green icon removable
214
208
  </span>
215
209
  <button
@@ -270,7 +264,6 @@ cssPrefix: pf-c-label
270
264
  <span class="pf-c-label__icon">
271
265
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
272
266
  </span>
273
-
274
267
  Orange icon
275
268
  </span>
276
269
  </span>
@@ -293,7 +286,6 @@ cssPrefix: pf-c-label
293
286
  <span class="pf-c-label__icon">
294
287
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
295
288
  </span>
296
-
297
289
  Orange icon removable
298
290
  </span>
299
291
  <button
@@ -354,7 +346,6 @@ cssPrefix: pf-c-label
354
346
  <span class="pf-c-label__icon">
355
347
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
356
348
  </span>
357
-
358
349
  Red icon
359
350
  </span>
360
351
  </span>
@@ -377,7 +368,6 @@ cssPrefix: pf-c-label
377
368
  <span class="pf-c-label__icon">
378
369
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
379
370
  </span>
380
-
381
371
  Red icon removable
382
372
  </span>
383
373
  <button
@@ -438,7 +428,6 @@ cssPrefix: pf-c-label
438
428
  <span class="pf-c-label__icon">
439
429
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
440
430
  </span>
441
-
442
431
  Purple icon
443
432
  </span>
444
433
  </span>
@@ -461,7 +450,6 @@ cssPrefix: pf-c-label
461
450
  <span class="pf-c-label__icon">
462
451
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
463
452
  </span>
464
-
465
453
  Purple icon removable
466
454
  </span>
467
455
  <button
@@ -522,7 +510,6 @@ cssPrefix: pf-c-label
522
510
  <span class="pf-c-label__icon">
523
511
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
524
512
  </span>
525
-
526
513
  Cyan icon
527
514
  </span>
528
515
  </span>
@@ -545,7 +532,6 @@ cssPrefix: pf-c-label
545
532
  <span class="pf-c-label__icon">
546
533
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
547
534
  </span>
548
-
549
535
  Cyan icon removable
550
536
  </span>
551
537
  <button
@@ -608,7 +594,6 @@ cssPrefix: pf-c-label
608
594
  <span class="pf-c-label__icon">
609
595
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
610
596
  </span>
611
-
612
597
  Grey icon
613
598
  </span>
614
599
  </span>
@@ -631,7 +616,6 @@ cssPrefix: pf-c-label
631
616
  <span class="pf-c-label__icon">
632
617
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
633
618
  </span>
634
-
635
619
  Grey icon removable
636
620
  </span>
637
621
  <button
@@ -674,7 +658,6 @@ cssPrefix: pf-c-label
674
658
  <span class="pf-c-label__icon">
675
659
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
676
660
  </span>
677
-
678
661
  Blue icon
679
662
  </span>
680
663
  </span>
@@ -697,7 +680,6 @@ cssPrefix: pf-c-label
697
680
  <span class="pf-c-label__icon">
698
681
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
699
682
  </span>
700
-
701
683
  Blue icon removable
702
684
  </span>
703
685
  <button
@@ -740,7 +722,6 @@ cssPrefix: pf-c-label
740
722
  <span class="pf-c-label__icon">
741
723
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
742
724
  </span>
743
-
744
725
  Green icon
745
726
  </span>
746
727
  </span>
@@ -763,7 +744,6 @@ cssPrefix: pf-c-label
763
744
  <span class="pf-c-label__icon">
764
745
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
765
746
  </span>
766
-
767
747
  Green icon removable
768
748
  </span>
769
749
  <button
@@ -806,7 +786,6 @@ cssPrefix: pf-c-label
806
786
  <span class="pf-c-label__icon">
807
787
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
808
788
  </span>
809
-
810
789
  Orange icon
811
790
  </span>
812
791
  </span>
@@ -829,7 +808,6 @@ cssPrefix: pf-c-label
829
808
  <span class="pf-c-label__icon">
830
809
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
831
810
  </span>
832
-
833
811
  Orange icon removable
834
812
  </span>
835
813
  <button
@@ -872,7 +850,6 @@ cssPrefix: pf-c-label
872
850
  <span class="pf-c-label__icon">
873
851
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
874
852
  </span>
875
-
876
853
  Red icon
877
854
  </span>
878
855
  </span>
@@ -895,7 +872,6 @@ cssPrefix: pf-c-label
895
872
  <span class="pf-c-label__icon">
896
873
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
897
874
  </span>
898
-
899
875
  Red icon removable
900
876
  </span>
901
877
  <button
@@ -938,7 +914,6 @@ cssPrefix: pf-c-label
938
914
  <span class="pf-c-label__icon">
939
915
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
940
916
  </span>
941
-
942
917
  Purple icon
943
918
  </span>
944
919
  </span>
@@ -961,7 +936,6 @@ cssPrefix: pf-c-label
961
936
  <span class="pf-c-label__icon">
962
937
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
963
938
  </span>
964
-
965
939
  Purple icon removable
966
940
  </span>
967
941
  <button
@@ -1004,7 +978,6 @@ cssPrefix: pf-c-label
1004
978
  <span class="pf-c-label__icon">
1005
979
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1006
980
  </span>
1007
-
1008
981
  Cyan icon
1009
982
  </span>
1010
983
  </span>
@@ -1027,7 +1000,6 @@ cssPrefix: pf-c-label
1027
1000
  <span class="pf-c-label__icon">
1028
1001
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1029
1002
  </span>
1030
-
1031
1003
  Cyan icon removable
1032
1004
  </span>
1033
1005
  <button
@@ -1072,7 +1044,6 @@ cssPrefix: pf-c-label
1072
1044
  <span class="pf-c-label__icon">
1073
1045
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1074
1046
  </span>
1075
-
1076
1047
  Compact icon
1077
1048
  </span>
1078
1049
  </span>
@@ -1095,7 +1066,6 @@ cssPrefix: pf-c-label
1095
1066
  <span class="pf-c-label__icon">
1096
1067
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1097
1068
  </span>
1098
-
1099
1069
  Compact icon removable
1100
1070
  </span>
1101
1071
  <button
@@ -1173,16 +1143,15 @@ This style of label is used to indicate overflow within a label group.
1173
1143
  - Remove `.pf-m-editable-active` from `.pf-c-label`
1174
1144
  - Change `.pf-c-label__editable-text` back to a button
1175
1145
 
1176
- ```html
1146
+ ```html isBeta
1177
1147
  <span class="pf-c-label pf-m-blue pf-m-editable">
1178
- <span class="pf-c-label__content">
1179
- <button
1180
- class="pf-c-label__editable-text"
1181
- id="editable-label-editable-text"
1182
- currvalue="Editable label"
1183
- aria-label="Editable text"
1184
- >Editable label</button>
1185
- </span>
1148
+ <button
1149
+ class="pf-c-label__content"
1150
+ id="editable-label-editable-content"
1151
+ currvalue="Editable label"
1152
+ aria-label="Editable text"
1153
+ >Editable label</button>
1154
+
1186
1155
  <button
1187
1156
  class="pf-c-button pf-m-plain"
1188
1157
  type="button"
@@ -1195,26 +1164,23 @@ This style of label is used to indicate overflow within a label group.
1195
1164
  </span>
1196
1165
 
1197
1166
  <span class="pf-c-label pf-m-blue pf-m-editable pf-m-editable-active">
1198
- <span class="pf-c-label__content">
1199
- <input
1200
- class="pf-c-label__editable-text"
1201
- id="editable-label-active-editable-text"
1202
- type="text"
1203
- value="Editable active"
1204
- aria-label="Editable text"
1205
- />
1206
- </span>
1167
+ <input
1168
+ class="pf-c-label__content"
1169
+ id="editable-label-active-editable-content"
1170
+ type="text"
1171
+ value="Editable active"
1172
+ aria-label="Editable text"
1173
+ />
1207
1174
  </span>
1208
1175
 
1209
- <span class="pf-c-label pf-m-compact pf-m-editable">
1210
- <span class="pf-c-label__content">
1211
- <button
1212
- class="pf-c-label__editable-text"
1213
- id="compact-editable-label-editable-text"
1214
- currvalue="Compact editable label"
1215
- aria-label="Editable text"
1216
- >Compact editable label</button>
1217
- </span>
1176
+ <span class="pf-c-label pf-m-compact pf-m-blue pf-m-editable">
1177
+ <button
1178
+ class="pf-c-label__content"
1179
+ id="compact-editable-label-editable-content"
1180
+ currvalue="Compact editable label"
1181
+ aria-label="Editable text"
1182
+ >Compact editable label</button>
1183
+
1218
1184
  <button
1219
1185
  class="pf-c-button pf-m-plain"
1220
1186
  type="button"
@@ -1226,16 +1192,16 @@ This style of label is used to indicate overflow within a label group.
1226
1192
  </button>
1227
1193
  </span>
1228
1194
 
1229
- <span class="pf-c-label pf-m-compact pf-m-editable pf-m-editable-active">
1230
- <span class="pf-c-label__content">
1231
- <input
1232
- class="pf-c-label__editable-text"
1233
- id="compact-editable-label-active-editable-text"
1234
- type="text"
1235
- value="Compact editable active"
1236
- aria-label="Editable text"
1237
- />
1238
- </span>
1195
+ <span
1196
+ class="pf-c-label pf-m-compact pf-m-blue pf-m-editable pf-m-editable-active"
1197
+ >
1198
+ <input
1199
+ class="pf-c-label__content"
1200
+ id="compact-editable-label-active-editable-content"
1201
+ type="text"
1202
+ value="Compact editable active"
1203
+ aria-label="Editable text"
1204
+ />
1239
1205
  </span>
1240
1206
 
1241
1207
  ```