@patternfly/patternfly 4.211.0 → 4.213.0

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 (18) hide show
  1. package/components/Card/card.css +1 -0
  2. package/components/Card/card.scss +1 -0
  3. package/components/Icon/icon.css +119 -0
  4. package/components/Icon/icon.scss +149 -0
  5. package/components/LogViewer/log-viewer.css +15 -8
  6. package/components/LogViewer/log-viewer.scss +16 -8
  7. package/components/_all.scss +1 -0
  8. package/docs/components/DualListSelector/examples/DualListSelector.md +4 -46
  9. package/docs/components/FormControl/examples/FormControl.md +12 -12
  10. package/docs/components/Icon/examples/Icon.md +255 -0
  11. package/docs/components/LogViewer/examples/LogViewer.md +553 -1
  12. package/docs/components/TabContent/examples/TabContent.md +21 -11
  13. package/docs/components/TreeView/examples/TreeView.md +181 -130
  14. package/package.json +3 -3
  15. package/patternfly-no-reset.css +136 -8
  16. package/patternfly.css +136 -8
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
7
  --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
8
  --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
9
10
  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
11
  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
12
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
package/components/Card/card.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
7
  --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
8
  --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
9
10
  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
11
  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
12
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
package/components/Icon/icon.css ADDED
@@ -0,0 +1,119 @@
1
+ .pf-c-icon {
2
+ --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
3
+ --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
4
+ --pf-c-icon--m-inline--Width: 1em;
5
+ --pf-c-icon--m-inline--Height: 1em;
6
+ --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
7
+ --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
8
+ --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
9
+ --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
10
+ --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
11
+ --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
12
+ --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
13
+ --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
14
+ --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
15
+ --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
16
+ --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
17
+ --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
18
+ --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
19
+ --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
20
+ --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
21
+ --pf-c-icon--m-inline__content--FontSize: 1em;
22
+ --pf-c-icon__content--svg--VerticalAlign: -.125em;
23
+ --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
24
+ --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
25
+ --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
26
+ --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
27
+ position: relative;
28
+ display: inline-flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ width: var(--pf-c-icon--Width);
32
+ height: var(--pf-c-icon--Height);
33
+ }
34
+ .pf-c-icon.pf-m-inline {
35
+ --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
36
+ --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
37
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
38
+ --pf-c-icon__content--Color: currentcolor;
39
+ line-height: 1;
40
+ }
41
+ .pf-c-icon.pf-m-inline .pf-c-spinner {
42
+ --pf-c-spinner--diameter: 1em;
43
+ }
44
+ .pf-c-icon.pf-m-sm {
45
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
46
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
47
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
48
+ }
49
+ .pf-c-icon.pf-m-md {
50
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
51
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
52
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
53
+ }
54
+ .pf-c-icon.pf-m-lg {
55
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
56
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
57
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
58
+ }
59
+ .pf-c-icon.pf-m-xl {
60
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
61
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
62
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
63
+ }
64
+ .pf-c-icon.pf-m-in-progress {
65
+ --pf-c-icon__content--Opacity: 0;
66
+ --pf-c-icon__progress--Opacity: 1;
67
+ }
68
+
69
+ .pf-c-icon__content,
70
+ .pf-c-icon__progress {
71
+ font-size: var(--pf-c-icon__content--FontSize);
72
+ }
73
+ .pf-c-icon__content svg,
74
+ .pf-c-icon__progress svg {
75
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
76
+ }
77
+ .pf-c-icon__content.pf-m-sm,
78
+ .pf-c-icon__progress.pf-m-sm {
79
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
80
+ }
81
+ .pf-c-icon__content.pf-m-md,
82
+ .pf-c-icon__progress.pf-m-md {
83
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
84
+ }
85
+ .pf-c-icon__content.pf-m-lg,
86
+ .pf-c-icon__progress.pf-m-lg {
87
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
88
+ }
89
+ .pf-c-icon__content.pf-m-xl,
90
+ .pf-c-icon__progress.pf-m-xl {
91
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
92
+ }
93
+
94
+ .pf-c-icon__content {
95
+ color: var(--pf-c-icon__content--Color);
96
+ opacity: var(--pf-c-icon__content--Opacity, 1);
97
+ }
98
+ .pf-c-icon__content.pf-m-danger {
99
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
100
+ }
101
+ .pf-c-icon__content.pf-m-warning {
102
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
103
+ }
104
+ .pf-c-icon__content.pf-m-success {
105
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
106
+ }
107
+ .pf-c-icon__content.pf-m-info {
108
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
109
+ }
110
+ .pf-c-icon__content.pf-m-default {
111
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
112
+ }
113
+
114
+ .pf-c-icon__progress {
115
+ position: absolute;
116
+ top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
117
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
118
+ transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
119
+ }
package/components/Icon/icon.scss ADDED
@@ -0,0 +1,149 @@
1
+ .pf-c-icon {
2
+ // Size
3
+ --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
4
+ --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
5
+
6
+ // When inline, use the parent's size
7
+ --pf-c-icon--m-inline--Width: 1em;
8
+ --pf-c-icon--m-inline--Height: 1em;
9
+
10
+ // Size modifiers
11
+ --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
12
+ --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
13
+ --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
14
+ --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
15
+ --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
16
+ --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
17
+ --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
18
+ --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
19
+
20
+ // Content variables
21
+ --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
22
+
23
+ // Content status
24
+ --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
25
+ --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
26
+ --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
27
+ --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
28
+ --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
29
+ --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
30
+ --pf-c-icon--m-inline__content--FontSize: 1em;
31
+ --pf-c-icon__content--svg--VerticalAlign: -.125em;
32
+ --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
33
+ --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
34
+ --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
35
+ --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
36
+
37
+ position: relative;
38
+ display: inline-flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ width: var(--pf-c-icon--Width);
42
+ height: var(--pf-c-icon--Height);
43
+
44
+ // Inline modifier
45
+ &.pf-m-inline {
46
+ --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
47
+ --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
48
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
49
+ --pf-c-icon__content--Color: currentcolor;
50
+
51
+ line-height: 1;
52
+
53
+ .pf-c-spinner {
54
+ --pf-c-spinner--diameter: 1em;
55
+ }
56
+ }
57
+
58
+ // Size modifiers
59
+ &.pf-m-sm {
60
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
61
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
62
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
63
+ }
64
+
65
+ &.pf-m-md {
66
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
67
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
68
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
69
+ }
70
+
71
+ &.pf-m-lg {
72
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
73
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
74
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
75
+ }
76
+
77
+ &.pf-m-xl {
78
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
79
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
80
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
81
+ }
82
+
83
+ &.pf-m-in-progress {
84
+ --pf-c-icon__content--Opacity: 0;
85
+ --pf-c-icon__progress--Opacity: 1;
86
+ }
87
+ }
88
+
89
+ // Content and progress both have size modifiers
90
+ .pf-c-icon__content,
91
+ .pf-c-icon__progress {
92
+ font-size: var(--pf-c-icon__content--FontSize);
93
+
94
+ svg {
95
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
96
+ }
97
+
98
+ // Size modifiers
99
+ &.pf-m-sm {
100
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
101
+ }
102
+
103
+ &.pf-m-md {
104
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
105
+ }
106
+
107
+ &.pf-m-lg {
108
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
109
+ }
110
+
111
+ &.pf-m-xl {
112
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
113
+ }
114
+ }
115
+
116
+ // Content element
117
+ .pf-c-icon__content {
118
+ color: var(--pf-c-icon__content--Color);
119
+ opacity: var(--pf-c-icon__content--Opacity, 1);
120
+
121
+ // Status modifiers
122
+ &.pf-m-danger {
123
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
124
+ }
125
+
126
+ &.pf-m-warning {
127
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
128
+ }
129
+
130
+ &.pf-m-success {
131
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
132
+ }
133
+
134
+ &.pf-m-info {
135
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
136
+ }
137
+
138
+ &.pf-m-default {
139
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
140
+ }
141
+ }
142
+
143
+ // Progress element
144
+ .pf-c-icon__progress {
145
+ position: absolute;
146
+ top: calc(50% + calc(.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
147
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
148
+ transform: translateY(calc(-50% - calc(.5 * var(--pf-c-icon__content--svg--VerticalAlign))));
149
+ }
package/components/LogViewer/log-viewer.css CHANGED
@@ -46,18 +46,19 @@
46
46
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
47
47
  --pf-c-log-viewer__list--Height: auto;
48
48
  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
49
+ --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
50
+ --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
49
51
  --pf-c-log-viewer__index--Display: none;
50
52
  --pf-c-log-viewer__index--Width: 4.0625rem;
51
53
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
52
54
  --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
53
- --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
54
- --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
55
55
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
56
56
  --pf-c-log-viewer__index--BackgroundColor: transparent;
57
+ --pf-c-log-viewer--line-number-chars: 4.4;
58
+ --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
59
+ --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
57
60
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
58
61
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
59
- --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
60
- --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
61
62
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
62
63
  --pf-c-log-viewer__text--WordBreak: break-all;
63
64
  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -114,6 +115,10 @@
114
115
  content: "";
115
116
  background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
116
117
  }
118
+ .pf-c-log-viewer.pf-m-line-number-chars {
119
+ --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
120
+ --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
121
+ }
117
122
  .pf-c-log-viewer .pf-c-toolbar {
118
123
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
119
124
  --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -154,6 +159,8 @@
154
159
  .pf-c-log-viewer__list {
155
160
  position: relative;
156
161
  height: var(--pf-c-log-viewer__list--Height);
162
+ font-family: var(--pf-c-log-viewer__list--FontFamily);
163
+ font-size: var(--pf-c-log-viewer__list--FontSize);
157
164
  }
158
165
 
159
166
  .pf-c-log-viewer__list-item {
@@ -177,8 +184,8 @@
177
184
  width: var(--pf-c-log-viewer__index--Width);
178
185
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
179
186
  padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
180
- font-family: var(--pf-c-log-viewer__index--FontFamily);
181
- font-size: var(--pf-c-log-viewer__index--FontSize);
187
+ font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
188
+ font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
182
189
  color: var(--pf-c-log-viewer__index--Color);
183
190
  user-select: none;
184
191
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -188,8 +195,8 @@
188
195
  display: block;
189
196
  padding-right: var(--pf-c-log-viewer__text--PaddingRight);
190
197
  padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
191
- font-family: var(--pf-c-log-viewer__text--FontFamily);
192
- font-size: var(--pf-c-log-viewer__text--FontSize);
198
+ font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
199
+ font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
193
200
  color: var(--pf-c-log-viewer__text--Color);
194
201
  word-break: var(--pf-c-log-viewer__text--WordBreak);
195
202
  white-space: var(--pf-c-log-viewer__text--WhiteSpace);
package/components/LogViewer/log-viewer.scss CHANGED
@@ -25,22 +25,23 @@
25
25
  // List
26
26
  --pf-c-log-viewer__list--Height: auto;
27
27
  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
28
+ --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
29
+ --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
28
30
 
29
31
  // Index
30
32
  --pf-c-log-viewer__index--Display: none;
31
33
  --pf-c-log-viewer__index--Width: #{pf-size-prem(65px)}; // default width
32
34
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
33
35
  --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
34
- --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
35
- --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
36
36
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
37
37
  --pf-c-log-viewer__index--BackgroundColor: transparent;
38
+ --pf-c-log-viewer--line-number-chars: 4.4; // it's close enough to the existing default
39
+ --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
40
+ --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
38
41
 
39
42
  // Text
40
43
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
41
44
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
42
- --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
43
- --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
44
45
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
45
46
  --pf-c-log-viewer__text--WordBreak: break-all;
46
47
  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -113,6 +114,11 @@
113
114
  }
114
115
  }
115
116
 
117
+ &.pf-m-line-number-chars {
118
+ --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
119
+ --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
120
+ }
121
+
116
122
  // Nested toolbar
117
123
  .pf-c-toolbar {
118
124
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -160,6 +166,8 @@
160
166
  .pf-c-log-viewer__list {
161
167
  position: relative;
162
168
  height: var(--pf-c-log-viewer__list--Height);
169
+ font-family: var(--pf-c-log-viewer__list--FontFamily);
170
+ font-size: var(--pf-c-log-viewer__list--FontSize);
163
171
  }
164
172
 
165
173
  .pf-c-log-viewer__list-item {
@@ -187,8 +195,8 @@
187
195
  width: var(--pf-c-log-viewer__index--Width);
188
196
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
189
197
  padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
190
- font-family: var(--pf-c-log-viewer__index--FontFamily);
191
- font-size: var(--pf-c-log-viewer__index--FontSize);
198
+ font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
199
+ font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
192
200
  color: var(--pf-c-log-viewer__index--Color);
193
201
  user-select: none;
194
202
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -199,8 +207,8 @@
199
207
  display: block;
200
208
  padding-right: var(--pf-c-log-viewer__text--PaddingRight);
201
209
  padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
202
- font-family: var(--pf-c-log-viewer__text--FontFamily);
203
- font-size: var(--pf-c-log-viewer__text--FontSize);
210
+ font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
211
+ font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
204
212
  color: var(--pf-c-log-viewer__text--Color);
205
213
  word-break: var(--pf-c-log-viewer__text--WordBreak);
206
214
  white-space: var(--pf-c-log-viewer__text--WhiteSpace);
package/components/_all.scss CHANGED
@@ -39,6 +39,7 @@
39
39
  @import "./FormControl/form-control";
40
40
  @import "./Hint/hint";
41
41
  @import "./HelperText/helper-text";
42
+ @import "./Icon/icon";
42
43
  @import "./InlineEdit/inline-edit";
43
44
  @import "./InputGroup/input-group";
44
45
  @import "./JumpLinks/jump-links";
package/docs/components/DualListSelector/examples/DualListSelector.md CHANGED
@@ -2808,18 +2808,7 @@ cssPrefix: pf-c-dual-list-selector
2808
2808
  <li class="pf-c-dual-list-selector__list-item" role="option">
2809
2809
  <div class="pf-c-dual-list-selector__list-item-row">
2810
2810
  <div class="pf-c-dual-list-selector__draggable">
2811
- <button
2812
- class="pf-c-button pf-m-plain"
2813
- type="button"
2814
- disabled
2815
- aria-pressed="false"
2816
- aria-label="Reorder"
2817
- id="draggable-list-item-2-draggable-button"
2818
- aria-labelledby="draggable-list-item-2-draggable-button draggable-list-item-2-item-text"
2819
- aria-describedby="draggable-help"
2820
- >
2821
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2822
- </button>
2811
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2823
2812
  </div>
2824
2813
  <span class="pf-c-dual-list-selector__item">
2825
2814
  <span class="pf-c-dual-list-selector__item-main">
@@ -2837,17 +2826,7 @@ cssPrefix: pf-c-dual-list-selector
2837
2826
  <li class="pf-c-dual-list-selector__list-item" role="option">
2838
2827
  <div class="pf-c-dual-list-selector__list-item-row">
2839
2828
  <div class="pf-c-dual-list-selector__draggable">
2840
- <button
2841
- class="pf-c-button pf-m-plain"
2842
- type="button"
2843
- aria-pressed="false"
2844
- aria-label="Reorder"
2845
- id="draggable-list-item-3-draggable-button"
2846
- aria-labelledby="draggable-list-item-3-draggable-button draggable-list-item-3-item-text"
2847
- aria-describedby="draggable-help"
2848
- >
2849
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2850
- </button>
2829
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2851
2830
  </div>
2852
2831
  <span class="pf-c-dual-list-selector__item">
2853
2832
  <span class="pf-c-dual-list-selector__item-main">
@@ -2865,18 +2844,7 @@ cssPrefix: pf-c-dual-list-selector
2865
2844
  <li class="pf-c-dual-list-selector__list-item" role="option">
2866
2845
  <div class="pf-c-dual-list-selector__list-item-row pf-m-ghost-row">
2867
2846
  <div class="pf-c-dual-list-selector__draggable">
2868
- <button
2869
- class="pf-c-button pf-m-plain"
2870
- type="button"
2871
- disabled
2872
- aria-pressed="false"
2873
- aria-label="Reorder"
2874
- id="draggable-list-item-5-draggable-button"
2875
- aria-labelledby="draggable-list-item-5-draggable-button draggable-list-item-5-item-text"
2876
- aria-describedby="draggable-help"
2877
- >
2878
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2879
- </button>
2847
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2880
2848
  </div>
2881
2849
  <span class="pf-c-dual-list-selector__item">
2882
2850
  <span class="pf-c-dual-list-selector__item-main">
@@ -2894,17 +2862,7 @@ cssPrefix: pf-c-dual-list-selector
2894
2862
  <li class="pf-c-dual-list-selector__list-item" role="option">
2895
2863
  <div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
2896
2864
  <div class="pf-c-dual-list-selector__draggable">
2897
- <button
2898
- class="pf-c-button pf-m-plain"
2899
- type="button"
2900
- aria-pressed="false"
2901
- aria-label="Reorder"
2902
- id="draggable-list-item-7-draggable-button"
2903
- aria-labelledby="draggable-list-item-7-draggable-button draggable-list-item-7-item-text"
2904
- aria-describedby="draggable-help"
2905
- >
2906
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2907
- </button>
2865
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2908
2866
  </div>
2909
2867
  <span class="pf-c-dual-list-selector__item">
2910
2868
  <span class="pf-c-dual-list-selector__item-main">
package/docs/components/FormControl/examples/FormControl.md CHANGED
@@ -333,7 +333,7 @@ cssPrefix: pf-c-form-control
333
333
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
334
334
  type="text"
335
335
  value="Success"
336
- id="input-success"
336
+ id="input-success-sprite"
337
337
  aria-label="Success state input example"
338
338
  />
339
339
  <br />
@@ -342,7 +342,7 @@ cssPrefix: pf-c-form-control
342
342
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
343
343
  type="text"
344
344
  value="Warning"
345
- id="input-warning"
345
+ id="input-warning-sprite"
346
346
  aria-label="Warning state input example"
347
347
  />
348
348
  <br />
@@ -352,7 +352,7 @@ cssPrefix: pf-c-form-control
352
352
  required
353
353
  type="text"
354
354
  value="Error"
355
- id="input-error"
355
+ id="input-error-sprite"
356
356
  aria-invalid="true"
357
357
  aria-label="Error state input example"
358
358
  />
@@ -362,7 +362,7 @@ cssPrefix: pf-c-form-control
362
362
  class="pf-c-form-control pf-m-search pf-m-icon-sprite"
363
363
  type="search"
364
364
  value="Search"
365
- id="input-search"
365
+ id="input-search-sprite"
366
366
  name="search-input"
367
367
  aria-label="Search input example"
368
368
  />
@@ -372,7 +372,7 @@ cssPrefix: pf-c-form-control
372
372
  class="pf-c-form-control pf-m-icon pf-m-calendar pf-m-icon-sprite"
373
373
  type="text"
374
374
  value="Calendar"
375
- id="input-calendar"
375
+ id="input-calendar-sprite"
376
376
  name="input-calendar"
377
377
  aria-label="Calendar input example"
378
378
  />
@@ -382,7 +382,7 @@ cssPrefix: pf-c-form-control
382
382
  class="pf-c-form-control pf-m-icon pf-m-clock pf-m-icon-sprite"
383
383
  type="text"
384
384
  value="Clock"
385
- id="input-clock"
385
+ id="input-clock-sprite"
386
386
  name="input-clock"
387
387
  aria-label="Clock input example"
388
388
  />
@@ -390,7 +390,7 @@ cssPrefix: pf-c-form-control
390
390
  <br />
391
391
  <select
392
392
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
393
- id="select-group-success"
393
+ id="select-group-success-sprite"
394
394
  name="select-group-success"
395
395
  aria-label="Success state select group example"
396
396
  >
@@ -408,7 +408,7 @@ cssPrefix: pf-c-form-control
408
408
  <br />
409
409
  <select
410
410
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
411
- id="select-group-warning"
411
+ id="select-group-warning-sprite"
412
412
  name="select-group-warning"
413
413
  aria-label="Warning state select group example"
414
414
  >
@@ -428,7 +428,7 @@ cssPrefix: pf-c-form-control
428
428
  class="pf-c-form-control pf-m-icon-sprite"
429
429
  required
430
430
  aria-invalid="true"
431
- id="select-group-error"
431
+ id="select-group-error-sprite"
432
432
  name="select-group-error"
433
433
  aria-label="Error state select group example"
434
434
  >
@@ -447,7 +447,7 @@ cssPrefix: pf-c-form-control
447
447
  <textarea
448
448
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
449
449
  name="textarea-success"
450
- id="textarea-success"
450
+ id="textarea-success-sprite"
451
451
  aria-label="Success state textarea example"
452
452
  >Success
453
453
  </textarea>
@@ -456,7 +456,7 @@ cssPrefix: pf-c-form-control
456
456
  <textarea
457
457
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
458
458
  name="textarea-warning"
459
- id="textarea-warning"
459
+ id="textarea-warning-sprite"
460
460
  aria-label="Warning state textarea example"
461
461
  >Warning
462
462
  </textarea>
@@ -466,7 +466,7 @@ cssPrefix: pf-c-form-control
466
466
  class="pf-c-form-control pf-m-icon-sprite"
467
467
  required
468
468
  name="textarea-error"
469
- id="textarea-error"
469
+ id="textarea-error-sprite"
470
470
  aria-label="Error state textarea example"
471
471
  aria-invalid="true"
472
472
  >Error