@patternfly/patternfly 4.163.0 → 4.164.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/RELEASE-NOTES.md +31 -0
- package/components/Form/form.css +121 -1
- package/components/Form/form.scss +26 -1
- package/components/Label/label.css +37 -0
- package/components/Label/label.scss +43 -0
- package/components/MultipleFileUpload/multiple-file-upload.css +180 -0
- package/components/MultipleFileUpload/multiple-file-upload.scss +214 -0
- package/components/Truncate/truncate.css +46 -0
- package/components/Truncate/truncate.scss +56 -0
- package/components/_all.scss +2 -0
- package/docs/components/Form/examples/Form.md +69 -41
- package/docs/components/Label/examples/Label.md +102 -41
- package/docs/components/LabelGroup/examples/LabelGroup.md +98 -73
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +685 -0
- package/docs/components/Truncate/examples/Truncate.md +71 -0
- package/docs/demos/Card/examples/Card.md +22 -0
- package/docs/demos/Tabs/examples/Tabs.md +2 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +385 -1
- package/patternfly.css +385 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: 'Truncate'
|
|
3
|
+
beta: true
|
|
4
|
+
section: components
|
|
5
|
+
cssPrefix: pf-c-truncate
|
|
6
|
+
---## Examples
|
|
7
|
+
|
|
8
|
+
### Notes
|
|
9
|
+
|
|
10
|
+
The truncate component contains two child elements, `.pf-c-truncate__start` and `.pf-c-truncate__end`. If both `start` and `end` are present within `.pf-c-truncate`, trucation will occur in the middle of the string. If only `.pf-c-truncate__start` is present, truncation will occur at the end of the string. If only `.pf-c-truncate__end` is present, truncation will occur at the beginning of the string. A `.pf-c-popover` will be automatically applied to the PatternFly React implementation. `‎` must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a `pf-c-truncate__end` element.
|
|
11
|
+
|
|
12
|
+
### Default
|
|
13
|
+
|
|
14
|
+
```html
|
|
15
|
+
<div style="width: 220px; resize: horizontal; overflow: auto;">
|
|
16
|
+
<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>
|
|
22
|
+
</span>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Middle
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<div style="width: 226px; resize: horizontal; overflow: auto;">
|
|
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>
|
|
41
|
+
</span>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Start
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<div style="width: 220px; resize: horizontal; overflow: auto;">
|
|
50
|
+
<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.‎</span>
|
|
56
|
+
</span>
|
|
57
|
+
</span>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Documentation
|
|
63
|
+
|
|
64
|
+
### Usage
|
|
65
|
+
|
|
66
|
+
| Class | Applied | Outcome |
|
|
67
|
+
| ----------------------- | -------- | --------------------------------------------- |
|
|
68
|
+
| `.pf-c-truncate` | `<span>` | Initiates the truncate component. |
|
|
69
|
+
| `.pf-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
|
|
70
|
+
| `.pf-c-truncate__end` | `<span>` | Defines the truncate component ending text. |
|
|
71
|
+
| `.pf-c-truncate__text` | `<span>` | Defines the truncate component text. |
|
|
@@ -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>
|
|
@@ -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>
|