@patternfly/patternfly 6.0.0-alpha.62 → 6.0.0-alpha.64

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 (49) hide show
  1. package/components/ActionList/action-list.css +18 -17
  2. package/components/ActionList/action-list.scss +26 -16
  3. package/components/Button/button.css +4 -9
  4. package/components/Button/button.scss +4 -9
  5. package/components/Drawer/drawer.css +113 -113
  6. package/components/Drawer/drawer.scss +135 -136
  7. package/components/Masthead/masthead.css +15 -29
  8. package/components/Masthead/masthead.scss +20 -36
  9. package/components/OverflowMenu/overflow-menu.css +17 -47
  10. package/components/OverflowMenu/overflow-menu.scss +27 -65
  11. package/components/Pagination/pagination.css +6 -3
  12. package/components/Pagination/pagination.scss +4 -3
  13. package/components/Toolbar/toolbar.css +2525 -1040
  14. package/components/Toolbar/toolbar.scss +232 -534
  15. package/docs/components/ActionList/examples/ActionList.md +73 -22
  16. package/docs/components/Drawer/examples/Drawer.md +294 -256
  17. package/docs/components/LogViewer/examples/LogViewer.md +50 -50
  18. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  19. package/docs/components/Toolbar/examples/Toolbar.md +374 -419
  20. package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
  21. package/docs/demos/Alert/examples/Alert.md +6 -6
  22. package/docs/demos/BackToTop/examples/BackToTop.md +2 -2
  23. package/docs/demos/Banner/examples/Banner.md +4 -4
  24. package/docs/demos/CardView/examples/CardView.md +3 -3
  25. package/docs/demos/ContextSelector/examples/ContextSelector.md +7 -7
  26. package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
  27. package/docs/demos/DataList/examples/DataList.md +11 -11
  28. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -6
  29. package/docs/demos/Drawer/examples/Drawer.md +40 -36
  30. package/docs/demos/JumpLinks/examples/JumpLinks.md +42 -38
  31. package/docs/demos/Masthead/examples/Masthead.md +21 -21
  32. package/docs/demos/Modal/examples/Modal.md +12 -12
  33. package/docs/demos/Nav/examples/Nav.md +12 -12
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -10
  35. package/docs/demos/Page/examples/Page.md +18 -18
  36. package/docs/demos/Page/examples/Penta.md +2 -2
  37. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +19 -19
  38. package/docs/demos/Skeleton/examples/Skeleton.md +2 -2
  39. package/docs/demos/Table/examples/Table.md +42 -45
  40. package/docs/demos/Tabs/examples/Tabs.md +13 -13
  41. package/docs/demos/Toolbar/examples/Toolbar.md +13 -13
  42. package/docs/demos/Wizard/examples/Wizard.md +18 -18
  43. package/package.json +1 -1
  44. package/patternfly-no-globals.css +2695 -1235
  45. package/patternfly-theme-dark-unversioned.css +2695 -1235
  46. package/patternfly.css +2695 -1235
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/components/Drawer/themes/dark/drawer.scss +0 -13
package/components/OverflowMenu/overflow-menu.css CHANGED
@@ -1,66 +1,36 @@
1
+ :root {
2
+ --pf-v5-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
3
+ --pf-v5-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
5
+ --pf-v5-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
6
+ }
7
+
1
8
  .pf-v5-c-overflow-menu {
2
- --pf-v5-c-overflow-menu--spacer--base: var(--pf-v5-global--spacer--md);
3
- --pf-v5-c-overflow-menu--spacer: var(--pf-v5-global--spacer--sm);
4
- --pf-v5-c-overflow-menu__group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
5
- --pf-v5-c-overflow-menu__item--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
6
- --pf-v5-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
7
- --pf-v5-c-overflow-menu__group--m-button-group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
8
- --pf-v5-c-overflow-menu__group--m-button-group--space-items: var(--pf-v5-global--spacer--sm);
9
- --pf-v5-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
10
- --pf-v5-c-overflow-menu__group--m-icon-button-group--space-items: 0;
11
9
  display: inline-flex;
12
- align-items: center;
10
+ column-gap: var(--pf-v5-c-overflow-menu--ColumnGap);
13
11
  }
14
12
 
15
- .pf-v5-c-overflow-menu__content {
13
+ .pf-v5-c-overflow-menu__content,
14
+ .pf-v5-c-overflow-menu__group {
16
15
  display: flex;
17
- align-items: center;
16
+ align-items: start;
18
17
  }
19
18
 
20
19
  .pf-v5-c-overflow-menu__group {
21
- --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--spacer);
22
- display: flex;
23
- align-items: center;
20
+ column-gap: var(--pf-v5-c-overflow-menu__group--ColumnGap);
24
21
  }
