@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

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 (187) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +0 -17
  3. package/assets/icons/iconUnicodes.json +0 -1
  4. package/assets/pficon/pficon.scss +0 -6
  5. package/assets/pficon/pficon.woff +0 -0
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_chart-globals.scss +4 -0
  8. package/base/_common.scss +0 -22
  9. package/base/_fonts.scss +0 -188
  10. package/base/_globals.scss +0 -6
  11. package/base/_icons.scss +28 -0
  12. package/base/_variables.scss +0 -14
  13. package/base/patternfly-common.css +0 -10
  14. package/base/patternfly-fonts.css +0 -120
  15. package/base/patternfly-globals.css +0 -4
  16. package/base/patternfly-icons.css +1 -5
  17. package/base/patternfly-icons.scss +0 -28
  18. package/base/patternfly-pf-icons.css +1 -5
  19. package/base/patternfly-variables.css +6 -19
  20. package/components/AboutModalBox/about-modal-box.css +1 -28
  21. package/components/AboutModalBox/about-modal-box.scss +1 -27
  22. package/components/Accordion/accordion.css +64 -62
  23. package/components/Accordion/accordion.scss +62 -64
  24. package/components/Alert/alert.css +0 -4
  25. package/components/Alert/alert.scss +0 -7
  26. package/components/Banner/banner.css +1 -1
  27. package/components/Banner/banner.scss +1 -1
  28. package/components/Breadcrumb/breadcrumb.css +0 -6
  29. package/components/Breadcrumb/breadcrumb.scss +0 -9
  30. package/components/Button/button.css +0 -4
  31. package/components/Button/button.scss +0 -7
  32. package/components/CalendarMonth/calendar-month.css +1 -1
  33. package/components/CalendarMonth/calendar-month.scss +1 -1
  34. package/components/Card/card.css +9 -16
  35. package/components/Card/card.scss +11 -24
  36. package/components/Check/check.css +4 -2
  37. package/components/Check/check.scss +2 -2
  38. package/components/ChipGroup/chip-group.css +29 -17
  39. package/components/ChipGroup/chip-group.scss +39 -22
  40. package/components/Content/content.css +1 -17
  41. package/components/Content/content.scss +1 -23
  42. package/components/DataList/data-list.css +0 -15
  43. package/components/Divider/divider.css +0 -16
  44. package/components/Divider/divider.scss +0 -1
  45. package/components/Drawer/drawer.css +0 -15
  46. package/components/Drawer/drawer.scss +0 -6
  47. package/components/EmptyState/empty-state.css +46 -56
  48. package/components/EmptyState/empty-state.scss +58 -66
  49. package/components/ExpandableSection/expandable-section.css +0 -4
  50. package/components/ExpandableSection/expandable-section.scss +0 -7
  51. package/components/Form/form.css +0 -1
  52. package/components/Form/form.scss +0 -1
  53. package/components/InlineEdit/inline-edit.css +1 -12
  54. package/components/InlineEdit/inline-edit.scss +1 -10
  55. package/components/JumpLinks/jump-links.css +0 -43
  56. package/components/JumpLinks/jump-links.scss +0 -13
  57. package/components/Label/label.css +0 -3
  58. package/components/Label/label.scss +0 -4
  59. package/components/LabelGroup/label-group.css +26 -22
  60. package/components/LabelGroup/label-group.scss +31 -26
  61. package/components/Menu/menu.css +0 -16
  62. package/components/Menu/menu.scss +0 -1
  63. package/components/NotificationDrawer/notification-drawer.css +1 -0
  64. package/components/NotificationDrawer/notification-drawer.scss +1 -0
  65. package/components/Page/page.css +0 -15
  66. package/components/Pagination/pagination.css +108 -55
  67. package/components/Pagination/pagination.scss +6 -25
  68. package/components/Popover/popover.css +1 -6
  69. package/components/Popover/themes/dark/popover.scss +1 -7
  70. package/components/Progress/progress.css +0 -1
  71. package/components/Progress/progress.scss +0 -1
  72. package/components/Radio/radio.css +4 -2
  73. package/components/Radio/radio.scss +2 -2
  74. package/components/SimpleList/simple-list.css +1 -1
  75. package/components/SimpleList/simple-list.scss +1 -1
  76. package/components/SkipToContent/skip-to-content.css +1 -1
  77. package/components/SkipToContent/skip-to-content.scss +1 -1
  78. package/components/Switch/switch.css +0 -1
  79. package/components/Switch/switch.scss +0 -1
  80. package/components/Table/table-grid.css +0 -10
  81. package/components/Table/table-grid.scss +0 -2
  82. package/components/Table/table-tree-view.css +0 -16
  83. package/components/Table/table-tree-view.scss +0 -4
  84. package/components/Table/table.css +0 -16
  85. package/components/Table/table.scss +0 -1
  86. package/components/Tabs/tabs.css +5 -34
  87. package/components/Tabs/tabs.scss +7 -15
  88. package/components/Title/title.css +0 -5
  89. package/components/Title/title.scss +0 -8
  90. package/components/Toolbar/toolbar.css +30 -33
  91. package/components/Toolbar/toolbar.scss +37 -9
  92. package/components/Tooltip/themes/dark/tooltip.scss +3 -6
  93. package/components/Tooltip/tooltip.css +2 -5
  94. package/components/Wizard/wizard.css +0 -9
  95. package/components/Wizard/wizard.scss +0 -9
  96. package/docs/components/AboutModalBox/examples/AboutModalBox.md +4 -15
  97. package/docs/components/Accordion/examples/Accordion.md +67 -67
  98. package/docs/components/Card/examples/Card.md +61 -44
  99. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  100. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  101. package/docs/components/Content/examples/Content.md +0 -28
  102. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  103. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -5
  104. package/docs/components/Tabs/examples/Tabs.md +102 -103
  105. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  106. package/docs/components/Wizard/examples/Wizard.md +10 -13
  107. package/docs/demos/AboutModal/examples/AboutModal.md +53 -49
  108. package/docs/demos/Alert/examples/Alert.md +18 -12
  109. package/docs/demos/BackToTop/examples/BackToTop.md +6 -4
  110. package/docs/demos/Banner/examples/Banner.md +13 -8
  111. package/docs/demos/Card/examples/Card.md +145 -110
  112. package/docs/demos/CardView/examples/CardView.md +7 -7
  113. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -16
  114. package/docs/demos/Dashboard/examples/Dashboard.md +6 -4
  115. package/docs/demos/DataList/examples/DataList.md +26 -20
  116. package/docs/demos/DescriptionList/examples/DescriptionList.md +19 -12
  117. package/docs/demos/Drawer/examples/Drawer.md +30 -20
  118. package/docs/demos/HelperText/examples/HelperText.md +1 -0
  119. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -24
  120. package/docs/demos/Masthead/examples/Masthead.md +57 -42
  121. package/docs/demos/Modal/examples/Modal.md +36 -24
  122. package/docs/demos/Nav/examples/Nav.md +48 -32
  123. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -20
  124. package/docs/demos/Page/examples/Page.md +55 -37
  125. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +1 -0
  126. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +51 -34
  127. package/docs/demos/Skeleton/examples/Skeleton.md +6 -4
  128. package/docs/demos/Table/examples/Table.md +102 -88
  129. package/docs/demos/Tabs/examples/Tabs.md +40 -28
  130. package/docs/demos/Toolbar/examples/Toolbar.md +1648 -66
  131. package/docs/demos/Wizard/examples/Wizard.md +232 -222
  132. package/icons/pf-icons.json +0 -1
  133. package/package.json +4 -3
  134. package/patternfly-base-no-reset.css +31 -154
  135. package/patternfly-base.css +31 -158
  136. package/patternfly-charts.css +1 -1
  137. package/patternfly-no-reset.css +367 -650
  138. package/patternfly.css +367 -654
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
  141. package/sass-utilities/mixins.scss +0 -6
  142. package/sass-utilities/placeholders.scss +0 -7
  143. package/sass-utilities/scss-variables.scss +6 -13
  144. package/assets/fonts/overpass-mono-webfont/example.html +0 -15
  145. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff +0 -0
  146. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2 +0 -0
  147. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff +0 -0
  148. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2 +0 -0
  149. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff +0 -0
  150. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2 +0 -0
  151. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff +0 -0
  152. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2 +0 -0
  153. package/assets/fonts/overpass-mono-webfont/overpass-mono.css +0 -39
  154. package/assets/fonts/overpass-webfont/example.html +0 -18
  155. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff +0 -0
  156. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff2 +0 -0
  157. package/assets/fonts/overpass-webfont/overpass-bold.woff +0 -0
  158. package/assets/fonts/overpass-webfont/overpass-bold.woff2 +0 -0
  159. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff +0 -0
  160. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2 +0 -0
  161. package/assets/fonts/overpass-webfont/overpass-extrabold.woff +0 -0
  162. package/assets/fonts/overpass-webfont/overpass-extrabold.woff2 +0 -0
  163. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff +0 -0
  164. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff2 +0 -0
  165. package/assets/fonts/overpass-webfont/overpass-extralight.woff +0 -0
  166. package/assets/fonts/overpass-webfont/overpass-extralight.woff2 +0 -0
  167. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff +0 -0
  168. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff2 +0 -0
  169. package/assets/fonts/overpass-webfont/overpass-heavy.woff +0 -0
  170. package/assets/fonts/overpass-webfont/overpass-heavy.woff2 +0 -0
  171. package/assets/fonts/overpass-webfont/overpass-italic.woff +0 -0
  172. package/assets/fonts/overpass-webfont/overpass-italic.woff2 +0 -0
  173. package/assets/fonts/overpass-webfont/overpass-light-italic.woff +0 -0
  174. package/assets/fonts/overpass-webfont/overpass-light-italic.woff2 +0 -0
  175. package/assets/fonts/overpass-webfont/overpass-light.woff +0 -0
  176. package/assets/fonts/overpass-webfont/overpass-light.woff2 +0 -0
  177. package/assets/fonts/overpass-webfont/overpass-regular.woff +0 -0
  178. package/assets/fonts/overpass-webfont/overpass-regular.woff2 +0 -0
  179. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff +0 -0
  180. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff2 +0 -0
  181. package/assets/fonts/overpass-webfont/overpass-semibold.woff +0 -0
  182. package/assets/fonts/overpass-webfont/overpass-semibold.woff2 +0 -0
  183. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff +0 -0
  184. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff2 +0 -0
  185. package/assets/fonts/overpass-webfont/overpass-thin.woff +0 -0
  186. package/assets/fonts/overpass-webfont/overpass-thin.woff2 +0 -0
  187. package/assets/fonts/overpass-webfont/overpass.css +0 -141
