@patternfly/patternfly 6.5.0-prerelease.62 → 6.5.0-prerelease.63

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 (51) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +3 -3
  3. package/components/Menu/menu.css +26 -19
  4. package/components/Menu/menu.scss +26 -19
  5. package/components/MenuToggle/menu-toggle.css +9 -5
  6. package/components/MenuToggle/menu-toggle.scss +12 -5
  7. package/components/_index.css +37 -26
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +13 -1
  9. package/docs/components/CalendarMonth/examples/CalendarMonth.md +52 -4
  10. package/docs/components/Card/examples/Card.md +130 -10
  11. package/docs/components/DataList/examples/DataList.md +221 -17
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +234 -18
  13. package/docs/components/Hint/examples/Hint.md +39 -3
  14. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -2
  15. package/docs/components/InputGroup/examples/InputGroup.md +13 -1
  16. package/docs/components/Login/examples/Login.md +13 -1
  17. package/docs/components/Menu/examples/Menu.md +195 -15
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +1331 -100
  19. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +481 -37
  20. package/docs/components/OverflowMenu/examples/overflow-menu.md +65 -5
  21. package/docs/components/Pagination/examples/Pagination.md +169 -13
  22. package/docs/components/Table/examples/Table.md +3461 -269
  23. package/docs/components/Toolbar/examples/Toolbar.md +507 -39
  24. package/docs/demos/AboutModal/examples/AboutModal.md +26 -2
  25. package/docs/demos/Alert/examples/Alert.md +78 -6
  26. package/docs/demos/BackToTop/examples/BackToTop.md +26 -2
  27. package/docs/demos/Banner/examples/Banner.md +52 -4
  28. package/docs/demos/Card/examples/Card.md +78 -6
  29. package/docs/demos/CardView/examples/CardView.md +206 -20
  30. package/docs/demos/Compass/examples/Compass.md +431 -56
  31. package/docs/demos/Dashboard/examples/Dashboard.md +63 -9
  32. package/docs/demos/DataList/examples/DataList.md +369 -45
  33. package/docs/demos/DescriptionList/examples/DescriptionList.md +91 -7
  34. package/docs/demos/Drawer/examples/Drawer.md +143 -11
  35. package/docs/demos/JumpLinks/examples/JumpLinks.md +156 -12
  36. package/docs/demos/Masthead/examples/Masthead.md +156 -12
  37. package/docs/demos/Modal/examples/Modal.md +156 -12
  38. package/docs/demos/Nav/examples/Nav.md +104 -8
  39. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +975 -75
  40. package/docs/demos/Page/examples/Page.md +390 -30
  41. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +593 -83
  42. package/docs/demos/Skeleton/examples/Skeleton.md +26 -2
  43. package/docs/demos/Table/examples/Table.md +2518 -322
  44. package/docs/demos/Tabs/examples/Tabs.md +247 -19
  45. package/docs/demos/Toolbar/examples/Toolbar.md +659 -59
  46. package/docs/demos/Wizard/examples/Wizard.md +234 -18
  47. package/package.json +1 -1
  48. package/patternfly-no-globals.css +37 -26
  49. package/patternfly.css +37 -26
  50. package/patternfly.min.css +1 -1
  51. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -11094,13 +11094,13 @@ button.pf-v6-c-breadcrumb__link {
11094
11094
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
11095
11095
  --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
11096
11096
  --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
11097
- --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
11097
+ --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
11098
11098
  --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
11099
11099
  --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
11100
11100
  --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
11101
11101
  --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
11102
11102
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
11103
- --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
11103
+ --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--control--default);
11104
11104
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
11105
11105
  --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
11106
11106
  --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -20439,17 +20439,19 @@ ul.pf-v6-c-list {
20439
20439
  }
20440
20440
 
20441
20441
  .pf-v6-c-menu {
20442
- --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
20442
+ --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
20443
20443
  --pf-v6-c-menu--Width: auto;
20444
20444
  --pf-v6-c-menu--MinWidth: auto;
20445
- --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
20446
- --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
20445
+ --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--xs);
20446
+ --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
20447
+ --pf-v6-c-menu--PaddingInlineStart: var(--pf-t--global--spacer--xs);
20448
+ --pf-v6-c-menu--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
20447
20449
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
20448
20450
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
20449
20451
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
20450
20452
  --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
20451
20453
  --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
