@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/docs/demos/Wizard/examples/Wizard.md CHANGED
@@ -485,7 +485,19 @@ wrapperTag: div
485
485
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
486
486
  </span>
487
487
  <span class="pf-v6-c-wizard__toggle-icon">
488
- <i class="fas fa-caret-down" aria-hidden="true"></i>
488
+ <svg
489
+ class="pf-v6-svg"
490
+ fill="currentColor"
491
+ viewBox="0 0 32 32"
492
+ aria-hidden="true"
493
+ role="img"
494
+ width="1em"
495
+ height="1em"
496
+ >
497
+ <path
498
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
499
+ />
500
+ </svg>
489
501
  </span>
490
502
  </button>
491
503
  <div class="pf-v6-c-wizard__outer-wrap">
@@ -1236,7 +1248,19 @@ wrapperTag: div
1236
1248
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1237
1249
  </span>
1238
1250
  <span class="pf-v6-c-wizard__toggle-icon">
1239
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1251
+ <svg
1252
+ class="pf-v6-svg"
1253
+ fill="currentColor"
1254
+ viewBox="0 0 32 32"
1255
+ aria-hidden="true"
1256
+ role="img"
1257
+ width="1em"
1258
+ height="1em"
1259
+ >
1260
+ <path
1261
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
1262
+ />
1263
+ </svg>
1240
1264
  </span>
1241
1265
  </button>
1242
1266
  <div class="pf-v6-c-wizard__outer-wrap">
@@ -1969,7 +1993,19 @@ wrapperTag: div
1969
1993
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1970
1994
  </span>
1971
1995
  <span class="pf-v6-c-wizard__toggle-icon">
1972
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1996
+ <svg
1997
+ class="pf-v6-svg"
1998
+ fill="currentColor"
1999
+ viewBox="0 0 32 32"
2000
+ aria-hidden="true"
2001
+ role="img"
2002
+ width="1em"
2003
+ height="1em"
2004
+ >
2005
+ <path
2006
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
2007
+ />
2008
+ </svg>
1973
2009
  </span>
1974
2010
  </button>
1975
2011
  <div class="pf-v6-c-wizard__outer-wrap">
@@ -2798,7 +2834,19 @@ wrapperTag: div
2798
2834
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2799
2835
  </span>
2800
2836
  <span class="pf-v6-c-wizard__toggle-icon">
2801
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2837
+ <svg
2838
+ class="pf-v6-svg"
2839
+ fill="currentColor"
2840
+ viewBox="0 0 32 32"
2841
+ aria-hidden="true"
2842
+ role="img"
2843
+ width="1em"
2844
+ height="1em"
2845
+ >
2846
+ <path
2847
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
2848
+ />
2849
+ </svg>
2802
2850
  </span>
2803
2851
  </button>
2804
2852
  <div class="pf-v6-c-wizard__outer-wrap">
@@ -3623,7 +3671,19 @@ wrapperTag: div
3623
3671
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3624
3672
  </span>
3625
3673
  <span class="pf-v6-c-wizard__toggle-icon">
3626
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3674
+ <svg
3675
+ class="pf-v6-svg"
3676
+ fill="currentColor"
3677
+ viewBox="0 0 32 32"
3678
+ aria-hidden="true"
3679
+ role="img"
3680
+ width="1em"
3681
+ height="1em"
3682
+ >
3683
+ <path
3684
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
3685
+ />
3686
+ </svg>
3627
3687
  </span>
3628
3688
  </button>
3629
3689
  <div class="pf-v6-c-wizard__outer-wrap">
@@ -4246,7 +4306,19 @@ wrapperTag: div
4246
4306
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4247
4307
  </span>
4248
4308
  <span class="pf-v6-c-wizard__toggle-icon">
