@patternfly/patternfly 6.1.0-prerelease.2 → 6.1.0-prerelease.3

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 (47) hide show
  1. package/README.md +5 -5
  2. package/components/Content/content.css +9 -0
  3. package/components/Content/content.scss +7 -0
  4. package/components/Label/label-group.css +12 -0
  5. package/components/Label/label-group.scss +14 -0
  6. package/components/Label/label.css +2 -0
  7. package/components/Label/label.scss +2 -0
  8. package/components/MenuToggle/menu-toggle.css +3 -7
  9. package/components/MenuToggle/menu-toggle.scss +3 -8
  10. package/components/Table/table.css +1 -0
  11. package/components/Table/table.scss +2 -0
  12. package/components/Title/title.css +4 -0
  13. package/components/Title/title.scss +7 -0
  14. package/components/Wizard/wizard.css +1 -1
  15. package/components/Wizard/wizard.scss +1 -1
  16. package/components/_index.css +32 -8
  17. package/docs/components/Content/examples/Content.md +8 -7
  18. package/docs/components/Label/examples/Label.css +12 -0
  19. package/docs/components/Label/examples/Label.md +127 -0
  20. package/docs/components/Table/examples/Table.md +2 -2
  21. package/docs/components/Title/examples/Title.md +10 -0
  22. package/docs/demos/AboutModal/examples/AboutModal.md +2 -4
  23. package/docs/demos/Alert/examples/Alert.md +6 -12
  24. package/docs/demos/BackToTop/examples/BackToTop.md +2 -4
  25. package/docs/demos/Banner/examples/Banner.md +4 -8
  26. package/docs/demos/CardView/examples/CardView.md +2 -4
  27. package/docs/demos/Dashboard/examples/Dashboard.md +2 -4
  28. package/docs/demos/DataList/examples/DataList.md +8 -16
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -12
  30. package/docs/demos/Drawer/examples/Drawer.md +6 -12
  31. package/docs/demos/JumpLinks/examples/JumpLinks.md +8 -16
  32. package/docs/demos/Masthead/examples/Masthead.md +18 -36
  33. package/docs/demos/Modal/examples/Modal.md +12 -24
  34. package/docs/demos/Nav/examples/Nav.md +12 -24
  35. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -20
  36. package/docs/demos/Page/examples/Page.md +24 -48
  37. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +14 -28
  38. package/docs/demos/Skeleton/examples/Skeleton.md +2 -4
  39. package/docs/demos/Table/examples/Table.md +30 -60
  40. package/docs/demos/Tabs/examples/Tabs.md +12 -24
  41. package/docs/demos/Toolbar/examples/Toolbar.md +4 -8
  42. package/docs/demos/Wizard/examples/Wizard.md +18 -36
  43. package/package.json +2 -2
  44. package/patternfly-no-globals.css +32 -8
  45. package/patternfly.css +32 -8
  46. package/patternfly.min.css +1 -1
  47. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -10580,6 +10580,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
10580
10580
  --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
10581
10581
  --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
10582
10582
  --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
10583
+ --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
10583
10584
  --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
10584
10585
  --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
10585
10586
  --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -10679,6 +10680,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
10679
10680
  .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
10680
10681
  margin-block-end: 0;
10681
10682
  }
10683
+ :is(.pf-v6-c-content--h1,
10684
+ .pf-v6-c-content--h2,
10685
+ .pf-v6-c-content--h3,
10686
+ .pf-v6-c-content--h4,
10687
+ .pf-v6-c-content--h5,
10688
+ .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6).pf-m-page-title {
10689
+ font-weight: var(--pf-v6-c-content--heading--m-page-title--FontWeight);
10690
+ }
10682
10691
 
10683
10692
  :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
10684
10693
  margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
