@patternfly/patternfly 5.0.0-alpha.20 → 5.0.0-alpha.22

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 (29) hide show
  1. package/components/Chip/chip.css +33 -24
  2. package/components/Chip/chip.scss +40 -31
  3. package/components/Label/label.css +35 -24
  4. package/components/Label/label.scss +40 -27
  5. package/components/Table/table-tree-view.css +10 -0
  6. package/components/Table/table-tree-view.scss +15 -0
  7. package/components/Table/table.css +4 -0
  8. package/components/Table/table.scss +4 -0
  9. package/docs/components/Chip/examples/Chip.md +61 -43
  10. package/docs/components/ChipGroup/examples/ChipGroup.md +437 -329
  11. package/docs/components/InlineEdit/examples/InlineEdit.md +5 -3
  12. package/docs/components/Label/examples/Label.md +1399 -718
  13. package/docs/components/LabelGroup/examples/LabelGroup.md +274 -209
  14. package/docs/components/Select/examples/Select.md +224 -170
  15. package/docs/components/Table/examples/Table.md +565 -41
  16. package/docs/components/TextInputGroup/examples/TextInputGroup.md +343 -261
  17. package/docs/components/Toolbar/examples/Toolbar.md +306 -234
  18. package/docs/demos/Card/examples/Card.md +29 -27
  19. package/docs/demos/Dashboard/examples/Dashboard.md +23 -15
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -9
  21. package/docs/demos/Drawer/examples/Drawer.md +4 -2
  22. package/docs/demos/Form/examples/BasicForms.md +28 -22
  23. package/docs/demos/Tabs/examples/Tabs.md +39 -16
  24. package/docs/demos/Toolbar/examples/Toolbar.md +102 -78
  25. package/package.json +2 -2
  26. package/patternfly-no-reset.css +82 -48
  27. package/patternfly.css +82 -48
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/components/Chip/chip.css CHANGED
@@ -22,18 +22,19 @@
22
22
  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
23
23
  --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
24
24
  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
25
- --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
25
+ --pf-c-chip__content--FontSize: var(--pf-global--FontSize--xs);
26
+ --pf-c-chip__content--ColumnGap: var(--pf-global--spacer--xs);
26
27
  --pf-c-chip__text--Color: var(--pf-global--Color--100);
27
28
  --pf-c-chip__text--MaxWidth: 16ch;
28
- --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
29
- --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
30
- --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
31
- --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
32
- --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
33
- --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
34
- --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
35
- --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
36
- --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
29
+ --pf-c-chip__actions--FontSize: var(--pf-global--FontSize--xs);
30
+ --pf-c-chip__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
31
+ --pf-c-chip__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
32
+ --pf-c-chip__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
33
+ --pf-c-chip__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
34
+ --pf-c-chip__actions--c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
35
+ --pf-c-chip__actions--c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
36
+ --pf-c-chip__actions--c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
37
+ --pf-c-chip__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
37
38
  --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
38
39
  color: var(--pf-global--Color--100);
39
40
  position: relative;
@@ -68,19 +69,6 @@
68
69
  .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
69
70
  font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
70
71
  }
71
- .pf-c-chip .pf-c-button {
72
- --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
73
- --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
74
- --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
75
- --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
76
- --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
77
- margin-top: var(--pf-c-chip__c-button--MarginTop);
78
- margin-right: var(--pf-c-chip__c-button--MarginRight);
79
- margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
80
- }
81
- .pf-c-chip .pf-c-badge {
82
- margin-left: var(--pf-c-chip__c-badge--MarginLeft);
83
- }
84
72
 
85
73
  .pf-c-chip__text {
86
74
  overflow: hidden;
@@ -88,7 +76,6 @@
88
76
  white-space: nowrap;
89
77
  position: relative;
90
78
  max-width: var(--pf-c-chip__text--MaxWidth);
91
- font-size: var(--pf-c-chip__text--FontSize);
92
79
  color: var(--pf-c-chip__text--Color);
93
80
  }
94
81
 