package/components/LabelGroup/label-group.css CHANGED
@@ -1,6 +1,16 @@
1
1
  .pf-c-label-group {
2
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
2
+ --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
3
+ --pf-c-label-group--ColumnGap: 0;
4
+ --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
5
+ --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
6
+ --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
7
+ --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
8
+ --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
9
+ --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
10
+ --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
11
+ --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
12
+ --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
13
+ --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
4
14
  --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
5
15
  --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
6
16
  --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
@@ -10,20 +20,14 @@
10
20
  --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
11
21
  --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
12
22
  --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
13
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
14
- --pf-c-label-group__label--MarginBottom: 0;
15
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
16
23
  --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
17
24
  --pf-c-label-group__label--MaxWidth: 18ch;
18
25
  --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
19
26
  --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
20
27
  --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
21
28
  --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
22
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
23
29
  --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
24
30
  --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
25
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
26
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
27
31
  --pf-c-label-group__textarea--MinWidth: 12.5rem;
28
32
  --pf-c-label-group__textarea--PaddingTop: 0.125rem;
29
33
  --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
@@ -31,6 +35,8 @@
31
35
  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
32
36
  display: inline-flex;
33
37
  align-items: center;
38
+ row-gap: var(--pf-c-label-group--RowGap);
39
+ column-gap: var(--pf-c-label-group--ColumnGap);
34
40
  }
