@patternfly/patternfly 6.6.0-prerelease.26 → 6.6.0-prerelease.28

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 (48) hide show
  1. package/components/Button/button.css +2 -3
  2. package/components/Button/button.scss +3 -4
  3. package/components/Label/label.css +9 -3
  4. package/components/Label/label.scss +9 -3
  5. package/components/_index.css +11 -6
  6. package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
  7. package/docs/components/DataList/examples/DataList.md +143 -11
  8. package/docs/components/DatePicker/examples/DatePicker.md +26 -2
  9. package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
  10. package/docs/components/DualListSelector/examples/DualListSelector.md +270 -54
  11. package/docs/components/EmptyState/examples/EmptyState.md +12 -12
  12. package/docs/components/FileUpload/examples/FileUpload.md +26 -2
  13. package/docs/components/Form/examples/Form.md +104 -8
  14. package/docs/components/FormControl/examples/FormControl.md +260 -20
  15. package/docs/components/HelperText/examples/HelperText.md +139 -11
  16. package/docs/components/Icon/examples/Icon.md +403 -31
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
  18. package/docs/components/InputGroup/examples/InputGroup.md +19 -7
  19. package/docs/components/Label/examples/Label.md +4029 -765
  20. package/docs/components/List/examples/List.md +78 -6
  21. package/docs/components/Login/examples/Login.md +104 -8
  22. package/docs/components/Menu/examples/Menu.md +221 -17
  23. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
  24. package/docs/components/NumberInput/examples/NumberInput.md +301 -25
  25. package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
  26. package/docs/components/Switch/examples/Switch.md +52 -4
  27. package/docs/components/Table/examples/Table.md +936 -72
  28. package/docs/components/TextInputGroup/examples/TextInputGroup.md +309 -81
  29. package/docs/components/Toolbar/examples/Toolbar.md +117 -9
  30. package/docs/components/TreeView/examples/TreeView.md +186 -18
  31. package/docs/components/Wizard/examples/Wizard.md +325 -25
  32. package/docs/demos/Alert/examples/Alert.md +149 -26
  33. package/docs/demos/Card/examples/Card.md +280 -34
  34. package/docs/demos/Dashboard/examples/Dashboard.md +72 -18
  35. package/docs/demos/DataList/examples/DataList.md +26 -2
  36. package/docs/demos/Form/examples/BasicForms.md +56 -8
  37. package/docs/demos/HelperText/examples/HelperText.md +104 -8
  38. package/docs/demos/Masthead/examples/Masthead.md +52 -4
  39. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +52 -4
  41. package/docs/demos/Table/examples/Table.md +247 -19
  42. package/docs/demos/Toolbar/examples/Toolbar.md +103 -10
  43. package/docs/demos/Wizard/examples/Wizard.md +117 -9
  44. package/package.json +1 -1
  45. package/patternfly-no-globals.css +11 -6
  46. package/patternfly.css +11 -6
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -251,6 +251,7 @@
251
251
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
252
252
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
253
253
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
254
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
254
255
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
255
256
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
256
257
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -326,7 +327,6 @@
326
327
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
327
328
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
328
329
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
329
- --pf-v6-c-button__progress--Opacity: 0;
330
330
  --pf-v6-c-button__progress--TranslateY: -50%;
331
331
  --pf-v6-c-button__progress--TranslateX: 0;
332
332
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -761,7 +761,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
761
761
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
762
762
  --pf-v6-c-button__icon--TransitionDuration: 0s;
763
763
  --pf-v6-c-button__icon--TransitionProperty: scale;
764
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
765
764
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
766
765
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
767
766
  }
@@ -837,7 +836,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
837
836
  background: var(--pf-v6-c-button--disabled--BackgroundColor);
838
837
  }
839
838
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
840
- border-color: transparent;
839
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
841
840
  }
842
841
  .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
843
842
  color: var(--pf-v6-c-button--disabled__icon--Color);
package/components/Button/button.scss CHANGED
@@ -289,7 +289,8 @@
289
289
  --#{$button}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
290
290
  --#{$button}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
291
291
  --#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
292
- --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
292
+ --#{$button}--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
293
+ --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold); // TODO - remove in a breaking change
293
294
  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
294
295
  --#{$button}--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
295
296
  --#{$button}--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
@@ -380,7 +381,6 @@
380
381
 
381
382
  // Progress
382
383
  --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
383
- --#{$button}__progress--Opacity: 0;
384
384
  --#{$button}__progress--TranslateY: -50%;
385
385
  --#{$button}__progress--TranslateX: 0;
386
386
  --#{$button}__progress--InsetBlockStart: 50%;
@@ -875,7 +875,6 @@
875
875
  --#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
876
876
  --#{$button}__icon--TransitionDuration: 0s;
877
877
  --#{$button}__icon--TransitionProperty: scale;
878
- --#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
879
878
  --#{$button}--hover__icon--TransitionDuration: 0s;
880
879
  --#{$button}--hover__icon--TransitionProperty: scale;
881
880
 
