@patternfly/patternfly 6.0.0-alpha.131 → 6.0.0-alpha.133

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 (51) hide show
  1. package/components/Breadcrumb/breadcrumb.css +10 -10
  2. package/components/Breadcrumb/breadcrumb.scss +10 -10
  3. package/components/Hint/hint.css +2 -2
  4. package/components/Hint/hint.scss +2 -3
  5. package/components/Login/login.css +4 -2
  6. package/components/Login/login.scss +2 -1
  7. package/components/Menu/menu.css +4 -1
  8. package/components/Menu/menu.scss +5 -1
  9. package/components/_index.css +20 -15
  10. package/docs/components/ActionList/examples/ActionList.md +4 -4
  11. package/docs/components/Breadcrumb/examples/Breadcrumb.md +2 -1
  12. package/docs/components/Card/examples/Card.md +80 -416
  13. package/docs/components/DataList/examples/DataList.md +170 -952
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +160 -896
  15. package/docs/components/Hint/examples/Hint.md +30 -156
  16. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  17. package/docs/components/LogViewer/examples/LogViewer.css +9 -2
  18. package/docs/components/LogViewer/examples/LogViewer.md +315 -3313
  19. package/docs/components/Menu/examples/Menu.md +6 -76
  20. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -0
  21. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +370 -2064
  22. package/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +56 -143
  24. package/docs/components/Table/examples/Table.css +7 -0
  25. package/docs/components/Table/examples/Table.md +281 -405
  26. package/docs/components/Toolbar/examples/Toolbar.md +32 -239
  27. package/docs/demos/CardView/examples/CardView.md +110 -583
  28. package/docs/demos/Dashboard/examples/Dashboard.md +10 -56
  29. package/docs/demos/DataList/examples/DataList.md +44 -96
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +10 -56
  31. package/docs/demos/Drawer/examples/Drawer.md +10 -56
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +647 -3504
  33. package/docs/demos/Page/examples/Penta.md +5 -5
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +150 -675
  35. package/docs/demos/Table/examples/Table.md +142 -220
  36. package/docs/demos/Tabs/examples/Tabs.md +15 -28
  37. package/docs/demos/Toolbar/examples/Toolbar.css +0 -16
  38. package/docs/demos/Toolbar/examples/Toolbar.md +88 -609
  39. package/docs/utilities/Display/examples/Display.css +1 -8
  40. package/docs/utilities/Display/examples/Display.md +16 -7
  41. package/package.json +1 -1
  42. package/patternfly-addons.css +38 -0
  43. package/patternfly-charts.css +339 -8
  44. package/patternfly-charts.scss +21 -8
  45. package/patternfly-no-globals.css +20 -15
  46. package/patternfly.css +20 -15
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/utilities/Display/display.css +38 -0
  50. package/utilities/Display/display.scss +3 -1
  51. package/utilities/_index.css +38 -0
@@ -14,11 +14,11 @@
14
14
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
15
15
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
16
16
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
17
- --pf-v6-c-breadcrumb__dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
- --pf-v6-c-breadcrumb__dropdown--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
19
- --pf-v6-c-breadcrumb__dropdown--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
- --pf-v6-c-breadcrumb__dropdown--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
21
- --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
17
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
19
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
21
+ --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
22
22
  }
23
23
 
