@patternfly/patternfly 4.164.2 → 4.165.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 (27) hide show
  1. package/base/_base.scss +2 -0
  2. package/base/_fa-icons.scss +2 -0
  3. package/base/_fonts.scss +2 -2
  4. package/components/ExpandableSection/expandable-section.css +6 -0
  5. package/components/ExpandableSection/expandable-section.scss +9 -0
  6. package/components/Label/label.css +37 -0
  7. package/components/Label/label.scss +43 -0
  8. package/components/LogViewer/log-viewer.css +17 -15
  9. package/components/LogViewer/log-viewer.scss +17 -20
  10. package/docs/components/ExpandableSection/examples/ExpandableSection.md +22 -0
  11. package/docs/components/Label/examples/Label.md +102 -41
  12. package/docs/components/LabelGroup/examples/LabelGroup.md +98 -73
  13. package/docs/components/NotificationBadge/examples/NotificationBadge.css +3 -0
  14. package/docs/components/NotificationBadge/examples/NotificationBadge.md +132 -108
  15. package/docs/demos/Card/examples/Card.md +22 -0
  16. package/docs/demos/Tabs/examples/Tabs.md +2 -0
  17. package/docs/pages/contribution.md +1 -1
  18. package/layouts/_all.scss +7 -7
  19. package/package.json +1 -1
  20. package/patternfly-no-reset.css +60 -15
  21. package/patternfly.css +60 -15
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
  24. package/sass-utilities/bs-variables.scss +2 -3
  25. package/sass-utilities/functions.scss +0 -1
  26. package/sass-utilities/mixins.scss +5 -5
  27. package/sass-utilities/scss-variables.scss +1 -1
package/docs/components/NotificationBadge/examples/NotificationBadge.md CHANGED
@@ -2,123 +2,145 @@
2
2
  id: Notification badge
3
3
  section: components
4
4
  cssPrefix: pf-c-notification-badge
5
- ---## Examples
5
+ ---import './NotificationBadge.css'
6
+
7
+ ## Examples
6
8
 
7
9
  ### Basic
8
10
 
9
11
  ```html
10
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Notifications">
11
- <span class="pf-c-notification-badge pf-m-read">
12
- <i class="pf-icon-bell" aria-hidden="true"></i>
13
- </span>
14
- </button>
15
-
16
- <button
17
- class="pf-c-button pf-m-plain"
18
- type="button"
19
- aria-label="Unread notifications"
20
- >
21
- <span class="pf-c-notification-badge pf-m-unread">
22
- <i class="pf-icon-bell" aria-hidden="true"></i>
23
- </span>
24
- </button>
25
-
26
- <button
27
- class="pf-c-button pf-m-plain"
28
- type="button"
29
- aria-label="Attention notifications"
30
- >
31
- <span class="pf-c-notification-badge pf-m-attention">
32
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
33
- </span>
34
- </button>
35
-
36
- <br />
37
- <br />
38
-
39
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
40
- <span class="pf-c-notification-badge pf-m-read">
41
- <i class="pf-icon-task" aria-hidden="true"></i>
42
- </span>
43
- </button>
44
-
45
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Unread tasks">
46
- <span class="pf-c-notification-badge pf-m-unread">
47
- <i class="pf-icon-task" aria-hidden="true"></i>
48
- </span>
49
- </button>
50
-
51
- <button
52
- class="pf-c-button pf-m-plain"
53
- type="button"
54
- aria-label="Attention tasks"
55
- >
56
- <span class="pf-c-notification-badge pf-m-attention">
57
- <i class="pf-icon-task" aria-hidden="true"></i>
58
- </span>
59
- </button>
12
+ <div class="pf-t-dark">
13
+ <button
14
+ class="pf-c-button pf-m-plain"
15
+ type="button"
16
+ aria-label="Notifications"
17
+ >
18
+ <span class="pf-c-notification-badge pf-m-read">
19
+ <i class="pf-icon-bell" aria-hidden="true"></i>
20
+ </span>
21
+ </button>
22
+
23
+ <button
24
+ class="pf-c-button pf-m-plain"
25
+ type="button"
26
+ aria-label="Unread notifications"
27
+ >
28
+ <span class="pf-c-notification-badge pf-m-unread">
29
+ <i class="pf-icon-bell" aria-hidden="true"></i>
30
+ </span>
31
+ </button>
32
+
33
+ <button
34
+ class="pf-c-button pf-m-plain"
35
+ type="button"
36
+ aria-label="Attention notifications"
37
+ >
38
+ <span class="pf-c-notification-badge pf-m-attention">
39
+ <i class="pf-icon-attention-bell" aria-hidden="true"></i>
40
+ </span>
41
+ </button>
42
+
43
+ <br />
44
+ <br />
45
+
46
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
47
+ <span class="pf-c-notification-badge pf-m-read">
48
+ <i class="pf-icon-task" aria-hidden="true"></i>
49
+ </span>
50
+ </button>
51
+
52
+ <button
53
+ class="pf-c-button pf-m-plain"
54
+ type="button"
55
+ aria-label="Unread tasks"
56
+ >
57
+ <span class="pf-c-notification-badge pf-m-unread">
58
+ <i class="pf-icon-task" aria-hidden="true"></i>
59
+ </span>
60
+ </button>
61
+
62
+ <button
63
+ class="pf-c-button pf-m-plain"
64
+ type="button"
65
+ aria-label="Attention tasks"
66
+ >
67
+ <span class="pf-c-notification-badge pf-m-attention">
68
+ <i class="pf-icon-task" aria-hidden="true"></i>
69
+ </span>
70
+ </button>
71
+ </div>
60
72
 
61
73
  ```