35
41
  .pf-c-label-group.pf-m-category {
36
42
  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
@@ -42,11 +48,12 @@
42
48
  border-radius: var(--pf-c-label-group--m-category--BorderRadius);
43
49
  }
44
50
  .pf-c-label-group.pf-m-vertical {
45
- --pf-c-label-group__list--MarginRight: 0;
46
- --pf-c-label-group__list--MarginBottom: 0;
47
- --pf-c-label-group__list-item--MarginRight: 0;
48
- --pf-c-label-group__label--MarginRight: 0;
49
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
51
+ --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
52
+ --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
53
+ --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
54
+ --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
55
+ --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
56
+ --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
50
57
  --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
51
58
  --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
52
59
  --pf-c-label-group__close--MarginBottom: 0;
@@ -63,9 +70,6 @@
63
70
  .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
64
71
  flex-direction: column;
65
72
  }
66
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
67
- --pf-c-label-group__list-item--MarginBottom: 0;
68
- }
69
73
  .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
70
74
  --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
71
75
  --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
@@ -87,19 +91,19 @@
87
91
  flex: 1;
88
92
  flex-wrap: wrap;
89
93
  align-items: baseline;
94
+ row-gap: var(--pf-c-label-group__main--RowGap);
95
+ column-gap: var(--pf-c-label-group__main--ColumnGap);
90
96
  }
