@patternfly/patternfly 5.0.0-prerelease.2 → 5.0.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 (42) hide show
  1. package/base/_common.scss +7 -0
  2. package/base/_variables.scss +0 -7
  3. package/base/patternfly-common.css +6 -0
  4. package/base/patternfly-variables.css +0 -6
  5. package/components/Masthead/masthead.css +2 -6
  6. package/components/Masthead/masthead.scss +1 -7
  7. package/components/Masthead/themes/dark/masthead.scss +1 -0
  8. package/components/MenuToggle/menu-toggle.css +13 -11
  9. package/components/MenuToggle/menu-toggle.scss +14 -12
  10. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  11. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  12. package/docs/demos/Alert/examples/Alert.md +126 -2322
  13. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  14. package/docs/demos/Banner/examples/Banner.md +84 -1588
  15. package/docs/demos/CardView/examples/CardView.md +42 -774
  16. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  17. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  18. package/docs/demos/DataList/examples/DataList.md +191 -3119
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  20. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  23. package/docs/demos/Modal/examples/Modal.md +252 -4644
  24. package/docs/demos/Nav/examples/Nav.md +336 -6192
  25. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  26. package/docs/demos/Page/examples/Page.md +378 -6966
  27. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  28. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  29. package/docs/demos/Table/examples/Table.md +752 -11732
  30. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  31. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  32. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  33. package/package.json +1 -1
  34. package/patternfly-base-no-globals-theme-dark-unversioned.css +6 -6
  35. package/patternfly-base-no-globals.css +6 -6
  36. package/patternfly-base-theme-dark-unversioned.css +6 -6
  37. package/patternfly-base.css +6 -6
  38. package/patternfly-no-globals.css +21 -23
  39. package/patternfly-theme-dark-unversioned.css +21 -23
  40. package/patternfly.css +21 -23
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
package/base/_common.scss CHANGED
@@ -16,3 +16,10 @@
16
16
  .#{$pf-prefix}m-tabular-nums {
17
17
  font-variant-numeric: tabular-nums;
18
18
  }
19
+
20
+ // Variable font opt-in
21
+ .#{$pf-prefix}m-vf-font {
22
+ --#{$pf-global}--FontFamily--text: var(--#{$pf-global}--FontFamily--text--vf);
23
+ --#{$pf-global}--FontFamily--heading: var(--#{$pf-global}--FontFamily--heading--vf);
24
+ --#{$pf-global}--FontFamily--monospace: var(--#{$pf-global}--FontFamily--monospace--vf);
25
+ }
package/base/_variables.scss CHANGED
@@ -280,13 +280,6 @@
280
280
  --#{$pf-global}--target-size--MinHeight: #{$pf-v5-global--target-size--MinHeight};
281
281
  }
282
282
 
283
- // Variable font opt-in
284
- .pf-m-vf-font {
285
- --#{$pf-global}--FontFamily--text: var(--#{$pf-global}--FontFamily--text--vf);
286
- --#{$pf-global}--FontFamily--heading: var(--#{$pf-global}--FontFamily--heading--vf);
287
- --#{$pf-global}--FontFamily--monospace: var(--#{$pf-global}--FontFamily--monospace--vf);
288
- }
289
-
290
283
  // stylelint-disable no-invalid-position-at-import-rule
291
284
  @import "./themes/dark/variables";
292
285
 
package/base/patternfly-common.css CHANGED
@@ -17,4 +17,10 @@
17
17
 
18
18
  .pf-v5-m-tabular-nums {
19
19
  font-variant-numeric: tabular-nums;
20
+ }
21
+
22
+ .pf-v5-m-vf-font {
23
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
24
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
25
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
20
26
  }
package/base/patternfly-variables.css CHANGED
@@ -230,12 +230,6 @@
230
230
  --pf-v5-global--target-size--MinHeight: 44px;
231
231
  }
232
232
 
233
- .pf-m-vf-font {
234
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
235
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
236
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
237
- }
238
-
239
233
  :where(.pf-v5-theme-dark) {
240
234
  --pf-v5-global--palette--black-50: #e0e0e0;
241
235
  --pf-v5-global--palette--black-100: #c6c7c8;
package/components/Masthead/masthead.css CHANGED
@@ -87,8 +87,6 @@
87
87
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
88
88
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
89
89
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
90
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
91
- --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
92
90
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
93
91
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
94
92
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
@@ -193,10 +191,7 @@
193
191
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
194
192
  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
195
193
  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
196
- }
197
- .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-full-height {
198
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
199
- --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
194
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
200
195
  }
201
196
  .pf-v5-c-masthead .pf-v5-c-context-selector {
202
197
  --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
@@ -664,6 +659,7 @@
664
659
 
665
660
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
666
661
  --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
662
+ --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
667
663
  color: var(--pf-v5-global--Color--100);
668
664
  }
669
665
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
package/components/Masthead/masthead.scss CHANGED
@@ -135,8 +135,6 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
135
135
  --#{$masthead}--c-menu-toggle--before--BorderTopColor: var(--#{$masthead}--item-border-color--base);
136
136
  --#{$masthead}--c-menu-toggle--before--BorderRightColor: var(--#{$masthead}--item-border-color--base);
137
137
  --#{$masthead}--c-menu-toggle--before--BorderLeftColor: var(--#{$masthead}--item-border-color--base);
