@patternfly/patternfly 4.166.4 → 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.
- package/components/Truncate/truncate.css +14 -26
- package/components/Truncate/truncate.scss +13 -32
- package/docs/components/Truncate/examples/Truncate.css +9 -0
- package/docs/components/Truncate/examples/Truncate.md +16 -25
- package/package.json +1 -1
- package/patternfly-no-reset.css +14 -26
- package/patternfly.css +14 -26
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1,45 +1,33 @@
|
|
|
1
1
|
.pf-c-truncate {
|
|
2
|
-
--pf-c-truncate--
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
}
|
|
@@ -1,55 +1,36 @@
|
|
|
1
1
|
.pf-c-truncate {
|
|
2
|
-
--pf-c-truncate--
|
|
2
|
+
--pf-c-truncate--MinWidth: 12ch;
|
|
3
|
+
--pf-c-truncate__start--MinWidth: 6ch;
|
|
3
4
|
|
|
4
|
-
display: inline-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
}
|
|
@@ -3,7 +3,9 @@ id: 'Truncate'
|
|
|
3
3
|
beta: true
|
|
4
4
|
section: components
|
|
5
5
|
cssPrefix: pf-c-truncate
|
|
6
|
-
|
|
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
|
|
17
|
+
<div class="pf-c-truncate--example">
|
|
16
18
|
<span class="pf-c-truncate">
|
|
17
|
-
<span
|
|
18
|
-
|
|
19
|
-
|
|
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
|
|
30
|
+
<div class="pf-c-truncate--example">
|
|
31
31
|
<span class="pf-c-truncate">
|
|
32
|
-
<span
|
|
33
|
-
|
|
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
|
|
44
|
+
<div class="pf-c-truncate--example">
|
|
50
45
|
<span class="pf-c-truncate">
|
|
51
|
-
<span
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
style="--pf-c-truncate--FontSize: 1rem"
|
|
55
|
-
>Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎</span>
|
|
56
|
-
</span>
|
|
46
|
+
<span
|
|
47
|
+
class="pf-c-truncate__end"
|
|
48
|
+
>Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎</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/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -27135,47 +27135,35 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27135
27135
|
}
|
|
27136
27136
|
|
|
27137
27137
|
.pf-c-truncate {
|
|
27138
|
-
--pf-c-truncate--
|
|
27139
|
-
|
|
27140
|
-
|
|
27141
|
-
|
|
27138
|
+
--pf-c-truncate--MinWidth: 12ch;
|
|
27139
|
+
--pf-c-truncate__start--MinWidth: 6ch;
|
|
27140
|
+
display: inline-grid;
|
|
27141
|
+
grid-auto-flow: column;
|
|
27142
|
+
align-items: baseline;
|
|
27143
|
+
min-width: var(--pf-c-truncate--MinWidth);
|
|
27142
27144
|
}
|
|
27143
27145
|
|
|
27144
27146
|
.pf-c-truncate__start,
|
|
27145
27147
|
.pf-c-truncate__end {
|
|
27146
|
-
flex-shrink: 1;
|
|
27147
27148
|
overflow: hidden;
|
|
27148
27149
|
text-overflow: ellipsis;
|
|
27149
27150
|
white-space: nowrap;
|
|
27150
27151
|
}
|
|
27151
27152
|
|
|
27153
|
+
.pf-c-truncate__start {
|
|
27154
|
+
min-width: var(--pf-c-truncate__start--MinWidth);
|
|
27155
|
+
}
|
|
27156
|
+
|
|
27152
27157
|
.pf-c-truncate__end {
|
|
27153
27158
|
direction: rtl;
|
|
27154
|
-
text-align: left;
|
|
27155
27159
|
}
|
|
27156
27160
|
|
|
27157
|
-
|
|
27158
|
-
|
|
27159
|
-
|
|
27160
|
-
}
|
|
27161
|
-
}
|
|
27162
|
-
@supports not (text-overflow: "") {
|
|
27163
|
-
.pf-c-truncate__start + .pf-c-truncate__end {
|
|
27164
|
-
font-size: 0;
|
|
27165
|
-
}
|
|
27166
|
-
.pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
|
|
27167
|
-
font-size: var(--pf-c-truncate--FontSize);
|
|
27168
|
-
}
|
|
27161
|
+
.pf-c-truncate__start + .pf-c-truncate__end {
|
|
27162
|
+
overflow: visible;
|
|
27163
|
+
direction: ltr;
|
|
27169
27164
|
}
|
|
27170
|
-
@supports (-webkit-hyphens: none) {
|
|
27171
|
-
.pf-c-truncate {
|
|
27172
|
-
display: inline-block;
|
|
27173
|
-
max-width: 100%;
|
|
27174
|
-
overflow: hidden;
|
|
27175
|
-
text-overflow: ellipsis;
|
|
27176
|
-
white-space: nowrap;
|
|
27177
|
-
}
|
|
27178
27165
|
|
|
27166
|
+
@supports (-webkit-hyphens: none) {
|
|
27179
27167
|
.pf-c-truncate__end {
|
|
27180
27168
|
direction: ltr;
|
|
27181
27169
|
}
|
package/patternfly.css
CHANGED
|
@@ -27257,47 +27257,35 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
27257
27257
|
}
|
|
27258
27258
|
|
|
27259
27259
|
.pf-c-truncate {
|
|
27260
|
-
--pf-c-truncate--
|
|
27261
|
-
|
|
27262
|
-
|
|
27263
|
-
|
|
27260
|
+
--pf-c-truncate--MinWidth: 12ch;
|
|
27261
|
+
--pf-c-truncate__start--MinWidth: 6ch;
|
|
27262
|
+
display: inline-grid;
|
|
27263
|
+
grid-auto-flow: column;
|
|
27264
|
+
align-items: baseline;
|
|
27265
|
+
min-width: var(--pf-c-truncate--MinWidth);
|
|
27264
27266
|
}
|
|
27265
27267
|
|
|
27266
27268
|
.pf-c-truncate__start,
|
|
27267
27269
|
.pf-c-truncate__end {
|
|
27268
|
-
flex-shrink: 1;
|
|
27269
27270
|
overflow: hidden;
|
|
27270
27271
|
text-overflow: ellipsis;
|
|
27271
27272
|
white-space: nowrap;
|
|
27272
27273
|
}
|
|
27273
27274
|
|
|
27275
|
+
.pf-c-truncate__start {
|
|
27276
|
+
min-width: var(--pf-c-truncate__start--MinWidth);
|
|
27277
|
+
}
|
|
27278
|
+
|
|
27274
27279
|
.pf-c-truncate__end {
|
|
27275
27280
|
direction: rtl;
|
|
27276
|
-
text-align: left;
|
|
27277
27281
|
}
|
|
27278
27282
|
|
|
27279
|
-
|
|
27280
|
-
|
|
27281
|
-
|
|
27282
|
-
}
|
|
27283
|
-
}
|
|
27284
|
-
@supports not (text-overflow: "") {
|
|
27285
|
-
.pf-c-truncate__start + .pf-c-truncate__end {
|
|
27286
|
-
font-size: 0;
|
|
27287
|
-
}
|
|
27288
|
-
.pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
|
|
27289
|
-
font-size: var(--pf-c-truncate--FontSize);
|
|
27290
|
-
}
|
|
27283
|
+
.pf-c-truncate__start + .pf-c-truncate__end {
|
|
27284
|
+
overflow: visible;
|
|
27285
|
+
direction: ltr;
|
|
27291
27286
|
}
|
|
27292
|
-
@supports (-webkit-hyphens: none) {
|
|
27293
|
-
.pf-c-truncate {
|
|
27294
|
-
display: inline-block;
|
|
27295
|
-
max-width: 100%;
|
|
27296
|
-
overflow: hidden;
|
|
27297
|
-
text-overflow: ellipsis;
|
|
27298
|
-
white-space: nowrap;
|
|
27299
|
-
}
|
|
27300
27287
|
|
|
27288
|
+
@supports (-webkit-hyphens: none) {
|
|
27301
27289
|
.pf-c-truncate__end {
|
|
27302
27290
|
direction: ltr;
|
|
27303
27291
|
}
|