91
97
 
92
98
  .pf-c-label-group__list {
93
99
  display: inline-flex;
94
100
  flex-wrap: wrap;
95
- margin-right: var(--pf-c-label-group__list--MarginRight);
96
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
101
+ row-gap: var(--pf-c-label-group__list--RowGap);
102
+ column-gap: var(--pf-c-label-group__list--ColumnGap);
97
103
  }
98
104
 
99
105
  .pf-c-label-group__list-item {
100
106
  display: inline-flex;
101
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
102
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
103
107
  }
104
108
 
105
109
  .pf-c-label-group__label {
@@ -107,12 +111,12 @@
107
111
  text-overflow: ellipsis;
108
112
  white-space: nowrap;
109
113
  max-width: var(--pf-c-label-group__label--MaxWidth);
110
- margin-right: var(--pf-c-label-group__label--MarginRight);
111
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
112
114
  font-size: var(--pf-c-label-group__label--FontSize);
113
115
  }
114
116
 
115
117
  .pf-c-label-group__close {
118
+ display: flex;
119
+ align-self: start;
116
120
  margin-top: var(--pf-c-label-group__close--MarginTop);
117
121
  margin-right: var(--pf-c-label-group__close--MarginRight);
118
122
  margin-bottom: var(--pf-c-label-group__close--MarginBottom);
package/components/LabelGroup/label-group.scss CHANGED
@@ -1,7 +1,21 @@
1
1
  .pf-c-label-group {
2
- // List
3
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
4
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
2
+ // Label group - spaces main with the close button
3
+ --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
4
+ --pf-c-label-group--ColumnGap: 0;
5
+ --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
6
+ --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
7
+
8
+ // Main - spaces the category label with the list
9
+ --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
10
+ --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
11
+ --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
12
+ --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
13
+
14
+ // List - spaces the items
15
+ --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
16
+ --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
17
+ --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
18
+ --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
5
19
 
6
20
  // Category
7
21
  --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
@@ -15,9 +29,6 @@
15
29
  --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
16
30
 
17
31
  // Label
18
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
19
- --pf-c-label-group__label--MarginBottom: 0;
20
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
21
32
  --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
22
33
  --pf-c-label-group__label--MaxWidth: 18ch;
23
34
 
@@ -26,14 +37,9 @@
26
37
  --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
27
38
  --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
28
39
  --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
29
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
30
40
  --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
31
41
  --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
32
42
 
33
- // List item
34
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
35
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
36
-
37
43
  // Textarea
38
44
  --pf-c-label-group__textarea--MinWidth: #{pf-size-prem(200px)};
39
45
  --pf-c-label-group__textarea--PaddingTop: #{pf-size-prem(2px)};
@@ -43,6 +49,8 @@
43
49
 
44
50
  display: inline-flex;
45
51
  align-items: center;
52
+ row-gap: var(--pf-c-label-group--RowGap);
53
+ column-gap: var(--pf-c-label-group--ColumnGap);
46
54
 
47
55
  &.pf-m-category {
48
56
  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
@@ -55,11 +63,12 @@
55
63
  }
56
64
 
57
65
  &.pf-m-vertical {
58
- --pf-c-label-group__list--MarginRight: 0;
59
- --pf-c-label-group__list--MarginBottom: 0;
60
- --pf-c-label-group__list-item--MarginRight: 0;
61
- --pf-c-label-group__label--MarginRight: 0;
62
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
66
+ --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
67
+ --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
68
+ --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
69
+ --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
70
+ --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
71
+ --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
63
72
  --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
64
73
  --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
65
74
  --pf-c-label-group__close--MarginBottom: 0;
@@ -79,10 +88,6 @@
79
88
  flex-direction: column;
80
89
  }
81
90
 
82
- .pf-c-label-group__list-item:last-child {
83
- --pf-c-label-group__list-item--MarginBottom: 0;
84
- }
85
-
86
91
  .pf-c-label-group__close .pf-c-button {
87
92
  --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
88
93
  --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
@@ -110,31 +115,31 @@
110
115
  flex: 1;
111
116
  flex-wrap: wrap;
112
117
  align-items: baseline;
118
+ row-gap: var(--pf-c-label-group__main--RowGap);
119
+ column-gap: var(--pf-c-label-group__main--ColumnGap);
113
120
  }
114
121
 
115
122
  .pf-c-label-group__list {
116
123
  display: inline-flex;
117
124
  flex-wrap: wrap;
118
- margin-right: var(--pf-c-label-group__list--MarginRight);
119
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
125
+ row-gap: var(--pf-c-label-group__list--RowGap);
126
+ column-gap: var(--pf-c-label-group__list--ColumnGap);
120
127
  }
121
128
 
122
129
  .pf-c-label-group__list-item {
123
130
  display: inline-flex;
124
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
125
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
126
131
  }
127
132
 
128
133
  .pf-c-label-group__label {
129
134
  @include pf-text-overflow;
130
135
 
131
136
  max-width: var(--pf-c-label-group__label--MaxWidth);
132
- margin-right: var(--pf-c-label-group__label--MarginRight);
133
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
134
137
  font-size: var(--pf-c-label-group__label--FontSize);
135
138
  }
136
139
 
137
140
  .pf-c-label-group__close {
141
+ display: flex;
142
+ align-self: start;
138
143
  margin-top: var(--pf-c-label-group__close--MarginTop);
139
144
  margin-right: var(--pf-c-label-group__close--MarginRight);
140
145
  margin-bottom: var(--pf-c-label-group__close--MarginBottom);
package/components/Menu/menu.css CHANGED
@@ -9,66 +9,51 @@
9
9
  }
10
10
 
11
11
  .pf-c-menu__group, .pf-c-menu__list-item, .pf-c-menu__list {
12
- --pf-hidden-visible--visible--Visibility: visible;
13
12
  --pf-hidden-visible--hidden--Display: none;
14
- --pf-hidden-visible--hidden--Visibility: hidden;
15
13
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
16
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17
14
  display: var(--pf-hidden-visible--Display);
18
- visibility: var(--pf-hidden-visible--Visibility);
19
15
  }
20
16
  .pf-m-hidden.pf-c-menu__group, .pf-m-hidden.pf-c-menu__list-item, .pf-m-hidden.pf-c-menu__list {
21
17
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
22
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
23
18
  }
24
19
  @media screen and (min-width: 576px) {
25
20
  .pf-m-hidden-on-sm.pf-c-menu__group, .pf-m-hidden-on-sm.pf-c-menu__list-item, .pf-m-hidden-on-sm.pf-c-menu__list {
26
21
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
27
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
28
22
  }
29
23
  .pf-m-visible-on-sm.pf-c-menu__group, .pf-m-visible-on-sm.pf-c-menu__list-item, .pf-m-visible-on-sm.pf-c-menu__list {
30
24
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
31
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
32
25
  }
33
26
  }
34
27
  @media screen and (min-width: 768px) {
35
28
  .pf-m-hidden-on-md.pf-c-menu__group, .pf-m-hidden-on-md.pf-c-menu__list-item, .pf-m-hidden-on-md.pf-c-menu__list {
36
29
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
37
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
38
30
  }
39
31
  .pf-m-visible-on-md.pf-c-menu__group, .pf-m-visible-on-md.pf-c-menu__list-item, .pf-m-visible-on-md.pf-c-menu__list {
40
32
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
41
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
42
33
  }
43
34
  }
44
35
  @media screen and (min-width: 992px) {
45
36
  .pf-m-hidden-on-lg.pf-c-menu__group, .pf-m-hidden-on-lg.pf-c-menu__list-item, .pf-m-hidden-on-lg.pf-c-menu__list {
46
37
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
47
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
48
38
  }
49
39
  .pf-m-visible-on-lg.pf-c-menu__group, .pf-m-visible-on-lg.pf-c-menu__list-item, .pf-m-visible-on-lg.pf-c-menu__list {
50
40
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
51
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
52
41
  }
53
42
  }
54
43
  @media screen and (min-width: 1200px) {
55
44
  .pf-m-hidden-on-xl.pf-c-menu__group, .pf-m-hidden-on-xl.pf-c-menu__list-item, .pf-m-hidden-on-xl.pf-c-menu__list {
56
45
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
57
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
58
46
  }
59
47
  .pf-m-visible-on-xl.pf-c-menu__group, .pf-m-visible-on-xl.pf-c-menu__list-item, .pf-m-visible-on-xl.pf-c-menu__list {
60
48
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
61
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
62
49
  }
63
50
  }
64
51
  @media screen and (min-width: 1450px) {
65
52
  .pf-m-hidden-on-2xl.pf-c-menu__group, .pf-m-hidden-on-2xl.pf-c-menu__list-item, .pf-m-hidden-on-2xl.pf-c-menu__list {
66
53
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
67
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
68
54
  }
69
55
  .pf-m-visible-on-2xl.pf-c-menu__group, .pf-m-visible-on-2xl.pf-c-menu__list-item, .pf-m-visible-on-2xl.pf-c-menu__list {
70
56
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
71
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
72
57
  }
73
58
  }
74
59
 
@@ -305,7 +290,6 @@
305
290
  }
306
291
  .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
307
292
  display: none;
308
- visibility: hidden;
309
293
  }