62
74
 
63
75
  ### With count
64
76
 
65
77
  ```html
66
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Notifications">
67
- <span class="pf-c-notification-badge pf-m-read">
68
- <i class="pf-icon-bell" aria-hidden="true"></i>
69
- <span class="pf-c-notification-badge__count">24</span>
70
- </span>
71
- </button>
72
-
73
- <button
74
- class="pf-c-button pf-m-plain"
75
- type="button"
76
- aria-label="Unread notifications"
77
- >
78
- <span class="pf-c-notification-badge pf-m-unread">
79
- <i class="pf-icon-bell" aria-hidden="true"></i>
80
- <span class="pf-c-notification-badge__count">25</span>
81
- </span>
82
- </button>
83
-
84
- <button
85
- class="pf-c-button pf-m-plain"
86
- type="button"
87
- aria-label="Attention notifications"
88
- >
89
- <span class="pf-c-notification-badge pf-m-attention">
90
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
91
- <span class="pf-c-notification-badge__count">26</span>
92
- </span>
93
- </button>
94
-
95
- <br />
96
- <br />
97
-
98
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
99
- <span class="pf-c-notification-badge pf-m-read">
100
- <i class="pf-icon-task" aria-hidden="true"></i>
101
- <span class="pf-c-notification-badge__count">24</span>
102
- </span>
103
- </button>
104
-
105
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Unread tasks">
106
- <span class="pf-c-notification-badge pf-m-unread">
107
- <i class="pf-icon-task" aria-hidden="true"></i>
108
- <span class="pf-c-notification-badge__count">25</span>
109
- </span>
110
- </button>
111
-
112
- <button
113
- class="pf-c-button pf-m-plain"
114
- type="button"
115
- aria-label="Attention tasks"
116
- >
117
- <span class="pf-c-notification-badge pf-m-attention">
118
- <i class="pf-icon-task" aria-hidden="true"></i>
119
- <span class="pf-c-notification-badge__count">26</span>
120
- </span>
121
- </button>
78
+ <div class="pf-t-dark">
79
+ <button
80
+ class="pf-c-button pf-m-plain"
81
+ type="button"
82
+ aria-label="Notifications"
83
+ >
84
+ <span class="pf-c-notification-badge pf-m-read">
85
+ <i class="pf-icon-bell" aria-hidden="true"></i>
86
+ <span class="pf-c-notification-badge__count">24</span>
87
+ </span>
88
+ </button>
89
+
90
+ <button
91
+ class="pf-c-button pf-m-plain"
92
+ type="button"
93
+ aria-label="Unread notifications"
94
+ >
95
+ <span class="pf-c-notification-badge pf-m-unread">
96
+ <i class="pf-icon-bell" aria-hidden="true"></i>
97
+ <span class="pf-c-notification-badge__count">25</span>
98
+ </span>
99
+ </button>
100
+
101
+ <button
102
+ class="pf-c-button pf-m-plain"
103
+ type="button"
104
+ aria-label="Attention notifications"
105
+ >
106
+ <span class="pf-c-notification-badge pf-m-attention">
107
+ <i class="pf-icon-attention-bell" aria-hidden="true"></i>
108
+ <span class="pf-c-notification-badge__count">26</span>
109
+ </span>
110
+ </button>
111
+
112
+ <br />
113
+ <br />
114
+
115
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
116
+ <span class="pf-c-notification-badge pf-m-read">
117
+ <i class="pf-icon-task" aria-hidden="true"></i>
118
+ <span class="pf-c-notification-badge__count">24</span>
119
+ </span>
120
+ </button>
121
+
122
+ <button
123
+ class="pf-c-button pf-m-plain"
124
+ type="button"
125
+ aria-label="Unread tasks"
126
+ >
127
+ <span class="pf-c-notification-badge pf-m-unread">
128
+ <i class="pf-icon-task" aria-hidden="true"></i>
129
+ <span class="pf-c-notification-badge__count">25</span>
130
+ </span>
131
+ </button>
132
+
133
+ <button
134
+ class="pf-c-button pf-m-plain"
135
+ type="button"
136
+ aria-label="Attention tasks"
137
+ >
138
+ <span class="pf-c-notification-badge pf-m-attention">
139
+ <i class="pf-icon-task" aria-hidden="true"></i>
140
+ <span class="pf-c-notification-badge__count">26</span>
141
+ </span>
142
+ </button>
143
+ </div>
122
144
 
123
145
  ```
