@patternfly/patternfly 4.166.1 → 4.166.5

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 (21) hide show
  1. package/components/LogViewer/log-viewer.css +14 -23
  2. package/components/LogViewer/log-viewer.scss +13 -10
  3. package/components/Truncate/truncate.css +14 -26
  4. package/components/Truncate/truncate.scss +13 -32
  5. package/docs/components/DescriptionList/examples/DescriptionList.md +9 -119
  6. package/docs/components/LogViewer/examples/LogViewer.md +1 -0
  7. package/docs/components/Table/examples/Table.md +25 -14
  8. package/docs/components/Toolbar/examples/Toolbar.md +0 -2
  9. package/docs/components/Truncate/examples/Truncate.css +9 -0
  10. package/docs/components/Truncate/examples/Truncate.md +16 -25
  11. package/docs/demos/CardView/examples/CardView.md +0 -1
  12. package/docs/demos/DataList/examples/DataList.md +0 -2
  13. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -1
  14. package/docs/demos/Table/examples/Table.md +11 -23
  15. package/docs/demos/Tabs/examples/Tabs.md +0 -1
  16. package/docs/demos/Toolbar/examples/Toolbar.md +0 -1827
  17. package/package.json +1 -1
  18. package/patternfly-no-reset.css +29 -40
  19. package/patternfly.css +29 -40
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/components/LogViewer/log-viewer.css CHANGED
@@ -1,15 +1,4 @@
1
- .pf-c-log-viewer__header,
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: var(--pf-global--spacer--sm);
55
- --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
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: var(--pf-global--BackgroundColor--100);
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;
package/components/LogViewer/log-viewer.scss CHANGED
@@ -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: var(--pf-global--spacer--sm);
21
- --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
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: var(--pf-global--BackgroundColor--100);
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;
package/components/Truncate/truncate.css CHANGED
@@ -1,45 +1,33 @@
1
1
  .pf-c-truncate {
2
- --pf-c-truncate--FontSize: 1rem;
3
- display: inline-flex;
4
- flex-wrap: nowrap;
5
- max-width: 100%;
2
+ --pf-c-truncate--MinWidth: 12ch;
3
+ --pf-c-truncate__start--MinWidth: 6ch;
4
+ display: inline-grid;
5
+ grid-auto-flow: column;
6
+ align-items: baseline;
7
+ min-width: var(--pf-c-truncate--MinWidth);
6
8
  }
7
9
 
8
10
  .pf-c-truncate__start,
9
11
  .pf-c-truncate__end {
10
- flex-shrink: 1;
11
12
  overflow: hidden;
12
13
  text-overflow: ellipsis;
13
14
  white-space: nowrap;
14
15
  }
15
16
 
17
+ .pf-c-truncate__start {
18
+ min-width: var(--pf-c-truncate__start--MinWidth);
19
+ }
20
+
16
21
  .pf-c-truncate__end {
17
22
  direction: rtl;
18
- text-align: left;
19
23
  }
20
24
 
