@patternfly/patternfly 6.5.0-prerelease.69 → 6.5.0-prerelease.70

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 (45) hide show
  1. package/components/Button/button.css +3 -3
  2. package/components/Button/button.scss +1 -1
  3. package/components/Card/card.css +1 -5
  4. package/components/Card/card.scss +2 -6
  5. package/components/Compass/compass.css +2 -2
  6. package/components/Compass/compass.scss +1 -1
  7. package/components/MenuToggle/menu-toggle.css +4 -4
  8. package/components/MenuToggle/menu-toggle.scss +1 -1
  9. package/components/Page/page.css +4 -4
  10. package/components/Page/page.scss +2 -2
  11. package/components/_index.css +14 -18
  12. package/docs/components/CodeEditor/examples/CodeEditor.md +39 -3
  13. package/docs/components/Compass/examples/Compass.md +2 -2
  14. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  15. package/docs/components/MenuToggle/examples/MenuToggle.md +51 -3
  16. package/docs/components/Page/examples/Page.md +2 -2
  17. package/docs/components/Toolbar/examples/Toolbar.md +10 -10
  18. package/docs/components/Wizard/examples/Wizard.md +13 -1
  19. package/docs/demos/AboutModal/examples/AboutModal.md +17 -1
  20. package/docs/demos/Alert/examples/Alert.md +51 -3
  21. package/docs/demos/BackToTop/examples/BackToTop.md +17 -1
  22. package/docs/demos/Banner/examples/Banner.md +34 -2
  23. package/docs/demos/CardView/examples/CardView.md +127 -123
  24. package/docs/demos/Compass/examples/Compass.md +3072 -1425
  25. package/docs/demos/Dashboard/examples/Dashboard.md +17 -1
  26. package/docs/demos/DataList/examples/DataList.md +78 -14
  27. package/docs/demos/DescriptionList/examples/DescriptionList.md +51 -3
  28. package/docs/demos/Drawer/examples/Drawer.md +85 -5
  29. package/docs/demos/JumpLinks/examples/JumpLinks.md +102 -6
  30. package/docs/demos/Masthead/examples/Masthead.md +29 -13
  31. package/docs/demos/Modal/examples/Modal.md +102 -6
  32. package/docs/demos/Nav/examples/Nav.md +144 -20
  33. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +85 -5
  34. package/docs/demos/Page/examples/Page.md +244 -20
  35. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +133 -21
  36. package/docs/demos/Skeleton/examples/Skeleton.md +17 -1
  37. package/docs/demos/Table/examples/Table.md +337 -69
  38. package/docs/demos/Tabs/examples/Tabs.md +104 -8
  39. package/docs/demos/Toolbar/examples/Toolbar.md +46 -14
  40. package/docs/demos/Wizard/examples/Wizard.md +153 -9
  41. package/package.json +2 -2
  42. package/patternfly-no-globals.css +14 -18
  43. package/patternfly.css +14 -18
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -11607,15 +11607,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11607
11607
  animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
11608
11608
  animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
11609
11609
  }