4249
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4309
+ <svg
4310
+ class="pf-v6-svg"
4311
+ fill="currentColor"
4312
+ viewBox="0 0 32 32"
4313
+ aria-hidden="true"
4314
+ role="img"
4315
+ width="1em"
4316
+ height="1em"
4317
+ >
4318
+ <path
4319
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
4320
+ />
4321
+ </svg>
4250
4322
  </span>
4251
4323
  </button>
4252
4324
  <div class="pf-v6-c-wizard__outer-wrap">
@@ -4929,7 +5001,19 @@ wrapperTag: div
4929
5001
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4930
5002
  </span>
4931
5003
  <span class="pf-v6-c-wizard__toggle-icon">
4932
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5004
+ <svg
5005
+ class="pf-v6-svg"
5006
+ fill="currentColor"
5007
+ viewBox="0 0 32 32"
5008
+ aria-hidden="true"
5009
+ role="img"
5010
+ width="1em"
5011
+ height="1em"
5012
+ >
5013
+ <path
5014
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
5015
+ />
5016
+ </svg>
4933
5017
  </span>
4934
5018
  </button>
4935
5019
  <div class="pf-v6-c-wizard__outer-wrap">
@@ -5594,7 +5678,19 @@ wrapperTag: div
5594
5678
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
5595
5679
  </span>
5596
5680
  <span class="pf-v6-c-wizard__toggle-icon">
5597
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5681
+ <svg
5682
+ class="pf-v6-svg"
5683
+ fill="currentColor"
5684
+ viewBox="0 0 32 32"
5685
+ aria-hidden="true"
5686
+ role="img"
5687
+ width="1em"
5688
+ height="1em"
5689
+ >
5690
+ <path
5691
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
5692
+ />
5693
+ </svg>
5598
5694
  </span>
5599
5695
  </button>
5600
5696
  <div class="pf-v6-c-wizard__outer-wrap">
@@ -6342,7 +6438,19 @@ wrapperTag: div
6342
6438
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
6343
6439
  </span>
6344
6440
  <span class="pf-v6-c-wizard__toggle-icon">
6345
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6441
+ <svg
6442
+ class="pf-v6-svg"
6443
+ fill="currentColor"
6444
+ viewBox="0 0 32 32"
6445
+ aria-hidden="true"
6446
+ role="img"
6447
+ width="1em"
6448
+ height="1em"
6449
+ >
6450
+ <path
6451
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
6452
+ />
6453
+ </svg>
6346
6454
  </span>
6347
6455
  </button>
6348
6456
  <div class="pf-v6-c-wizard__outer-wrap">
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
- "version": "6.6.0-prerelease.26",
4
+ "version": "6.6.0-prerelease.28",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11282,6 +11282,7 @@ button.pf-v6-c-breadcrumb__link {
11282
11282
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
11283
11283
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
11284
11284
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
11285
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
11285
11286
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
11286
11287
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
11287
11288
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -11357,7 +11358,6 @@ button.pf-v6-c-breadcrumb__link {
11357
11358
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
11358
11359
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11359
11360
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
11360
- --pf-v6-c-button__progress--Opacity: 0;
11361
11361
  --pf-v6-c-button__progress--TranslateY: -50%;
11362
11362
  --pf-v6-c-button__progress--TranslateX: 0;
11363
11363
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -11792,7 +11792,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11792
11792
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
11793
11793
  --pf-v6-c-button__icon--TransitionDuration: 0s;
11794
11794
  --pf-v6-c-button__icon--TransitionProperty: scale;
11795
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
11796
11795
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
11797
11796
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
11798
11797
  }
@@ -11868,7 +11867,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11868
11867
  background: var(--pf-v6-c-button--disabled--BackgroundColor);
11869
11868
  }
11870
11869
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
11871
- border-color: transparent;
11870
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
11872
11871
  }