20452
- --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
20454
+ --pf-v6-c-menu--BorderRadius: calc(var(--pf-v6-c-menu__item--BorderRadius) + var(--pf-v6-c-menu--PaddingBlockStart));
20453
20455
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
20454
20456
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
20455
20457
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -20490,12 +20492,13 @@ ul.pf-v6-c-list {
20490
20492
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
20491
20493
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
20492
20494
  --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
20493
- --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
20494
- --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
20495
+ --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--xs);
20496
+ --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--xs);
20497
+ --pf-v6-c-menu__item--BorderRadius: var(--pf-t--global--border--radius--small);
20495
20498
  --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
20496
20499
  --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
20497
- --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
20498
- --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
20500
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
20501
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
20499
20502
  --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
20500
20503
  --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
20501
20504
  --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -20504,22 +20507,23 @@ ul.pf-v6-c-list {
20504
20507
  --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
20505
20508
  --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
20506
20509
  --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
20507
- --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
20508
- --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
20510
+ --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
20511
+ --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
20509
20512
  --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
20510
20513
  --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
20511
- --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
20512
- --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
20514
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--md);
20515
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
20513
20516
  --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
20514
20517
  --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
20515
- --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
20516
- --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
20518
+ --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--md);
20519
+ --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--md);
20517
20520
  --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
20518
20521
  --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
20519
- --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
20520
- --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
20522
+ --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
20523
+ --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
20521
20524
  --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
20522
- --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
20525
+ --pf-v6-c-menu__group-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
20526
+ --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--regular);
20523
20527
  --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
20524
20528
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
20525
20529
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
@@ -20681,6 +20685,8 @@ ul.pf-v6-c-list {
20681
20685
  min-width: var(--pf-v6-c-menu--MinWidth);
20682
20686
  padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
20683
20687
  padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
20688
+ padding-inline-start: var(--pf-v6-c-menu--PaddingInlineStart);
20689
+ padding-inline-end: var(--pf-v6-c-menu--PaddingInlineEnd);
20684
20690
  overflow: hidden;
20685
20691
  color: var(--pf-v6-c-menu--Color);
20686
20692
  background-color: var(--pf-v6-c-menu--BackgroundColor);
@@ -20875,8 +20881,8 @@ ul.pf-v6-c-list {
20875
20881
  inset: 0;
20876
20882
  content: "";
20877
20883
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
20878
- border-block-start: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
20879
- border-block-end: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
20884
+ border: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
20885
+ border-radius: var(--pf-v6-c-menu__item--BorderRadius);
20880
20886
  transition: inherit;
20881
20887
  }
20882
20888
  .pf-v6-c-menu__list-item.pf-m-load {
@@ -20926,6 +20932,7 @@ ul.pf-v6-c-list {
20926
20932
  text-decoration-line: none;
20927
20933
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
20928
20934
  border: 0;
20935
+ border-radius: var(--pf-v6-c-menu__item--BorderRadius);
20929
20936
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
20930
20937
  --pf-v6-hidden-visible--visible--Display: flex;
20931
20938
  --pf-v6-hidden-visible--hidden--Display: none;
@@ -21089,7 +21096,7 @@ ul.pf-v6-c-list {
21089
21096
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
21090
21097
  --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
21091
21098
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
21092
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
21099
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
21093
21100
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
21094
21101
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
21095
21102
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
@@ -21127,7 +21134,7 @@ ul.pf-v6-c-list {
21127
21134
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
21128
21135
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
21129
21136
  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
21130
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
21137
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
21131
21138
  --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
21132
21139
  --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
21133
21140
  --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -21145,7 +21152,7 @@ ul.pf-v6-c-list {
21145
21152
  --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
21146
21153
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
21147
21154
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
21148
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
21155
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
21149
21156
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
21150
21157
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
21151
21158
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -21160,11 +21167,12 @@ ul.pf-v6-c-list {
21160
21167
  --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
21161
21168
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
21162
21169
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
21170
+ --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
21163
21171
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
21164
21172
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
21165
21173
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
21166
21174
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
21167
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
21175
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
21168
21176
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
21169
21177
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
21170
21178
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
@@ -21194,7 +21202,7 @@ ul.pf-v6-c-list {
21194
21202
  --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
21195
21203
  --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
21196
21204
  --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
21197
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
21205
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
21198
21206
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
21199
21207
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
21200
21208
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -21314,6 +21322,9 @@ ul.pf-v6-c-list {
21314
21322
  .pf-v6-c-menu-toggle.pf-m-full-width {
21315
21323
  width: 100%;
21316
21324
  }
21325
+ .pf-v6-c-menu-toggle.pf-m-form {
21326
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
21327
+ }
21317
21328
  .pf-v6-c-menu-toggle.pf-m-plain {
21318
21329
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
21319
21330
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);