11610
- .pf-v6-c-button.pf-m-dock {
11610
+ .pf-v6-c-button.pf-m-docked {
11611
11611
  justify-content: flex-start;
11612
11612
  width: 100%;
11613
11613
  }
11614
11614
  @media (min-width: 62rem) {
11615
- .pf-v6-c-button.pf-m-dock {
11615
+ .pf-v6-c-button.pf-m-docked {
11616
11616
  justify-content: center;
11617
11617
  }
11618
- .pf-v6-c-button.pf-m-dock .pf-v6-c-button__text {
11618
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text {
11619
11619
  display: none;
11620
11620
  }
11621
11621
  }
@@ -11961,7 +11961,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11961
11961
  --pf-v6-c-card--BorderStyle: solid;
11962
11962
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
11963
11963
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
11964
- --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
11965
11964
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11966
11965
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11967
11966
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -12032,7 +12031,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12032
12031
  --pf-v6-c-card--m-full-height--Height: 100%;
12033
12032
  --pf-v6-c-card--m-plain--BorderColor: transparent;
12034
12033
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
12035
- --pf-v6-c-card--m-plain--BoxShadow: none;
12036
12034
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
12037
12035
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
12038
12036
  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -12052,7 +12050,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12052
12050
  background-color: var(--pf-v6-c-card--BackgroundColor);
12053
12051
  border: 0;
12054
12052
  border-radius: var(--pf-v6-c-card--BorderRadius);
12055
- box-shadow: var(--pf-v6-c-card--BoxShadow);
12056
12053
  }
12057
12054
  .pf-v6-c-card::before {
12058
12055
  position: absolute;
@@ -12066,8 +12063,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12066
12063
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
12067
12064
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
12068
12065
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
12069
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
12070
12066
  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
12067
+ box-shadow: var(--pf-v6-c-card--m-glass--BoxShadow);
12071
12068
  }
12072
12069
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
12073
12070
  gap: 0;
@@ -12150,7 +12147,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12150
12147
  .pf-v6-c-card.pf-m-plain {
12151
12148
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
12152
12149
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
12153
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
12154
12150
  backdrop-filter: none;
12155
12151
  }
12156
12152
  .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
@@ -12899,14 +12895,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12899
12895
  background-image: var(--pf-v6-c-compass--BackgroundImage);
12900
12896
  background-size: cover;
12901
12897
  }
12902
- .pf-v6-c-compass.pf-m-dock {
12898
+ .pf-v6-c-compass.pf-m-docked {
12903
12899
  grid-template-areas: "dock main";
12904
12900
  grid-template-rows: auto;
12905
12901
  grid-template-columns: auto 1fr;
12906
12902
  align-items: stretch;
12907
12903
  padding: 0;
12908
12904
  }
12909
- .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
12905
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
12910
12906
  padding: var(--pf-v6-c-compass--Padding);
12911
12907
  }
12912
12908
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
@@ -21314,17 +21310,17 @@ ul.pf-v6-c-list {
21314
21310
  .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
21315
21311
  pointer-events: none;
21316
21312
  }
21317
- .pf-v6-c-menu-toggle.pf-m-dock {
21313
+ .pf-v6-c-menu-toggle.pf-m-docked {
21318
21314
  justify-content: flex-start;
21319
21315
  width: 100%;
21320
21316
  }
21321
21317
  @media (min-width: 62rem) {
21322
- .pf-v6-c-menu-toggle.pf-m-dock {
21318
+ .pf-v6-c-menu-toggle.pf-m-docked {
21323
21319
  justify-content: center;
21324
21320
  width: auto;
21325
21321
  }
21326
- .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__text,
21327
- .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__controls {
21322
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
21323
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
21328
21324
  display: none;
21329
21325
  }
21330
21326
  }
@@ -22970,7 +22966,7 @@ ul.pf-v6-c-list {
22970
22966
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
22971
22967
  }
22972
22968
  }
22973
- .pf-v6-c-page.pf-m-dock {
22969
+ .pf-v6-c-page.pf-m-docked {
22974
22970
  --pf-v6-c-page--masthead--main-container--GridArea: main;
22975
22971
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
22976
22972
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
@@ -22979,7 +22975,7 @@ ul.pf-v6-c-list {
22979
22975
  grid-template-columns: auto 1fr;
22980
22976
  }
22981
22977
  @media (min-width: 62rem) {
22982
- .pf-v6-c-page.pf-m-dock {
22978
+ .pf-v6-c-page.pf-m-docked {
22983
22979
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart);
22984
22980
  --pf-v6-c-page__main-container--MarginInlineStart: 0;
22985
22981
  grid-template-areas: "dock main";
@@ -22987,7 +22983,7 @@ ul.pf-v6-c-list {
22987
22983
  grid-template-columns: auto 1fr;
22988
22984
  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
22989
22985
  }
22990
- .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
22986
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
22991
22987
  display: none;
22992
22988
  }
22993
22989
  }
@@ -23046,7 +23042,7 @@ ul.pf-v6-c-list {
23046
23042
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
23047
23043
  grid-area: header;
23048
23044
  }
23049
- .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
23045
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
23050
23046
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
23051
23047
  }
23052
23048
 
package/patternfly.css CHANGED
@@ -11754,15 +11754,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11754
11754
  animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
11755
11755
  animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
11756
11756
  }
11757
- .pf-v6-c-button.pf-m-dock {
11757
+ .pf-v6-c-button.pf-m-docked {
11758
11758
  justify-content: flex-start;
11759
11759
  width: 100%;
11760
11760
  }
11761
11761
  @media (min-width: 62rem) {
11762
- .pf-v6-c-button.pf-m-dock {
11762
+ .pf-v6-c-button.pf-m-docked {
11763
11763
  justify-content: center;
11764
11764
  }
11765
- .pf-v6-c-button.pf-m-dock .pf-v6-c-button__text {
11765
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text {
11766
11766
  display: none;
11767
11767
  }
11768
11768
  }
@@ -12108,7 +12108,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12108
12108
  --pf-v6-c-card--BorderStyle: solid;
12109
12109
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
12110
12110
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
12111
- --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
12112
12111
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
12113
12112
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12114
12113
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -12179,7 +12178,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12179
12178
  --pf-v6-c-card--m-full-height--Height: 100%;
12180
12179
  --pf-v6-c-card--m-plain--BorderColor: transparent;
12181
12180
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
12182
- --pf-v6-c-card--m-plain--BoxShadow: none;
12183
12181
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
12184
12182
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
12185
12183
  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -12199,7 +12197,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12199
12197
  background-color: var(--pf-v6-c-card--BackgroundColor);
12200
12198
  border: 0;
12201
12199
  border-radius: var(--pf-v6-c-card--BorderRadius);
12202
- box-shadow: var(--pf-v6-c-card--BoxShadow);
12203
12200
  }
12204
12201
  .pf-v6-c-card::before {
12205
12202
  position: absolute;
@@ -12213,8 +12210,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12213
12210
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
12214
12211
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
12215
12212
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
12216
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
12217
12213
  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
12214
+ box-shadow: var(--pf-v6-c-card--m-glass--BoxShadow);
12218
12215
  }
12219
12216
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
12220
12217
  gap: 0;
@@ -12297,7 +12294,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12297
12294
  .pf-v6-c-card.pf-m-plain {
12298
12295
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
12299
12296
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
12300
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
12301
12297
  backdrop-filter: none;
12302
12298
  }
12303
12299
  .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
@@ -13046,14 +13042,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13046
13042
  background-image: var(--pf-v6-c-compass--BackgroundImage);
13047
13043
  background-size: cover;
13048
13044
  }
13049
- .pf-v6-c-compass.pf-m-dock {
13045
+ .pf-v6-c-compass.pf-m-docked {
13050
13046
  grid-template-areas: "dock main";
13051
13047
  grid-template-rows: auto;
13052
13048
  grid-template-columns: auto 1fr;
13053
13049
  align-items: stretch;
13054
13050
  padding: 0;
13055
13051
  }
13056
- .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
13052
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
13057
13053
  padding: var(--pf-v6-c-compass--Padding);
13058
13054
  }
13059
13055
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
@@ -21461,17 +21457,17 @@ ul.pf-v6-c-list {
21461
21457
  .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
21462
21458
  pointer-events: none;
21463
21459
  }
21464
- .pf-v6-c-menu-toggle.pf-m-dock {
21460
+ .pf-v6-c-menu-toggle.pf-m-docked {
21465
21461
  justify-content: flex-start;
21466
21462
  width: 100%;
21467
21463
  }
21468
21464
  @media (min-width: 62rem) {
21469
- .pf-v6-c-menu-toggle.pf-m-dock {
21465
+ .pf-v6-c-menu-toggle.pf-m-docked {
21470
21466
  justify-content: center;
21471
21467
  width: auto;
21472
21468
  }
21473
- .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__text,
21474
- .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__controls {
21469
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
21470
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
21475
21471
  display: none;
21476
21472
  }
21477
21473
  }
@@ -23117,7 +23113,7 @@ ul.pf-v6-c-list {
23117
23113
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
23118
23114
  }
23119
23115
  }
23120
- .pf-v6-c-page.pf-m-dock {
23116
+ .pf-v6-c-page.pf-m-docked {
23121
23117
  --pf-v6-c-page--masthead--main-container--GridArea: main;
23122
23118
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
23123
23119
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
@@ -23126,7 +23122,7 @@ ul.pf-v6-c-list {
23126
23122
  grid-template-columns: auto 1fr;
23127
23123
  }
23128
23124
  @media (min-width: 62rem) {
23129
- .pf-v6-c-page.pf-m-dock {
23125
+ .pf-v6-c-page.pf-m-docked {
23130
23126
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart);
23131
23127
  --pf-v6-c-page__main-container--MarginInlineStart: 0;
23132
23128
  grid-template-areas: "dock main";
@@ -23134,7 +23130,7 @@ ul.pf-v6-c-list {
23134
23130
  grid-template-columns: auto 1fr;
23135
23131
  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
23136
23132
  }
23137
- .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
23133
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
23138
23134
  display: none;
23139
23135
  }
23140
23136
  }
@@ -23193,7 +23189,7 @@ ul.pf-v6-c-list {
23193
23189
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
23194
23190
  grid-area: header;
23195
23191
  }
23196
- .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
23192
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
23197
23193
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
23198
23194
  }
23199
23195