@patternfly/patternfly 4.165.2 → 4.166.3
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.
- package/components/Button/button.css +14 -2
- package/components/Button/button.scss +19 -3
- package/components/LogViewer/log-viewer.css +14 -23
- package/components/LogViewer/log-viewer.scss +13 -10
- package/components/Table/table.css +1 -1
- package/components/Table/table.scss +1 -1
- package/docs/components/Button/examples/Button.md +24 -1
- package/docs/components/LogViewer/examples/LogViewer.md +1 -0
- package/docs/components/Table/examples/Table.md +25 -2
- package/docs/components/Toolbar/examples/Toolbar.md +0 -2
- package/docs/demos/CardView/examples/CardView.md +0 -1
- package/docs/demos/DataList/examples/DataList.md +0 -2
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -1
- package/docs/demos/Table/examples/Table.md +11 -23
- package/docs/demos/Tabs/examples/Tabs.md +0 -1
- package/docs/demos/Toolbar/examples/Toolbar.md +0 -1827
- package/package.json +1 -1
- package/patternfly-no-reset.css +30 -17
- package/patternfly.css +30 -17
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -144,6 +144,7 @@
|
|
|
144
144
|
--pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
|
|
145
145
|
--pf-c-button__progress--Opacity: 0;
|
|
146
146
|
--pf-c-button__progress--TranslateY: -50%;
|
|
147
|
+
--pf-c-button__progress--TranslateX: 0;
|
|
147
148
|
--pf-c-button__progress--Top: 50%;
|
|
148
149
|
--pf-c-button__progress--Left: var(--pf-global--spacer--md);
|
|
149
150
|
--pf-c-button--m-progress--TransitionProperty: padding;
|
|
@@ -152,6 +153,9 @@
|
|
|
152
153
|
--pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
|
|
153
154
|
--pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
|
|
154
155
|
--pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
|
|
156
|
+
--pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
|
|
157
|
+
--pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
|
|
158
|
+
--pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
155
159
|
position: relative;
|
|
156
160
|
display: inline-block;
|
|
157
161
|
padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
|
|
@@ -437,10 +441,18 @@
|
|
|
437
441
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
|
|
438
442
|
transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
|
|
439
443
|
}
|
|
440
|
-
.pf-c-button.pf-m-in-progress {
|
|
444
|
+
.pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
|
|
441
445
|
--pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
|
|
442
446
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
|
|
443
447
|
}
|
|
448
|
+
.pf-c-button.pf-m-in-progress.pf-m-plain {
|
|
449
|
+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
|
|
450
|
+
--pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
|
|
451
|
+
--pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
|
|
452
|
+
}
|
|
453
|
+
.pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
|
|
454
|
+
opacity: 0;
|
|
455
|
+
}
|
|
444
456
|
|
|
445
457
|
.pf-c-button__icon.pf-m-start {
|
|
446
458
|
margin-right: var(--pf-c-button__icon--m-start--MarginRight);
|
|
@@ -454,7 +466,7 @@
|
|
|
454
466
|
top: var(--pf-c-button__progress--Top);
|
|
455
467
|
left: var(--pf-c-button__progress--Left);
|
|
456
468
|
line-height: 1;
|
|
457
|
-
transform:
|
|
469
|
+
transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
|
|
458
470
|
}
|
|
459
471
|
.pf-c-button__progress .pf-c-spinner {
|
|
460
472
|
--pf-c-spinner--Color: currentColor;
|
|
@@ -179,6 +179,7 @@
|
|
|
179
179
|
--pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm)); // matches medium spinner diameter plus a spacer
|
|
180
180
|
--pf-c-button__progress--Opacity: 0;
|
|
181
181
|
--pf-c-button__progress--TranslateY: -50%;
|
|
182
|
+
--pf-c-button__progress--TranslateX: 0;
|
|
182
183
|
--pf-c-button__progress--Top: 50%;
|
|
183
184
|
--pf-c-button__progress--Left: var(--pf-global--spacer--md);
|
|
184
185
|
--pf-c-button--m-progress--TransitionProperty: padding;
|
|
@@ -187,6 +188,9 @@
|
|
|
187
188
|
--pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
|
|
188
189
|
--pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
|
|
189
190
|
--pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
|
|
191
|
+
--pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
|
|
192
|
+
--pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
|
|
193
|
+
--pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
190
194
|
|
|
191
195
|
position: relative;
|
|
192
196
|
display: inline-block;
|
|
@@ -577,8 +581,20 @@
|
|
|
577
581
|
}
|
|
578
582
|
|
|
579
583
|
&.pf-m-in-progress {
|
|
580
|
-
|
|
581
|
-
|
|
584
|
+
&:not(.pf-m-plain) {
|
|
585
|
+
--pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
|
|
586
|
+
--pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
&.pf-m-plain {
|
|
590
|
+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
|
|
591
|
+
--pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
|
|
592
|
+
--pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
|
|
593
|
+
|
|
594
|
+
> :not(.pf-c-button__progress) {
|
|
595
|
+
opacity: 0;
|
|
596
|
+
}
|
|
597
|
+
}
|
|
582
598
|
}
|
|
583
599
|
}
|
|
584
600
|
|
|
@@ -597,7 +613,7 @@
|
|
|
597
613
|
top: var(--pf-c-button__progress--Top);
|
|
598
614
|
left: var(--pf-c-button__progress--Left);
|
|
599
615
|
line-height: 1;
|
|
600
|
-
transform:
|
|
616
|
+
transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
|
|
601
617
|
|
|
602
618
|
.pf-c-spinner {
|
|
603
619
|
--pf-c-spinner--Color: currentColor;
|
|
@@ -1,15 +1,4 @@
|
|
|
1
|
-
.pf-c-log-
|
|
2
|
-
.pf-c-log-viewer__footer {
|
|
3
|
-
--pf-global--Color--100: var(--pf-global--Color--dark-100);
|
|
4
|
-
--pf-global--Color--200: var(--pf-global--Color--dark-200);
|
|
5
|
-
--pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
|
|
6
|
-
--pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
|
|
7
|
-
--pf-global--link--Color: var(--pf-global--link--Color--dark);
|
|
8
|
-
--pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
|
|
9
|
-
--pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.pf-c-log-viewer.pf-m-dark {
|
|
1
|
+
.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
|
|
13
2
|
--pf-global--Color--100: var(--pf-global--Color--light-100);
|
|
14
3
|
--pf-global--Color--200: var(--pf-global--Color--light-200);
|
|
15
4
|
--pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
|
|
@@ -18,10 +7,10 @@
|
|
|
18
7
|
--pf-global--link--Color--hover: var(--pf-global--link--Color--light);
|
|
19
8
|
--pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
|
|
20
9
|
}
|
|
21
|
-
.pf-c-log-viewer.pf-m-dark .pf-c-card {
|
|
10
|
+
.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
|
|
22
11
|
--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
|
|
23
12
|
}
|
|
24
|
-
.pf-c-log-viewer.pf-m-dark .pf-c-button {
|
|
13
|
+
.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
|
|
25
14
|
--pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
|
|
26
15
|
--pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
|
|
27
16
|
--pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
|
|
@@ -51,8 +40,8 @@
|
|
|
51
40
|
--pf-c-log-viewer__scroll-container--Height: 37.5rem;
|
|
52
41
|
--pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
|
|
53
42
|
--pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
|
|
54
|
-
--pf-c-log-viewer--m-line-numbers__main--before--Top:
|
|
55
|
-
--pf-c-log-viewer--m-line-numbers__main--before--Bottom:
|
|
43
|
+
--pf-c-log-viewer--m-line-numbers__main--before--Top: 0;
|
|
44
|
+
--pf-c-log-viewer--m-line-numbers__main--before--Bottom: 0;
|
|
56
45
|
--pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
|
|
57
46
|
--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
|
|
58
47
|
--pf-c-log-viewer__list--Height: auto;
|
|
@@ -64,7 +53,7 @@
|
|
|
64
53
|
--pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
|
|
65
54
|
--pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
|
|
66
55
|
--pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
|
|
67
|
-
--pf-c-log-viewer__index--BackgroundColor:
|
|
56
|
+
--pf-c-log-viewer__index--BackgroundColor: transparent;
|
|
68
57
|
--pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
|
|
69
58
|
--pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
|
|
70
59
|
--pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
|
|
@@ -92,9 +81,16 @@
|
|
|
92
81
|
max-height: var(--pf-c-log-viewer--MaxHeight);
|
|
93
82
|
}
|
|
94
83
|
.pf-c-log-viewer.pf-m-dark {
|
|
95
|
-
color: var(--pf-global--Color--100);
|
|
96
84
|
--pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
|
|
97
85
|
}
|
|
86
|
+
.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
|
|
87
|
+
color: var(--pf-global--Color--100);
|
|
88
|
+
--pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
89
|
+
--pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
|
|
90
|
+
--pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
|
|
91
|
+
--pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
|
|
92
|
+
--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
|
|
93
|
+
}
|
|
98
94
|
.pf-c-log-viewer.pf-m-wrap-text {
|
|
99
95
|
word-break: break-all;
|
|
100
96
|
}
|
|
@@ -137,11 +133,6 @@
|
|
|
137
133
|
margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
|
|
138
134
|
}
|
|
139
135
|
|
|
140
|
-
.pf-c-log-viewer__header,
|
|
141
|
-
.pf-c-log-viewer__footer {
|
|
142
|
-
color: var(--pf-global--Color--100);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
136
|
.pf-c-log-viewer__main {
|
|
146
137
|
display: flex;
|
|
147
138
|
flex-direction: column;
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
--pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
|
|
18
18
|
|
|
19
19
|
// Main ::after
|
|
20
|
-
--pf-c-log-viewer--m-line-numbers__main--before--Top:
|
|
21
|
-
--pf-c-log-viewer--m-line-numbers__main--before--Bottom:
|
|
20
|
+
--pf-c-log-viewer--m-line-numbers__main--before--Top: 0;
|
|
21
|
+
--pf-c-log-viewer--m-line-numbers__main--before--Bottom: 0;
|
|
22
22
|
--pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
|
|
23
23
|
--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
|
|
24
24
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
--pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
|
|
35
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
|
-
--pf-c-log-viewer__index--BackgroundColor:
|
|
37
|
+
--pf-c-log-viewer__index--BackgroundColor: transparent;
|
|
38
38
|
|
|
39
39
|
// Text
|
|
40
40
|
--pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
|
|
@@ -66,9 +66,17 @@
|
|
|
66
66
|
--pf-c-log-viewer--m-dark__main--BorderWidth: 0;
|
|
67
67
|
|
|
68
68
|
&.pf-m-dark {
|
|
69
|
-
@include pf-t-dark;
|
|
70
|
-
|
|
71
69
|
--pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
|
|
70
|
+
|
|
71
|
+
.pf-c-log-viewer__main {
|
|
72
|
+
@include pf-t-dark;
|
|
73
|
+
|
|
74
|
+
--pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
75
|
+
--pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
|
|
76
|
+
--pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
|
|
77
|
+
--pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
|
|
78
|
+
--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
|
|
79
|
+
}
|
|
72
80
|
}
|
|
73
81
|
|
|
74
82
|
display: flex;
|
|
@@ -129,11 +137,6 @@
|
|
|
129
137
|
margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
|
|
130
138
|
}
|
|
131
139
|
|
|
132
|
-
.pf-c-log-viewer__header,
|
|
133
|
-
.pf-c-log-viewer__footer {
|
|
134
|
-
@include pf-t-light;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
140
|
// Main
|
|
138
141
|
.pf-c-log-viewer__main {
|
|
139
142
|
display: flex;
|
|
@@ -472,7 +472,7 @@
|
|
|
472
472
|
.pf-c-table .pf-c-table__icon,
|
|
473
473
|
.pf-c-table .pf-m-fit-content {
|
|
474
474
|
--pf-c-table--cell--MinWidth: fit-content;
|
|
475
|
-
--pf-c-table--cell--MaxWidth:
|
|
475
|
+
--pf-c-table--cell--MaxWidth: none;
|
|
476
476
|
--pf-c-table--cell--Width: 1%;
|
|
477
477
|
--pf-c-table--cell--Overflow: visible;
|
|
478
478
|
--pf-c-table--cell--TextOverflow: clip;
|
|
@@ -579,7 +579,7 @@
|
|
|
579
579
|
.pf-c-table__icon,
|
|
580
580
|
.pf-m-fit-content {
|
|
581
581
|
--pf-c-table--cell--MinWidth: fit-content;
|
|
582
|
-
--pf-c-table--cell--MaxWidth:
|
|
582
|
+
--pf-c-table--cell--MaxWidth: none;
|
|
583
583
|
--pf-c-table--cell--Width: 1%;
|
|
584
584
|
--pf-c-table--cell--Overflow: visible;
|
|
585
585
|
--pf-c-table--cell--TextOverflow: clip;
|
|
@@ -404,6 +404,29 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
404
404
|
Secondary loading
|
|
405
405
|
</button>
|
|
406
406
|
|
|
407
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Upload">
|
|
408
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
409
|
+
</button>
|
|
410
|
+
|
|
411
|
+
<button
|
|
412
|
+
class="pf-c-button pf-m-plain pf-m-in-progress"
|
|
413
|
+
type="button"
|
|
414
|
+
aria-label="Upload"
|
|
415
|
+
>
|
|
416
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
417
|
+
<span class="pf-c-button__progress">
|
|
418
|
+
<span
|
|
419
|
+
class="pf-c-spinner pf-m-md"
|
|
420
|
+
role="progressbar"
|
|
421
|
+
aria-label="Loading..."
|
|
422
|
+
>
|
|
423
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
424
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
425
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
426
|
+
</span>
|
|
427
|
+
</span>
|
|
428
|
+
</button>
|
|
429
|
+
|
|
407
430
|
```
|
|
408
431
|
|
|
409
432
|
## Documentation
|
|
@@ -453,5 +476,5 @@ Semantic buttons and links are important for usability as well as accessibility.
|
|
|
453
476
|
| `.pf-m-small` | `.pf-c-button` | Modifies the button so that it has small font size. |
|
|
454
477
|
| `.pf-m-aria-disabled` | `.pf-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
|
|
455
478
|
| `.pf-m-display-lg` | `.pf-c-button`, `pf-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
|
|
456
|
-
| `.pf-m-progress` | `.pf-c-button` | Indicates that the button supports the progress state.
|
|
479
|
+
| `.pf-m-progress` | `.pf-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
|
|
457
480
|
| `.pf-m-in-progress` | `.pf-c-button` | Indicates that the button is in the in progress state. |
|
|
@@ -840,7 +840,19 @@ When header cells are empty or they contain interactive elements, `<th>` should
|
|
|
840
840
|
>
|
|
841
841
|
<thead>
|
|
842
842
|
<tr role="row">
|
|
843
|
-
<td
|
|
843
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
844
|
+
<button
|
|
845
|
+
class="pf-c-button pf-m-plain pf-m-expanded"
|
|
846
|
+
id="table-expandable-expandable-toggle-thead"
|
|
847
|
+
aria-label="Collapse all"
|
|
848
|
+
aria-expanded="true"
|
|
849
|
+
>
|
|
850
|
+
<div class="pf-c-table__toggle-icon">
|
|
851
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
852
|
+
</div>
|
|
853
|
+
</button>
|
|
854
|
+
</td>
|
|
855
|
+
|
|
844
856
|
<td class="pf-c-table__check" role="cell">
|
|
845
857
|
<label>
|
|
846
858
|
<input
|
|
@@ -1281,7 +1293,18 @@ When header cells are empty or they contain interactive elements, `<th>` should
|
|
|
1281
1293
|
>
|
|
1282
1294
|
<thead>
|
|
1283
1295
|
<tr role="row">
|
|
1284
|
-
<td
|
|
1296
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
1297
|
+
<button
|
|
1298
|
+
class="pf-c-button pf-m-plain"
|
|
1299
|
+
id="table-expandable-nested-table-expandable-toggle-thead"
|
|
1300
|
+
aria-label="Expand all"
|
|
1301
|
+
>
|
|
1302
|
+
<div class="pf-c-table__toggle-icon">
|
|
1303
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
1304
|
+
</div>
|
|
1305
|
+
</button>
|
|
1306
|
+
</td>
|
|
1307
|
+
|
|
1285
1308
|
<td class="pf-c-table__check" role="cell">
|
|
1286
1309
|
<label>
|
|
1287
1310
|
<input
|
|
@@ -3658,8 +3658,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
3658
3658
|
|
|
3659
3659
|
### Expanded elements
|
|
3660
3660
|
|
|
3661
|
-
### Expanded elements
|
|
3662
|
-
|
|
3663
3661
|
```html
|
|
3664
3662
|
<div class="pf-c-toolbar" id="toolbar-expanded-elements-example">
|
|
3665
3663
|
<div class="pf-c-toolbar__content">
|
|
@@ -1323,7 +1323,6 @@ wrapperTag: div
|
|
|
1323
1323
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1324
1324
|
</button>
|
|
1325
1325
|
</div>
|
|
1326
|
-
|
|
1327
1326
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
1328
1327
|
<div class="pf-c-dropdown">
|
|
1329
1328
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -2274,7 +2273,6 @@ wrapperTag: div
|
|
|
2274
2273
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2275
2274
|
</button>
|
|
2276
2275
|
</div>
|
|
2277
|
-
|
|
2278
2276
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
2279
2277
|
<div class="pf-c-dropdown">
|
|
2280
2278
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -3758,7 +3758,6 @@ wrapperTag: div
|
|
|
3758
3758
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
3759
3759
|
</button>
|
|
3760
3760
|
</div>
|
|
3761
|
-
|
|
3762
3761
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
3763
3762
|
<div class="pf-c-dropdown">
|
|
3764
3763
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -354,7 +354,6 @@ wrapperTag: div
|
|
|
354
354
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
355
355
|
</button>
|
|
356
356
|
</div>
|
|
357
|
-
|
|
358
357
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
359
358
|
<div class="pf-c-dropdown">
|
|
360
359
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -1592,7 +1591,6 @@ wrapperTag: div
|
|
|
1592
1591
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1593
1592
|
</button>
|
|
1594
1593
|
</div>
|
|
1595
|
-
|
|
1596
1594
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
1597
1595
|
<div class="pf-c-dropdown">
|
|
1598
1596
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -2850,7 +2848,6 @@ wrapperTag: div
|
|
|
2850
2848
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2851
2849
|
</button>
|
|
2852
2850
|
</div>
|
|
2853
|
-
|
|
2854
2851
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
2855
2852
|
<div class="pf-c-dropdown">
|
|
2856
2853
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -4105,7 +4102,6 @@ wrapperTag: div
|
|
|
4105
4102
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
4106
4103
|
</button>
|
|
4107
4104
|
</div>
|
|
4108
|
-
|
|
4109
4105
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
4110
4106
|
<div class="pf-c-dropdown">
|
|
4111
4107
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -5255,7 +5251,6 @@ wrapperTag: div
|
|
|
5255
5251
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
5256
5252
|
</button>
|
|
5257
5253
|
</div>
|
|
5258
|
-
|
|
5259
5254
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
5260
5255
|
<div class="pf-c-dropdown">
|
|
5261
5256
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -6580,18 +6575,6 @@ wrapperTag: div
|
|
|
6580
6575
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
6581
6576
|
</button>
|
|
6582
6577
|
</div>
|
|
6583
|
-
<div class="pf-c-toolbar__item pf-m-expand-all">
|
|
6584
|
-
<button
|
|
6585
|
-
class="pf-c-button pf-m-plain"
|
|
6586
|
-
type="button"
|
|
6587
|
-
aria-label="Expand all"
|
|
6588
|
-
>
|
|
6589
|
-
<span class="pf-c-toolbar__expand-all-icon">
|
|
6590
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6591
|
-
</span>
|
|
6592
|
-
</button>
|
|
6593
|
-
</div>
|
|
6594
|
-
|
|
6595
6578
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
6596
6579
|
<div class="pf-c-dropdown">
|
|
6597
6580
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -7013,7 +6996,17 @@ wrapperTag: div
|
|
|
7013
6996
|
>
|
|
7014
6997
|
<thead>
|
|
7015
6998
|
<tr role="row">
|
|
7016
|
-
<td role="cell"
|
|
6999
|
+
<td class="pf-c-table__toggle" role="cell">
|
|
7000
|
+
<button
|
|
7001
|
+
class="pf-c-button pf-m-plain"
|
|
7002
|
+
id="page-layout-table-expandable-table-expandable-toggle-thead"
|
|
7003
|
+
aria-label="Expand all"
|
|
7004
|
+
>
|
|
7005
|
+
<div class="pf-c-table__toggle-icon">
|
|
7006
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
7007
|
+
</div>
|
|
7008
|
+
</button>
|
|
7009
|
+
</td>
|
|
7017
7010
|
|
|
7018
7011
|
<td class="pf-c-table__check" role="cell">
|
|
7019
7012
|
<input
|
|
@@ -8105,7 +8098,6 @@ wrapperTag: div
|
|
|
8105
8098
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
8106
8099
|
</button>
|
|
8107
8100
|
</div>
|
|
8108
|
-
|
|
8109
8101
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
8110
8102
|
<div class="pf-c-dropdown">
|
|
8111
8103
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -9289,7 +9281,6 @@ wrapperTag: div
|
|
|
9289
9281
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
9290
9282
|
</button>
|
|
9291
9283
|
</div>
|
|
9292
|
-
|
|
9293
9284
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
9294
9285
|
<div class="pf-c-dropdown">
|
|
9295
9286
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -14445,7 +14436,6 @@ wrapperTag: div
|
|
|
14445
14436
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
14446
14437
|
</button>
|
|
14447
14438
|
</div>
|
|
14448
|
-
|
|
14449
14439
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
14450
14440
|
<div class="pf-c-dropdown">
|
|
14451
14441
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -15764,7 +15754,6 @@ wrapperTag: div
|
|
|
15764
15754
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
15765
15755
|
</button>
|
|
15766
15756
|
</div>
|
|
15767
|
-
|
|
15768
15757
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
15769
15758
|
<div class="pf-c-dropdown">
|
|
15770
15759
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -17170,7 +17159,6 @@ wrapperTag: div
|
|
|
17170
17159
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
17171
17160
|
</button>
|
|
17172
17161
|
</div>
|
|
17173
|
-
|
|
17174
17162
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
17175
17163
|
<div class="pf-c-dropdown">
|
|
17176
17164
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
@@ -5422,7 +5422,6 @@ section: components
|
|
|
5422
5422
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
5423
5423
|
</button>
|
|
5424
5424
|
</div>
|
|
5425
|
-
|
|
5426
5425
|
<div class="pf-c-toolbar__item pf-m-bulk-select">
|
|
5427
5426
|
<div class="pf-c-dropdown">
|
|
5428
5427
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|