124
146
 
@@ -126,7 +148,9 @@ cssPrefix: pf-c-notification-badge
126
148
 
127
149
  ### Overview
128
150
 
129
- Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own.
151
+ Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](../masthead).
152
+
153
+ Note: The [page component](../page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
130
154
 
131
155
  ### Accessibility
132
156
 
package/docs/demos/Card/examples/Card.md CHANGED
@@ -86,6 +86,7 @@ wrapperTag: div
86
86
  <span class="pf-c-label__icon">
87
87
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
88
88
  </span>
89
+
89
90
  Set up your cluster
90
91
  </span>
91
92
  </span>
@@ -96,6 +97,7 @@ wrapperTag: div
96
97
  <span class="pf-c-label__icon">
97
98
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
98
99
  </span>
100
+
99
101
  Guided tours
100
102
  </span>
101
103
  </span>
@@ -106,6 +108,7 @@ wrapperTag: div
106
108
  <span class="pf-c-label__icon">
107
109
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
108
110
  </span>
111
+
109
112
  Quick starts
110
113
  </span>
111
114
  </span>
@@ -210,6 +213,7 @@ wrapperTag: div
210
213
  <span class="pf-c-label__icon">
211
214
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
212
215
  </span>
216
+
213
217
  Set up your cluster
214
218
  </span>
215
219
  </span>
@@ -246,6 +250,7 @@ wrapperTag: div
246
250
  <span class="pf-c-label__icon">
247
251
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
248
252
  </span>
253
+
249
254
  Guided tours
250
255
  </span>
251
256
  </span>
@@ -277,6 +282,7 @@ wrapperTag: div
277
282
  <span class="pf-c-label__icon">
278
283
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
279
284
  </span>
285
+
280
286
  Quick starts
281
287
  </span>
282
288
  </span>
@@ -311,6 +317,7 @@ wrapperTag: div
311
317
  <span class="pf-c-label__icon">
312
318
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
313
319
  </span>
320
+
314
321
  Learning resources
315
322
  </span>
316
323
  </span>
@@ -1000,6 +1007,7 @@ wrapperTag: div
1000
1007
  aria-hidden="true"
1001
1008
  ></i>
1002
1009
  </span>
1010
+
1003
1011
  1
1004
1012
  </span>
1005
1013
  </span>
@@ -1011,6 +1019,7 @@ wrapperTag: div
1011
1019
  aria-hidden="true"
1012
1020
  ></i>
1013
1021
  </span>
1022
+
1014
1023
  3
1015
1024
  </span>
1016
1025
  </span>
@@ -1019,6 +1028,7 @@ wrapperTag: div
1019
1028
  <span class="pf-c-label__icon">
1020
1029
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1021
1030
  </span>
1031
+
1022
1032
  3
1023
1033
  </span>
1024
1034
  </span>
@@ -1027,6 +1037,7 @@ wrapperTag: div
1027
1037
  <span class="pf-c-label__icon">
1028
1038
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1029
1039
  </span>
1040
+
1030
1041
  3
1031
1042
  </span>
1032
1043
  </span>
@@ -1035,6 +1046,7 @@ wrapperTag: div
1035
1046
  <span class="pf-c-label__icon">
1036
1047
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1037
1048
  </span>
1049
+
1038
1050
  3
1039
1051
  </span>
1040
1052
  </span>
@@ -1193,6 +1205,7 @@ wrapperTag: div
1193
1205
  aria-hidden="true"
1194
1206
  ></i>
1195
1207
  </span>
1208
+
1196
1209
  1
1197
1210
  </span>
1198
1211
  </span>
@@ -1204,6 +1217,7 @@ wrapperTag: div
1204
1217
  aria-hidden="true"
1205
1218
  ></i>
1206
1219
  </span>
1220
+
1207
1221
  3
1208
1222
  </span>
1209
1223
  </span>
@@ -1212,6 +1226,7 @@ wrapperTag: div
1212
1226
  <span class="pf-c-label__icon">
1213
1227
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1214
1228
  </span>
1229
+
1215
1230
  3
1216
1231
  </span>
1217
1232
  </span>
@@ -1220,6 +1235,7 @@ wrapperTag: div
1220
1235
  <span class="pf-c-label__icon">
1221
1236
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1222
1237
  </span>
1238
+
1223
1239
  3
1224
1240
  </span>
1225
1241
  </span>
@@ -1228,6 +1244,7 @@ wrapperTag: div
1228
1244
  <span class="pf-c-label__icon">
1229
1245
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1230
1246
  </span>
1247
+
1231
1248
  3
1232
1249
  </span>
1233
1250
  </span>
@@ -1639,6 +1656,7 @@ wrapperTag: div
1639
1656
  aria-hidden="true"
1640
1657
  ></i>
1641
1658
  </span>
1659
+
1642
1660
  1
1643
1661
  </span>
1644
1662
  </span>
@@ -1650,6 +1668,7 @@ wrapperTag: div
1650
1668
  aria-hidden="true"
1651
1669
  ></i>
1652
1670
  </span>
1671
+
1653
1672
  3
1654
1673
  </span>
1655
1674
  </span>
@@ -1658,6 +1677,7 @@ wrapperTag: div
1658
1677
  <span class="pf-c-label__icon">
1659
1678
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1660
1679
  </span>
1680
+
1661
1681
  3
1662
1682
  </span>
1663
1683
  </span>
@@ -1666,6 +1686,7 @@ wrapperTag: div
1666
1686
  <span class="pf-c-label__icon">
1667
1687
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1668
1688
  </span>
1689
+
1669
1690
  3
1670
1691
  </span>
1671
1692
  </span>
@@ -1674,6 +1695,7 @@ wrapperTag: div
1674
1695
  <span class="pf-c-label__icon">
1675
1696
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1676
1697
  </span>
1698
+
1677
1699
  3
1678
1700
  </span>
1679
1701
  </span>
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -244,6 +244,7 @@ section: components
244
244
  <span class="pf-c-label__icon">
245
245
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
246
246
  </span>
247
+
247
248
  Running
248
249
  </span>
249
250
  </span>
@@ -792,6 +793,7 @@ section: components
792
793
  <span class="pf-c-label__icon">
793
794
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
794
795
  </span>
796
+
795
797
  Running
796
798
  </span>
797
799
  </span>
package/docs/pages/contribution.md CHANGED
@@ -106,4 +106,4 @@ Below are the steps for adding a custom icon to the [pficon icons](/icons) icon
106
106
  - Edit `src/patternfly/assets/pficon/pficon.scss` and prefix the `src: url()` paths for the icon font files with the global icon font path (e.g., `url('#{$pf-global--fonticon-path}/pficon.woff2')`).
107
107
  - Run `./scripts/iconList.sh` to update `src/site/pages/icons.md`, which serves the pficon icon preview page on the dev server served at `/icons`.
108
108
  - Restart the dev server and verify the icons look correct on `/icons`.
109
- - **Note**: This step may require clearing your cache.
109
+ - **Note**: This step may require clearing your cache.
package/layouts/_all.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import "./Bullseye/bullseye.scss";
2
- @import "./Flex/flex.scss";
3
- @import "./Gallery/gallery.scss";
4
- @import "./Grid/grid.scss";
5
- @import "./Level/level.scss";
6
- @import "./Split/split.scss";
7
- @import "./Stack/stack.scss";
1
+ @import "./Bullseye/bullseye";
2
+ @import "./Flex/flex";
3
+ @import "./Gallery/gallery";
4
+ @import "./Grid/grid";
5
+ @import "./Level/level";
6
+ @import "./Split/split";
7
+ @import "./Stack/stack";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.164.2",
4
+ "version": "4.165.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -1,5 +1,6 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header,
3
+ .pf-c-log-viewer__footer, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
4
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
5
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
6
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -12935,6 +12936,7 @@ label.pf-c-check, .pf-c-check__label,
12935
12936
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
12936
12937
  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
12937
12938
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
12939
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
12938
12940
  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
12939
12941
  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
12940
12942
  --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -12957,6 +12959,7 @@ label.pf-c-check, .pf-c-check__label,
12957
12959
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
12958
12960
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
12959
12961
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
12962
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
12960
12963
  }