21
- @supports (text-overflow: "") {
22
- .pf-c-truncate__start + .pf-c-truncate__end {
23
- text-overflow: "";
24
- }
25
+ .pf-c-truncate__start + .pf-c-truncate__end {
26
+ overflow: visible;
27
+ direction: ltr;
25
28
  }
26
- @supports not (text-overflow: "") {
27
- .pf-c-truncate__start + .pf-c-truncate__end {
28
- font-size: 0;
29
- }
30
- .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
31
- font-size: var(--pf-c-truncate--FontSize);
32
- }
33
- }
34
- @supports (-webkit-hyphens: none) {
35
- .pf-c-truncate {
36
- display: inline-block;
37
- max-width: 100%;
38
- overflow: hidden;
39
- text-overflow: ellipsis;
40
- white-space: nowrap;
41
- }
42
29
 
30
+ @supports (-webkit-hyphens: none) {
43
31
  .pf-c-truncate__end {
44
32
  direction: ltr;
45
33
  }
package/components/Truncate/truncate.scss CHANGED
@@ -1,55 +1,36 @@
1
1
  .pf-c-truncate {
2
- --pf-c-truncate--FontSize: 1rem;
2
+ --pf-c-truncate--MinWidth: 12ch;
3
+ --pf-c-truncate__start--MinWidth: 6ch;
3
4
 
4
- display: inline-flex;
5
- flex-wrap: nowrap;
6
- max-width: 100%;
5
+ display: inline-grid;
6
+ grid-auto-flow: column;
7
+ align-items: baseline;
8
+ min-width: var(--pf-c-truncate--MinWidth);
7
9
  }
8
10
 
9
- // Start, end
10
11
  .pf-c-truncate__start,
11
12
  .pf-c-truncate__end {
12
- flex-shrink: 1;
13
13
  overflow: hidden;
14
14
  text-overflow: ellipsis;
15
15
  white-space: nowrap;
16
16
  }
17
17
 
18
+ .pf-c-truncate__start {
19
+ min-width: var(--pf-c-truncate__start--MinWidth);
20
+ }
21
+
18
22
  // End
19
23
  .pf-c-truncate__end {
20
24
  direction: rtl;
21
- text-align: left;
22
25
  }
23
26
 
24
- // text-overflow: <string>
25
- @supports (text-overflow: "") {
26
- .pf-c-truncate__start + .pf-c-truncate__end {
27
- text-overflow: "";
28
- }
29
- }
30
-
31
- // text-overflow: ellipsis
32
- @supports not (text-overflow: "") {
33
- // Start + end = middle truncation
34
- .pf-c-truncate__start + .pf-c-truncate__end {
35
- font-size: 0; // shrink ellipsis size to zero
36
-
37
- .pf-c-truncate__text {
38
- font-size: var(--pf-c-truncate--FontSize);
39
- }
40
- }
27
+ .pf-c-truncate__start + .pf-c-truncate__end {
28
+ overflow: visible;
29
+ direction: ltr;
41
30
  }
42
31
 
43
32
  // safari not supported
44
33
  @supports (-webkit-hyphens: none) {
45
- .pf-c-truncate {
46
- display: inline-block;
47
- max-width: 100%;
48
- overflow: hidden;
49
- text-overflow: ellipsis;
50
- white-space: nowrap;
51
- }
52
-
53
34
  .pf-c-truncate__end {
54
35
  direction: ltr;
55
36
  }
package/docs/components/DescriptionList/examples/DescriptionList.md CHANGED
@@ -152,7 +152,9 @@ cssPrefix: pf-c-description-list
152
152
  <span class="pf-c-description-list__text">Name</span>
153
153
  </dt>
154
154
  <dd class="pf-c-description-list__description">
155
- <div class="pf-c-description-list__text">example</div>
155
+ <div
156
+ class="pf-c-description-list__text"
157
+ >This is a long description that should wrap to multiple lines in a multi-column layout.</div>
156
158
  </dd>
157
159
  </div>
158
160
  <div class="pf-c-description-list__group">
@@ -601,130 +603,18 @@ cssPrefix: pf-c-description-list
601
603
 
602
604
  ### Column fill
603
605
 
604
- ```html
605
- <dl class="pf-c-description-list pf-m-fill-columns">
606
- <div class="pf-c-description-list__group">
607
- <dt class="pf-c-description-list__term">
608
- <span class="pf-c-description-list__text">Name</span>
609
- </dt>
610
- <dd class="pf-c-description-list__description">
611
- <div class="pf-c-description-list__text">example</div>
612
- </dd>
613
- </div>
614
- <div class="pf-c-description-list__group">
615
- <dt class="pf-c-description-list__term">
616
- <span class="pf-c-description-list__text">Namespace</span>
617
- </dt>
618
- <dd class="pf-c-description-list__description">
619
- <div class="pf-c-description-list__text">
620
- <a href="#">mary-test</a>
621
- </div>
622
- </dd>
623
- </div>
624
- <div class="pf-c-description-list__group">
625
- <dt class="pf-c-description-list__term">
626
- <span class="pf-c-description-list__text">Labels</span>
627
- </dt>
628
- <dd class="pf-c-description-list__description">
629
- <div class="pf-c-description-list__text">example</div>
630
- </dd>
631
- </div>
632
- <div class="pf-c-description-list__group">
633
- <dt class="pf-c-description-list__term">
634
- <span class="pf-c-description-list__text">Pod selector</span>
635
- </dt>
636
- <dd class="pf-c-description-list__description">
637
- <div class="pf-c-description-list__text">
638
- <button class="pf-c-button pf-m-link pf-m-inline" type="button">
639
- <span class="pf-c-button__icon pf-m-start">
640
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
641
- </span>
642
- app=MyApp
643
- </button>
644
- </div>
645
- </dd>
646
- </div>
647
- <div class="pf-c-description-list__group">
648
- <dt class="pf-c-description-list__term">
649
- <span class="pf-c-description-list__text">Annotation</span>
650
- </dt>
651
- <dd class="pf-c-description-list__description">
652
- <div class="pf-c-description-list__text">2 Annotations</div>
653
- </dd>
654
- </div>
655
- </dl>
656
-
657
- ```
658
-
659
- ### Column fill, horizontal
606
+ Column fill will modify the default placement of description list groups to fill from top to bottom using css column-count, instead of left to right. **Note:** using this modifier will change the layout so that horizontally adjacent groups are no longer aligned in the same row.
660
607
 
661
608
  ```html
662
- <dl class="pf-c-description-list pf-m-fill-columns pf-m-horizontal">
609
+ <dl class="pf-c-description-list pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg">
663
610
  <div class="pf-c-description-list__group">
664
611
  <dt class="pf-c-description-list__term">
665
612
  <span class="pf-c-description-list__text">Name</span>
666
613
  </dt>
667
614
  <dd class="pf-c-description-list__description">
668
- <div class="pf-c-description-list__text">example</div>
669
- </dd>
670
- </div>
671
- <div class="pf-c-description-list__group">
672
- <dt class="pf-c-description-list__term">
673
- <span class="pf-c-description-list__text">Namespace</span>
674
- </dt>
675
- <dd class="pf-c-description-list__description">
676
- <div class="pf-c-description-list__text">
677
- <a href="#">mary-test</a>
678
- </div>
679
- </dd>
680
- </div>
681
- <div class="pf-c-description-list__group">
682
- <dt class="pf-c-description-list__term">
683
- <span class="pf-c-description-list__text">Labels</span>
684
- </dt>
685
- <dd class="pf-c-description-list__description">
686
- <div class="pf-c-description-list__text">example</div>
687
- </dd>
688
- </div>
689
- <div class="pf-c-description-list__group">
690
- <dt class="pf-c-description-list__term">
691
- <span class="pf-c-description-list__text">Pod selector</span>
692
- </dt>
693
- <dd class="pf-c-description-list__description">
694
- <div class="pf-c-description-list__text">
695
- <button class="pf-c-button pf-m-link pf-m-inline" type="button">
696
- <span class="pf-c-button__icon pf-m-start">
697
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
698
- </span>
699
- app=MyApp
700
- </button>
701
- </div>
702
- </dd>
703
- </div>
704
- <div class="pf-c-description-list__group">
705
- <dt class="pf-c-description-list__term">
706
- <span class="pf-c-description-list__text">Annotation</span>
707
- </dt>
708
- <dd class="pf-c-description-list__description">
709
- <div class="pf-c-description-list__text">2 Annotations</div>
710
- </dd>
711
- </div>
712
- </dl>
713
-
714
- ```
715
-
716
- ### Column fill, horizontal, multi-column
717
-
718
- ```html
719
- <dl
720
- class="pf-c-description-list pf-m-fill-columns pf-m-horizontal pf-m-2-col pf-m-3-col-on-lg"
721
- >
722
- <div class="pf-c-description-list__group">
723
- <dt class="pf-c-description-list__term">
724
- <span class="pf-c-description-list__text">Name</span>
725
- </dt>
726
- <dd class="pf-c-description-list__description">
727
- <div class="pf-c-description-list__text">example</div>
615
+ <div
616
+ class="pf-c-description-list__text"
617
+ >This is a long description that should wrap to multiple lines in a multi-column layout.</div>
728
618
  </dd>
729
619
  </div>
730
620
  <div class="pf-c-description-list__group">
@@ -1335,7 +1225,7 @@ cssPrefix: pf-c-description-list
1335
1225
  | `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
1336
1226
  | `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
1337
1227
  | `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
1338
- | `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns . |
1228
+ | `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
1339
1229
  | `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
1340
1230
  | `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
1341
1231
  | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
package/docs/components/LogViewer/examples/LogViewer.md CHANGED
@@ -4755,6 +4755,7 @@ cssPrefix: pf-c-log-viewer
4755
4755
  <!--prettyhtml-ignore-end-->
4756
4756
  </div>
4757
4757
  </div>
4758
+ <button class="pf-c-button pf-m-primary" type="button">Jump to the bottom</button>
4758
4759
  </div>
4759
4760
 
4760
4761
  ```
package/docs/components/Table/examples/Table.md CHANGED
@@ -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></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></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
@@ -21390,12 +21413,6 @@ For sticky columns to function correctly, the parent table's width must be contr
21390
21413
  aria-label="This is a nested column header table example"
21391
21414
  id="nested-columns-expandable-example"
21392
21415
  >
21393
- <col />
21394
- <col />
21395
- <col />
21396
- <colgroup span="3"></colgroup>
21397
- <col />
21398
- <col />
21399
21416
  <thead class="pf-m-nested-column-header">
21400
21417
  <tr role="row">
21401
21418
  <td rowspan="2"></td>
@@ -21774,12 +21791,6 @@ For sticky columns to function correctly, the parent table's width must be contr
21774
21791
  aria-label="This is a nested column header table example"
21775
21792
  id="table-nested-column-headers-example"
21776
21793
  >
21777
- <colgroup span="3"></colgroup>
21778
- <colgroup span="2"></colgroup>
21779
- <col />
21780
- <col />
21781
- <col />
21782
- <col />
21783
21794
  <thead class="pf-m-nested-column-header">
21784
21795
  <tr role="row">
21785
21796
  <th
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -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">
package/docs/components/Truncate/examples/Truncate.css ADDED
@@ -0,0 +1,9 @@
1
+ .pf-c-truncate--example {
2
+ width: 320px;
3
+ resize: horizontal;
4
+ overflow: auto;
5
+ min-width: 161px;
6
+ max-width: 100%;
7
+ padding: var(--pf-global--spacer--md);
8
+ border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
9
+ }
package/docs/components/Truncate/examples/Truncate.md CHANGED
@@ -3,7 +3,9 @@ id: 'Truncate'
3
3
  beta: true
4
4
  section: components
5
5
  cssPrefix: pf-c-truncate
6
- ---## Examples
6
+ ---import './Truncate.css'
7
+
8
+ ## Examples
7
9
 
8
10
  ### Notes
9
11
 
@@ -12,13 +14,11 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
12
14
  ### Default
13
15
 
14
16
  ```html
15
- <div style="width: 220px; resize: horizontal; overflow: auto;">
17
+ <div class="pf-c-truncate--example">
16
18
  <span class="pf-c-truncate">
17
- <span class="pf-c-truncate__start">
18
- <span
19
- class="pf-c-truncate__text"
20
- >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</span>
21
- </span>
19
+ <span
20
+ class="pf-c-truncate__start"
21
+ >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</span>
22
22
  </span>
23
23
  </div>
24
24
 
@@ -27,17 +27,12 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
27
27
  ### Middle
28
28
 
29
29
  ```html
30
- <div style="width: 226px; resize: horizontal; overflow: auto;">
30
+ <div class="pf-c-truncate--example">
31
31
  <span class="pf-c-truncate">
32
- <span class="pf-c-truncate__start">
33
- <span class="pf-c-truncate__text">redhat_logo_black_and_white_reversed_</span>
34
- </span>
35
- <span class="pf-c-truncate__end">
36
- <span
37
- class="pf-c-truncate__text"
38
- style="--pf-c-truncate--FontSize: 1rem"
39
- >simple_with_fedora_container.zip</span>
40
- </span>
32
+ <span
33
+ class="pf-c-truncate__start"
34
+ >redhat_logo_black_and_white_reversed_simple_with_fedora_con</span>
35
+ <span class="pf-c-truncate__end">tainer.zip</span>
41
36
  </span>
42
37
  </div>
43
38
 
@@ -46,14 +41,11 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
46
41
  ### Start
47
42
 
48
43
  ```html
49
- <div style="width: 220px; resize: horizontal; overflow: auto;">
44
+ <div class="pf-c-truncate--example">
50
45
  <span class="pf-c-truncate">
51
- <span class="pf-c-truncate__end">
52
- <span
53
- class="pf-c-truncate__text"
54
- style="--pf-c-truncate--FontSize: 1rem"
55
- >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.&lrm;</span>
56
- </span>
46
+ <span
47
+ class="pf-c-truncate__end"
48
+ >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.&lrm;</span>
57
49
  </span>
58
50
  </div>
59
51
 
@@ -68,4 +60,3 @@ The truncate component contains two child elements, `.pf-c-truncate__start` and
68
60
  | `.pf-c-truncate` | `<span>` | Initiates the truncate component. |
69
61
  | `.pf-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
70
62
  | `.pf-c-truncate__end` | `<span>` | Defines the truncate component ending text. |
71
- | `.pf-c-truncate__text` | `<span>` | Defines the truncate component text. |
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -218,7 +218,6 @@ section: demos
218
218
  <i class="fas fa-filter" aria-hidden="true"></i>
219
219
  </button>
220
220
  </div>
221
-
222
221
  <div class="pf-c-toolbar__item pf-m-bulk-select">
223
222
  <div class="pf-c-dropdown">
224
223
  <div class="pf-c-dropdown__toggle pf-m-split-button">
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -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">
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -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">