310
294
  .pf-c-menu.pf-m-drilldown .pf-c-menu__item {
311
295
  outline-offset: var(--pf-c-menu__item--OutlineOffset);
package/components/Menu/menu.scss CHANGED
@@ -304,7 +304,6 @@
304
304
 
305
305
  &:not(.pf-m-current-path) .pf-c-menu {
306
306
  display: none;
307
- visibility: hidden;
308
307
  }
309
308
  }
310
309
 
package/components/NotificationDrawer/notification-drawer.css CHANGED
@@ -100,6 +100,7 @@
100
100
  }
101
101
 
102
102
  .pf-c-notification-drawer__body {
103
+ flex: 1;
103
104
  overflow-y: auto;
104
105
  box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
105
106
  }
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -129,6 +129,7 @@
129
129
  }
130
130
 
131
131
  .pf-c-notification-drawer__body {
132
+ flex: 1;
132
133
  overflow-y: auto;
133
134
  box-shadow: var(--pf-c-notification-drawer__body--ZIndex);
134
135
  }
package/components/Page/page.css CHANGED
@@ -40,66 +40,51 @@
40
40
  }
41
41
 
42
42
  .pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
43
- --pf-hidden-visible--visible--Visibility: visible;
44
43
  --pf-hidden-visible--hidden--Display: none;