11873
11872
  .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 {
11874
11873
  color: var(--pf-v6-c-button--disabled__icon--Color);
@@ -19581,7 +19580,6 @@ label.pf-v6-c-input-group__text {
19581
19580
  position: absolute;
19582
19581
  inset: 0;
19583
19582
  z-index: -1;
19584
- pointer-events: none;
19585
19583
  content: "";
19586
19584
  background-color: var(--pf-v6-c-label--BackgroundColor);
19587
19585
  border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
@@ -19600,8 +19598,15 @@ input.pf-v6-c-label__content {
19600
19598
  .pf-v6-c-label__actions {
19601
19599
  margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
19602
19600
  }
19603
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
19604
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
19601
+ .pf-v6-c-label .pf-v6-c-label__actions .pf-v6-c-button {
19602
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
19603
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
19604
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
19605
+ margin-block-start: calc(var(--pf-v6-c-label--PaddingBlockStart) * -1);
19606
+ margin-block-end: calc(var(--pf-v6-c-label--PaddingBlockEnd) * -1);
19607
+ margin-inline-end: calc(var(--pf-v6-c-label--PaddingInlineEnd) * -1);
19608
+ border-start-end-radius: var(--pf-v6-c-label--BorderRadius);
19609
+ border-end-end-radius: var(--pf-v6-c-label--BorderRadius);
19605
19610
  }
19606
19611
 
19607
19612
  .pf-v6-c-label__actions .pf-v6-c-button {
package/patternfly.css CHANGED
@@ -11437,6 +11437,7 @@ button.pf-v6-c-breadcrumb__link {
11437
11437
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
11438
11438
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
11439
11439
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
11440
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
11440
11441
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
11441
11442
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
11442
11443
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -11512,7 +11513,6 @@ button.pf-v6-c-breadcrumb__link {
11512
11513
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
11513
11514
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11514
11515
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
11515
- --pf-v6-c-button__progress--Opacity: 0;
11516
11516
  --pf-v6-c-button__progress--TranslateY: -50%;
11517
11517
  --pf-v6-c-button__progress--TranslateX: 0;
11518
11518
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -11947,7 +11947,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11947
11947
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
11948
11948
  --pf-v6-c-button__icon--TransitionDuration: 0s;
11949
11949
  --pf-v6-c-button__icon--TransitionProperty: scale;
11950
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
11951
11950
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
11952
11951
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
11953
11952
  }
@@ -12023,7 +12022,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12023
12022
  background: var(--pf-v6-c-button--disabled--BackgroundColor);
12024
12023
  }
12025
12024
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
12026
- border-color: transparent;
12025
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
12027
12026
  }
12028
12027
  .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 {
12029
12028
  color: var(--pf-v6-c-button--disabled__icon--Color);
@@ -19736,7 +19735,6 @@ label.pf-v6-c-input-group__text {
19736
19735
  position: absolute;
19737
19736
  inset: 0;
19738
19737
  z-index: -1;
19739
- pointer-events: none;
19740
19738
  content: "";
19741
19739
  background-color: var(--pf-v6-c-label--BackgroundColor);
19742
19740
  border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
@@ -19755,8 +19753,15 @@ input.pf-v6-c-label__content {
19755
19753
  .pf-v6-c-label__actions {
19756
19754
  margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
19757
19755
  }
19758
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
19759
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
19756
+ .pf-v6-c-label .pf-v6-c-label__actions .pf-v6-c-button {
19757
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
19758
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
19759
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
19760
+ margin-block-start: calc(var(--pf-v6-c-label--PaddingBlockStart) * -1);
19761
+ margin-block-end: calc(var(--pf-v6-c-label--PaddingBlockEnd) * -1);
19762
+ margin-inline-end: calc(var(--pf-v6-c-label--PaddingInlineEnd) * -1);
19763
+ border-start-end-radius: var(--pf-v6-c-label--BorderRadius);
19764
+ border-end-end-radius: var(--pf-v6-c-label--BorderRadius);
19760
19765
  }
19761
19766
 
19762
19767
  .pf-v6-c-label__actions .pf-v6-c-button {