25
22
  .pf-v5-c-overflow-menu__group.pf-m-button-group {
26
- --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-button-group--spacer);
27
- }
28
- .pf-v5-c-overflow-menu__group.pf-m-button-group > * {
29
- --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-button-group--space-items);
23
+ column-gap: var(--pf-v5-c-overflow-menu__group--m-button-group--ColumnGap);
30
24
  }
31
25
  .pf-v5-c-overflow-menu__group.pf-m-icon-button-group {
32
- --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer);
33
- }
34
- .pf-v5-c-overflow-menu__group.pf-m-icon-button-group > * {
35
- --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items);
26
+ column-gap: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--ColumnGap);
36
27
  }
37
28
 
38
29
  .pf-v5-c-overflow-menu__item {
39
- --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__item--spacer);
30
+ column-gap: var(--pf-v5-c-overflow-menu__item--ColumnGap, var(--pf-v5-c-overflow-menu--ColumnGap));
40
31
  }
41
32
 
42
33
  .pf-v5-c-overflow-menu__content,
43
- .pf-v5-c-overflow-menu__control,
44
- .pf-v5-c-overflow-menu__group,
45
- .pf-v5-c-overflow-menu__item {
46
- margin-inline-end: var(--pf-v5-c-overflow-menu--spacer);
47
- }
48
- .pf-v5-c-overflow-menu__content:last-child,
49
- .pf-v5-c-overflow-menu__control:last-child,
50
- .pf-v5-c-overflow-menu__group:last-child,
51
- .pf-v5-c-overflow-menu__item:last-child {
52
- --pf-v5-c-overflow-menu--spacer: 0;
53
- }
54
-
55
- .pf-v5-c-overflow-menu > .pf-v5-c-divider,
56
- .pf-v5-c-overflow-menu__group > .pf-v5-c-divider {
57
- --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu--c-divider--m-vertical--spacer);
58
- }
59
- .pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical,
60
- .pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical {
61
- margin-inline-end: var(--pf-v5-c-overflow-menu--spacer);
62
- }
63
- .pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical:last-child,
64
- .pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical:last-child {
65
- --pf-v5-c-overflow-menu--spacer: 0;
34
+ .pf-v5-c-overflow-menu__control {
35
+ column-gap: var(--pf-v5-c-overflow-menu--ColumnGap);
66
36
  }
package/components/OverflowMenu/overflow-menu.scss CHANGED
@@ -1,89 +1,51 @@
1
- // @debug $overflow-menu; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
1
+ :root {
2
+ --#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
2
3
 
3
- .#{$overflow-menu} {
4
- // Base spacer - shared value
5
- --#{$overflow-menu}--spacer--base: var(--#{$pf-global}--spacer--md);
6
-
7
- // Spacer values
8
- --#{$overflow-menu}--spacer: var(--#{$pf-global}--spacer--sm);
9
- --#{$overflow-menu}__group--spacer: var(--#{$overflow-menu}--spacer--base);
10
- --#{$overflow-menu}__item--spacer: var(--#{$overflow-menu}--spacer--base);
11
- --#{$overflow-menu}--c-divider--m-vertical--spacer: var(--#{$overflow-menu}--spacer--base);
4
+ // * Overflow menu group
5
+ --#{$overflow-menu}__group--ColumnGap: var(--pf-t--global--spacer--md);
12
6
 
13
- // Button group
14
- --#{$overflow-menu}__group--m-button-group--spacer: var(--#{$overflow-menu}--spacer--base);
15
- --#{$overflow-menu}__group--m-button-group--space-items: var(--#{$pf-global}--spacer--sm);
7
+ // * Overflow menu button group
8
+ --#{$overflow-menu}__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
16
9
 
17
- // Icon button group
18
- --#{$overflow-menu}__group--m-icon-button-group--spacer: var(--#{$overflow-menu}--spacer--base);
19
- --#{$overflow-menu}__group--m-icon-button-group--space-items: 0;
10
+ // * Overflow menu icon button group
11
+ --#{$overflow-menu}__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
12
+ }
20
13
 
14
+ // - Overflow menu
15
+ .#{$overflow-menu} {
21
16
  display: inline-flex;
22
- align-items: center;
17
+ column-gap: var(--#{$overflow-menu}--ColumnGap);
23
18
  }
24
19
 
25
- // Content
26
- .#{$overflow-menu}__content {
20
+ // - Overflow menu content - Overflow menu group
21
+ .#{$overflow-menu}__content,
22
+ .#{$overflow-menu}__group {
27
23
  display: flex;
28
- align-items: center;
24
+ align-items: start;
29
25
  }