@@ -15449,6 +15458,7 @@ label.pf-v6-c-input-group__text {
15449
15458
  --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
15450
15459
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
15451
15460
  --pf-v6-c-label--MaxWidth: 100%;
15461
+ --pf-v6-c-label--MinWidth: 3em;
15452
15462
  --pf-v6-c-label--BorderWidth: 0;
15453
15463
  --pf-v6-c-label--BorderColor: transparent;
15454
15464
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -15638,6 +15648,7 @@ label.pf-v6-c-input-group__text {
15638
15648
 
15639
15649
  .pf-v6-c-label {
15640
15650
  position: relative;
15651
+ min-width: var(--pf-v6-c-label--MinWidth);
15641
15652
  max-width: var(--pf-v6-c-label--MaxWidth);
15642
15653
  padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
15643
15654
  padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
@@ -15940,16 +15951,22 @@ input.pf-v6-c-label__content {
15940
15951
  .pf-v6-c-label-group {
15941
15952
  --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
15942
15953
  --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
15954
+ --pf-v6-c-label-group--MaxWidth: 100%;
15943
15955
  --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
15944
15956
  --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
15945
15957
  --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
15946
15958
  --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
15959
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
15960
+ --pf-v6-c-label-group__main--MinWidth: 0;
15947
15961
  --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
15948
15962
  --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
15949
15963
  --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
15950
15964
  --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
15965
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
15966
+ --pf-v6-c-label-group__list--MinWidth: 0;
15951
15967
  --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
15952
15968
  --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
15969
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
15953
15970
  --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
15954
15971
  --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15955
15972
  --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -15976,6 +15993,7 @@ input.pf-v6-c-label__content {
15976
15993
  row-gap: var(--pf-v6-c-label-group--RowGap);
15977
15994
  column-gap: var(--pf-v6-c-label-group--ColumnGap);
15978
15995
  align-items: center;
15996
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
15979
15997
  }
15980
15998
  .pf-v6-c-label-group.pf-m-category {
15981
15999
  padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
@@ -16001,9 +16019,11 @@ input.pf-v6-c-label__content {
16001
16019
  .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
16002
16020
  flex-direction: column;
16003
16021
  align-items: flex-start;
16022
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
16004
16023
  }
16005
16024
  .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
16006
16025
  flex-direction: column;
16026
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
16007
16027
  }
16008
16028
  .pf-v6-c-label-group.pf-m-editable,
16009
16029
  .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
@@ -16024,6 +16044,7 @@ input.pf-v6-c-label__content {
16024
16044
  row-gap: var(--pf-v6-c-label-group__main--RowGap);
16025
16045
  column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
16026
16046
  align-items: baseline;
16047
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
16027
16048
  }
16028
16049
 
16029
16050
  .pf-v6-c-label-group__list {
@@ -16031,10 +16052,12 @@ input.pf-v6-c-label__content {
16031
16052
  flex-wrap: wrap;
16032
16053
  row-gap: var(--pf-v6-c-label-group__list--RowGap);
16033
16054
  column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
16055
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
16034
16056
  }
16035
16057
 
16036
16058
  .pf-v6-c-label-group__list-item {
16037
16059
  display: inline-flex;
16060
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
16038
16061
  }
16039
16062
 
16040
16063
  .pf-v6-c-label-group__label {
@@ -17896,13 +17919,6 @@ ul.pf-v6-c-list {
17896
17919
  flex-wrap: nowrap;
17897
17920
  }
17898
17921
 
17899
- .pf-v6-c-menu-toggle__controls,
17900
- .pf-v6-c-menu-toggle__toggle-icon {
17901
- display: flex;
17902
- align-items: center;
17903
- justify-content: center;
17904
- }
17905
-
17906
17922
  .pf-v6-c-menu-toggle__icon {
17907
17923
  flex-shrink: 0;
17908
17924
  }
@@ -17914,7 +17930,10 @@ ul.pf-v6-c-list {
17914
17930
  }
17915
17931
 
17916
17932
  .pf-v6-c-menu-toggle__controls {
17933
+ display: flex;
17917
17934
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
17935
+ align-items: center;
17936
+ justify-content: center;
17918
17937
  margin-inline-start: auto;
17919
17938
  }
17920
17939
 
@@ -24280,6 +24299,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24280
24299
  .pf-v6-c-table .pf-v6-c-table__draggable {
24281
24300
  --pf-v6-c-table--cell--MinWidth: 0;
24282
24301
  --pf-v6-c-table--cell--Width: 1%;
24302
+ max-width: none;
24283
24303
  }
24284
24304
 
24285
24305
  .pf-v6-c-table .pf-v6-c-table__favorite {
@@ -26685,6 +26705,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26685
26705
  --pf-v6-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
26686
26706
  --pf-v6-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
26687
26707
  --pf-v6-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
26708
+ --pf-v6-c-title--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
26688
26709
  }
26689
26710
 
26690
26711
  .pf-v6-c-title {
@@ -26751,6 +26772,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26751
26772
  font-weight: var(--pf-v6-c-title--m-h6--FontWeight);
26752
26773
  line-height: var(--pf-v6-c-title--m-h6--LineHeight);
26753
26774
  }
26775
+ .pf-v6-c-title.pf-m-page-title {
26776
+ font-weight: var(--pf-v6-c-title--m-page-title--FontWeight);
26777
+ }
26754
26778
 
26755
26779
  .pf-v6-c-toggle-group {
26756
26780
  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -29522,7 +29546,7 @@ label.pf-v6-c-tree-view__node-text {
29522
29546
  --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
29523
29547
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
29524
29548
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
29525
- --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--xs);
29549
+ --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
29526
29550
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29527
29551
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
29528
29552
  --pf-v6-c-wizard__nav--Width: 100%;