@teseor/css 1.6.0 → 1.7.0
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/dist/compiled.css +1 -1
- package/dist/index.css +8 -0
- package/package.json +1 -1
- package/src/04-components/forms/number-input/index.scss +153 -0
- package/src/04-components/forms/number-input/number-input-visual.png +0 -0
- package/src/04-components/forms/number-input/number-input.api.json +74 -0
- package/src/04-components/forms/number-input/number-input.docs.json +262 -0
- package/src/04-components/forms/number-input/number-input.visual.spec.ts +14 -0
- package/src/04-components/forms/password-input/index.scss +138 -0
- package/src/04-components/forms/password-input/password-input-visual.png +0 -0
- package/src/04-components/forms/password-input/password-input.api.json +84 -0
- package/src/04-components/forms/password-input/password-input.docs.json +276 -0
- package/src/04-components/forms/password-input/password-input.visual.spec.ts +14 -0
- package/src/04-components/index.scss +4 -0
- package/src/04-components/layout/scroll-area/index.scss +92 -0
- package/src/04-components/layout/scroll-area/scroll-area-visual.png +0 -0
- package/src/04-components/layout/scroll-area/scroll-area.api.json +63 -0
- package/src/04-components/layout/scroll-area/scroll-area.docs.json +204 -0
- package/src/04-components/layout/scroll-area/scroll-area.visual.spec.ts +14 -0
- package/src/04-components/navigation/dropdown-menu/dropdown-menu-visual.png +0 -0
- package/src/04-components/navigation/dropdown-menu/dropdown-menu.api.json +37 -0
- package/src/04-components/navigation/dropdown-menu/dropdown-menu.docs.json +272 -0
- package/src/04-components/navigation/dropdown-menu/dropdown-menu.visual.spec.ts +14 -0
- package/src/04-components/navigation/dropdown-menu/index.scss +84 -0
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "scroll-area",
|
|
3
|
+
"element": "div",
|
|
4
|
+
"modifiers": {
|
|
5
|
+
"size": {
|
|
6
|
+
"values": ["sm", "lg", "xl"]
|
|
7
|
+
},
|
|
8
|
+
"direction": {
|
|
9
|
+
"values": ["horizontal", "both"]
|
|
10
|
+
},
|
|
11
|
+
"thin": {
|
|
12
|
+
"type": "boolean"
|
|
13
|
+
},
|
|
14
|
+
"auto-hide": {
|
|
15
|
+
"type": "boolean"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"elements": {
|
|
19
|
+
"viewport": {}
|
|
20
|
+
},
|
|
21
|
+
"cssVars": [
|
|
22
|
+
{
|
|
23
|
+
"name": "--ui-scroll-area-max-height",
|
|
24
|
+
"default": "calc(var(--ui-row) * 10)"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "--ui-scroll-area-max-height-sm",
|
|
28
|
+
"default": "calc(var(--ui-row) * 5)"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "--ui-scroll-area-max-height-lg",
|
|
32
|
+
"default": "calc(var(--ui-row) * 15)"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "--ui-scroll-area-max-height-xl",
|
|
36
|
+
"default": "calc(var(--ui-row) * 20)"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "--ui-scroll-area-scrollbar-size",
|
|
40
|
+
"default": "var(--ui-space-1)"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "--ui-scroll-area-scrollbar-size-thin",
|
|
44
|
+
"default": "calc(var(--ui-space-1) * 0.5)"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "--ui-scroll-area-thumb-color",
|
|
48
|
+
"default": "var(--ui-color-border-strong)"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "--ui-scroll-area-thumb-hover-color",
|
|
52
|
+
"default": "var(--ui-color-neutral-400)"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "--ui-scroll-area-track-color",
|
|
56
|
+
"default": "transparent"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "--ui-scroll-area-thumb-radius",
|
|
60
|
+
"default": "var(--ui-radius-full)"
|
|
61
|
+
}
|
|
62
|
+
]
|
|
63
|
+
}
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "scroll-area",
|
|
3
|
+
"type": "component",
|
|
4
|
+
"title": "Scroll Area",
|
|
5
|
+
"description": "Scrollable container with styled scrollbar. Provides overflow control and custom scrollbar styling.",
|
|
6
|
+
"api": "./scroll-area.api.json",
|
|
7
|
+
"sections": [
|
|
8
|
+
{
|
|
9
|
+
"title": "Default",
|
|
10
|
+
"examples": [
|
|
11
|
+
{
|
|
12
|
+
"items": [
|
|
13
|
+
{
|
|
14
|
+
"tag": "div",
|
|
15
|
+
"class": "ui-scroll-area",
|
|
16
|
+
"children": [
|
|
17
|
+
{
|
|
18
|
+
"tag": "div",
|
|
19
|
+
"class": "ui-scroll-area__viewport",
|
|
20
|
+
"children": [
|
|
21
|
+
{ "tag": "p", "text": "Line 1 of scrollable content" },
|
|
22
|
+
{ "tag": "p", "text": "Line 2 of scrollable content" },
|
|
23
|
+
{ "tag": "p", "text": "Line 3 of scrollable content" },
|
|
24
|
+
{ "tag": "p", "text": "Line 4 of scrollable content" },
|
|
25
|
+
{ "tag": "p", "text": "Line 5 of scrollable content" },
|
|
26
|
+
{ "tag": "p", "text": "Line 6 of scrollable content" },
|
|
27
|
+
{ "tag": "p", "text": "Line 7 of scrollable content" },
|
|
28
|
+
{ "tag": "p", "text": "Line 8 of scrollable content" },
|
|
29
|
+
{ "tag": "p", "text": "Line 9 of scrollable content" },
|
|
30
|
+
{ "tag": "p", "text": "Line 10 of scrollable content" },
|
|
31
|
+
{ "tag": "p", "text": "Line 11 of scrollable content" },
|
|
32
|
+
{ "tag": "p", "text": "Line 12 of scrollable content" },
|
|
33
|
+
{ "tag": "p", "text": "Line 13 of scrollable content" },
|
|
34
|
+
{ "tag": "p", "text": "Line 14 of scrollable content" },
|
|
35
|
+
{ "tag": "p", "text": "Line 15 of scrollable content" }
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"code": "<div class=\"ui-scroll-area\">\n <div class=\"ui-scroll-area__viewport\">\n Content...\n </div>\n</div>"
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"title": "Sizes",
|
|
47
|
+
"examples": [
|
|
48
|
+
{
|
|
49
|
+
"layout": "stack",
|
|
50
|
+
"items": [
|
|
51
|
+
{
|
|
52
|
+
"tag": "div",
|
|
53
|
+
"class": "ui-scroll-area ui-scroll-area--sm",
|
|
54
|
+
"children": [
|
|
55
|
+
{
|
|
56
|
+
"tag": "div",
|
|
57
|
+
"class": "ui-scroll-area__viewport",
|
|
58
|
+
"children": [
|
|
59
|
+
{ "tag": "p", "text": "Small - Line 1" },
|
|
60
|
+
{ "tag": "p", "text": "Small - Line 2" },
|
|
61
|
+
{ "tag": "p", "text": "Small - Line 3" },
|
|
62
|
+
{ "tag": "p", "text": "Small - Line 4" },
|
|
63
|
+
{ "tag": "p", "text": "Small - Line 5" },
|
|
64
|
+
{ "tag": "p", "text": "Small - Line 6" },
|
|
65
|
+
{ "tag": "p", "text": "Small - Line 7" },
|
|
66
|
+
{ "tag": "p", "text": "Small - Line 8" }
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"tag": "div",
|
|
73
|
+
"class": "ui-scroll-area ui-scroll-area--lg",
|
|
74
|
+
"children": [
|
|
75
|
+
{
|
|
76
|
+
"tag": "div",
|
|
77
|
+
"class": "ui-scroll-area__viewport",
|
|
78
|
+
"children": [
|
|
79
|
+
{ "tag": "p", "text": "Large - Line 1" },
|
|
80
|
+
{ "tag": "p", "text": "Large - Line 2" },
|
|
81
|
+
{ "tag": "p", "text": "Large - Line 3" },
|
|
82
|
+
{ "tag": "p", "text": "Large - Line 4" },
|
|
83
|
+
{ "tag": "p", "text": "Large - Line 5" },
|
|
84
|
+
{ "tag": "p", "text": "Large - Line 6" },
|
|
85
|
+
{ "tag": "p", "text": "Large - Line 7" },
|
|
86
|
+
{ "tag": "p", "text": "Large - Line 8" },
|
|
87
|
+
{ "tag": "p", "text": "Large - Line 9" },
|
|
88
|
+
{ "tag": "p", "text": "Large - Line 10" },
|
|
89
|
+
{ "tag": "p", "text": "Large - Line 11" },
|
|
90
|
+
{ "tag": "p", "text": "Large - Line 12" },
|
|
91
|
+
{ "tag": "p", "text": "Large - Line 13" },
|
|
92
|
+
{ "tag": "p", "text": "Large - Line 14" },
|
|
93
|
+
{ "tag": "p", "text": "Large - Line 15" },
|
|
94
|
+
{ "tag": "p", "text": "Large - Line 16" },
|
|
95
|
+
{ "tag": "p", "text": "Large - Line 17" },
|
|
96
|
+
{ "tag": "p", "text": "Large - Line 18" },
|
|
97
|
+
{ "tag": "p", "text": "Large - Line 19" },
|
|
98
|
+
{ "tag": "p", "text": "Large - Line 20" }
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
"code": "<div class=\"ui-scroll-area ui-scroll-area--sm\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--lg\">...</div>"
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"title": "Thin Scrollbar",
|
|
110
|
+
"examples": [
|
|
111
|
+
{
|
|
112
|
+
"items": [
|
|
113
|
+
{
|
|
114
|
+
"tag": "div",
|
|
115
|
+
"class": "ui-scroll-area ui-scroll-area--thin",
|
|
116
|
+
"children": [
|
|
117
|
+
{
|
|
118
|
+
"tag": "div",
|
|
119
|
+
"class": "ui-scroll-area__viewport",
|
|
120
|
+
"children": [
|
|
121
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 1" },
|
|
122
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 2" },
|
|
123
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 3" },
|
|
124
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 4" },
|
|
125
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 5" },
|
|
126
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 6" },
|
|
127
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 7" },
|
|
128
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 8" },
|
|
129
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 9" },
|
|
130
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 10" },
|
|
131
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 11" },
|
|
132
|
+
{ "tag": "p", "text": "Thin scrollbar - Line 12" }
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
]
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
"code": "<div class=\"ui-scroll-area ui-scroll-area--thin\">...</div>"
|
|
139
|
+
}
|
|
140
|
+
]
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"title": "Auto-Hide",
|
|
144
|
+
"examples": [
|
|
145
|
+
{
|
|
146
|
+
"items": [
|
|
147
|
+
{
|
|
148
|
+
"tag": "div",
|
|
149
|
+
"class": "ui-scroll-area ui-scroll-area--auto-hide",
|
|
150
|
+
"children": [
|
|
151
|
+
{
|
|
152
|
+
"tag": "div",
|
|
153
|
+
"class": "ui-scroll-area__viewport",
|
|
154
|
+
"children": [
|
|
155
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 1" },
|
|
156
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 2" },
|
|
157
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 3" },
|
|
158
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 4" },
|
|
159
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 5" },
|
|
160
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 6" },
|
|
161
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 7" },
|
|
162
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 8" },
|
|
163
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 9" },
|
|
164
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 10" },
|
|
165
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 11" },
|
|
166
|
+
{ "tag": "p", "text": "Scrollbar hidden until hover - Line 12" }
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
]
|
|
170
|
+
}
|
|
171
|
+
],
|
|
172
|
+
"code": "<div class=\"ui-scroll-area ui-scroll-area--auto-hide\">...</div>"
|
|
173
|
+
}
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
],
|
|
177
|
+
"customization": [
|
|
178
|
+
{
|
|
179
|
+
"token": "--ui-scroll-area-max-height",
|
|
180
|
+
"default": "calc(var(--ui-row) * 10)",
|
|
181
|
+
"description": "Default max height"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"token": "--ui-scroll-area-scrollbar-size",
|
|
185
|
+
"default": "var(--ui-space-1)",
|
|
186
|
+
"description": "Scrollbar width"
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"token": "--ui-scroll-area-thumb-color",
|
|
190
|
+
"default": "var(--ui-color-border-strong)",
|
|
191
|
+
"description": "Scrollbar thumb color"
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"token": "--ui-scroll-area-thumb-hover-color",
|
|
195
|
+
"default": "var(--ui-color-neutral-400)",
|
|
196
|
+
"description": "Scrollbar thumb hover color"
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"token": "--ui-scroll-area-track-color",
|
|
200
|
+
"default": "transparent",
|
|
201
|
+
"description": "Scrollbar track background"
|
|
202
|
+
}
|
|
203
|
+
]
|
|
204
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { resolve } from 'node:path';
|
|
2
|
+
import { expect, test } from '@playwright/test';
|
|
3
|
+
import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
|
|
4
|
+
|
|
5
|
+
const DOCS_PATH = resolve(__dirname, 'scroll-area.docs.json');
|
|
6
|
+
|
|
7
|
+
test.describe('scroll-area visual regression', () => {
|
|
8
|
+
test('all variations', async ({ page }) => {
|
|
9
|
+
await setupVisualTestFromDocs(page, DOCS_PATH);
|
|
10
|
+
await validateGridRhythm(page, 'scroll-area');
|
|
11
|
+
await saveForLostPixel(page, 'scroll-area');
|
|
12
|
+
await expect(page.locator('body')).toHaveScreenshot('scroll-area-visual.png');
|
|
13
|
+
});
|
|
14
|
+
});
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dropdown-menu",
|
|
3
|
+
"element": "div",
|
|
4
|
+
"modifiers": {
|
|
5
|
+
"open": {
|
|
6
|
+
"type": "boolean"
|
|
7
|
+
},
|
|
8
|
+
"top": {
|
|
9
|
+
"type": "boolean"
|
|
10
|
+
},
|
|
11
|
+
"align-end": {
|
|
12
|
+
"type": "boolean"
|
|
13
|
+
},
|
|
14
|
+
"full-width": {
|
|
15
|
+
"type": "boolean"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"elements": {
|
|
19
|
+
"trigger": {},
|
|
20
|
+
"trigger-icon": {},
|
|
21
|
+
"panel": {}
|
|
22
|
+
},
|
|
23
|
+
"cssVars": [
|
|
24
|
+
{
|
|
25
|
+
"name": "--ui-dropdown-menu-z",
|
|
26
|
+
"default": "200"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"name": "--ui-dropdown-menu-panel-offset",
|
|
30
|
+
"default": "var(--ui-space-1)"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "--ui-dropdown-menu-panel-min-width",
|
|
34
|
+
"default": "auto"
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
}
|
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "dropdown-menu",
|
|
3
|
+
"type": "component",
|
|
4
|
+
"title": "Dropdown Menu",
|
|
5
|
+
"description": "Trigger button with floating menu panel. Reuses the menu component for consistent item styling.",
|
|
6
|
+
"api": "./dropdown-menu.api.json",
|
|
7
|
+
"sections": [
|
|
8
|
+
{
|
|
9
|
+
"title": "Default",
|
|
10
|
+
"examples": [
|
|
11
|
+
{
|
|
12
|
+
"items": [
|
|
13
|
+
{
|
|
14
|
+
"tag": "div",
|
|
15
|
+
"class": "ui-dropdown-menu ui-dropdown-menu--open",
|
|
16
|
+
"children": [
|
|
17
|
+
{
|
|
18
|
+
"tag": "button",
|
|
19
|
+
"class": "ui-dropdown-menu__trigger ui-button",
|
|
20
|
+
"attrs": { "type": "button" },
|
|
21
|
+
"children": [
|
|
22
|
+
{ "tag": "span", "text": "Actions" },
|
|
23
|
+
{ "tag": "span", "class": "ui-dropdown-menu__trigger-icon", "text": "\u25BE" }
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"tag": "div",
|
|
28
|
+
"class": "ui-dropdown-menu__panel",
|
|
29
|
+
"attrs": { "role": "menu" },
|
|
30
|
+
"children": [
|
|
31
|
+
{
|
|
32
|
+
"tag": "div",
|
|
33
|
+
"class": "ui-menu",
|
|
34
|
+
"children": [
|
|
35
|
+
{
|
|
36
|
+
"tag": "ul",
|
|
37
|
+
"class": "ui-menu__group",
|
|
38
|
+
"children": [
|
|
39
|
+
{
|
|
40
|
+
"tag": "li",
|
|
41
|
+
"children": [
|
|
42
|
+
{
|
|
43
|
+
"tag": "button",
|
|
44
|
+
"class": "ui-menu__item",
|
|
45
|
+
"attrs": { "role": "menuitem" },
|
|
46
|
+
"text": "Edit"
|
|
47
|
+
}
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"tag": "li",
|
|
52
|
+
"children": [
|
|
53
|
+
{
|
|
54
|
+
"tag": "button",
|
|
55
|
+
"class": "ui-menu__item",
|
|
56
|
+
"attrs": { "role": "menuitem" },
|
|
57
|
+
"text": "Duplicate"
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"tag": "li",
|
|
63
|
+
"children": [
|
|
64
|
+
{
|
|
65
|
+
"tag": "button",
|
|
66
|
+
"class": "ui-menu__item ui-menu__item--danger",
|
|
67
|
+
"attrs": { "role": "menuitem" },
|
|
68
|
+
"text": "Delete"
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
],
|
|
81
|
+
"code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open\">\n <button class=\"ui-dropdown-menu__trigger ui-button\">Actions \u25BE</button>\n <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n <div class=\"ui-menu\">...</div>\n </div>\n</div>"
|
|
82
|
+
}
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"title": "With Separator",
|
|
87
|
+
"examples": [
|
|
88
|
+
{
|
|
89
|
+
"items": [
|
|
90
|
+
{
|
|
91
|
+
"tag": "div",
|
|
92
|
+
"class": "ui-dropdown-menu ui-dropdown-menu--open",
|
|
93
|
+
"children": [
|
|
94
|
+
{
|
|
95
|
+
"tag": "button",
|
|
96
|
+
"class": "ui-dropdown-menu__trigger ui-button ui-button--secondary",
|
|
97
|
+
"attrs": { "type": "button" },
|
|
98
|
+
"text": "File"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"tag": "div",
|
|
102
|
+
"class": "ui-dropdown-menu__panel",
|
|
103
|
+
"attrs": { "role": "menu" },
|
|
104
|
+
"children": [
|
|
105
|
+
{
|
|
106
|
+
"tag": "div",
|
|
107
|
+
"class": "ui-menu",
|
|
108
|
+
"children": [
|
|
109
|
+
{
|
|
110
|
+
"tag": "ul",
|
|
111
|
+
"class": "ui-menu__group",
|
|
112
|
+
"children": [
|
|
113
|
+
{
|
|
114
|
+
"tag": "li",
|
|
115
|
+
"children": [
|
|
116
|
+
{
|
|
117
|
+
"tag": "button",
|
|
118
|
+
"class": "ui-menu__item",
|
|
119
|
+
"attrs": { "role": "menuitem" },
|
|
120
|
+
"text": "New"
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"tag": "li",
|
|
126
|
+
"children": [
|
|
127
|
+
{
|
|
128
|
+
"tag": "button",
|
|
129
|
+
"class": "ui-menu__item",
|
|
130
|
+
"attrs": { "role": "menuitem" },
|
|
131
|
+
"text": "Open"
|
|
132
|
+
}
|
|
133
|
+
]
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"tag": "li",
|
|
137
|
+
"children": [
|
|
138
|
+
{
|
|
139
|
+
"tag": "button",
|
|
140
|
+
"class": "ui-menu__item",
|
|
141
|
+
"attrs": { "role": "menuitem" },
|
|
142
|
+
"text": "Save"
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"tag": "li",
|
|
148
|
+
"children": [{ "tag": "hr", "class": "ui-menu__separator" }]
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"tag": "li",
|
|
152
|
+
"children": [
|
|
153
|
+
{
|
|
154
|
+
"tag": "button",
|
|
155
|
+
"class": "ui-menu__item ui-menu__item--danger",
|
|
156
|
+
"attrs": { "role": "menuitem" },
|
|
157
|
+
"text": "Close"
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
],
|
|
170
|
+
"code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open\">\n <button class=\"ui-dropdown-menu__trigger ui-button ui-button--secondary\">File</button>\n <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n <div class=\"ui-menu\">\n <ul class=\"ui-menu__group\">\n <li><button class=\"ui-menu__item\">New</button></li>\n <li><hr class=\"ui-menu__separator\"></li>\n <li><button class=\"ui-menu__item--danger\">Close</button></li>\n </ul>\n </div>\n </div>\n</div>"
|
|
171
|
+
}
|
|
172
|
+
]
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"title": "Align End",
|
|
176
|
+
"examples": [
|
|
177
|
+
{
|
|
178
|
+
"items": [
|
|
179
|
+
{
|
|
180
|
+
"tag": "div",
|
|
181
|
+
"style": { "display": "flex", "justify-content": "flex-end" },
|
|
182
|
+
"children": [
|
|
183
|
+
{
|
|
184
|
+
"tag": "div",
|
|
185
|
+
"class": "ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end",
|
|
186
|
+
"children": [
|
|
187
|
+
{
|
|
188
|
+
"tag": "button",
|
|
189
|
+
"class": "ui-dropdown-menu__trigger ui-button ui-button--ghost",
|
|
190
|
+
"attrs": { "type": "button" },
|
|
191
|
+
"text": "\u22EE"
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"tag": "div",
|
|
195
|
+
"class": "ui-dropdown-menu__panel",
|
|
196
|
+
"attrs": { "role": "menu" },
|
|
197
|
+
"children": [
|
|
198
|
+
{
|
|
199
|
+
"tag": "div",
|
|
200
|
+
"class": "ui-menu",
|
|
201
|
+
"children": [
|
|
202
|
+
{
|
|
203
|
+
"tag": "ul",
|
|
204
|
+
"class": "ui-menu__group",
|
|
205
|
+
"children": [
|
|
206
|
+
{
|
|
207
|
+
"tag": "li",
|
|
208
|
+
"children": [
|
|
209
|
+
{
|
|
210
|
+
"tag": "button",
|
|
211
|
+
"class": "ui-menu__item",
|
|
212
|
+
"attrs": { "role": "menuitem" },
|
|
213
|
+
"text": "View"
|
|
214
|
+
}
|
|
215
|
+
]
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"tag": "li",
|
|
219
|
+
"children": [
|
|
220
|
+
{
|
|
221
|
+
"tag": "button",
|
|
222
|
+
"class": "ui-menu__item",
|
|
223
|
+
"attrs": { "role": "menuitem" },
|
|
224
|
+
"text": "Share"
|
|
225
|
+
}
|
|
226
|
+
]
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"tag": "li",
|
|
230
|
+
"children": [
|
|
231
|
+
{
|
|
232
|
+
"tag": "button",
|
|
233
|
+
"class": "ui-menu__item ui-menu__item--danger",
|
|
234
|
+
"attrs": { "role": "menuitem" },
|
|
235
|
+
"text": "Remove"
|
|
236
|
+
}
|
|
237
|
+
]
|
|
238
|
+
}
|
|
239
|
+
]
|
|
240
|
+
}
|
|
241
|
+
]
|
|
242
|
+
}
|
|
243
|
+
]
|
|
244
|
+
}
|
|
245
|
+
]
|
|
246
|
+
}
|
|
247
|
+
]
|
|
248
|
+
}
|
|
249
|
+
],
|
|
250
|
+
"code": "<div class=\"ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end\">\n <button class=\"ui-dropdown-menu__trigger ui-button ui-button--ghost\">\u22EE</button>\n <div class=\"ui-dropdown-menu__panel\" role=\"menu\">\n <div class=\"ui-menu\">...</div>\n </div>\n</div>"
|
|
251
|
+
}
|
|
252
|
+
]
|
|
253
|
+
}
|
|
254
|
+
],
|
|
255
|
+
"customization": [
|
|
256
|
+
{
|
|
257
|
+
"token": "--ui-dropdown-menu-z",
|
|
258
|
+
"default": "200",
|
|
259
|
+
"description": "Z-index for floating panel"
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"token": "--ui-dropdown-menu-panel-offset",
|
|
263
|
+
"default": "var(--ui-space-1)",
|
|
264
|
+
"description": "Gap between trigger and panel"
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"token": "--ui-dropdown-menu-panel-min-width",
|
|
268
|
+
"default": "auto",
|
|
269
|
+
"description": "Minimum panel width"
|
|
270
|
+
}
|
|
271
|
+
]
|
|
272
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { resolve } from 'node:path';
|
|
2
|
+
import { expect, test } from '@playwright/test';
|
|
3
|
+
import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
|
|
4
|
+
|
|
5
|
+
const DOCS_PATH = resolve(__dirname, 'dropdown-menu.docs.json');
|
|
6
|
+
|
|
7
|
+
test.describe('dropdown-menu visual regression', () => {
|
|
8
|
+
test('all variations', async ({ page }) => {
|
|
9
|
+
await setupVisualTestFromDocs(page, DOCS_PATH);
|
|
10
|
+
await validateGridRhythm(page, 'dropdown-menu');
|
|
11
|
+
await saveForLostPixel(page, 'dropdown-menu');
|
|
12
|
+
await expect(page.locator('body')).toHaveScreenshot('dropdown-menu-visual.png');
|
|
13
|
+
});
|
|
14
|
+
});
|