@@ -97,6 +84,28 @@
97
84
  margin-left: var(--pf-c-chip__icon--MarginLeft);
98
85
  }
99
86
 
87
+ .pf-c-chip__content {
88
+ display: flex;
89
+ align-items: center;
90
+ column-gap: var(--pf-c-chip__content--ColumnGap);
91
+ font-size: var(--pf-c-chip__content--FontSize);
92
+ }
93
+
94
+ .pf-c-chip__actions {
95
+ font-size: var(--pf-c-chip__actions--FontSize);
96
+ }
97
+ .pf-c-chip__actions .pf-c-button {
98
+ --pf-c-button--PaddingTop: var(--pf-c-chip__actions--c-button--PaddingTop);
99
+ --pf-c-button--PaddingRight: var(--pf-c-chip__actions--c-button--PaddingRight);
100
+ --pf-c-button--PaddingBottom: var(--pf-c-chip__actions--c-button--PaddingBottom);
101
+ --pf-c-button--PaddingLeft: var(--pf-c-chip__actions--c-button--PaddingLeft);
102
+ --pf-c-button--FontSize: var(--pf-c-chip__actions--c-button--FontSize);
103
+ margin-top: var(--pf-c-chip__actions--c-button--MarginTop);
104
+ margin-right: var(--pf-c-chip__actions--c-button--MarginRight);
105
+ margin-bottom: var(--pf-c-chip__actions--c-button--MarginBottom);
106
+ line-height: 1;
107
+ }
108
+
100
109
  :where(.pf-theme-dark) .pf-c-chip {
101
110
  --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
102
111
  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
package/components/Chip/chip.scss CHANGED
@@ -17,23 +17,26 @@
17
17
  --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
18
18
  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
19
19
 
20
+ // chip content
21
+ --pf-c-chip__content--FontSize: var(--pf-global--FontSize--xs);
22
+ --pf-c-chip__content--ColumnGap: var(--pf-global--spacer--xs);
23
+
20
24
  // chip text
21
- --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
22
25
  --pf-c-chip__text--Color: var(--pf-global--Color--100);
23
26
  --pf-c-chip__text--MaxWidth: 16ch;
24
27
 
25
- // chip button
26
- --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
27
- --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
28
- --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
29
- --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
30
- --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
31
- --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
32
- --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
33
- --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
28
+ // chip actions
29
+ --pf-c-chip__actions--FontSize: var(--pf-global--FontSize--xs);
34
30
 
35
- // chip badge
36
- --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
31
+ // buttons within chip actions
32
+ --pf-c-chip__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
33
+ --pf-c-chip__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
34
+ --pf-c-chip__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
35
+ --pf-c-chip__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
36
+ --pf-c-chip__actions--c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
37
+ --pf-c-chip__actions--c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
38
+ --pf-c-chip__actions--c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
39
+ --pf-c-chip__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
37
40
 
38
41
  // icon
39
42
  --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
@@ -78,24 +81,6 @@
78
81
  font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
79
82
  }
80
83
  }
81
-
82
- // Button
83
- .pf-c-button {
84
- --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
85
- --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
86
- --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
87
- --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
88
- --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
89
-
90
- margin-top: var(--pf-c-chip__c-button--MarginTop);
91
- margin-right: var(--pf-c-chip__c-button--MarginRight);
92
- margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
93
- }
94
-
95
- // badge
96
- .pf-c-badge {
97
- margin-left: var(--pf-c-chip__c-badge--MarginLeft);
98
- }
99
84
  }
100
85
 
101
86
  // Text element
@@ -104,7 +89,6 @@
104
89
 
105
90
  position: relative;
106
91
  max-width: var(--pf-c-chip__text--MaxWidth);
107
- font-size: var(--pf-c-chip__text--FontSize);
108
92
  color: var(--pf-c-chip__text--Color);
109
93
  }
110
94
 
@@ -113,6 +97,31 @@
113
97
  margin-left: var(--pf-c-chip__icon--MarginLeft);
114
98
  }
115
99
 