12961
12964
  .pf-c-expandable-section.pf-m-expanded {
12962
12965
  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -12991,6 +12994,9 @@ label.pf-c-check, .pf-c-check__label,
12991
12994
  content: "";
12992
12995
  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
12993
12996
  }
12997
+ .pf-c-expandable-section.pf-m-indented {
12998
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
12999
+ }
12994
13000
 
12995
13001
  .pf-c-expandable-section__toggle {
12996
13002
  display: flex;
@@ -13009,6 +13015,7 @@ label.pf-c-check, .pf-c-check__label,
13009
13015
  }
13010
13016
 
13011
13017
  .pf-c-expandable-section__toggle-icon {
13018
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
13012
13019
  color: var(--pf-c-expandable-section__toggle-icon--Color);
13013
13020
  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
13014
13021
  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
@@ -14565,6 +14572,7 @@ label.pf-c-input-group__text {
14565
14572
  --pf-c-label--m-compact--PaddingBottom: 0;
14566
14573
  --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
14567
14574
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
14575
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
14568
14576
  --pf-c-label__content--Color: var(--pf-global--Color--100);
14569
14577
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
14570
14578
  --pf-c-label__text--MaxWidth: 16ch;
@@ -14579,6 +14587,18 @@ label.pf-c-input-group__text {
14579
14587
  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
14580
14588
  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
14581
14589
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
14590
+ --pf-c-label__editable-text--MaxWidth: 16ch;
14591
+ --pf-c-label__editable-text--BorderWidth: 0;
14592
+ --pf-c-label--m-editable--Cursor: pointer;
14593
+ --pf-c-label--m-editable--TextDecoration: underline;
14594
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
14595
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
14596
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
14597
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
14598
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
14599
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
14600
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
14601
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
14582
14602
  --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
14583
14603
  --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
14584
14604
  --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -14597,6 +14617,7 @@ label.pf-c-input-group__text {
14597
14617
  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
14598
14618
  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
14599
14619
  --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
14620
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
14600
14621
  }
14601
14622
  .pf-c-label.pf-m-blue {
14602
14623
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
@@ -14687,7 +14708,23 @@ label.pf-c-input-group__text {
14687
14708
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
14688
14709
  }
14689
14710
 
14711
+ .pf-c-label.pf-m-editable {
14712
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
14713
+ cursor: var(--pf-c-label--m-editable--Cursor);
14714
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
14715
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
14716
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
14717
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
14718
+ }
14719
+ .pf-c-label.pf-m-editable:hover {
14720
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
14721
+ }
14722
+ .pf-c-label.pf-m-editable:focus {
14723
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
14724
+ }
14690
14725
  .pf-c-label.pf-m-editable-active {
14726
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
14727
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
14691
14728
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
14692
14729
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
14693
14730
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -14695,6 +14732,13 @@ label.pf-c-input-group__text {
14695
14732
  .pf-c-label.pf-m-editable-active .pf-c-button {
14696
14733
  visibility: hidden;
14697
14734
  }
14735
+ .pf-c-label .pf-c-label__editable-text {
14736
+ overflow: hidden;
14737
+ text-overflow: ellipsis;
14738
+ white-space: nowrap;
14739
+ max-width: var(--pf-c-label__editable-text--MaxWidth);
14740
+ border-width: var(--pf-c-label__editable-text--BorderWidth);
14741
+ }
14698
14742
  .pf-c-label .pf-c-button {
14699
14743
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
14700
14744
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -15048,7 +15092,15 @@ ul.pf-c-list {
15048
15092
  position: absolute;
15049
15093
  right: 0;
15050
15094
  left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
15051
- overflow: auto;
15095
+ }
15096
+ .pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list::before {
15097
+ position: absolute;
15098
+ top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
15099
+ bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
15100
+ left: 0;
15101
+ width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
15102
+ content: "";
15103
+ background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
15052
15104
  }
15053
15105
  .pf-c-log-viewer .pf-c-toolbar {
15054
15106
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -15066,10 +15118,14 @@ ul.pf-c-list {
15066
15118
  }
15067
15119
 
15068
15120
  .pf-c-log-viewer__header {
15069
- color: var(--pf-global--Color--100);
15070
15121
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
15071
15122
  }
15072
15123
 
15124
+ .pf-c-log-viewer__header,
15125
+ .pf-c-log-viewer__footer {
15126
+ color: var(--pf-global--Color--100);
15127
+ }
15128
+
15073
15129
  .pf-c-log-viewer__main {
15074
15130
  display: flex;
15075
15131
  flex-direction: column;
@@ -15077,18 +15133,6 @@ ul.pf-c-list {
15077
15133
  background-color: var(--pf-c-log-viewer__main--BackgroundColor);
15078
15134
  border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
15079
15135
  }
15080
- .pf-m-line-numbers .pf-c-log-viewer__main {
15081
- position: relative;
15082
- }
15083
- .pf-m-line-numbers .pf-c-log-viewer__main::before {
15084
- position: absolute;
15085
- top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
15086
- bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
15087
- left: var(--pf-c-log-viewer__index--Width);
15088
- width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
15089
- content: "";
15090
- background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
15091
- }
15092
15136
 
15093
15137
  .pf-c-log-viewer__scroll-container {
15094
15138
  position: relative;
@@ -15129,6 +15173,7 @@ ul.pf-c-list {
15129
15173
  font-family: var(--pf-c-log-viewer__index--FontFamily);
15130
15174
  font-size: var(--pf-c-log-viewer__index--FontSize);
15131
15175
  color: var(--pf-c-log-viewer__index--Color);
15176
+ user-select: none;
15132
15177
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
15133
15178
  }
15134
15179