30
26
 
31
- // Group
27
+ // - Overflow menu group
32
28
  .#{$overflow-menu}__group {
33
- --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--spacer);
34
-
35
- display: flex;
36
- align-items: center;
29
+ column-gap: var(--#{$overflow-menu}__group--ColumnGap);
37
30
 
38
- // Button group
31
+ // - Overflow menu button group
39
32
  &.pf-m-button-group {
40
- --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-button-group--spacer);
41
-
42
- > * {
43
- --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-button-group--space-items);
44
- }
33
+ column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap);
45
34
  }
46
35
 
47
- // Icon button group
36
+ // - Overflow menu icon button group
48
37
  &.pf-m-icon-button-group {
49
- --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-icon-button-group--spacer);
50
-
51
- > * {
52
- --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-icon-button-group--space-items);
53
- }
38
+ column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap);
54
39
  }
55
40
  }
56
41
 
57
- // Item
42
+ // - Oveflow menu item
58
43
  .#{$overflow-menu}__item {
59
- // reset spacer
60
- --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__item--spacer);
44
+ column-gap: var(--#{$overflow-menu}__item--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
61
45
  }
62
46
 
47
+ // - Overflow menu content - Overflow menu control
63
48
  .#{$overflow-menu}__content,
64
- .#{$overflow-menu}__control,
65
- .#{$overflow-menu}__group,
66
- .#{$overflow-menu}__item {
67
- margin-inline-end: var(--#{$overflow-menu}--spacer);
68
-
69
- &:last-child {
70
- --#{$overflow-menu}--spacer: 0;
71
- }
72
- }
73
-
74
- // Divider
75
- .#{$overflow-menu},
76
- .#{$overflow-menu}__group {
77
- // set this var here so specificity is 20
78
- > .#{$divider} {
79
- --#{$overflow-menu}--spacer: var(--#{$overflow-menu}--c-divider--m-vertical--spacer);
80
- }
81
-
82
- > .#{$divider}.pf-m-vertical {
83
- margin-inline-end: var(--#{$overflow-menu}--spacer);
84
-
85
- &:last-child {
86
- --#{$overflow-menu}--spacer: 0;
87
- }
88
- }
49
+ .#{$overflow-menu}__control {
50
+ column-gap: var(--#{$overflow-menu}--ColumnGap);
89
51
  }
package/components/Pagination/pagination.css CHANGED
@@ -6,7 +6,8 @@
6
6
  appearance: none;
7
7
  }
8
8
 
9
- :root {
9
+ :where(:root),
10
+ :where(.pf-v5-c-pagination) {
10
11
  --pf-v5-c-pagination--inset: 0;
11
12
  --pf-v5-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
12
13
  --pf-v5-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--md);
@@ -46,7 +47,8 @@
46
47
  --pf-v5-c-pagination--m-display-full__page-menu--Display: inline-flex;
47
48
  }
48
49
  @media screen and (min-width: 768px) {
49
- :root {
50
+ :where(:root),
51
+ :where(.pf-v5-c-pagination) {
50
52
  --pf-v5-c-pagination--m-bottom--BoxShadow: none;
51
53
  --pf-v5-c-pagination__page-menu--Display: inline-flex;
52
54
  --pf-v5-c-pagination__nav--Display: inline-flex;
@@ -54,7 +56,8 @@
54
56
  }
55
57
  }
56
58
  @media screen and (min-width: 1200px) {
57
- :root {
59
+ :where(:root),
60
+ :where(.pf-v5-c-pagination) {
58
61
  --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
59
62
  --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
60
63
  --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);
package/components/Pagination/pagination.scss CHANGED
@@ -2,14 +2,15 @@
2
2
  $pf-v5-c-pagination--breakpoint-map: build-breakpoint-map();
3
3
  $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
4
4
 
5
- :root {
5
+ :where(:root),
6
+ :where(.#{$pagination}) {
6
7
  --#{$pagination}--inset: 0;
7
8
  --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
8
-
9
+
9
10
  // Page insets
10
11
  --#{$pagination}--m-page-insets--inset: var(--pf-t--global--spacer--md);
11
12
  --#{$pagination}--m-page-insets--xl--inset: var(--pf-t--global--spacer--lg);
12
-
13
+
13
14
  // nav
14
15
  --#{$pagination}__nav--Display: none;
15
16
  --#{$pagination}--m-display-summary__nav--Display: none;