100
+ .pf-c-chip__content {
101
+ display: flex;
102
+ align-items: center;
103
+ column-gap: var(--pf-c-chip__content--ColumnGap);
104
+ font-size: var(--pf-c-chip__content--FontSize);
105
+ }
106
+
107
+ .pf-c-chip__actions {
108
+ font-size: var(--pf-c-chip__actions--FontSize);
109
+
110
+ // Actions Button
111
+ .pf-c-button {
112
+ --pf-c-button--PaddingTop: var(--pf-c-chip__actions--c-button--PaddingTop);
113
+ --pf-c-button--PaddingRight: var(--pf-c-chip__actions--c-button--PaddingRight);
114
+ --pf-c-button--PaddingBottom: var(--pf-c-chip__actions--c-button--PaddingBottom);
115
+ --pf-c-button--PaddingLeft: var(--pf-c-chip__actions--c-button--PaddingLeft);
116
+ --pf-c-button--FontSize: var(--pf-c-chip__actions--c-button--FontSize);
117
+
118
+ margin-top: var(--pf-c-chip__actions--c-button--MarginTop);
119
+ margin-right: var(--pf-c-chip__actions--c-button--MarginRight);
120
+ margin-bottom: var(--pf-c-chip__actions--c-button--MarginBottom);
121
+ line-height: 1;
122
+ }
123
+ }
124
+
116
125
  // stylelint-disable no-invalid-position-at-import-rule
117
126
  @import "themes/dark/chip";
118
127
 
package/components/Label/label.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
4
4
  --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
5
5
  --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
6
+ --pf-c-label--MaxWidth: 100%;
6
7
  --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
7
8
  --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
8
9
  --pf-c-label--Color: var(--pf-global--Color--100);
@@ -109,18 +110,18 @@
109
110
  --pf-c-label__content--MaxWidth: 100%;
110
111
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
111
112
  --pf-c-label--m-editable__content--MaxWidth: 16ch;
112
- --pf-c-label__text--MaxWidth: 16ch;
113
+ --pf-c-label__text--MaxWidth: 100%;
113
114
  --pf-c-label__icon--Color: var(--pf-global--Color--100);
114
115
  --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
115
- --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
116
- --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
117
- --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
118
- --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
119
- --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
120
- --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
121
- --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
122
- --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
123
- --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
116
+ --pf-c-label__actions--FontSize: var(--pf-global--FontSize--xs);
117
+ --pf-c-label__actions--MarginRight: calc(var(--pf-c-label__actions--c-button--PaddingRight) * -1);
118
+ --pf-c-label__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
119
+ --pf-c-label__actions--c-button--MarginTop: calc(var(--pf-c-label__actions--c-button--PaddingTop) * -1);
120
+ --pf-c-label__actions--c-button--MarginBottom: calc(var(--pf-c-label__actions--c-button--PaddingBottom) * -1);
121
+ --pf-c-label__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
122
+ --pf-c-label__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
123
+ --pf-c-label__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
124
+ --pf-c-label__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
124
125
  --pf-c-label--m-editable--Cursor: pointer;
125
126
  --pf-c-label--m-editable--TextDecoration: underline;
126
127
  --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -141,6 +142,7 @@
141
142
  --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
142
143
  --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
143
144
  position: relative;
145
+ max-width: var(--pf-c-label--MaxWidth);
144
146
  padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
145
147
  font-size: var(--pf-c-label--FontSize);
146
148
  color: var(--pf-c-label--Color);
@@ -312,17 +314,6 @@
312
314
  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
313
315
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
314
316
  }
315
- .pf-c-label .pf-c-button {
316
- --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
317
- --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
318
- --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
319
- --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
320
- --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
321
- margin-top: var(--pf-c-label__c-button--MarginTop);
322
- margin-right: var(--pf-c-label__c-button--MarginRight);
323
- margin-bottom: var(--pf-c-label__c-button--MarginBottom);
324
- margin-left: var(--pf-c-label__c-button--MarginLeft);
325
- }
326
317
  .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
327
318
  --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
328
319
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
@@ -348,10 +339,8 @@
348
339
  }
349
340
 
