@patternfly/patternfly 4.205.1 → 4.206.2

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 (54) hide show
  1. package/base/_common.scss +9 -0
  2. package/base/patternfly-common.css +7 -0
  3. package/components/Page/page.css +50 -0
  4. package/components/Page/page.scss +20 -6
  5. package/components/TreeView/tree-view.css +6 -12
  6. package/components/TreeView/tree-view.scss +4 -8
  7. package/docs/components/AppLauncher/examples/application-launcher.md +69 -22
  8. package/docs/components/DataList/examples/DataList.md +30 -30
  9. package/docs/components/DatePicker/examples/DatePicker.md +4 -4
  10. package/docs/components/LabelGroup/examples/LabelGroup.md +19 -19
  11. package/docs/components/LogViewer/examples/LogViewer.md +46 -37
  12. package/docs/components/Masthead/examples/masthead.md +1 -1
  13. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +54 -27
  14. package/docs/components/Nav/examples/Navigation.md +12 -6
  15. package/docs/components/Pagination/examples/Pagination.md +47 -14
  16. package/docs/components/Popover/examples/Popover.md +36 -24
  17. package/docs/components/SearchInput/examples/SearchInput.md +12 -12
  18. package/docs/components/Select/examples/Select.md +8 -8
  19. package/docs/components/Table/examples/Table.md +1 -1
  20. package/docs/components/Tabs/examples/Tabs.md +64 -70
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -60
  22. package/docs/components/Tile/examples/Tile.md +0 -2
  23. package/docs/components/TreeView/examples/TreeView.md +257 -217
  24. package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
  25. package/docs/demos/Alert/examples/Alert.md +3 -3
  26. package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
  27. package/docs/demos/Banner/examples/Banner.md +2 -2
  28. package/docs/demos/CardView/examples/CardView.md +1 -1
  29. package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
  30. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  31. package/docs/demos/DataList/examples/DataList.md +4 -4
  32. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
  33. package/docs/demos/Drawer/examples/Drawer.md +5 -5
  34. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
  35. package/docs/demos/Masthead/examples/Masthead.md +2 -2
  36. package/docs/demos/Modal/examples/Modal.md +6 -6
  37. package/docs/demos/Nav/examples/Nav.md +8 -8
  38. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  39. package/docs/demos/Page/examples/Page.md +8 -8
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
  41. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  42. package/docs/demos/Table/examples/Table.md +14 -14
  43. package/docs/demos/Tabs/examples/Tabs.md +8 -8
  44. package/docs/demos/Toolbar/examples/Toolbar.md +55 -37
  45. package/docs/demos/Wizard/examples/Wizard.md +8 -8
  46. package/docs/layouts/Flex/examples/Flex.md +1 -1
  47. package/docs/layouts/Grid/examples/Grid.md +1 -1
  48. package/package.json +1 -1
  49. package/patternfly-base-no-reset.css +7 -0
  50. package/patternfly-base.css +7 -0
  51. package/patternfly-no-reset.css +63 -12
  52. package/patternfly.css +63 -12
  53. package/patternfly.min.css +1 -1
  54. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -754,6 +754,13 @@ html {
754
754
  white-space: nowrap;
755
755
  border: 0;
756
756
  }
757
+ .pf-screen-reader.pf-m-full-size {
758
+ width: 100%;
759
+ height: 100%;
760
+ }
761
+ .pf-screen-reader.pf-m-absolute {
762
+ position: absolute;
763
+ }
757
764
 
758
765
  .pf-m-tabular-nums {
759
766
  font-variant-numeric: tabular-nums;
@@ -22025,6 +22032,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22025
22032
  .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
22026
22033
  padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22027
22034
  }
22035
+ @media (min-height: 0) {
22036
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
22037
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22038
+ }
22039
+ }
22040
+ @media (min-height: 40rem) {
22041
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
22042
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22043
+ }
22044
+ }
22045
+ @media (min-height: 48rem) {
22046
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
22047
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22048
+ }
22049
+ }
22050
+ @media (min-height: 60rem) {
22051
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
22052
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22053
+ }
22054
+ }
22055
+ @media (min-height: 80rem) {
22056
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
22057
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22058
+ }
22059
+ }
22028
22060
 
22029
22061
  .pf-c-page__main-subnav {
22030
22062
  background-color: var(--pf-c-page__main-subnav--BackgroundColor);
@@ -22050,6 +22082,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22050
22082
  .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
22051
22083
  --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22052
22084
  }
