@patternfly/patternfly 5.3.0 → 5.4.0-prerelease.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 (17) hide show
  1. package/components/Pagination/pagination.css +7 -4
  2. package/components/Pagination/pagination.scss +9 -8
  3. package/docs/components/Pagination/examples/Pagination.md +182 -708
  4. package/docs/components/Toolbar/examples/Toolbar.md +30 -98
  5. package/docs/components/TreeView/examples/TreeView.md +615 -45
  6. package/docs/demos/CardView/examples/CardView.md +30 -98
  7. package/docs/demos/DataList/examples/DataList.md +120 -392
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +90 -302
  9. package/docs/demos/Table/examples/Table.md +345 -1127
  10. package/docs/demos/Toolbar/examples/Toolbar.md +120 -392
  11. package/package.json +5 -5
  12. package/patternfly-no-globals.css +7 -4
  13. package/patternfly-theme-dark-unversioned.css +7 -4
  14. package/patternfly.css +7 -4
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/docs/components/Pagination/examples/Pagination.css +0 -3
package/components/Pagination/pagination.css CHANGED
@@ -16,7 +16,6 @@
16
16
  --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
17
17
  --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
18
18
  --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
19
- --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
20
19
  --pf-v5-c-pagination__nav--Display: none;
21
20
  --pf-v5-c-pagination--m-display-summary__nav--Display: none;
22
21
  --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
@@ -60,9 +59,13 @@
60
59
  --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
61
60
  --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
62
61
  --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
62
+ --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
63
+ --pf-v5-c-pagination--c-menu-toggle--Display--base: inline-flex;
63
64
  --pf-v5-c-pagination--c-menu-toggle--Display: none;
65
+ --pf-v5-c-pagination--c-menu-toggle--md--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
64
66
  --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
65
- --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
67
+ --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
68
+ --pf-v5-c-pagination--m-bottom--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
66
69
  display: flex;
67
70
  flex-wrap: wrap;
68
71
  align-items: center;
@@ -79,7 +82,7 @@
79
82
  --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
80
83
  --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
81
84
  --pf-v5-c-pagination--m-bottom--BoxShadow: none;
82
- --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
85
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--md--Display);
83
86
  --pf-v5-c-pagination__nav--Display: inline-flex;
84
87
  --pf-v5-c-pagination__total-items--Display: none;
85
88
  }
@@ -129,7 +132,7 @@
129
132
  }
130
133
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
131
134
  position: absolute;
132
- display: block;
135
+ display: var(--pf-v5-c-pagination--m-bottom--c-menu-toggle--Display);
133
136
  }
134
137
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
135
138
  display: flex;
package/components/Pagination/pagination.scss CHANGED
@@ -17,9 +17,6 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
17
17
  --#{$pagination}--m-bottom--child--md--MarginRight: var(--#{$pf-global}--spacer--lg);
18
18
  --#{$pagination}--m-compact--child--MarginRight: var(--#{$pf-global}--spacer--sm);
19
19
 
20
- // dropdown
21
- --#{$pagination}--c-menu-toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
22
-
23
20
  // nav
24
21
  --#{$pagination}__nav--Display: none;
25
22
  --#{$pagination}--m-display-summary__nav--Display: none;
@@ -75,10 +72,14 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
75
72
  --#{$pagination}--m-bottom--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
76
73
  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
77
74
 
78
- // options menu
75
+ // per page menu
76
+ --#{$pagination}--c-menu-toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
77
+ --#{$pagination}--c-menu-toggle--Display--base: inline-flex;
79
78
  --#{$pagination}--c-menu-toggle--Display: none;
79
+ --#{$pagination}--c-menu-toggle--md--Display: var(--#{$pagination}--c-menu-toggle--Display--base);
80
80
  --#{$pagination}--m-display-summary--c-menu-toggle--Display: none;
81
- --#{$pagination}--m-display-full--c-menu-toggle--Display: inline-flex;
81
+ --#{$pagination}--m-display-full--c-menu-toggle--Display: var(--#{$pagination}--c-menu-toggle--Display--base);
82
+ --#{$pagination}--m-bottom--c-menu-toggle--Display: var(--#{$pagination}--c-menu-toggle--Display--base);
82
83
 
83
84
  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
84
85
  --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop);
@@ -88,7 +89,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
88
89
  --#{$pagination}--m-bottom--child--MarginRight: var(--#{$pagination}--m-bottom--child--md--MarginRight);
89
90
  --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: 0;
90
91
  --#{$pagination}--m-bottom--BoxShadow: none;
91
- --#{$pagination}--c-menu-toggle--Display: inline-flex;
92
+ --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--c-menu-toggle--md--Display);
92
93
  --#{$pagination}__nav--Display: inline-flex;
93
94
  --#{$pagination}__total-items--Display: none;
94
95
  }
@@ -135,7 +136,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
135
136
  }
136
137
 
137
138
  position: sticky;
138
- inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
139
+ inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
139
140
  justify-content: center;
140
141
  background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
141
142
  box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
@@ -156,7 +157,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
156
157
 
157
158
  .#{$menu-toggle} {
158
159
  position: absolute;
159
- display: block;
160
+ display: var(--#{$pagination}--m-bottom--c-menu-toggle--Display);
160
161
  }
161
162
 
162
163
  .#{$pagination}__nav {