350
341
  .pf-c-label__content {
351
- overflow: hidden;
352
- text-overflow: ellipsis;
353
- white-space: nowrap;
354
342
  max-width: var(--pf-c-label__content--MaxWidth);
343
+ overflow: hidden;
355
344
  color: var(--pf-c-label__content--Color);
356
345
  background-color: var(--pf-c-label__content--BackgroundColor);
357
346
  border-width: 0;
@@ -367,9 +356,17 @@
367
356
  border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
368
357
  border-radius: var(--pf-c-label--BorderRadius);
369
358
  }
359
+ input.pf-c-label__content {
360
+ overflow: hidden;
361
+ text-overflow: ellipsis;
362
+ white-space: nowrap;
363
+ }
364
+
370
365
  a.pf-c-label__content,
371
366
  button.pf-c-label__content {
367
+ padding: 0;
372
368
  cursor: pointer;
369
+ background-color: transparent;
373
370
  border: none;
374
371
  }
375
372
  a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
@@ -394,6 +391,20 @@ button.pf-c-label__content:focus {
394
391
  color: var(--pf-c-label__icon--Color);
395
392
  }
396
393
 
394
+ .pf-c-label__actions {
395
+ margin-right: var(--pf-c-label__actions--MarginRight);
396
+ font-size: var(--pf-c-label__actions--FontSize);
397
+ }
398
+ .pf-c-label__actions .pf-c-button {
399
+ --pf-c-button--FontSize: var(--pf-c-label__actions--c-button--FontSize);
400
+ --pf-c-button--PaddingTop: var(--pf-c-label__actions--c-button--PaddingTop);
401
+ --pf-c-button--PaddingRight: var(--pf-c-label__actions--c-button--PaddingRight);
402
+ --pf-c-button--PaddingBottom: var(--pf-c-label__actions--c-button--PaddingBottom);
403
+ --pf-c-button--PaddingLeft: var(--pf-c-label__actions--c-button--PaddingLeft);
404
+ margin-top: var(--pf-c-label__actions--c-button--MarginTop);
405
+ margin-bottom: var(--pf-c-label__actions--c-button--MarginBottom);
406
+ }
407
+
397
408
  :where(.pf-theme-dark) .pf-c-label {
398
409
  --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
399
410
  --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
package/components/Label/label.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
5
5
  --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
6
6
  --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
7
+ --pf-c-label--MaxWidth: 100%;
7
8
  --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
8
9
  --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
9
10
  --pf-c-label--Color: var(--pf-global--Color--100);
@@ -139,23 +140,25 @@
139
140
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
140
141
  --pf-c-label--m-editable__content--MaxWidth: 16ch;
141
142
 
142
- // text
143
- --pf-c-label__text--MaxWidth: 16ch;
143
+ // Text
144
+ --pf-c-label__text--MaxWidth: 100%;
144
145
 
145
146
  // Icon
146
147
  --pf-c-label__icon--Color: var(--pf-global--Color--100);
147
148
  --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
148
149
 
149
- // Close button
150
- --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
151
- --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
152
- --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
153
- --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
154
- --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
155
- --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
156
- --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
157
- --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
158
- --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
150
+ // Actions
151
+ --pf-c-label__actions--FontSize: var(--pf-global--FontSize--xs);
152
+ --pf-c-label__actions--MarginRight: calc(var(--pf-c-label__actions--c-button--PaddingRight) * -1);
153
+
154
+ // Actions button (close)
155
+ --pf-c-label__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
156
+ --pf-c-label__actions--c-button--MarginTop: calc(var(--pf-c-label__actions--c-button--PaddingTop) * -1);
157
+ --pf-c-label__actions--c-button--MarginBottom: calc(var(--pf-c-label__actions--c-button--PaddingBottom) * -1);
158
+ --pf-c-label__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
159
+ --pf-c-label__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
160
+ --pf-c-label__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
161
+ --pf-c-label__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
159
162
 
160
163
  // Editable
161
164
  --pf-c-label--m-editable--Cursor: pointer;
@@ -181,6 +184,7 @@
181
184
  --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
182
185
 
183
186
  position: relative;
187
+ max-width: var(--pf-c-label--MaxWidth);
184
188
  padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
185
189
  font-size: var(--pf-c-label--FontSize);
186
190
  color: var(--pf-c-label--Color);
@@ -375,19 +379,6 @@
375
379
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
376
380
  }
