@patternfly/patternfly 6.3.0-prerelease.63 → 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/components/Alert/alert-group.css +4 -15
- package/components/Alert/alert-group.scss +6 -18
- package/components/_index.css +4 -15
- package/docs/components/Alert/examples/Alert.md +1 -2
- 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
- package/patternfly-no-globals.css +4 -15
- package/patternfly.css +4 -15
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
|
|
65
65
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
|
|
66
66
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
|
|
67
|
-
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--
|
|
67
|
+
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
68
68
|
--pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
69
69
|
--pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
70
70
|
--pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
|
|
75
75
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
|
|
76
76
|
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
77
|
-
--pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--
|
|
77
|
+
--pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
|
|
78
78
|
--pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
79
79
|
--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
|
|
80
80
|
--pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
|
|
@@ -119,6 +119,8 @@
|
|
|
119
119
|
}
|
|
120
120
|
.pf-v6-c-alert-group__overflow-button:hover, .pf-v6-c-alert-group__overflow-button:focus {
|
|
121
121
|
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-v6-c-alert-group__overflow-button--hover--BorderWidth);
|
|
122
|
+
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
123
|
+
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
122
124
|
}
|
|
123
125
|
|
|
124
126
|
.pf-v6-c-alert-group__item {
|
|
@@ -174,17 +176,4 @@
|
|
|
174
176
|
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
|
|
175
177
|
transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
|
|
176
178
|
}
|
|
177
|
-
}
|
|
178
|
-
.pf-v6-c-alert-group__item:hover {
|
|
179
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
180
|
-
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
181
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
|
|
182
|
-
}
|
|
183
|
-
.pf-v6-c-alert-group__item:focus {
|
|
184
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
|
|
185
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
|
|
186
|
-
}
|
|
187
|
-
.pf-v6-c-alert-group__item:active {
|
|
188
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
|
|
189
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
|
|
190
179
|
}
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: initial;
|
|
91
91
|
|
|
92
92
|
// Overflow button
|
|
93
|
-
--#{$alert-group}__overflow-button--BorderWidth: var(--pf-t--global--border--width--
|
|
93
|
+
--#{$alert-group}__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
94
94
|
--#{$alert-group}__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
95
95
|
--#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
96
96
|
--#{$alert-group}__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
@@ -100,9 +100,11 @@
|
|
|
100
100
|
--#{$alert-group}__overflow-button--Color: var(--pf-t--global--text--color--link--default);
|
|
101
101
|
--#{$alert-group}__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
|
|
102
102
|
--#{$alert-group}__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
103
|
-
--#{$alert-group}__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--
|
|
103
|
+
--#{$alert-group}__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
|
|
104
104
|
--#{$alert-group}__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
105
105
|
--#{$alert-group}__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
|
|
106
|
+
|
|
107
|
+
// TODO - remove this block in breaking change, not used
|
|
106
108
|
--#{$alert-group}__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
|
|
107
109
|
--#{$alert-group}__overflow-button--focus--Color: var(--pf-t--global--text--color--link--hover);
|
|
108
110
|
--#{$alert-group}__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
|
|
@@ -152,6 +154,8 @@
|
|
|
152
154
|
&:hover,
|
|
153
155
|
&:focus {
|
|
154
156
|
--#{$alert-group}__overflow-button--BorderWidth: var(--#{$alert-group}__overflow-button--hover--BorderWidth);
|
|
157
|
+
--#{$alert-group}__overflow-button--BackgroundColor: var(--#{$alert-group}__overflow-button--hover--BackgroundColor);
|
|
158
|
+
--#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--hover--Color);
|
|
155
159
|
}
|
|
156
160
|
}
|
|
157
161
|
|
|
@@ -278,20 +282,4 @@
|
|
|
278
282
|
}
|
|
279
283
|
}
|
|
280
284
|
}
|
|
281
|
-
|
|
282
|
-
&:hover {
|
|
283
|
-
--#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--hover--Color);
|
|
284
|
-
--#{$alert-group}__overflow-button--BackgroundColor: var(--#{$alert-group}__overflow-button--hover--BackgroundColor);
|
|
285
|
-
--#{$alert-group}__overflow-button--BoxShadow: var(--#{$alert-group}__overflow-button--hover--BoxShadow);
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
&:focus {
|
|
289
|
-
--#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--focus--Color);
|
|
290
|
-
--#{$alert-group}__overflow-button--BoxShadow: var(--#{$alert-group}__overflow-button--focus--BoxShadow);
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
&:active {
|
|
294
|
-
--#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--active--Color);
|
|
295
|
-
--#{$alert-group}__overflow-button--BoxShadow: var(--#{$alert-group}__overflow-button--active--BoxShadow);
|
|
296
|
-
}
|
|
297
285
|
}
|
package/components/_index.css
CHANGED
|
@@ -732,7 +732,7 @@
|
|
|
732
732
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
|
|
733
733
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
|
|
734
734
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
|
|
735
|
-
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--
|
|
735
|
+
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
736
736
|
--pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
737
737
|
--pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
738
738
|
--pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
@@ -742,7 +742,7 @@
|
|
|
742
742
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
|
|
743
743
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
|
|
744
744
|
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
745
|
-
--pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--
|
|
745
|
+
--pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
|
|
746
746
|
--pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
747
747
|
--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
|
|
748
748
|
--pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
|
|
@@ -787,6 +787,8 @@
|
|
|
787
787
|
}
|
|
788
788
|
.pf-v6-c-alert-group__overflow-button:hover, .pf-v6-c-alert-group__overflow-button:focus {
|
|
789
789
|
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-v6-c-alert-group__overflow-button--hover--BorderWidth);
|
|
790
|
+
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
791
|
+
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
790
792
|
}
|
|
791
793
|
|
|
792
794
|
.pf-v6-c-alert-group__item {
|
|
@@ -843,19 +845,6 @@
|
|
|
843
845
|
transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
|
|
844
846
|
}
|
|
845
847
|
}
|
|
846
|
-
.pf-v6-c-alert-group__item:hover {
|
|
847
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
848
|
-
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
849
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
|
|
850
|
-
}
|
|
851
|
-
.pf-v6-c-alert-group__item:focus {
|
|
852
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
|
|
853
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
|
|
854
|
-
}
|
|
855
|
-
.pf-v6-c-alert-group__item:active {
|
|
856
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
|
|
857
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
|
|
858
|
-
}
|
|
859
848
|
|
|
860
849
|
.pf-v6-c-avatar {
|
|
861
850
|
--pf-v6-c-avatar--BorderColor: transparent;
|
|
@@ -798,8 +798,7 @@ For sighted users, interactive elements can be included in this message in one o
|
|
|
798
798
|
</div>
|
|
799
799
|
</div>
|
|
800
800
|
</li>
|
|
801
|
-
|
|
802
|
-
<li class="pf-v6-c-alert-group__item">
|
|
801
|
+
<li>
|
|
803
802
|
<button
|
|
804
803
|
class="pf-v6-c-alert-group__overflow-button"
|
|
805
804
|
>View 3 more notifications</button>
|
|
@@ -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",
|
|
@@ -9399,7 +9399,7 @@
|
|
|
9399
9399
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
|
|
9400
9400
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
|
|
9401
9401
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
|
|
9402
|
-
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--
|
|
9402
|
+
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
9403
9403
|
--pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
9404
9404
|
--pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
9405
9405
|
--pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
@@ -9409,7 +9409,7 @@
|
|
|
9409
9409
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
|
|
9410
9410
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
|
|
9411
9411
|
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
9412
|
-
--pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--
|
|
9412
|
+
--pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
|
|
9413
9413
|
--pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
9414
9414
|
--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
|
|
9415
9415
|
--pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
|
|
@@ -9454,6 +9454,8 @@
|
|
|
9454
9454
|
}
|
|
9455
9455
|
.pf-v6-c-alert-group__overflow-button:hover, .pf-v6-c-alert-group__overflow-button:focus {
|
|
9456
9456
|
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-v6-c-alert-group__overflow-button--hover--BorderWidth);
|
|
9457
|
+
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
9458
|
+
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
9457
9459
|
}
|
|
9458
9460
|
|
|
9459
9461
|
.pf-v6-c-alert-group__item {
|
|
@@ -9510,19 +9512,6 @@
|
|
|
9510
9512
|
transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
|
|
9511
9513
|
}
|
|
9512
9514
|
}
|
|
9513
|
-
.pf-v6-c-alert-group__item:hover {
|
|
9514
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
9515
|
-
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
9516
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
|
|
9517
|
-
}
|
|
9518
|
-
.pf-v6-c-alert-group__item:focus {
|
|
9519
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
|
|
9520
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
|
|
9521
|
-
}
|
|
9522
|
-
.pf-v6-c-alert-group__item:active {
|
|
9523
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
|
|
9524
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
|
|
9525
|
-
}
|
|
9526
9515
|
|
|
9527
9516
|
.pf-v6-c-avatar {
|
|
9528
9517
|
--pf-v6-c-avatar--BorderColor: transparent;
|
package/patternfly.css
CHANGED
|
@@ -9539,7 +9539,7 @@ button) {
|
|
|
9539
9539
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
|
|
9540
9540
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
|
|
9541
9541
|
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
|
|
9542
|
-
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--
|
|
9542
|
+
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
9543
9543
|
--pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
9544
9544
|
--pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
9545
9545
|
--pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
@@ -9549,7 +9549,7 @@ button) {
|
|
|
9549
9549
|
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
|
|
9550
9550
|
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
|
|
9551
9551
|
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
9552
|
-
--pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--
|
|
9552
|
+
--pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
|
|
9553
9553
|
--pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
|
|
9554
9554
|
--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
|
|
9555
9555
|
--pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
|
|
@@ -9594,6 +9594,8 @@ button) {
|
|
|
9594
9594
|
}
|
|
9595
9595
|
.pf-v6-c-alert-group__overflow-button:hover, .pf-v6-c-alert-group__overflow-button:focus {
|
|
9596
9596
|
--pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-v6-c-alert-group__overflow-button--hover--BorderWidth);
|
|
9597
|
+
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
9598
|
+
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
9597
9599
|
}
|
|
9598
9600
|
|
|
9599
9601
|
.pf-v6-c-alert-group__item {
|
|
@@ -9650,19 +9652,6 @@ button) {
|
|
|
9650
9652
|
transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
|
|
9651
9653
|
}
|
|
9652
9654
|
}
|
|
9653
|
-
.pf-v6-c-alert-group__item:hover {
|
|
9654
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
|
|
9655
|
-
--pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
|
|
9656
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
|
|
9657
|
-
}
|
|
9658
|
-
.pf-v6-c-alert-group__item:focus {
|
|
9659
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
|
|
9660
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
|
|
9661
|
-
}
|
|
9662
|
-
.pf-v6-c-alert-group__item:active {
|
|
9663
|
-
--pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
|
|
9664
|
-
--pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
|
|
9665
|
-
}
|
|
9666
9655
|
|
|
9667
9656
|
.pf-v6-c-avatar {
|
|
9668
9657
|
--pf-v6-c-avatar--BorderColor: transparent;
|