24
24
  .pf-v6-c-breadcrumb {
@@ -84,13 +84,13 @@ button.pf-v6-c-breadcrumb__link {
84
84
  }
85
85
 
86
86
  .pf-v6-c-breadcrumb__dropdown {
87
- margin-block-start: var(--pf-v6-c-breadcrumb__dropdown--MarginBlockStart);
88
- margin-block-end: var(--pf-v6-c-breadcrumb__dropdown--MarginBlockEnd);
89
- margin-inline-start: var(--pf-v6-c-breadcrumb__dropdown--MarginInlineStart);
90
- margin-inline-end: var(--pf-v6-c-breadcrumb__dropdown--MarginInlineEnd);
87
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
88
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
89
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
90
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
91
91
  }
92
92
  .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
93
- line-height: var(--pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
93
+ line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
94
94
  }
95
95
 
96
96
  .pf-v6-c-breadcrumb__heading {
@@ -25,13 +25,13 @@
25
25
  --#{$breadcrumb}__heading--FontSize: var( --pf-t--global--font--size--body--sm);
26
26
 
27
27
  // breadcrumb dropdown
28
- --#{$breadcrumb}__dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
29
- --#{$breadcrumb}__dropdown--MarginInlineEnd: calc(var(--#{$breadcrumb}__item--MarginInlineEnd) * -1);
30
- --#{$breadcrumb}__dropdown--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
- --#{$breadcrumb}__dropdown--MarginInlineStart: calc(var(--#{$breadcrumb}__item-divider--MarginInlineEnd) * -1);
28
+ --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
29
+ --#{$breadcrumb}__menu-toggle--MarginInlineEnd: calc(var(--#{$breadcrumb}__item--MarginInlineEnd) * -1);
30
+ --#{$breadcrumb}__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
+ --#{$breadcrumb}__menu-toggle--MarginInlineStart: calc(var(--#{$breadcrumb}__item-divider--MarginInlineEnd) * -1);
32
32
 
33
33
  // breadcrumb toggle
34
- --#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
34
+ --#{$breadcrumb}__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
35
35
  }
36
36
 
37
37
  .#{$breadcrumb} {
@@ -110,13 +110,13 @@
110
110
  }
111
111
 
112
112
  .#{$breadcrumb}__dropdown {