22085
+ @media (min-height: 0) {
22086
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
22087
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22088
+ }
22089
+ }
22090
+ @media (min-height: 40rem) {
22091
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
22092
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22093
+ }
22094
+ }
22095
+ @media (min-height: 48rem) {
22096
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
22097
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22098
+ }
22099
+ }
22100
+ @media (min-height: 60rem) {
22101
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
22102
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22103
+ }
22104
+ }
22105
+ @media (min-height: 80rem) {
22106
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
22107
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22108
+ }
22109
+ }
22053
22110
 
22054
22111
  .pf-c-page__main-tabs {
22055
22112
  padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
@@ -31426,20 +31483,14 @@ svg.pf-c-spinner.pf-m-xl {
31426
31483
  .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
31427
31484
  --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
31428
31485
  }
31429
- .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle {
31430
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
31431
- }
31432
- .pf-c-tree-view__node:hover,
31433
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:hover {
31434
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
31486
+ .pf-c-tree-view__node:not(.pf-m-selectable):hover, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:hover {
31487
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
31435
31488
  }
31436
- .pf-c-tree-view__node:focus,
31437
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:focus {
31438
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
31489
+ .pf-c-tree-view__node:not(.pf-m-selectable):focus, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:focus {
31490
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
31439
31491
  }
31440
- .pf-c-tree-view__node:active,
31441
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:active {
31442
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
31492
+ .pf-c-tree-view__node:not(.pf-m-selectable):active, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:active {
31493
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
31443
31494
  }
31444
31495
 
31445
31496
  .pf-c-tree-view__node-container {
package/patternfly.css CHANGED
@@ -754,6 +754,13 @@ html {
754
754
  white-space: nowrap;
755
755
  border: 0;
756
756
  }
757
+ .pf-screen-reader.pf-m-full-size {
758
+ width: 100%;
759
+ height: 100%;
760
+ }
761
+ .pf-screen-reader.pf-m-absolute {
762
+ position: absolute;
763
+ }
757
764
 
758
765
  .pf-m-tabular-nums {
759
766
  font-variant-numeric: tabular-nums;
@@ -22152,6 +22159,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22152
22159
  .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
22153
22160
  padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22154
22161
  }
22162
+ @media (min-height: 0) {
22163
+ .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
22164
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22165
+ }
22166
+ }
22167
+ @media (min-height: 40rem) {
22168
+ .pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
22169
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22170
+ }
22171
+ }
22172
+ @media (min-height: 48rem) {
22173
+ .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
22174
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22175
+ }
22176
+ }
22177
+ @media (min-height: 60rem) {
22178
+ .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
22179
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22180
+ }
22181
+ }
22182
+ @media (min-height: 80rem) {
22183
+ .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
22184
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
22185
+ }
22186
+ }
22155
22187
 
22156
22188
  .pf-c-page__main-subnav {
22157
22189
  background-color: var(--pf-c-page__main-subnav--BackgroundColor);
@@ -22177,6 +22209,31 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22177
22209
  .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
22178
22210
  --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22179
22211
  }
22212
+ @media (min-height: 0) {
22213
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
22214
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22215
+ }
22216
+ }
22217
+ @media (min-height: 40rem) {
22218
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
22219
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22220
+ }
22221
+ }
22222
+ @media (min-height: 48rem) {
22223
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
22224
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22225
+ }
22226
+ }
22227
+ @media (min-height: 60rem) {
22228
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
22229
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22230
+ }
22231
+ }
22232
+ @media (min-height: 80rem) {
22233
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
22234
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
22235
+ }
22236
+ }
22180
22237
 
22181
22238
  .pf-c-page__main-tabs {
22182
22239
  padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
@@ -31553,20 +31610,14 @@ svg.pf-c-spinner.pf-m-xl {
31553
31610
  .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
31554
31611
  --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
31555
31612
  }
31556
- .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle {
31557
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
31558
- }
31559
- .pf-c-tree-view__node:hover,
31560
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:hover {
31561
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
31613
+ .pf-c-tree-view__node:not(.pf-m-selectable):hover, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:hover {
31614
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
31562
31615
  }
31563
- .pf-c-tree-view__node:focus,
31564
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:focus {
31565
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
31616
+ .pf-c-tree-view__node:not(.pf-m-selectable):focus, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:focus {
31617
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
31566
31618
  }
31567
- .pf-c-tree-view__node:active,
31568
- .pf-c-tree-view__node .pf-c-tree-view__node-toggle:active {
31569
- --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
31619
+ .pf-c-tree-view__node:not(.pf-m-selectable):active, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:active {
31620
+ --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
31570
31621
  }
31571
31622
 
31572
31623
  .pf-c-tree-view__node-container {