138
- --#{$masthead}--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
139
- --#{$masthead}--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
140
138
 
141
139
  // Toolbar
142
140
  --#{$masthead}--c-toolbar--BackgroundColor: var(--#{$masthead}--BackgroundColor);
@@ -225,11 +223,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
225
223
  --#{$menu-toggle}--before--BorderTopColor: var(--#{$masthead}--c-menu-toggle--before--BorderTopColor);
226
224
  --#{$menu-toggle}--before--BorderRightColor: var(--#{$masthead}--c-menu-toggle--before--BorderRightColor);
227
225
  --#{$menu-toggle}--before--BorderLeftColor: var(--#{$masthead}--c-menu-toggle--before--BorderLeftColor);
228
-
229
- &.pf-m-full-height {
230
- --#{$menu-toggle}--before--BorderTopColor: var(--#{$masthead}--c-menu-toggle--m-full-height--before--BorderTopColor);
231
- --#{$menu-toggle}--before--BorderBottomColor: var(--#{$masthead}--c-menu-toggle--m-full-height--before--BorderBottomColor);
232
- }
226
+ --#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth: 0;
233
227
  }
234
228
 
235
229
  .#{$context-selector} {
package/components/Masthead/themes/dark/masthead.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @mixin pf-v5-theme-dark-masthead() {
4
4
  .#{$masthead} {
5
5
  --#{$masthead}--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
6
+ --#{$masthead}--item-border-color--base: var(--#{$pf-global}--BorderColor--100);
6
7
 
7
8
  .#{$toolbar} {
8
9
  --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -77,6 +77,7 @@
77
77
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
78
78
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
79
79
  --pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
80
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
80
81
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
81
82
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
82
83
  --pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -197,6 +198,17 @@
197
198
  display: inline-block;
198
199
  color: var(--pf-v5-c-menu-toggle--m-plain--Color);
199
200
  }
201
+ .pf-v5-c-menu-toggle.pf-m-full-height {
202
+ --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
203
+ --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
204
+ --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
205
+ --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth);
206
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
207
+ --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
208
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
209
+ --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
210
+ height: 100%;
211
+ }
200
212
  .pf-v5-c-menu-toggle:hover {
201
213
  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
202
214
  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
@@ -235,16 +247,6 @@
235
247
  .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle.pf-m-plain::before, .pf-v5-c-menu-toggle.pf-m-plain::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
236
248
  border: 0;
237
249
  }
238
- .pf-v5-c-menu-toggle.pf-m-full-height {
239
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
240
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
241
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
242
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
243
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
244
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
245
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
246
- height: 100%;
247
- }
248
250
  .pf-v5-c-menu-toggle.pf-m-typeahead {
249
251
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
250
252
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
@@ -419,6 +421,6 @@
419
421
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
420
422
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
421
423
  }
422
- :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
424
+ :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain, :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-full-height {
423
425
  background: transparent;
424
426
  }
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -110,6 +110,7 @@
110
110
  --#{$menu-toggle}--m-full-height--PaddingRight: var(--#{$pf-global}--spacer--lg);
111
111
  --#{$menu-toggle}--m-full-height--PaddingLeft: var(--#{$pf-global}--spacer--lg);
112
112
  --#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth: 0;
113
+ --#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
113
114
  --#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
114
115
  --#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
115
116
  --#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
@@ -264,6 +265,19 @@
264
265
  }
265
266
  }
266
267
 
268
+ &.pf-m-full-height {
269
+ --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-full-height--PaddingRight);
270
+ --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-full-height--PaddingLeft);
271
+ --#{$menu-toggle}--before--BorderTopWidth: var(--#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth);
272
+ --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth);
273
+ --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth);
274
+ --#{$menu-toggle}--hover--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth);
275
+ --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth);
276
+ --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--active--after--BorderBottomWidth);
277
+
278
+ height: 100%;
279
+ }
280
+
267
281
  &:hover {
268
282
  --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--hover--BackgroundColor);
269
283
  --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--hover--after--BorderBottomWidth);
@@ -316,18 +330,6 @@
316
330
  }
317
331
  }
318
332
 
319
- &.pf-m-full-height {
320
- --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-full-height--PaddingRight);
321
- --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-full-height--PaddingLeft);
322
- --#{$menu-toggle}--before--BorderTopWidth: var(--#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth);
323
- --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth);
324
- --#{$menu-toggle}--hover--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth);
325
- --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth);
326
- --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--active--after--BorderBottomWidth);
327
-
328
- height: 100%;
329
- }
330
-
331
333
  &.pf-m-typeahead {
332
334
  --#{$menu-toggle}__button__controls--MarginRight: var(--#{$menu-toggle}--m-typeahead__controls--MarginRight);
333
335
  --#{$menu-toggle}__button__controls--MarginLeft: var(--#{$menu-toggle}--m-typeahead__controls--MarginLeft);
package/components/MenuToggle/themes/dark/menu-toggle.scss CHANGED
@@ -19,7 +19,8 @@
19
19
  --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--300);
20
20
  --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
21
21
 
22
- &.pf-m-plain {
22
+ &.pf-m-plain,
23
+ &.pf-m-full-height {
23
24
  background: transparent;
24
25
  }
25
26
  }