377
381
 
378
- .pf-c-button {
379
- --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
380
- --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
381
- --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
382
- --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
383
- --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
384
-
385
- margin-top: var(--pf-c-label__c-button--MarginTop);
386
- margin-right: var(--pf-c-label__c-button--MarginRight);
387
- margin-bottom: var(--pf-c-label__c-button--MarginBottom);
388
- margin-left: var(--pf-c-label__c-button--MarginLeft);
389
- }
390
-
391
382
  &.pf-m-overflow,
392
383
  &.pf-m-add {
393
384
  --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
@@ -414,9 +405,8 @@
414
405
  }
415
406
 
416
407
  .pf-c-label__content {
417
- @include pf-text-overflow;
418
-
419
408
  max-width: var(--pf-c-label__content--MaxWidth);
409
+ overflow: hidden;
420
410
  color: var(--pf-c-label__content--Color);
421
411
  background-color: var(--pf-c-label__content--BackgroundColor);
422
412
  border-width: 0;
@@ -433,11 +423,18 @@
433
423
  border-radius: var(--pf-c-label--BorderRadius);
434
424
  }
435
425
 
426
+ // truncate input fields
427
+ @at-root input#{&} {
428
+ @include pf-text-overflow;
429
+ }
430
+
436
431
  // the content element can be used as a link
437
432
  @at-root {
438
433
  a#{&},
439
434
  button#{&} {
435
+ padding: 0;
440
436
  cursor: pointer;
437
+ background-color: transparent;
441
438
  border: none;
442
439
 
443
440
  &,
@@ -464,6 +461,22 @@
464
461
  color: var(--pf-c-label__icon--Color);
465
462
  }
466
463
 
464
+ .pf-c-label__actions {
465
+ margin-right: var(--pf-c-label__actions--MarginRight);
466
+ font-size: var(--pf-c-label__actions--FontSize);
467
+
468
+ .pf-c-button {
469
+ --pf-c-button--FontSize: var(--pf-c-label__actions--c-button--FontSize);
470
+ --pf-c-button--PaddingTop: var(--pf-c-label__actions--c-button--PaddingTop);
471
+ --pf-c-button--PaddingRight: var(--pf-c-label__actions--c-button--PaddingRight);
472
+ --pf-c-button--PaddingBottom: var(--pf-c-label__actions--c-button--PaddingBottom);
473
+ --pf-c-button--PaddingLeft: var(--pf-c-label__actions--c-button--PaddingLeft);
474
+
475
+ margin-top: var(--pf-c-label__actions--c-button--MarginTop);
476
+ margin-bottom: var(--pf-c-label__actions--c-button--MarginBottom);
477
+ }
478
+ }
479
+
467
480
  // stylelint-disable no-invalid-position-at-import-rule
468
481
  @import "themes/dark/label";
469
482
 
package/components/Table/table-tree-view.css CHANGED
@@ -12,10 +12,20 @@
12
12
  --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
13
13
  --pf-c-table--m-tree-view__toggle--TranslateX: -100%;
14
14
  --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
15
+ --pf-c-table--m-no-inset__tree-view-main--PaddingLeft: 0;
16
+ --pf-c-table--m-no-inset__tree-view-main--MarginLeft: 0;
15
17
  }
16
18
  .pf-c-table.pf-m-tree-view > tbody > tr {
17
19
  --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
18
20
  }
21
+ .pf-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset {
22
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
23
+ --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
24
+ }
25
+ .pf-c-table.pf-m-tree-view.pf-m-no-inset {
26
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
27
+ --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
28
+ }
19
29
  .pf-c-table.pf-m-tree-view tr[aria-level="2"] {
20
30
  --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
21
31
  }