113
- margin-block-start: var(--#{$breadcrumb}__dropdown--MarginBlockStart);
114
- margin-block-end: var(--#{$breadcrumb}__dropdown--MarginBlockEnd);
115
- margin-inline-start: var(--#{$breadcrumb}__dropdown--MarginInlineStart);
116
- margin-inline-end: var(--#{$breadcrumb}__dropdown--MarginInlineEnd);
113
+ margin-block-start: var(--#{$breadcrumb}__menu-toggle--MarginBlockStart);
114
+ margin-block-end: var(--#{$breadcrumb}__menu-toggle--MarginBlockEnd);
115
+ margin-inline-start: var(--#{$breadcrumb}__menu-toggle--MarginInlineStart);
116
+ margin-inline-end: var(--#{$breadcrumb}__menu-toggle--MarginInlineEnd);
117
117
 
118
118
  .#{$menu-toggle} {
119
- line-height: var(--#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight);
119
+ line-height: var(--#{$breadcrumb}__menu-toggle--c-menu-toggle--LineHeight);
120
120
  }
121
121
  }
122
122
 
@@ -17,7 +17,7 @@
17
17
  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
18
18
  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
19
19
  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
20
- --pf-v6-c-hint__actions--c-dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
21
21
  }
22
22
 
23
23
  .pf-v6-c-hint {
@@ -48,7 +48,7 @@
48
48
  text-align: end;
49
49
  }
50
50
  .pf-v6-c-hint__actions .pf-v6-c-menu-toggle.pf-m-plain {
51
- margin-block-start: var(--pf-v6-c-hint__actions--c-dropdown--MarginBlockStart);
51
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
52
52
  }
53
53
  .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
54
54
  grid-column: 1;
@@ -27,7 +27,7 @@
27
27
 
28
28
  // Hint Actions
29
29
  --#{$hint}__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
30
- --#{$hint}__actions--c-dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
30
+ --#{$hint}__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
31
  }
32
32
 
33
33
  .#{$hint} {
@@ -59,9 +59,8 @@
59
59
  margin-inline-start: var(--#{$hint}__actions--MarginInlineStart);
60
60
  text-align: end;
61
61
 
62
- // Only applies to the plain dropdown
63
62
  .#{$menu-toggle}.pf-m-plain {
64
- margin-block-start: var(--#{$hint}__actions--c-dropdown--MarginBlockStart);
63
+ margin-block-start: var(--#{$hint}__actions--c-menu-toggle--MarginBlockStart);
65
64
  }
66
65
 
67
66
  + .#{$hint}__body {
@@ -174,12 +174,14 @@
174
174
  }
175
175
  }
176
176
 
177
- .pf-v6-c-login__main-header-utilities {
177
+ .pf-v6-c-login__main-header-utilities,
178
+ .pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
178
179
  grid-row: auto;
179
180
  grid-column: auto;
180
181
  }
181
182
  @media (min-width: 768px) {
182
- .pf-v6-c-login__main-header-utilities {
183
+ .pf-v6-c-login__main-header-utilities,
184
+ .pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
183
185
  grid-row: 1;
184
186
  grid-column: 2/3;
185
187
  }
@@ -192,7 +192,8 @@
192
192
  }
193
193
  }
194
194
 
195
- .#{$login}__main-header-utilities {
195
+ .#{$login}__main-header-utilities,
196
+ .#{$login}__main-header .#{$menu-toggle} {
196
197
  grid-row: auto;
197
198
  grid-column: auto;
198
199
 
@@ -198,11 +198,14 @@
198
198
  }
199
199
  .pf-v6-c-menu .pf-v6-c-menu {
200
200
  min-width: 100%;
201
- border-radius: 0;
202
201
  }
203
202
  .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content {
204
203
  overflow: visible;
205
204
  }
205
+ .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu {
206
+ min-width: 100%;
207
+ border-radius: 0;
208
+ }
206
209
  .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content {
207
210
  overflow: visible;
208
211
  }
@@ -203,13 +203,17 @@
203
203
 
204
204
  .#{$menu} {
205
205
  min-width: 100%;
206
- border-radius: 0;
207
206
  }
208
207
 
209
208
  .#{$menu}__content {
210
209
  & & {
211
210
  overflow: visible;
212
211
  }
212
+
213
+ .#{$menu} {
214
+ min-width: 100%;
215
+ border-radius: 0;
216
+ }
213
217
  }
214
218
 
215
219
  // - Menu nested flyout menu
@@ -1245,11 +1245,11 @@
1245
1245
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
1246
1246
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
1247
1247
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
1248
- --pf-v6-c-breadcrumb__dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1249
- --pf-v6-c-breadcrumb__dropdown--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
1250
- --pf-v6-c-breadcrumb__dropdown--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1251
- --pf-v6-c-breadcrumb__dropdown--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
1252
- --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1248
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1249
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
1250
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1251
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
1252
+ --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1253
1253
  }
1254
1254
 
