@patternfly/patternfly 6.3.0-prerelease.64 → 6.3.0-prerelease.65
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/docs/components/ClipboardCopy/examples/ClipboardCopy.md +1 -1
- package/docs/components/DataList/examples/DataList.md +6 -0
- package/docs/components/Icon/examples/Icon.md +0 -10
- package/docs/components/Progress/examples/Progress.md +2 -1
- package/docs/components/Truncate/examples/Truncate.md +8 -6
- package/package.json +2 -2
|
@@ -500,7 +500,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
500
500
|
```html
|
|
501
501
|
<div class="pf-v6-c-clipboard-copy pf-m-inline pf-m-truncate">
|
|
502
502
|
<span class="pf-v6-c-clipboard-copy__text">
|
|
503
|
-
<span class="pf-v6-c-truncate">
|
|
503
|
+
<span class="pf-v6-c-truncate" tabindex="0">
|
|
504
504
|
<span
|
|
505
505
|
class="pf-v6-c-truncate__start"
|
|
506
506
|
>This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to true. This is useful for quickly applying truncation without needing to worry about any other properties to set.</span>
|
|
@@ -1885,6 +1885,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1885
1885
|
</div>
|
|
1886
1886
|
<div
|
|
1887
1887
|
class="pf-v6-c-data-list__cell pf-m-truncate"
|
|
1888
|
+
tabindex="0"
|
|
1888
1889
|
>This text will truncate because it is very very long.</div>
|
|
1889
1890
|
<div
|
|
1890
1891
|
class="pf-v6-c-data-list__cell pf-m-break-word"
|
|
@@ -1898,15 +1899,19 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1898
1899
|
<div class="pf-v6-c-data-list__item-content">
|
|
1899
1900
|
<div
|
|
1900
1901
|
class="pf-v6-c-data-list__cell"
|
|
1902
|
+
tabindex="0"
|
|
1901
1903
|
>This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
|
|
1902
1904
|
<div
|
|
1903
1905
|
class="pf-v6-c-data-list__cell"
|
|
1906
|
+
tabindex="0"
|
|
1904
1907
|
>This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
|
|
1905
1908
|
<div
|
|
1906
1909
|
class="pf-v6-c-data-list__cell"
|
|
1910
|
+
tabindex="0"
|
|
1907
1911
|
>This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
|
|
1908
1912
|
<div
|
|
1909
1913
|
class="pf-v6-c-data-list__cell"
|
|
1914
|
+
tabindex="0"
|
|
1910
1915
|
>This text will truncate because it is very very long. This text will truncate because it is very very long.</div>
|
|
1911
1916
|
</div>
|
|
1912
1917
|
</div>
|
|
@@ -1957,6 +1962,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1957
1962
|
>This text will wrap to the next line because it has the default behavior of the data list cell.</span>
|
|
1958
1963
|
<span
|
|
1959
1964
|
class="pf-v6-c-data-list__text pf-m-truncate"
|
|
1965
|
+
tabindex="0"
|
|
1960
1966
|
>This is data list text, you can apply `pf-m-truncate` directly to the text. This is data list text, you can apply `pf-m-truncate` directly to the text.</span>
|
|
1961
1967
|
</div>
|
|
1962
1968
|
<div class="pf-v6-c-data-list__cell">
|
|
@@ -285,16 +285,6 @@ extra large
|
|
|
285
285
|
<span class="pf-v6-c-icon__content">
|
|
286
286
|
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
287
287
|
</span>
|
|
288
|
-
<span class="pf-v6-c-icon__progress">
|
|
289
|
-
<svg
|
|
290
|
-
class="pf-v6-c-spinner pf-m-md"
|
|
291
|
-
role="progressbar"
|
|
292
|
-
viewBox="0 0 100 100"
|
|
293
|
-
aria-label="Loading..."
|
|
294
|
-
>
|
|
295
|
-
<circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
296
|
-
</svg>
|
|
297
|
-
</span>
|
|
298
288
|
</span>
|
|
299
289
|
|
|
300
290
|
```
|
|
@@ -336,6 +336,7 @@ cssPrefix: pf-v6-c-progress
|
|
|
336
336
|
<div
|
|
337
337
|
class="pf-v6-c-progress__description pf-m-truncate"
|
|
338
338
|
id="progress-truncate-description-example-description"
|
|
339
|
+
tabindex="0"
|
|
339
340
|
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis ultricies lectus, eu lobortis mauris. Morbi pretium arcu id rhoncus mollis. Donec accumsan tincidunt enim nec varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse potenti.</div>
|
|
340
341
|
<div class="pf-v6-c-progress__status" aria-hidden="true">
|
|
341
342
|
<span class="pf-v6-c-progress__measure">33%</span>
|
|
@@ -425,7 +426,7 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
|
|
|
425
426
|
When conveying status, you should ensure:
|
|
426
427
|
|
|
427
428
|
* There is visible helper text that explains the status.
|
|
428
|
-
* The helper text includes the status icon, as seen in our [
|
|
429
|
+
* The helper text includes the status icon, as seen in our HTML [helper text component](/components/helper-text).
|
|
429
430
|
* The helper text is linked to the `.pf-v6-c-progress__bar[role="progressbar"]` element via an `aria-describedby` attribute, as seen in the [progress helper text example](#helper-text).
|
|
430
431
|
|
|
431
432
|
### Success
|
|
@@ -8,13 +8,15 @@ cssPrefix: pf-v6-c-truncate
|
|
|
8
8
|
|
|
9
9
|
The default behavior of the truncate component is to truncate based on whether the content can fit within the width of its parent container, and to prevent text from wrapping. The following examples that use this default behavior render the truncate component inside a resizable container, allowing you to see how the parent container width affects the truncation.
|
|
10
10
|
|
|
11
|
+
Note that when content is truncated, a tabindex of 0 should also be added to the element to ensure it remains accessible. The examples below however, add a tabindex in both cases as the content is static.
|
|
12
|
+
|
|
11
13
|
### Default
|
|
12
14
|
|
|
13
15
|
When only the `.pf-v6-c-truncate__start` element is used, truncation will occur at the end of the string.
|
|
14
16
|
|
|
15
17
|
```html
|
|
16
18
|
<div class="pf-v6-c-truncate--example">
|
|
17
|
-
<span class="pf-v6-c-truncate">
|
|
19
|
+
<span class="pf-v6-c-truncate" tabindex="0">
|
|
18
20
|
<span
|
|
19
21
|
class="pf-v6-c-truncate__start"
|
|
20
22
|
>redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip</span>
|
|
@@ -29,7 +31,7 @@ When both `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end` elements are u
|
|
|
29
31
|
|
|
30
32
|
```html
|
|
31
33
|
<div class="pf-v6-c-truncate--example">
|
|
32
|
-
<span class="pf-v6-c-truncate">
|
|
34
|
+
<span class="pf-v6-c-truncate" tabindex="0">
|
|
33
35
|
<span
|
|
34
36
|
class="pf-v6-c-truncate__start"
|
|
35
37
|
>redhat_logo_black_and_white_reversed_simple_</span>
|
|
@@ -45,7 +47,7 @@ When only the `.pf-v6-c-truncate__end` element is used, truncation will occur at
|
|
|
45
47
|
|
|
46
48
|
```html
|
|
47
49
|
<div class="pf-v6-c-truncate--example">
|
|
48
|
-
<span class="pf-v6-c-truncate">
|
|
50
|
+
<span class="pf-v6-c-truncate" tabindex="0">
|
|
49
51
|
<span
|
|
50
52
|
class="pf-v6-c-truncate__end"
|
|
51
53
|
>redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip</span>
|
|
@@ -60,7 +62,7 @@ Apply the `.pf-m-fixed` class to the `.pf-v6-c-truncate` element to implement tr
|
|
|
60
62
|
|
|
61
63
|
```html
|
|
62
64
|
<div>Truncated at end position:</div>
|
|
63
|
-
<span class="pf-v6-c-truncate pf-m-fixed">
|
|
65
|
+
<span class="pf-v6-c-truncate pf-m-fixed" tabindex="0">
|
|
64
66
|
<span
|
|
65
67
|
class="pf-v6-c-truncate__text"
|
|
66
68
|
>redhat_logo_black_and_white_reversed_simple_with_</span>
|
|
@@ -70,7 +72,7 @@ Apply the `.pf-m-fixed` class to the `.pf-v6-c-truncate` element to implement tr
|
|
|
70
72
|
<br />
|
|
71
73
|
<br />
|
|
72
74
|
<div>Truncated at middle position:</div>
|
|
73
|
-
<span class="pf-v6-c-truncate pf-m-fixed">
|
|
75
|
+
<span class="pf-v6-c-truncate pf-m-fixed" tabindex="0">
|
|
74
76
|
<span class="pf-v6-c-truncate__text">redhat_logo_black_and_</span>
|
|
75
77
|
<span class="pf-v6-screen-reader">white_reversed_simple_with_</span>
|
|
76
78
|
|
|
@@ -80,7 +82,7 @@ Apply the `.pf-m-fixed` class to the `.pf-v6-c-truncate` element to implement tr
|
|
|
80
82
|
<br />
|
|
81
83
|
<br />
|
|
82
84
|
<div>Truncated at start position:</div>
|
|
83
|
-
<span class="pf-v6-c-truncate pf-m-fixed">
|
|
85
|
+
<span class="pf-v6-c-truncate pf-m-fixed" tabindex="0">
|
|
84
86
|
<span class="pf-v6-screen-reader">redhat_logo_black_</span>
|
|
85
87
|
|
|
86
88
|
<span class="pf-v6-c-truncate__omission" aria-hidden="true">…</span>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "6.3.0-prerelease.
|
|
4
|
+
"version": "6.3.0-prerelease.65",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"engines": {
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@commitlint/config-conventional": "^19.1.0",
|
|
52
52
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
53
53
|
"@octokit/rest": "^20.1.0",
|
|
54
|
-
"@patternfly/documentation-framework": "6.22.
|
|
54
|
+
"@patternfly/documentation-framework": "6.22.5",
|
|
55
55
|
"@patternfly/patternfly-a11y": "5.1.0",
|
|
56
56
|
"@patternfly/react-code-editor": "6.3.1",
|
|
57
57
|
"@patternfly/react-core": "6.3.1",
|