@@ -957,7 +956,7 @@
957
956
  background: var(--#{$button}--disabled--BackgroundColor);
958
957
 
959
958
  &::after {
960
- border-color: transparent;
959
+ border-color: var(--#{$button}--disabled--BorderColor);
961
960
  }
962
961
 
963
962
  .#{$button}__icon {
package/components/Label/label.css CHANGED
@@ -474,7 +474,6 @@
474
474
  position: absolute;
475
475
  inset: 0;
476
476
  z-index: -1;
477
- pointer-events: none;
478
477
  content: "";
479
478
  background-color: var(--pf-v6-c-label--BackgroundColor);
480
479
  border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
@@ -493,8 +492,15 @@ input.pf-v6-c-label__content {
493
492
  .pf-v6-c-label__actions {
494
493
  margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
495
494
  }
496
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
497
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
495
+ .pf-v6-c-label .pf-v6-c-label__actions .pf-v6-c-button {
496
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
497
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
498
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
499
+ margin-block-start: calc(var(--pf-v6-c-label--PaddingBlockStart) * -1);
500
+ margin-block-end: calc(var(--pf-v6-c-label--PaddingBlockEnd) * -1);
501
+ margin-inline-end: calc(var(--pf-v6-c-label--PaddingInlineEnd) * -1);
502
+ border-start-end-radius: var(--pf-v6-c-label--BorderRadius);
503
+ border-end-end-radius: var(--pf-v6-c-label--BorderRadius);
498
504
  }
499
505
 
500
506
  .pf-v6-c-label__actions .pf-v6-c-button {
package/components/Label/label.scss CHANGED
@@ -567,7 +567,6 @@
567
567
  position: absolute;
568
568
  inset: 0;
569
569
  z-index: -1;
570
- pointer-events: none;
571
570
  content: "";
572
571
  background-color: var(--#{$label}--BackgroundColor);
573
572
  border: var(--#{$label}--BorderWidth) solid var(--#{$label}--BorderColor);
@@ -588,8 +587,15 @@
588
587
  margin-inline-end: var(--#{$label}__actions--MarginInlineEnd);
589
588
 
590
589
  .#{$button} {
591
- @at-root .#{$label}.pf-m-compact & {
592
- --#{$button}--m-plain--m-no-padding--after--Inset: 0 calc(#{pf-size-prem(2px) * -1});
590
+ @at-root .#{$label} & {
591
+ padding-block-start: var(--#{$label}--PaddingBlockStart);
592
+ padding-block-end: var(--#{$label}--PaddingBlockEnd);
593
+ padding-inline-end: var(--#{$label}--PaddingInlineEnd);
594
+ margin-block-start: calc(var(--#{$label}--PaddingBlockStart) * -1);
595
+ margin-block-end: calc(var(--#{$label}--PaddingBlockEnd) * -1);
596
+ margin-inline-end: calc(var(--#{$label}--PaddingInlineEnd) * -1);
597
+ border-start-end-radius: var(--#{$label}--BorderRadius);
598
+ border-end-end-radius: var(--#{$label}--BorderRadius);
593
599
  }
594
600
 
595
601
  --#{$button}--FontSize: var(--#{$label}__actions--c-button--FontSize);
package/components/_index.css CHANGED
@@ -2026,6 +2026,7 @@ button.pf-v6-c-breadcrumb__link {
2026
2026
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
2027
2027
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
2028
2028
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
2029
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
2029
2030
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
2030
2031
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
2031
2032
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -2101,7 +2102,6 @@ button.pf-v6-c-breadcrumb__link {
2101
2102
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
2102
2103
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2103
2104
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
2104
- --pf-v6-c-button__progress--Opacity: 0;
2105
2105
  --pf-v6-c-button__progress--TranslateY: -50%;
2106
2106
  --pf-v6-c-button__progress--TranslateX: 0;
2107
2107
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -2536,7 +2536,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2536
2536
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2537
2537
  --pf-v6-c-button__icon--TransitionDuration: 0s;
2538
2538
  --pf-v6-c-button__icon--TransitionProperty: scale;
2539
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2540
2539
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
2541
2540
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
2542
2541
  }
@@ -2612,7 +2611,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2612
2611
  background: var(--pf-v6-c-button--disabled--BackgroundColor);
2613
2612
  }
2614
2613
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2615
- border-color: transparent;
2614
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
2616
2615
  }
2617
2616
  .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2618
2617
  color: var(--pf-v6-c-button--disabled__icon--Color);
@@ -10325,7 +10324,6 @@ label.pf-v6-c-input-group__text {
10325
10324
  position: absolute;
10326
10325
  inset: 0;
10327
10326
  z-index: -1;
10328
- pointer-events: none;
10329
10327
  content: "";
10330
10328
  background-color: var(--pf-v6-c-label--BackgroundColor);
10331
10329
  border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
@@ -10344,8 +10342,15 @@ input.pf-v6-c-label__content {
10344
10342
  .pf-v6-c-label__actions {
10345
10343
  margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
10346
10344
  }
10347
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
10348
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
10345
+ .pf-v6-c-label .pf-v6-c-label__actions .pf-v6-c-button {
10346
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
10347
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
10348
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
10349
+ margin-block-start: calc(var(--pf-v6-c-label--PaddingBlockStart) * -1);
10350
+ margin-block-end: calc(var(--pf-v6-c-label--PaddingBlockEnd) * -1);
10351
+ margin-inline-end: calc(var(--pf-v6-c-label--PaddingInlineEnd) * -1);
10352
+ border-start-end-radius: var(--pf-v6-c-label--BorderRadius);
10353
+ border-end-end-radius: var(--pf-v6-c-label--BorderRadius);
10349
10354
  }
10350
10355
 
10351
10356
  .pf-v6-c-label__actions .pf-v6-c-button {