1255
1255
  .pf-v6-c-breadcrumb {
@@ -1315,13 +1315,13 @@ button.pf-v6-c-breadcrumb__link {
1315
1315
  }
1316
1316
 
1317
1317
  .pf-v6-c-breadcrumb__dropdown {
1318
- margin-block-start: var(--pf-v6-c-breadcrumb__dropdown--MarginBlockStart);
1319
- margin-block-end: var(--pf-v6-c-breadcrumb__dropdown--MarginBlockEnd);
1320
- margin-inline-start: var(--pf-v6-c-breadcrumb__dropdown--MarginInlineStart);
1321
- margin-inline-end: var(--pf-v6-c-breadcrumb__dropdown--MarginInlineEnd);
1318
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
1319
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
1320
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
1321
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
1322
1322
  }
1323
1323
  .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
1324
- line-height: var(--pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
1324
+ line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
1325
1325
  }
1326
1326
 
1327
1327
  .pf-v6-c-breadcrumb__heading {
@@ -6971,7 +6971,7 @@ select ~ .pf-v6-c-form-control__utilities {
6971
6971
  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
6972
6972
  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
6973
6973
  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
6974
- --pf-v6-c-hint__actions--c-dropdown--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
6974
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
6975
6975
  }
6976
6976
 
6977
6977
  .pf-v6-c-hint {
@@ -7002,7 +7002,7 @@ select ~ .pf-v6-c-form-control__utilities {
7002
7002
  text-align: end;
7003
7003
  }
7004
7004
  .pf-v6-c-hint__actions .pf-v6-c-menu-toggle.pf-m-plain {
7005
- margin-block-start: var(--pf-v6-c-hint__actions--c-dropdown--MarginBlockStart);
7005
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
7006
7006
  }
7007
7007
  .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
7008
7008
  grid-column: 1;
@@ -8828,12 +8828,14 @@ ul.pf-v6-c-list {
8828
8828
  }
8829
8829
  }
8830
8830
 
8831
- .pf-v6-c-login__main-header-utilities {
8831
+ .pf-v6-c-login__main-header-utilities,
8832
+ .pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
8832
8833
  grid-row: auto;
8833
8834
  grid-column: auto;
8834
8835
  }
8835
8836
  @media (min-width: 768px) {
8836
- .pf-v6-c-login__main-header-utilities {
8837
+ .pf-v6-c-login__main-header-utilities,
8838
+ .pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
8837
8839
  grid-row: 1;
8838
8840
  grid-column: 2/3;
8839
8841
  }
@@ -9539,11 +9541,14 @@ ul.pf-v6-c-list {
9539
9541
  }
9540
9542
  .pf-v6-c-menu .pf-v6-c-menu {
9541
9543
  min-width: 100%;
9542
- border-radius: 0;
9543
9544
  }
9544
9545
  .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content {
9545
9546
  overflow: visible;
9546
9547
  }
9548
+ .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu {
9549
+ min-width: 100%;
9550
+ border-radius: 0;
9551
+ }
9547
9552
  .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content {
9548
9553
  overflow: visible;
9549
9554
  }
@@ -30,7 +30,7 @@ cssPrefix: pf-v6-c-action-list
30
30
  <button
31
31
  class="pf-v6-c-button pf-m-plain"
32
32
  type="button"
33
- aria-label="Kebab"
33
+ aria-label="Toggle"
34
34
  >
35
35
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
36
36
  </button>
@@ -50,7 +50,7 @@ cssPrefix: pf-v6-c-action-list
50
50
  </button>
51
51
  </div>
52
52
  <div class="pf-v6-c-action-list__item">
53
- <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Kebab">
53
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Toggle">
54
54
  <i class="fas fa-check" aria-hidden="true"></i>
55
55
  </button>
56
56
  </div>
@@ -71,7 +71,7 @@ cssPrefix: pf-v6-c-action-list
71
71
  <button
72
72
  class="pf-v6-c-button pf-m-plain"
73
73
  type="button"
74
- aria-label="Kebab"
74
+ aria-label="Toggle"
75
75
  >
76
76
  <i class="fas fa-check" aria-hidden="true"></i>
77
77
  </button>
@@ -91,7 +91,7 @@ cssPrefix: pf-v6-c-action-list
91
91
  <button
92
92
  class="pf-v6-c-button pf-m-plain"
93
93
  type="button"
94
- aria-label="Kebab"
94
+ aria-label="Toggle"
95
95
  >
96
96
  <i class="fas fa-check" aria-hidden="true"></i>
97
97
  </button>
@@ -138,7 +138,7 @@ cssPrefix: pf-v6-c-breadcrumb
138
138
 
139
139
  ```
140
140
 
141
- ### With dropdown
141
+ ### With menu dropdown
142
142
 
143
143
  ```html
144
144
  <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
@@ -164,6 +164,7 @@ cssPrefix: pf-v6-c-breadcrumb
164
164
  class="pf-v6-c-menu-toggle pf-m-plain"
165
165
  type="button"
166
166
  aria-expanded="false"
167
+ aria-label="Menu toggle"
167
168
  >
168
169
  <span class="pf-v6-c-menu-toggle__count">
169
170
  <span class="pf-v6-c-badge pf-m-unread">