@patternfly/patternfly 4.162.0 → 4.164.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.
- package/components/DataList/data-list.scss +1 -1
- package/components/Dropdown/dropdown.css +19 -11
- package/components/Dropdown/dropdown.scss +35 -21
- package/components/Form/form.css +121 -1
- package/components/Form/form.scss +26 -1
- package/components/MultipleFileUpload/multiple-file-upload.css +180 -0
- package/components/MultipleFileUpload/multiple-file-upload.scss +214 -0
- package/components/Table/table.css +14 -3
- package/components/Table/table.scss +16 -3
- package/components/Truncate/truncate.css +46 -0
- package/components/Truncate/truncate.scss +56 -0
- package/components/_all.scss +90 -88
- package/docs/components/Dropdown/examples/Dropdown.css +2 -1
- package/docs/components/Dropdown/examples/Dropdown.md +229 -0
- package/docs/components/Form/examples/Form.md +69 -41
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +685 -0
- package/docs/components/Table/examples/Table.md +1029 -883
- package/docs/components/Truncate/examples/Truncate.md +71 -0
- package/docs/demos/Table/examples/Table.md +100 -100
- package/package.json +7 -7
- package/patternfly-addons.scss +10 -10
- package/patternfly-base-no-reset.scss +1 -1
- package/patternfly-no-reset.css +381 -15
- package/patternfly-no-reset.scss +1 -1
- package/patternfly.css +381 -15
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +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. |
|