package/components/Table/table-tree-view.scss CHANGED
@@ -25,13 +25,28 @@ $pf-c-tree-view--MaxDepth: 10;
25
25
  // toggle icon
26
26
  --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
27
27
 
28
+
29
+ // no node children
30
+ --pf-c-table--m-no-inset__tree-view-main--PaddingLeft: 0;
31
+ --pf-c-table--m-no-inset__tree-view-main--MarginLeft: 0;
32
+
28
33
  &.pf-m-tree-view {
29
34
  // stylelint-disable selector-no-qualifying-type
30
35
  > tbody > tr {
31
36
  --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
37
+
38
+ &.pf-m-no-inset {
39
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
40
+ --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
41
+ }
32
42
  }
33
43
  // stylelint-enable
34
44
 
45
+ &.pf-m-no-inset {
46
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
47
+ --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
48
+ }
49
+
35
50
  @for $i from 2 through $pf-c-tree-view--MaxDepth {
36
51
  tr[aria-level="#{$i}"] {
37
52
  --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * #{$i - 1} + var(--pf-c-table__tree-view-main--indent--base));
package/components/Table/table.css CHANGED
@@ -768,6 +768,10 @@
768
768
  vertical-align: middle;
769
769
  }
770
770
 
771
+ .pf-c-table__action {
772
+ text-align: right;
773
+ }
774
+
771
775
  .pf-c-table__inline-edit-action {
772
776
  --pf-c-table--cell--PaddingLeft: 0;
773
777
  --pf-c-table--cell--PaddingRight: 0;
package/components/Table/table.scss CHANGED
@@ -1010,6 +1010,10 @@
1010
1010
  vertical-align: middle;
1011
1011
  }
1012
1012
 
1013
+ .pf-c-table__action {
1014
+ text-align: right;
1015
+ }
1016
+
1013
1017
  // Inline edit
1014
1018
  .pf-c-table__inline-edit-action {
1015
1019
  --pf-c-table--cell--PaddingLeft: 0;
package/docs/components/Chip/examples/Chip.md CHANGED
@@ -8,66 +8,84 @@ cssPrefix: pf-c-chip
8
8
 
9
9
  ```html
10
10
  <div class="pf-c-chip">
11
- <span class="pf-c-chip__text" id="chip_one">Chip</span>
12
- <button
13
- class="pf-c-button pf-m-plain"
14
- type="button"
15
- aria-labelledby="remove_chip_one chip_one"
16
- aria-label="Remove"
17
- id="remove_chip_one"
18
- >
19
- <i class="fas fa-times" aria-hidden="true"></i>
20
- </button>
11
+ <span class="pf-c-chip__content">
12
+ <span class="pf-c-chip__text" id="chip_one">Chip</span>
13
+ </span>
14
+ <span class="pf-c-chip__actions">
15
+ <button
16
+ class="pf-c-button pf-m-plain"
17
+ type="button"
18
+ aria-labelledby="remove_chip_one chip_one"
19
+ aria-label="Remove"
20
+ id="remove_chip_one"
21
+ >
22
+ <i class="fas fa-times" aria-hidden="true"></i>
23
+ </button>
24
+ </span>
21
25
  </div>
22
26
  <br />
23
27
  <br />
24
28
  <div class="pf-c-chip">
25
- <span
26
- class="pf-c-chip__text"
27
- id="chip_two"
28
- >Really long chip that goes on and on</span>
29
- <button
30
- class="pf-c-button pf-m-plain"
31
- type="button"
32
- aria-labelledby="remove_chip_two chip_two"
33
- aria-label="Remove"
34
- id="remove_chip_two"
35
- >
36
- <i class="fas fa-times" aria-hidden="true"></i>
37
- </button>
29
+ <span class="pf-c-chip__content">
30
+ <span
31
+ class="pf-c-chip__text"
32
+ id="chip_two"
33
+ >Really long chip that goes on and on</span>
34
+ </span>
35
+ <span class="pf-c-chip__actions">
36
+ <button
37
+ class="pf-c-button pf-m-plain"
38
+ type="button"
39
+ aria-labelledby="remove_chip_two chip_two"
40
+ aria-label="Remove"
41
+ id="remove_chip_two"
42
+ >
43
+ <i class="fas fa-times" aria-hidden="true"></i>
44
+ </button>
45
+ </span>
38
46
  </div>
39
47
  <br />
40
48
  <br />
41
49
  <div class="pf-c-chip">
42
- <span class="pf-c-chip__text" id="chip_three">Chip</span>
43
- <span class="pf-c-badge pf-m-read">00</span>
44
- <button
45
- class="pf-c-button pf-m-plain"
46
- type="button"
47
- aria-labelledby="remove_chip_three chip_three"
48
- aria-label="Remove"
49
- id="remove_chip_three"
50
- >
51
- <i class="fas fa-times" aria-hidden="true"></i>
52
- </button>
50
+ <span class="pf-c-chip__content">
51
+ <span class="pf-c-chip__text" id="chip_three">Chip</span>
52
+ <span class="pf-c-badge pf-m-read">00</span>
53
+ </span>
54
+ <span class="pf-c-chip__actions">
55
+ <button
56
+ class="pf-c-button pf-m-plain"
57
+ type="button"
58
+ aria-labelledby="remove_chip_three chip_three"
59
+ aria-label="Remove"
60
+ id="remove_chip_three"
61
+ >
62
+ <i class="fas fa-times" aria-hidden="true"></i>
63
+ </button>
64
+ </span>
53
65
  </div>
54
66
  <br />
55
67
  <br />
56
68
  <div class="pf-c-chip">
57
- <span class="pf-c-chip__text">Read-only chip</span>
69
+ <span class="pf-c-chip__content">
70
+ <span class="pf-c-chip__text">Read-only chip</span>
71
+ </span>
58
72
  </div>
59
73
  <br />
60
74
  <br />
61
75
  <button class="pf-c-chip pf-m-overflow">
62
- <span class="pf-c-chip__text">Overflow chip</span>
76
+ <span class="pf-c-chip__content">
77
+ <span class="pf-c-chip__text">Overflow chip</span>
78
+ </span>
63
79
  </button>
64
80
  <br />
65
81
  <br />
66
82
  <div class="pf-c-chip pf-m-draggable">
67
- <span class="pf-c-chip__icon">
68
- <i class="fas fa-grip-vertical" role="img" aria-label="Drag"></i>
83
+ <span class="pf-c-chip__content">
84
+ <span class="pf-c-chip__icon">
85
+ <i class="fas fa-grip-vertical" role="img" aria-label="Drag"></i>
86
+ </span>
87
+ <span class="pf-c-chip__text">Draggable chip</span>
69
88
  </span>
70
- <span class="pf-c-chip__text">Draggable chip</span>
71
89
  </div>
72
90
 
73
91
  ```
@@ -91,9 +109,9 @@ A Chip is used to display items that have been filtered or selected from a large
91
109
  | Class | Applied to | Outcome |
92
110
  | -- | -- | -- |
93
111
  | `.pf-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
94
- | `.pf-c-chip__text` | `<span>` | Initiates the text inside of the chip. **Required** |
95
- | `.pf-c-chip__icon` | `<span>` | Initiates the icon inside of the chip. |
96
- | `.pf-c-button` | `.pf-c-chip <button>` | Initiates the button used to remove the chip. |
97
- | `.pf-c-badge` | `<span>` | Initiates the badge inside the chip. |
112
+ | `.pf-c-chip__content` | `<span>` | Creates a content wrapper for the chip. **Required** |
113
+ | `.pf-c-chip__text` | `<span>` | Initiates the text inside the chip. **Required** |
114
+ | `.pf-c-chip__icon` | `<span>` | Initiates the icon inside the chip. |
115
+ | `.pf-c-chip__actions` | `<span>` | Creates a wrapper for chip actions. **Required for removable chips** |
98
116
  | `.pf-m-overflow` | `button.pf-c-chip` | Applies styling of the overflow chip. |
99
117
  | `.pf-m-draggable` | `.pf-c-chip` | Modifies the chip to be in the draggable state. |