@patternfly/patternfly 6.6.0-prerelease.14 → 6.6.0-prerelease.15

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.
Files changed (19) hide show
  1. package/components/Banner/banner.css +3 -0
  2. package/components/Banner/banner.scss +4 -1
  3. package/components/Button/button.css +15 -1
  4. package/components/Button/button.scss +17 -1
  5. package/components/_index.css +18 -1
  6. package/docs/components/DualListSelector/examples/DualListSelector.md +72 -72
  7. package/docs/components/Pagination/examples/Pagination.md +120 -120
  8. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  9. package/docs/demos/CardView/examples/CardView.md +12 -12
  10. package/docs/demos/Compass/examples/Compass.md +16 -16
  11. package/docs/demos/DataList/examples/DataList.md +48 -48
  12. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  13. package/docs/demos/Table/examples/Table.md +160 -160
  14. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +18 -1
  17. package/patternfly.css +18 -1
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/components/Banner/banner.css CHANGED
@@ -21,6 +21,7 @@
21
21
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
22
22
  --pf-v6-c-banner--link--TextDecoration: underline;
23
23
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
24
+ --pf-v6-c-banner--link--clicked--Color: var(--pf-v6-c-banner--Color);
24
25
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
25
26
  --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
26
27
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -143,9 +144,11 @@
143
144
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
144
145
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
145
146
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
147
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-v6-c-banner--link--clicked--Color);
146
148
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
147
149
  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
148
150
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
151
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
149
152
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
150
153
  }
151
154
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
package/components/Banner/banner.scss CHANGED
@@ -22,6 +22,7 @@
22
22
  --#{$banner}--link--Color: var(--#{$banner}--Color);
23
23
  --#{$banner}--link--TextDecoration: underline;
24
24
  --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
25
+ --#{$banner}--link--clicked--Color: var(--#{$banner}--Color);
25
26
  --#{$banner}--link--disabled--Color: var(--pf-t--global--text--color--disabled);
26
27
  --#{$banner}--link--TextDecorationColor: currentcolor;
27
28
 
@@ -173,10 +174,12 @@
173
174
  .#{$button}.pf-m-inline {
174
175
  --#{$button}--m-link--m-inline--Color: var(--#{$banner}--link--Color);
175
176
  --#{$button}--m-link--m-inline--hover--Color: var(--#{$banner}--link--hover--Color);
177
+ --#{$button}--m-link--m-inline--m-clicked--Color: var(--#{$banner}--link--clicked--Color);
176
178
  --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
177
179
  --#{$button}--m-link--m-inline--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
178
180
  --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
179
-
181
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
182
+
180
183
  text-decoration-line: var(--#{$banner}--link--TextDecoration);
181
184
 
182
185
  &:disabled,
package/components/Button/button.css CHANGED
@@ -126,6 +126,10 @@
126
126
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
127
127
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
128
128
  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
129
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
130
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
131
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
132
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
129
133
  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
130
134
  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
131
135
  --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
@@ -140,6 +144,8 @@
140
144
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
141
145
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
142
146
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
147
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
148
+ --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
143
149
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
144
150
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
145
151
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -512,9 +518,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
512
518
  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
513
519
  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
514
520
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
515
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
521
+ --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine);
522
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle);
523
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor);
524
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
516
525
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
517
526
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
527
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color);
528
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color);
518
529
  --pf-v6-c-button--BorderWidth: 0;
519
530
  --pf-v6-c-button--hover--BorderWidth: 0;
520
531
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
@@ -527,6 +538,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
527
538
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
528
539
  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
529
540
  }
541
+ .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked {
542
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
543
+ }
530
544
  .pf-v6-c-button.pf-m-link.pf-m-danger {
531
545
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
532
546
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
package/components/Button/button.scss CHANGED
@@ -144,6 +144,10 @@
144
144
  --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
145
145
  --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
146
146
  --#{$button}--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
147
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
148
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
149
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
150
+ --#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
147
151
  --#{$button}--m-link--m-inline--TransitionProperty: color, text-underline-offset;
148
152
  --#{$button}--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
149
153
  --#{$button}--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
@@ -158,6 +162,8 @@
158
162
  --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
159
163
  --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
160
164
  --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
165
+ --#{$button}--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
166
+ --#{$button}--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
161
167
 
162
168
  // Plain
163
169
  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
@@ -588,9 +594,14 @@
588
594
  --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
589
595
  --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
590
596
  --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
591
- --#{$button}--hover--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
597
+ --#{$button}--m-clicked--TextDecorationLine: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationLine);
598
+ --#{$button}--m-clicked--TextDecorationStyle: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationStyle);
599
+ --#{$button}--m-clicked--TextDecorationColor: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationColor);
600
+ --#{$button}--m-clicked--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset);
592
601
  --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
593
602
  --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
603
+ --#{$button}--m-link--m-clicked--Color: var(--#{$button}--m-link--m-inline--m-clicked--Color);
604
+ --#{$button}--m-link--m-clicked__icon--Color: var(--#{$button}--m-link--m-inline--m-clicked__icon--Color);
594
605
  --#{$button}--BorderWidth: 0;
595
606
  --#{$button}--hover--BorderWidth: 0;
596
607
  --#{$button}--m-clicked--BorderWidth: 0;
@@ -605,6 +616,11 @@
605
616
  &:focus {
606
617
  --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--hover--TextUnderlineOffset);
607
618
  }
619
+
620
+ &:active,
621
+ &.pf-m-clicked {
622
+ --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset);
623
+ }
608
624
  }
609
625
 
610
626
  &.pf-m-danger {
package/components/_index.css CHANGED
@@ -1457,6 +1457,7 @@ div.pf-v6-c-avatar {
1457
1457
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1458
1458
  --pf-v6-c-banner--link--TextDecoration: underline;
1459
1459
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
1460
+ --pf-v6-c-banner--link--clicked--Color: var(--pf-v6-c-banner--Color);
1460
1461
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
1461
1462
  --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
1462
1463
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -1579,9 +1580,11 @@ div.pf-v6-c-avatar {
1579
1580
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
1580
1581
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
1581
1582
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1583
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-v6-c-banner--link--clicked--Color);
1582
1584
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
1583
1585
  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1584
1586
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1587
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1585
1588
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1586
1589
  }
1587
1590
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
@@ -1898,6 +1901,10 @@ button.pf-v6-c-breadcrumb__link {
1898
1901
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1899
1902
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1900
1903
  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1904
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1905
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1906
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1907
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1901
1908
  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1902
1909
  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1903
1910
  --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
@@ -1912,6 +1919,8 @@ button.pf-v6-c-breadcrumb__link {
1912
1919
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1913
1920
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1914
1921
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1922
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1923
+ --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1915
1924
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1916
1925
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1917
1926
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -2284,9 +2293,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2284
2293
  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2285
2294
  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2286
2295
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2287
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2296
+ --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine);
2297
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle);
2298
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor);
2299
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
2288
2300
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2289
2301
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
2302
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color);
2303
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color);
2290
2304
  --pf-v6-c-button--BorderWidth: 0;
2291
2305
  --pf-v6-c-button--hover--BorderWidth: 0;
2292
2306
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
@@ -2299,6 +2313,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2299
2313
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2300
2314
  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2301
2315
  }
2316
+ .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked {
2317
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
2318
+ }
2302
2319
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2303
2320
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2304
2321
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);