45
- --pf-hidden-visible--hidden--Visibility: hidden;
46
44
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
47
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
48
45
  display: var(--pf-hidden-visible--Display);
49
- visibility: var(--pf-hidden-visible--Visibility);
50
46
  }
51
47
  .pf-m-hidden.pf-c-page__header-tools-item, .pf-m-hidden.pf-c-page__header-tools-group {
52
48
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
53
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
54
49
  }
55
50
  @media screen and (min-width: 576px) {
56
51
  .pf-m-hidden-on-sm.pf-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-c-page__header-tools-group {
57
52
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
58
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
59
53
  }
60
54
  .pf-m-visible-on-sm.pf-c-page__header-tools-item, .pf-m-visible-on-sm.pf-c-page__header-tools-group {
61
55
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
62
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
63
56
  }
64
57
  }
65
58
  @media screen and (min-width: 768px) {
66
59
  .pf-m-hidden-on-md.pf-c-page__header-tools-item, .pf-m-hidden-on-md.pf-c-page__header-tools-group {
67
60
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
68
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
69
61
  }
70
62
  .pf-m-visible-on-md.pf-c-page__header-tools-item, .pf-m-visible-on-md.pf-c-page__header-tools-group {
71
63
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
72
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
73
64
  }
74
65
  }
75
66
  @media screen and (min-width: 992px) {
76
67
  .pf-m-hidden-on-lg.pf-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-c-page__header-tools-group {
77
68
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
78
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
79
69
  }
80
70
  .pf-m-visible-on-lg.pf-c-page__header-tools-item, .pf-m-visible-on-lg.pf-c-page__header-tools-group {
81
71
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
82
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
83
72
  }
84
73
  }
85
74
  @media screen and (min-width: 1200px) {
86
75
  .pf-m-hidden-on-xl.pf-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-c-page__header-tools-group {
87
76
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
88
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
89
77
  }
90
78
  .pf-m-visible-on-xl.pf-c-page__header-tools-item, .pf-m-visible-on-xl.pf-c-page__header-tools-group {
91
79
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
92
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
93
80
  }
94
81
  }
95
82
  @media screen and (min-width: 1450px) {
96
83
  .pf-m-hidden-on-2xl.pf-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-c-page__header-tools-group {
97
84
  --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
98
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
99
85
  }
100
86
  .pf-m-visible-on-2xl.pf-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-c-page__header-tools-group {
101
87
  --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
102
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
103
88
  }
104
89
  }
105
90