@patternfly/patternfly 6.0.0-alpha.91 → 6.0.0-alpha.93
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.
- package/components/ActionList/action-list.css +1 -0
- package/components/ActionList/action-list.scss +2 -0
- package/components/Menu/menu.css +31 -126
- package/components/Menu/menu.scss +17 -17
- package/docs/components/ActionList/examples/ActionList.md +1 -1
- package/docs/components/Menu/examples/Menu.md +12 -3
- package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
- package/package.json +5 -5
- package/patternfly-no-globals.css +44 -234
- package/patternfly-theme-dark-unversioned.css +44 -234
- package/patternfly.css +44 -234
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Menu/themes/dark/menu.scss +0 -9
- package/components/Nav/themes/dark/nav.scss +0 -44
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
|
|
24
24
|
// - Action list icons
|
|
25
25
|
&.pf-m-icons {
|
|
26
|
+
--#{$action-list}__group--ColumnGap: var(--#{$action-list}--m-icons--ColumnGap);
|
|
27
|
+
|
|
26
28
|
column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
|
|
27
29
|
}
|
|
28
30
|
}
|
package/components/Menu/menu.css
CHANGED
|
@@ -1,155 +1,59 @@
|
|
|
1
|
-
.pf-v6-c-
|
|
2
|
-
.pf-v6-c-menu__list-item,
|
|
3
|
-
.pf-v6-c-menu__item,
|
|
4
|
-
.pf-v6-c-menu__item-main,
|
|
5
|
-
.pf-v6-c-menu__breadcrumb,
|
|
6
|
-
.pf-v6-c-menu__item-check,
|
|
7
|
-
.pf-v6-c-menu__item-action,
|
|
8
|
-
.pf-v6-c-menu__item-action-icon, .pf-v6-c-menu,
|
|
9
|
-
.pf-v6-c-menu__list,
|
|
1
|
+
.pf-v6-c-menu__item, .pf-v6-c-menu__list,
|
|
10
2
|
.pf-v6-c-menu__group {
|
|
11
3
|
--pf-v5-hidden-visible--hidden--Display: none;
|
|
12
4
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
|
13
5
|
display: var(--pf-v5-hidden-visible--Display);
|
|
14
6
|
}
|
|
15
|
-
.pf-m-hidden.pf-v6-c-
|
|
16
|
-
.pf-m-hidden.pf-v6-c-menu__list-item,
|
|
17
|
-
.pf-m-hidden.pf-v6-c-menu__item,
|
|
18
|
-
.pf-m-hidden.pf-v6-c-menu__item-main,
|
|
19
|
-
.pf-m-hidden.pf-v6-c-menu__breadcrumb,
|
|
20
|
-
.pf-m-hidden.pf-v6-c-menu__item-check,
|
|
21
|
-
.pf-m-hidden.pf-v6-c-menu__item-action,
|
|
22
|
-
.pf-m-hidden.pf-v6-c-menu__item-action-icon, .pf-m-hidden.pf-v6-c-menu,
|
|
23
|
-
.pf-m-hidden.pf-v6-c-menu__list,
|
|
7
|
+
.pf-m-hidden.pf-v6-c-menu__item, .pf-m-hidden.pf-v6-c-menu__list,
|
|
24
8
|
.pf-m-hidden.pf-v6-c-menu__group {
|
|
25
9
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
|
26
10
|
}
|
|
27
11
|
@media screen and (min-width: 576px) {
|
|
28
|
-
.pf-m-hidden-on-sm.pf-v6-c-
|
|
29
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__list-item,
|
|
30
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item,
|
|
31
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item-main,
|
|
32
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__breadcrumb,
|
|
33
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item-check,
|
|
34
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item-action,
|
|
35
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-sm.pf-v6-c-menu,
|
|
36
|
-
.pf-m-hidden-on-sm.pf-v6-c-menu__list,
|
|
12
|
+
.pf-m-hidden-on-sm.pf-v6-c-menu__item, .pf-m-hidden-on-sm.pf-v6-c-menu__list,
|
|
37
13
|
.pf-m-hidden-on-sm.pf-v6-c-menu__group {
|
|
38
14
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
|
39
15
|
}
|
|
40
|
-
.pf-m-visible-on-sm.pf-v6-c-
|
|
41
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__list-item,
|
|
42
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item,
|
|
43
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item-main,
|
|
44
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__breadcrumb,
|
|
45
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item-check,
|
|
46
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item-action,
|
|
47
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-sm.pf-v6-c-menu,
|
|
48
|
-
.pf-m-visible-on-sm.pf-v6-c-menu__list,
|
|
16
|
+
.pf-m-visible-on-sm.pf-v6-c-menu__item, .pf-m-visible-on-sm.pf-v6-c-menu__list,
|
|
49
17
|
.pf-m-visible-on-sm.pf-v6-c-menu__group {
|
|
50
18
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
|
51
19
|
}
|
|
52
20
|
}
|
|
53
21
|
@media screen and (min-width: 768px) {
|
|
54
|
-
.pf-m-hidden-on-md.pf-v6-c-
|
|
55
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__list-item,
|
|
56
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item,
|
|
57
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item-main,
|
|
58
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__breadcrumb,
|
|
59
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item-check,
|
|
60
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item-action,
|
|
61
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-md.pf-v6-c-menu,
|
|
62
|
-
.pf-m-hidden-on-md.pf-v6-c-menu__list,
|
|
22
|
+
.pf-m-hidden-on-md.pf-v6-c-menu__item, .pf-m-hidden-on-md.pf-v6-c-menu__list,
|
|
63
23
|
.pf-m-hidden-on-md.pf-v6-c-menu__group {
|
|
64
24
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
|
65
25
|
}
|
|
66
|
-
.pf-m-visible-on-md.pf-v6-c-
|
|
67
|
-
.pf-m-visible-on-md.pf-v6-c-menu__list-item,
|
|
68
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item,
|
|
69
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item-main,
|
|
70
|
-
.pf-m-visible-on-md.pf-v6-c-menu__breadcrumb,
|
|
71
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item-check,
|
|
72
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item-action,
|
|
73
|
-
.pf-m-visible-on-md.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-md.pf-v6-c-menu,
|
|
74
|
-
.pf-m-visible-on-md.pf-v6-c-menu__list,
|
|
26
|
+
.pf-m-visible-on-md.pf-v6-c-menu__item, .pf-m-visible-on-md.pf-v6-c-menu__list,
|
|
75
27
|
.pf-m-visible-on-md.pf-v6-c-menu__group {
|
|
76
28
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
|
77
29
|
}
|
|
78
30
|
}
|
|
79
31
|
@media screen and (min-width: 992px) {
|
|
80
|
-
.pf-m-hidden-on-lg.pf-v6-c-
|
|
81
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__list-item,
|
|
82
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item,
|
|
83
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item-main,
|
|
84
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__breadcrumb,
|
|
85
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item-check,
|
|
86
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item-action,
|
|
87
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-lg.pf-v6-c-menu,
|
|
88
|
-
.pf-m-hidden-on-lg.pf-v6-c-menu__list,
|
|
32
|
+
.pf-m-hidden-on-lg.pf-v6-c-menu__item, .pf-m-hidden-on-lg.pf-v6-c-menu__list,
|
|
89
33
|
.pf-m-hidden-on-lg.pf-v6-c-menu__group {
|
|
90
34
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
|
91
35
|
}
|
|
92
|
-
.pf-m-visible-on-lg.pf-v6-c-
|
|
93
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__list-item,
|
|
94
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item,
|
|
95
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item-main,
|
|
96
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__breadcrumb,
|
|
97
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item-check,
|
|
98
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item-action,
|
|
99
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-lg.pf-v6-c-menu,
|
|
100
|
-
.pf-m-visible-on-lg.pf-v6-c-menu__list,
|
|
36
|
+
.pf-m-visible-on-lg.pf-v6-c-menu__item, .pf-m-visible-on-lg.pf-v6-c-menu__list,
|
|
101
37
|
.pf-m-visible-on-lg.pf-v6-c-menu__group {
|
|
102
38
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
|
103
39
|
}
|
|
104
40
|
}
|
|
105
41
|
@media screen and (min-width: 1200px) {
|
|
106
|
-
.pf-m-hidden-on-xl.pf-v6-c-
|
|
107
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__list-item,
|
|
108
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item,
|
|
109
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item-main,
|
|
110
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__breadcrumb,
|
|
111
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item-check,
|
|
112
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item-action,
|
|
113
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-xl.pf-v6-c-menu,
|
|
114
|
-
.pf-m-hidden-on-xl.pf-v6-c-menu__list,
|
|
42
|
+
.pf-m-hidden-on-xl.pf-v6-c-menu__item, .pf-m-hidden-on-xl.pf-v6-c-menu__list,
|
|
115
43
|
.pf-m-hidden-on-xl.pf-v6-c-menu__group {
|
|
116
44
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
|
117
45
|
}
|
|
118
|
-
.pf-m-visible-on-xl.pf-v6-c-
|
|
119
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__list-item,
|
|
120
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item,
|
|
121
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item-main,
|
|
122
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__breadcrumb,
|
|
123
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item-check,
|
|
124
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item-action,
|
|
125
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-xl.pf-v6-c-menu,
|
|
126
|
-
.pf-m-visible-on-xl.pf-v6-c-menu__list,
|
|
46
|
+
.pf-m-visible-on-xl.pf-v6-c-menu__item, .pf-m-visible-on-xl.pf-v6-c-menu__list,
|
|
127
47
|
.pf-m-visible-on-xl.pf-v6-c-menu__group {
|
|
128
48
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
|
129
49
|
}
|
|
130
50
|
}
|
|
131
51
|
@media screen and (min-width: 1450px) {
|
|
132
|
-
.pf-m-hidden-on-2xl.pf-v6-c-
|
|
133
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__list-item,
|
|
134
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item,
|
|
135
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item-main,
|
|
136
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__breadcrumb,
|
|
137
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item-check,
|
|
138
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item-action,
|
|
139
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__item-action-icon, .pf-m-hidden-on-2xl.pf-v6-c-menu,
|
|
140
|
-
.pf-m-hidden-on-2xl.pf-v6-c-menu__list,
|
|
52
|
+
.pf-m-hidden-on-2xl.pf-v6-c-menu__item, .pf-m-hidden-on-2xl.pf-v6-c-menu__list,
|
|
141
53
|
.pf-m-hidden-on-2xl.pf-v6-c-menu__group {
|
|
142
54
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
|
|
143
55
|
}
|
|
144
|
-
.pf-m-visible-on-2xl.pf-v6-c-
|
|
145
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__list-item,
|
|
146
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item,
|
|
147
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item-main,
|
|
148
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__breadcrumb,
|
|
149
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item-check,
|
|
150
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item-action,
|
|
151
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__item-action-icon, .pf-m-visible-on-2xl.pf-v6-c-menu,
|
|
152
|
-
.pf-m-visible-on-2xl.pf-v6-c-menu__list,
|
|
56
|
+
.pf-m-visible-on-2xl.pf-v6-c-menu__item, .pf-m-visible-on-2xl.pf-v6-c-menu__list,
|
|
153
57
|
.pf-m-visible-on-2xl.pf-v6-c-menu__group {
|
|
154
58
|
--pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
|
|
155
59
|
}
|
|
@@ -248,21 +152,19 @@
|
|
|
248
152
|
--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
249
153
|
}
|
|
250
154
|
|
|
251
|
-
.pf-v6-c-menu,
|
|
252
|
-
.pf-v6-c-menu__list,
|
|
253
|
-
.pf-v6-c-menu__group {
|
|
254
|
-
--pf-v5-hidden-visible--visible--Display: grid;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
155
|
.pf-v6-c-menu__content,
|
|
258
156
|
.pf-v6-c-menu__list-item,
|
|
259
|
-
.pf-v6-c-menu__item,
|
|
260
157
|
.pf-v6-c-menu__item-main,
|
|
261
158
|
.pf-v6-c-menu__breadcrumb,
|
|
262
159
|
.pf-v6-c-menu__item-check,
|
|
263
160
|
.pf-v6-c-menu__item-action,
|
|
264
161
|
.pf-v6-c-menu__item-action-icon {
|
|
265
|
-
|
|
162
|
+
display: flex;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.pf-v6-c-menu__list,
|
|
166
|
+
.pf-v6-c-menu__group {
|
|
167
|
+
--pf-v5-hidden-visible--visible--Display: grid;
|
|
266
168
|
}
|
|
267
169
|
|
|
268
170
|
.pf-v6-c-menu__list,
|
|
@@ -287,6 +189,7 @@
|
|
|
287
189
|
}
|
|
288
190
|
|
|
289
191
|
.pf-v6-c-menu {
|
|
192
|
+
display: grid;
|
|
290
193
|
row-gap: var(--pf-v6-c-menu--RowGap);
|
|
291
194
|
width: var(--pf-v6-c-menu--Width);
|
|
292
195
|
min-width: var(--pf-v6-c-menu--MinWidth);
|
|
@@ -495,10 +398,12 @@
|
|
|
495
398
|
.pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) {
|
|
496
399
|
padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd);
|
|
497
400
|
}
|
|
498
|
-
.pf-v6-c-menu__list-item:has(> :hover) {
|
|
401
|
+
.pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
|
|
499
402
|
--pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
|
|
500
403
|
}
|
|
501
|
-
.pf-v6-c-menu__list-item
|
|
404
|
+
.pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
|
|
405
|
+
.pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
|
|
406
|
+
.pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
|
|
502
407
|
.pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
|
|
503
408
|
opacity: 1;
|
|
504
409
|
}
|
|
@@ -520,15 +425,20 @@
|
|
|
520
425
|
background-color: var(--pf-v6-c-menu__item--BackgroundColor);
|
|
521
426
|
border: 0;
|
|
522
427
|
outline-offset: var(--pf-v6-c-menu--OutlineOffset);
|
|
428
|
+
--pf-v5-hidden-visible--visible--Display: flex;
|
|
523
429
|
}
|
|
430
|
+
:where(label).pf-v6-c-menu__item {
|
|
431
|
+
cursor: pointer;
|
|
432
|
+
}
|
|
433
|
+
|
|
524
434
|
.pf-v6-c-menu__item.pf-m-selected {
|
|
525
435
|
--pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
|
|
526
436
|
}
|
|
527
|
-
.pf-v6-c-menu__item:is(:hover, :focus,
|
|
528
|
-
.pf-v6-c-menu__item:is(:hover, :focus,
|
|
437
|
+
.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
|
|
438
|
+
.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
|
|
529
439
|
opacity: 1;
|
|
530
440
|
}
|
|
531
|
-
.pf-v6-c-menu__item:is(:hover, :focus,
|
|
441
|
+
.pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
|
|
532
442
|
color: var(--pf-v6-c-menu__item-external--Color);
|
|
533
443
|
}
|
|
534
444
|
|
|
@@ -568,11 +478,6 @@
|
|
|
568
478
|
.pf-v6-c-menu__item-check .pf-v6-c-check {
|
|
569
479
|
--pf-v5-c-check__input--TranslateY: none;
|
|
570
480
|
}
|
|
571
|
-
.pf-v6-c-menu__item-check .pf-v6-c-check input::before {
|
|
572
|
-
position: absolute;
|
|
573
|
-
inset: 0;
|
|
574
|
-
content: "";
|
|
575
|
-
}
|
|
576
481
|
|
|
577
482
|
.pf-v6-c-menu__item-toggle-icon {
|
|
578
483
|
color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
|
|
@@ -138,23 +138,21 @@
|
|
|
138
138
|
--#{$menu}--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
// - Menu shared display grid
|
|
142
|
-
.#{$menu},
|
|
143
|
-
.#{$menu}__list,
|
|
144
|
-
.#{$menu}__group {
|
|
145
|
-
@include pf-v5-hidden-visible(grid);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
141
|
// - Menu shared display flex
|
|
149
142
|
.#{$menu}__content,
|
|
150
143
|
.#{$menu}__list-item,
|
|
151
|
-
.#{$menu}__item,
|
|
152
144
|
.#{$menu}__item-main,
|
|
153
145
|
.#{$menu}__breadcrumb,
|
|
154
146
|
.#{$menu}__item-check,
|
|
155
147
|
.#{$menu}__item-action,
|
|
156
148
|
.#{$menu}__item-action-icon {
|
|
157
|
-
|
|
149
|
+
display: flex;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// - Menu shared hidden visible
|
|
153
|
+
.#{$menu}__list,
|
|
154
|
+
.#{$menu}__group {
|
|
155
|
+
@include pf-v5-hidden-visible(grid);
|
|
158
156
|
}
|
|
159
157
|
|
|
160
158
|
// - Menu shared position relative
|
|
@@ -190,6 +188,7 @@
|
|
|
190
188
|
// TODO: Explore this fallback method
|
|
191
189
|
// padding-block-start: var(--#{$menu}--PaddingBlockStart, var(--#{$menu}--PaddingBlock));
|
|
192
190
|
// padding-block-end: var(--#{$menu}--PaddingBlockEnd, var(--#{$menu}--PaddingBlock));
|
|
191
|
+
display: grid;
|
|
193
192
|
row-gap: var(--#{$menu}--RowGap);
|
|
194
193
|
width: var(--#{$menu}--Width);
|
|
195
194
|
min-width: var(--#{$menu}--MinWidth);
|
|
@@ -474,6 +473,8 @@
|
|
|
474
473
|
padding-inline-end: var(--#{$menu}__list-item--has--menu-action--PaddingInlineEnd);
|
|
475
474
|
}
|
|
476
475
|
|
|
476
|
+
&.pf-m-focus,
|
|
477
|
+
&:focus-within,
|
|
477
478
|
&:has(> :hover) {
|
|
478
479
|
--#{$menu}__list-item--BackgroundColor: var(--#{$menu}__list-item--hover--BackgroundColor);
|
|
479
480
|
|
|
@@ -504,11 +505,17 @@
|
|
|
504
505
|
border: 0;
|
|
505
506
|
outline-offset: var(--#{$menu}--OutlineOffset);
|
|
506
507
|
|
|
508
|
+
@include pf-v5-hidden-visible(flex);
|
|
509
|
+
|
|
510
|
+
@at-root :where(label)#{&} {
|
|
511
|
+
cursor: pointer;
|
|
512
|
+
}
|
|
513
|
+
|
|
507
514
|
&.pf-m-selected {
|
|
508
515
|
--#{$menu}__item-select-icon--Color: var(--#{$menu}__item--m-selected__item-select-icon--Color);
|
|
509
516
|
}
|
|
510
517
|
|
|
511
|
-
&:is(:hover, :focus,
|
|
518
|
+
&:is(:hover, :focus, .pf-m-selected) {
|
|
512
519
|
.#{$menu}__item-select-icon,
|
|
513
520
|
.#{$menu}__item-external-icon {
|
|
514
521
|
opacity: 1;
|
|
@@ -560,13 +567,6 @@
|
|
|
560
567
|
// - Menu check
|
|
561
568
|
.#{$menu}__item-check .#{$check} {
|
|
562
569
|
--pf-v5-c-check__input--TranslateY: none;
|
|
563
|
-
|
|
564
|
-
// expand clickable area to full width/height of list__item
|
|
565
|
-
input::before {
|
|
566
|
-
position: absolute;
|
|
567
|
-
inset: 0;
|
|
568
|
-
content: "";
|
|
569
|
-
}
|
|
570
570
|
}
|
|
571
571
|
|
|
572
572
|
// - Menu toggle icon
|
|
@@ -165,4 +165,4 @@ In modals, forms, data lists
|
|
|
165
165
|
| `.pf-v5-c-action-list` | `<div>` | Initiates the action list container. |
|
|
166
166
|
| `.pf-v5-c-action-list__item` | `<div>` | Initiates the action list item container. |
|
|
167
167
|
| `.pf-v5-c-action-list__group` | `<div>` | Initiates the action list group container. |
|
|
168
|
-
| `.pf-m-icons` | `.pf-v5-c-action-list`, `.pf-v5-c-action-list__group` | Modifies the action list to support
|
|
168
|
+
| `.pf-m-icons` | `.pf-v5-c-action-list`, `.pf-v5-c-action-list__group` | Modifies the action list and/or group to support icon buttons. If applied to `.pf-v5-c-action-list`, all nested groups will inherit this modification. |
|
|
@@ -167,7 +167,10 @@ cssPrefix: pf-v5-c-menu
|
|
|
167
167
|
<div class="pf-v6-c-menu__content">
|
|
168
168
|
<ul class="pf-v6-c-menu__list" role="menu">
|
|
169
169
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
170
|
-
<label
|
|
170
|
+
<label
|
|
171
|
+
class="pf-v6-c-menu__item"
|
|
172
|
+
for="with-checkbox-example-check-1-input"
|
|
173
|
+
>
|
|
171
174
|
<span class="pf-v6-c-menu__item-main">
|
|
172
175
|
<span class="pf-v6-c-menu__item-check">
|
|
173
176
|
<div
|
|
@@ -188,7 +191,10 @@ cssPrefix: pf-v5-c-menu
|
|
|
188
191
|
</label>
|
|
189
192
|
</li>
|
|
190
193
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
191
|
-
<label
|
|
194
|
+
<label
|
|
195
|
+
class="pf-v6-c-menu__item"
|
|
196
|
+
for="with-checkbox-example-check-2-input"
|
|
197
|
+
>
|
|
192
198
|
<span class="pf-v6-c-menu__item-main">
|
|
193
199
|
<span class="pf-v6-c-menu__item-check">
|
|
194
200
|
<div
|
|
@@ -209,7 +215,10 @@ cssPrefix: pf-v5-c-menu
|
|
|
209
215
|
</label>
|
|
210
216
|
</li>
|
|
211
217
|
<li class="pf-v6-c-menu__list-item pf-m-disabled" role="menuitem">
|
|
212
|
-
<label
|
|
218
|
+
<label
|
|
219
|
+
class="pf-v6-c-menu__item"
|
|
220
|
+
for="with-checkbox-example-check-3-input"
|
|
221
|
+
>
|
|
213
222
|
<span class="pf-v6-c-menu__item-main">
|
|
214
223
|
<span class="pf-v6-c-menu__item-check">
|
|
215
224
|
<div
|
|
@@ -2067,7 +2067,7 @@ section: components
|
|
|
2067
2067
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2068
2068
|
<label
|
|
2069
2069
|
class="pf-v6-c-menu__item"
|
|
2070
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1"
|
|
2070
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check1-input"
|
|
2071
2071
|
>
|
|
2072
2072
|
<span class="pf-v6-c-menu__item-main">
|
|
2073
2073
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2091,7 +2091,7 @@ section: components
|
|
|
2091
2091
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2092
2092
|
<label
|
|
2093
2093
|
class="pf-v6-c-menu__item"
|
|
2094
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2"
|
|
2094
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check2-input"
|
|
2095
2095
|
>
|
|
2096
2096
|
<span class="pf-v6-c-menu__item-main">
|
|
2097
2097
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2116,7 +2116,7 @@ section: components
|
|
|
2116
2116
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2117
2117
|
<label
|
|
2118
2118
|
class="pf-v6-c-menu__item"
|
|
2119
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3"
|
|
2119
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check3-input"
|
|
2120
2120
|
>
|
|
2121
2121
|
<span class="pf-v6-c-menu__item-main">
|
|
2122
2122
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2141,7 +2141,7 @@ section: components
|
|
|
2141
2141
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2142
2142
|
<label
|
|
2143
2143
|
class="pf-v6-c-menu__item"
|
|
2144
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4"
|
|
2144
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check4-input"
|
|
2145
2145
|
>
|
|
2146
2146
|
<span class="pf-v6-c-menu__item-main">
|
|
2147
2147
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2165,7 +2165,7 @@ section: components
|
|
|
2165
2165
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2166
2166
|
<label
|
|
2167
2167
|
class="pf-v6-c-menu__item"
|
|
2168
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5"
|
|
2168
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-status-menu-check5-input"
|
|
2169
2169
|
>
|
|
2170
2170
|
<span class="pf-v6-c-menu__item-main">
|
|
2171
2171
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2621,7 +2621,7 @@ section: components
|
|
|
2621
2621
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2622
2622
|
<label
|
|
2623
2623
|
class="pf-v6-c-menu__item"
|
|
2624
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1"
|
|
2624
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check1-input"
|
|
2625
2625
|
>
|
|
2626
2626
|
<span class="pf-v6-c-menu__item-main">
|
|
2627
2627
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2645,7 +2645,7 @@ section: components
|
|
|
2645
2645
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2646
2646
|
<label
|
|
2647
2647
|
class="pf-v6-c-menu__item"
|
|
2648
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2"
|
|
2648
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check2-input"
|
|
2649
2649
|
>
|
|
2650
2650
|
<span class="pf-v6-c-menu__item-main">
|
|
2651
2651
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2670,7 +2670,7 @@ section: components
|
|
|
2670
2670
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2671
2671
|
<label
|
|
2672
2672
|
class="pf-v6-c-menu__item"
|
|
2673
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3"
|
|
2673
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check3-input"
|
|
2674
2674
|
>
|
|
2675
2675
|
<span class="pf-v6-c-menu__item-main">
|
|
2676
2676
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2695,7 +2695,7 @@ section: components
|
|
|
2695
2695
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2696
2696
|
<label
|
|
2697
2697
|
class="pf-v6-c-menu__item"
|
|
2698
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4"
|
|
2698
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check4-input"
|
|
2699
2699
|
>
|
|
2700
2700
|
<span class="pf-v6-c-menu__item-main">
|
|
2701
2701
|
<span class="pf-v6-c-menu__item-check">
|
|
@@ -2719,7 +2719,7 @@ section: components
|
|
|
2719
2719
|
<li class="pf-v6-c-menu__list-item" role="menuitem">
|
|
2720
2720
|
<label
|
|
2721
2721
|
class="pf-v6-c-menu__item"
|
|
2722
|
-
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5"
|
|
2722
|
+
for="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check-toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-status-menu-check5-input"
|
|
2723
2723
|
>
|
|
2724
2724
|
<span class="pf-v6-c-menu__item-main">
|
|
2725
2725
|
<span class="pf-v6-c-menu__item-check">
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "6.0.0-alpha.
|
|
4
|
+
"version": "6.0.0-alpha.93",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
"@commitlint/config-conventional": "^18.4.3",
|
|
46
46
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
47
47
|
"@octokit/rest": "^20.0.2",
|
|
48
|
-
"@patternfly/documentation-framework": "6.0.0-alpha.
|
|
48
|
+
"@patternfly/documentation-framework": "6.0.0-alpha.11",
|
|
49
49
|
"@patternfly/patternfly-a11y": "4.3.1",
|
|
50
|
-
"@patternfly/react-code-editor": "6.0.0-alpha.
|
|
51
|
-
"@patternfly/react-core": "6.0.0-alpha.
|
|
52
|
-
"@patternfly/react-table": "6.0.0-alpha.
|
|
50
|
+
"@patternfly/react-code-editor": "6.0.0-alpha.36",
|
|
51
|
+
"@patternfly/react-core": "6.0.0-alpha.36",
|
|
52
|
+
"@patternfly/react-table": "6.0.0-alpha.36",
|
|
53
53
|
"@starptech/prettyhtml": "^0.10.0",
|
|
54
54
|
"backstopjs": "^6.2.2",
|
|
55
55
|
"cheerio": "^1.0.0-rc.12",
|