@ebay/skin 15.3.0-0 → 15.4.0-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/_cdn/skin/v15.4.0-0/skin-default.min.css +6 -0
- package/_cdn/skin/v15.4.0-0/skin-full.min.css +6 -0
- package/_cdn/skin/v15.4.0-0/skin-headless.min.css +6 -0
- package/_cdn/skin/v15.4.0-0/skin-legacy.min.css +6 -0
- package/dist/filter-menu-button/filter-menu-button.css +3 -0
- package/dist/global/global.css +5 -1
- package/dist/legacy-tokens/ds4-light.css +2 -2
- package/dist/link/link.css +14 -3
- package/dist/listbox-button/listbox-button.css +12 -0
- package/dist/page-notice/page-notice.css +3 -4
- package/dist/section-notice/section-notice.css +2 -2
- package/dist/tokens/evo-light.css +2 -2
- package/package.json +2 -2
- package/src/less/breadcrumbs/stories/button-cascade.stories.js +9 -9
- package/src/less/breadcrumbs/stories/buttons.stories.js +5 -5
- package/src/less/breadcrumbs/stories/link-cascade.stories.js +9 -9
- package/src/less/breadcrumbs/stories/links.stories.js +5 -5
- package/src/less/button/stories/button/base.stories.js +5 -5
- package/src/less/button/stories/button/borderless.stories.js +4 -4
- package/src/less/button/stories/button/cascade.stories.js +3 -3
- package/src/less/button/stories/button/dimensions.stories.js +1 -1
- package/src/less/button/stories/button/primary.stories.js +4 -4
- package/src/less/button/stories/button/secondary.stories.js +4 -4
- package/src/less/button/stories/button/tertiary.stories.js +4 -4
- package/src/less/button/stories/destructive-button/primary.stories.js +3 -3
- package/src/less/button/stories/destructive-button/secondary.stories.js +3 -3
- package/src/less/button/stories/destructive-button/tertiary.stories.js +3 -3
- package/src/less/button/stories/fake-button/base.stories.js +2 -2
- package/src/less/button/stories/fake-button/cascade.stories.js +3 -3
- package/src/less/button/stories/fake-button/dimensions.stories.js +1 -1
- package/src/less/button/stories/fake-button/primary.stories.js +4 -4
- package/src/less/button/stories/fake-button/secondary.stories.js +4 -4
- package/src/less/carousel/stories/carousel.stories.js +16 -16
- package/src/less/checkbox/stories/checked.stories.js +16 -16
- package/src/less/checkbox/stories/mixed.stories.js +2 -2
- package/src/less/checkbox/stories/unchecked.stories.js +8 -8
- package/src/less/combobox/stories/combobox.stories.js +10 -10
- package/src/less/cta-button/stories/cascade.stories.js +3 -3
- package/src/less/cta-button/stories/cta-button.stories.js +1 -1
- package/src/less/cta-button/stories/dimensions.stories.js +2 -2
- package/src/less/details/stories/cascade.stories.js +3 -3
- package/src/less/details/stories/details.stories.js +4 -4
- package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +6 -6
- package/src/less/field/stories/stacked.stories.js +5 -5
- package/src/less/field/stories/unstacked.stories.js +4 -4
- package/src/less/filter-menu/stories/filter-menu.stories.js +30 -30
- package/src/less/filter-menu-button/filter-menu-button.less +3 -0
- package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +83 -83
- package/src/less/floating-label/stories/floating-label.stories.js +5 -5
- package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +4 -4
- package/src/less/global/global.less +6 -1
- package/src/less/global/stories/global.stories.js +12 -12
- package/src/less/icon/stories/icon.stories.js +5 -5
- package/src/less/icon-button/stories/alignment.stories.js +6 -6
- package/src/less/infotip/stories/infotip.stories.js +8 -8
- package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +4 -4
- package/src/less/link/link.less +15 -3
- package/src/less/listbox/stories/cascade.stories.js +9 -9
- package/src/less/listbox/stories/listbox.stories.js +9 -9
- package/src/less/listbox-button/listbox-button.less +15 -0
- package/src/less/listbox-button/stories/form.stories.js +97 -0
- package/src/less/menu/stories/fake-menu.stories.js +4 -4
- package/src/less/menu/stories/multiSelect.stories.js +9 -9
- package/src/less/menu-button/stories/base.stories.js +29 -29
- package/src/less/menu-button/stories/cascade.stories.js +6 -6
- package/src/less/menu-button/stories/dimensions.stories.js +1 -1
- package/src/less/menu-button/stories/fake-menu-button.stories.js +6 -6
- package/src/less/page-notice/page-notice.less +3 -4
- package/src/less/pagination/stories/button-cascade.stories.js +6 -6
- package/src/less/pagination/stories/buttons.stories.js +4 -4
- package/src/less/pagination/stories/link-cascade.stories.js +6 -6
- package/src/less/pagination/stories/links.stories.js +4 -4
- package/src/less/pagination/stories/overflow.stories.js +16 -16
- package/src/less/panel-dialog/stories/panel-dialog.stories.js +6 -6
- package/src/less/progress-spinner/stories/progress-spinner.stories.js +4 -4
- package/src/less/radio/stories/checked.stories.js +16 -16
- package/src/less/radio/stories/unchecked.stories.js +8 -8
- package/src/less/section-notice/section-notice.less +2 -2
- package/src/less/select/stories/cascade.stories.js +3 -3
- package/src/less/select/stories/default.stories.js +8 -8
- package/src/less/select/stories/floating-label.stories.js +4 -4
- package/src/less/split-button/stories/base.stories.js +12 -12
- package/src/less/split-button/stories/rtl.stories.js +6 -6
- package/src/less/split-button/stories/size.stories.js +2 -2
- package/src/less/textbox/stories/icon.stories.js +10 -10
- package/src/less/textbox/stories/rtl/icon.stories.js +7 -7
- package/src/less/tooltip/stories/pointer.stories.js +12 -12
- package/src/less/tooltip/stories/tooltip.stories.js +2 -2
- package/src/less/tourtip/stories/tourtip.stories.js +4 -4
- package/src/tokens/evo-light.css +2 -2
- package/_cdn/skin/v15.3.0-0/skin-default.min.css +0 -6
- package/_cdn/skin/v15.3.0-0/skin-full.min.css +0 -6
- package/_cdn/skin/v15.3.0-0/skin-headless.min.css +0 -6
- package/_cdn/skin/v15.3.0-0/skin-legacy.min.css +0 -6
|
@@ -6,7 +6,7 @@ export const collapsed = () => `
|
|
|
6
6
|
<span class="filter-menu-button__button-cell">
|
|
7
7
|
<span class="filter-menu-button__button-text">Filter Menu Button</span>
|
|
8
8
|
<svg class="icon icon--dropdown" focusable="false" height="12" width="12">
|
|
9
|
-
<use
|
|
9
|
+
<use href="#icon-dropdown"></use>
|
|
10
10
|
</svg>
|
|
11
11
|
</span>
|
|
12
12
|
</button>
|
|
@@ -15,10 +15,10 @@ export const collapsed = () => `
|
|
|
15
15
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
16
16
|
<span class="filter-menu-button__checkbox">
|
|
17
17
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
18
|
-
<use
|
|
18
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
19
19
|
</svg>
|
|
20
20
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
21
|
-
<use
|
|
21
|
+
<use href="#icon-checkbox-checked"></use>
|
|
22
22
|
</svg>
|
|
23
23
|
</span>
|
|
24
24
|
<span class="filter-menu-button__text">Item 1</span>
|
|
@@ -26,10 +26,10 @@ export const collapsed = () => `
|
|
|
26
26
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
27
27
|
<span class="filter-menu-button__checkbox">
|
|
28
28
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
29
|
-
<use
|
|
29
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
30
30
|
</svg>
|
|
31
31
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
32
|
-
<use
|
|
32
|
+
<use href="#icon-checkbox-checked"></use>
|
|
33
33
|
</svg>
|
|
34
34
|
</span>
|
|
35
35
|
<span class="filter-menu-button__text">Item 2</span>
|
|
@@ -37,10 +37,10 @@ export const collapsed = () => `
|
|
|
37
37
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
38
38
|
<span class="filter-menu-button__checkbox">
|
|
39
39
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
40
|
-
<use
|
|
40
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
41
41
|
</svg>
|
|
42
42
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
43
|
-
<use
|
|
43
|
+
<use href="#icon-checkbox-checked"></use>
|
|
44
44
|
</svg>
|
|
45
45
|
</span>
|
|
46
46
|
<span class="filter-menu-button__text">Item 3</span>
|
|
@@ -57,7 +57,7 @@ export const expanded = () => `
|
|
|
57
57
|
<span class="filter-menu-button__button-cell">
|
|
58
58
|
<span class="filter-menu-button__button-text">Filter Menu Button</span>
|
|
59
59
|
<svg class="icon icon--dropdown" focusable="false" height="12" width="12">
|
|
60
|
-
<use
|
|
60
|
+
<use href="#icon-dropdown"></use>
|
|
61
61
|
</svg>
|
|
62
62
|
</span>
|
|
63
63
|
</button>
|
|
@@ -66,10 +66,10 @@ export const expanded = () => `
|
|
|
66
66
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
67
67
|
<span class="filter-menu-button__checkbox">
|
|
68
68
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
69
|
-
<use
|
|
69
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
70
70
|
</svg>
|
|
71
71
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
72
|
-
<use
|
|
72
|
+
<use href="#icon-checkbox-checked"></use>
|
|
73
73
|
</svg>
|
|
74
74
|
</span>
|
|
75
75
|
<span class="filter-menu-button__text">Item 1</span>
|
|
@@ -77,10 +77,10 @@ export const expanded = () => `
|
|
|
77
77
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
78
78
|
<span class="filter-menu-button__checkbox">
|
|
79
79
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
80
|
-
<use
|
|
80
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
81
81
|
</svg>
|
|
82
82
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
83
|
-
<use
|
|
83
|
+
<use href="#icon-checkbox-checked"></use>
|
|
84
84
|
</svg>
|
|
85
85
|
</span>
|
|
86
86
|
<span class="filter-menu-button__text">Item 2</span>
|
|
@@ -88,10 +88,10 @@ export const expanded = () => `
|
|
|
88
88
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
89
89
|
<span class="filter-menu-button__checkbox">
|
|
90
90
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
91
|
-
<use
|
|
91
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
92
92
|
</svg>
|
|
93
93
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
94
|
-
<use
|
|
94
|
+
<use href="#icon-checkbox-checked"></use>
|
|
95
95
|
</svg>
|
|
96
96
|
</span>
|
|
97
97
|
<span class="filter-menu-button__text">Item 3</span>
|
|
@@ -108,7 +108,7 @@ export const pressed = () => `
|
|
|
108
108
|
<span class="filter-menu-button__button-cell">
|
|
109
109
|
<span class="filter-menu-button__button-text">Filter Menu Button</span>
|
|
110
110
|
<svg class="icon icon--dropdown" focusable="false" height="12" width="12">
|
|
111
|
-
<use
|
|
111
|
+
<use href="#icon-dropdown"></use>
|
|
112
112
|
</svg>
|
|
113
113
|
</span>
|
|
114
114
|
</button>
|
|
@@ -117,10 +117,10 @@ export const pressed = () => `
|
|
|
117
117
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
118
118
|
<span class="filter-menu-button__checkbox">
|
|
119
119
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
120
|
-
<use
|
|
120
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
121
121
|
</svg>
|
|
122
122
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
123
|
-
<use
|
|
123
|
+
<use href="#icon-checkbox-checked"></use>
|
|
124
124
|
</svg>
|
|
125
125
|
</span>
|
|
126
126
|
<span class="filter-menu-button__text">Item 1</span>
|
|
@@ -128,10 +128,10 @@ export const pressed = () => `
|
|
|
128
128
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
129
129
|
<span class="filter-menu-button__checkbox">
|
|
130
130
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
131
|
-
<use
|
|
131
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
132
132
|
</svg>
|
|
133
133
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
134
|
-
<use
|
|
134
|
+
<use href="#icon-checkbox-checked"></use>
|
|
135
135
|
</svg>
|
|
136
136
|
</span>
|
|
137
137
|
<span class="filter-menu-button__text">Item 2</span>
|
|
@@ -139,10 +139,10 @@ export const pressed = () => `
|
|
|
139
139
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
140
140
|
<span class="filter-menu-button__checkbox">
|
|
141
141
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
142
|
-
<use
|
|
142
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
143
143
|
</svg>
|
|
144
144
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
145
|
-
<use
|
|
145
|
+
<use href="#icon-checkbox-checked"></use>
|
|
146
146
|
</svg>
|
|
147
147
|
</span>
|
|
148
148
|
<span class="filter-menu-button__text">Item 3</span>
|
|
@@ -159,7 +159,7 @@ export const disabled = () => `
|
|
|
159
159
|
<span class="filter-menu-button__button-cell">
|
|
160
160
|
<span class="filter-menu-button__button-text">Filter Menu Button</span>
|
|
161
161
|
<svg class="icon icon--dropdown" focusable="false" height="12" width="12">
|
|
162
|
-
<use
|
|
162
|
+
<use href="#icon-dropdown"></use>
|
|
163
163
|
</svg>
|
|
164
164
|
</span>
|
|
165
165
|
</button>
|
|
@@ -168,10 +168,10 @@ export const disabled = () => `
|
|
|
168
168
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
169
169
|
<span class="filter-menu-button__checkbox">
|
|
170
170
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
171
|
-
<use
|
|
171
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
172
172
|
</svg>
|
|
173
173
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
174
|
-
<use
|
|
174
|
+
<use href="#icon-checkbox-checked"></use>
|
|
175
175
|
</svg>
|
|
176
176
|
</span>
|
|
177
177
|
<span class="filter-menu-button__text">Item 1</span>
|
|
@@ -179,10 +179,10 @@ export const disabled = () => `
|
|
|
179
179
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
180
180
|
<span class="filter-menu-button__checkbox">
|
|
181
181
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
182
|
-
<use
|
|
182
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
183
183
|
</svg>
|
|
184
184
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
185
|
-
<use
|
|
185
|
+
<use href="#icon-checkbox-checked"></use>
|
|
186
186
|
</svg>
|
|
187
187
|
</span>
|
|
188
188
|
<span class="filter-menu-button__text">Item 2</span>
|
|
@@ -190,10 +190,10 @@ export const disabled = () => `
|
|
|
190
190
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
191
191
|
<span class="filter-menu-button__checkbox">
|
|
192
192
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
193
|
-
<use
|
|
193
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
194
194
|
</svg>
|
|
195
195
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
196
|
-
<use
|
|
196
|
+
<use href="#icon-checkbox-checked"></use>
|
|
197
197
|
</svg>
|
|
198
198
|
</span>
|
|
199
199
|
<span class="filter-menu-button__text">Item 3</span>
|
|
@@ -209,7 +209,7 @@ export const overflow = () => `
|
|
|
209
209
|
<span class="filter-menu-button__button-cell">
|
|
210
210
|
<span class="filter-menu-button__button-text">Filter Menu Button</span>
|
|
211
211
|
<svg class="icon icon--dropdown" focusable="false" height="12" width="12">
|
|
212
|
-
<use
|
|
212
|
+
<use href="#icon-dropdown"></use>
|
|
213
213
|
</svg>
|
|
214
214
|
</span>
|
|
215
215
|
</button>
|
|
@@ -218,10 +218,10 @@ export const overflow = () => `
|
|
|
218
218
|
<div class="filter-menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
|
|
219
219
|
<span class="filter-menu-button__checkbox">
|
|
220
220
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
221
|
-
<use
|
|
221
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
222
222
|
</svg>
|
|
223
223
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
224
|
-
<use
|
|
224
|
+
<use href="#icon-checkbox-checked"></use>
|
|
225
225
|
</svg>
|
|
226
226
|
</span>
|
|
227
227
|
<span class="filter-menu-button__text">Item 1</span>
|
|
@@ -229,10 +229,10 @@ export const overflow = () => `
|
|
|
229
229
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
230
230
|
<span class="filter-menu-button__checkbox">
|
|
231
231
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
232
|
-
<use
|
|
232
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
233
233
|
</svg>
|
|
234
234
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
235
|
-
<use
|
|
235
|
+
<use href="#icon-checkbox-checked"></use>
|
|
236
236
|
</svg>
|
|
237
237
|
</span>
|
|
238
238
|
<span class="filter-menu-button__text">Item 2</span>
|
|
@@ -240,10 +240,10 @@ export const overflow = () => `
|
|
|
240
240
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
241
241
|
<span class="filter-menu-button__checkbox">
|
|
242
242
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
243
|
-
<use
|
|
243
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
244
244
|
</svg>
|
|
245
245
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
246
|
-
<use
|
|
246
|
+
<use href="#icon-checkbox-checked"></use>
|
|
247
247
|
</svg>
|
|
248
248
|
</span>
|
|
249
249
|
<span class="filter-menu-button__text">Item 3</span>
|
|
@@ -251,10 +251,10 @@ export const overflow = () => `
|
|
|
251
251
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
252
252
|
<span class="filter-menu-button__checkbox">
|
|
253
253
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
254
|
-
<use
|
|
254
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
255
255
|
</svg>
|
|
256
256
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
257
|
-
<use
|
|
257
|
+
<use href="#icon-checkbox-checked"></use>
|
|
258
258
|
</svg>
|
|
259
259
|
</span>
|
|
260
260
|
<span class="filter-menu-button__text">Item 4</span>
|
|
@@ -262,10 +262,10 @@ export const overflow = () => `
|
|
|
262
262
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
263
263
|
<span class="filter-menu-button__checkbox">
|
|
264
264
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
265
|
-
<use
|
|
265
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
266
266
|
</svg>
|
|
267
267
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
268
|
-
<use
|
|
268
|
+
<use href="#icon-checkbox-checked"></use>
|
|
269
269
|
</svg>
|
|
270
270
|
</span>
|
|
271
271
|
<span class="filter-menu-button__text">Item 5</span>
|
|
@@ -273,10 +273,10 @@ export const overflow = () => `
|
|
|
273
273
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
274
274
|
<span class="filter-menu-button__checkbox">
|
|
275
275
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
276
|
-
<use
|
|
276
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
277
277
|
</svg>
|
|
278
278
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
279
|
-
<use
|
|
279
|
+
<use href="#icon-checkbox-checked"></use>
|
|
280
280
|
</svg>
|
|
281
281
|
</span>
|
|
282
282
|
<span class="filter-menu-button__text">Item 6</span>
|
|
@@ -284,10 +284,10 @@ export const overflow = () => `
|
|
|
284
284
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
285
285
|
<span class="filter-menu-button__checkbox">
|
|
286
286
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
287
|
-
<use
|
|
287
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
288
288
|
</svg>
|
|
289
289
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
290
|
-
<use
|
|
290
|
+
<use href="#icon-checkbox-checked"></use>
|
|
291
291
|
</svg>
|
|
292
292
|
</span>
|
|
293
293
|
<span class="filter-menu-button__text">Item 7</span>
|
|
@@ -295,10 +295,10 @@ export const overflow = () => `
|
|
|
295
295
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
296
296
|
<span class="filter-menu-button__checkbox">
|
|
297
297
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
298
|
-
<use
|
|
298
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
299
299
|
</svg>
|
|
300
300
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
301
|
-
<use
|
|
301
|
+
<use href="#icon-checkbox-checked"></use>
|
|
302
302
|
</svg>
|
|
303
303
|
</span>
|
|
304
304
|
<span class="filter-menu-button__text">Item 8</span>
|
|
@@ -306,10 +306,10 @@ export const overflow = () => `
|
|
|
306
306
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
307
307
|
<span class="filter-menu-button__checkbox">
|
|
308
308
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
309
|
-
<use
|
|
309
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
310
310
|
</svg>
|
|
311
311
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
312
|
-
<use
|
|
312
|
+
<use href="#icon-checkbox-checked"></use>
|
|
313
313
|
</svg>
|
|
314
314
|
</span>
|
|
315
315
|
<span class="filter-menu-button__text">Item 9</span>
|
|
@@ -317,10 +317,10 @@ export const overflow = () => `
|
|
|
317
317
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
318
318
|
<span class="filter-menu-button__checkbox">
|
|
319
319
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
320
|
-
<use
|
|
320
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
321
321
|
</svg>
|
|
322
322
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
323
|
-
<use
|
|
323
|
+
<use href="#icon-checkbox-checked"></use>
|
|
324
324
|
</svg>
|
|
325
325
|
</span>
|
|
326
326
|
<span class="filter-menu-button__text">Item 10</span>
|
|
@@ -328,10 +328,10 @@ export const overflow = () => `
|
|
|
328
328
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
329
329
|
<span class="filter-menu-button__checkbox">
|
|
330
330
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
331
|
-
<use
|
|
331
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
332
332
|
</svg>
|
|
333
333
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
334
|
-
<use
|
|
334
|
+
<use href="#icon-checkbox-checked"></use>
|
|
335
335
|
</svg>
|
|
336
336
|
</span>
|
|
337
337
|
<span class="filter-menu-button__text">Item 11</span>
|
|
@@ -339,10 +339,10 @@ export const overflow = () => `
|
|
|
339
339
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
340
340
|
<span class="filter-menu-button__checkbox">
|
|
341
341
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
342
|
-
<use
|
|
342
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
343
343
|
</svg>
|
|
344
344
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
345
|
-
<use
|
|
345
|
+
<use href="#icon-checkbox-checked"></use>
|
|
346
346
|
</svg>
|
|
347
347
|
</span>
|
|
348
348
|
<span class="filter-menu-button__text">Item 12</span>
|
|
@@ -350,10 +350,10 @@ export const overflow = () => `
|
|
|
350
350
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
351
351
|
<span class="filter-menu-button__checkbox">
|
|
352
352
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
353
|
-
<use
|
|
353
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
354
354
|
</svg>
|
|
355
355
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
356
|
-
<use
|
|
356
|
+
<use href="#icon-checkbox-checked"></use>
|
|
357
357
|
</svg>
|
|
358
358
|
</span>
|
|
359
359
|
<span class="filter-menu-button__text">Item 13</span>
|
|
@@ -361,10 +361,10 @@ export const overflow = () => `
|
|
|
361
361
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
362
362
|
<span class="filter-menu-button__checkbox">
|
|
363
363
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
364
|
-
<use
|
|
364
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
365
365
|
</svg>
|
|
366
366
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
367
|
-
<use
|
|
367
|
+
<use href="#icon-checkbox-checked"></use>
|
|
368
368
|
</svg>
|
|
369
369
|
</span>
|
|
370
370
|
<span class="filter-menu-button__text">Item 14</span>
|
|
@@ -372,10 +372,10 @@ export const overflow = () => `
|
|
|
372
372
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
373
373
|
<span class="filter-menu-button__checkbox">
|
|
374
374
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
375
|
-
<use
|
|
375
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
376
376
|
</svg>
|
|
377
377
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
378
|
-
<use
|
|
378
|
+
<use href="#icon-checkbox-checked"></use>
|
|
379
379
|
</svg>
|
|
380
380
|
</span>
|
|
381
381
|
<span class="filter-menu-button__text">Item 15</span>
|
|
@@ -383,10 +383,10 @@ export const overflow = () => `
|
|
|
383
383
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
384
384
|
<span class="filter-menu-button__checkbox">
|
|
385
385
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
386
|
-
<use
|
|
386
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
387
387
|
</svg>
|
|
388
388
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
389
|
-
<use
|
|
389
|
+
<use href="#icon-checkbox-checked"></use>
|
|
390
390
|
</svg>
|
|
391
391
|
</span>
|
|
392
392
|
<span class="filter-menu-button__text">Item 16</span>
|
|
@@ -394,10 +394,10 @@ export const overflow = () => `
|
|
|
394
394
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
395
395
|
<span class="filter-menu-button__checkbox">
|
|
396
396
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
397
|
-
<use
|
|
397
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
398
398
|
</svg>
|
|
399
399
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
400
|
-
<use
|
|
400
|
+
<use href="#icon-checkbox-checked"></use>
|
|
401
401
|
</svg>
|
|
402
402
|
</span>
|
|
403
403
|
<span class="filter-menu-button__text">Item 17</span>
|
|
@@ -405,10 +405,10 @@ export const overflow = () => `
|
|
|
405
405
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
406
406
|
<span class="filter-menu-button__checkbox">
|
|
407
407
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
408
|
-
<use
|
|
408
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
409
409
|
</svg>
|
|
410
410
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
411
|
-
<use
|
|
411
|
+
<use href="#icon-checkbox-checked"></use>
|
|
412
412
|
</svg>
|
|
413
413
|
</span>
|
|
414
414
|
<span class="filter-menu-button__text">Item 18</span>
|
|
@@ -416,10 +416,10 @@ export const overflow = () => `
|
|
|
416
416
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
417
417
|
<span class="filter-menu-button__checkbox">
|
|
418
418
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
419
|
-
<use
|
|
419
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
420
420
|
</svg>
|
|
421
421
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
422
|
-
<use
|
|
422
|
+
<use href="#icon-checkbox-checked"></use>
|
|
423
423
|
</svg>
|
|
424
424
|
</span>
|
|
425
425
|
<span class="filter-menu-button__text">Item 19</span>
|
|
@@ -427,10 +427,10 @@ export const overflow = () => `
|
|
|
427
427
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
428
428
|
<span class="filter-menu-button__checkbox">
|
|
429
429
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
430
|
-
<use
|
|
430
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
431
431
|
</svg>
|
|
432
432
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
433
|
-
<use
|
|
433
|
+
<use href="#icon-checkbox-checked"></use>
|
|
434
434
|
</svg>
|
|
435
435
|
</span>
|
|
436
436
|
<span class="filter-menu-button__text">Item 20</span>
|
|
@@ -447,7 +447,7 @@ export const truncated = () => `
|
|
|
447
447
|
<span class="filter-menu-button__button-cell">
|
|
448
448
|
<span class="filter-menu-button__button-text">Filter Menu Button with a lot of text that will truncate</span>
|
|
449
449
|
<svg class="icon icon--dropdown" focusable="false" height="12" width="12">
|
|
450
|
-
<use
|
|
450
|
+
<use href="#icon-dropdown"></use>
|
|
451
451
|
</svg>
|
|
452
452
|
</span>
|
|
453
453
|
</button>
|
|
@@ -456,10 +456,10 @@ export const truncated = () => `
|
|
|
456
456
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
457
457
|
<span class="filter-menu-button__checkbox">
|
|
458
458
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
459
|
-
<use
|
|
459
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
460
460
|
</svg>
|
|
461
461
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
462
|
-
<use
|
|
462
|
+
<use href="#icon-checkbox-checked"></use>
|
|
463
463
|
</svg>
|
|
464
464
|
</span>
|
|
465
465
|
<span class="filter-menu-button__text">Item 1</span>
|
|
@@ -467,10 +467,10 @@ export const truncated = () => `
|
|
|
467
467
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
468
468
|
<span class="filter-menu-button__checkbox">
|
|
469
469
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
470
|
-
<use
|
|
470
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
471
471
|
</svg>
|
|
472
472
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
473
|
-
<use
|
|
473
|
+
<use href="#icon-checkbox-checked"></use>
|
|
474
474
|
</svg>
|
|
475
475
|
</span>
|
|
476
476
|
<span class="filter-menu-button__text">Item 2</span>
|
|
@@ -478,10 +478,10 @@ export const truncated = () => `
|
|
|
478
478
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
479
479
|
<span class="filter-menu-button__checkbox">
|
|
480
480
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
481
|
-
<use
|
|
481
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
482
482
|
</svg>
|
|
483
483
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
484
|
-
<use
|
|
484
|
+
<use href="#icon-checkbox-checked"></use>
|
|
485
485
|
</svg>
|
|
486
486
|
</span>
|
|
487
487
|
<span class="filter-menu-button__text">Item 3</span>
|
|
@@ -499,7 +499,7 @@ export const RTL = () => `
|
|
|
499
499
|
<span class="filter-menu-button__button-cell">
|
|
500
500
|
<span class="filter-menu-button__button-text">Filter Menu Button</span>
|
|
501
501
|
<svg class="icon icon--dropdown" focusable="false" height="12" width="12">
|
|
502
|
-
<use
|
|
502
|
+
<use href="#icon-dropdown"></use>
|
|
503
503
|
</svg>
|
|
504
504
|
</span>
|
|
505
505
|
</button>
|
|
@@ -508,10 +508,10 @@ export const RTL = () => `
|
|
|
508
508
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
509
509
|
<span class="filter-menu-button__checkbox">
|
|
510
510
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
511
|
-
<use
|
|
511
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
512
512
|
</svg>
|
|
513
513
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
514
|
-
<use
|
|
514
|
+
<use href="#icon-checkbox-checked"></use>
|
|
515
515
|
</svg>
|
|
516
516
|
</span>
|
|
517
517
|
<span class="filter-menu-button__text">Item 1</span>
|
|
@@ -519,10 +519,10 @@ export const RTL = () => `
|
|
|
519
519
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
520
520
|
<span class="filter-menu-button__checkbox">
|
|
521
521
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
522
|
-
<use
|
|
522
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
523
523
|
</svg>
|
|
524
524
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
525
|
-
<use
|
|
525
|
+
<use href="#icon-checkbox-checked"></use>
|
|
526
526
|
</svg>
|
|
527
527
|
</span>
|
|
528
528
|
<span class="filter-menu-button__text">Item 2</span>
|
|
@@ -530,10 +530,10 @@ export const RTL = () => `
|
|
|
530
530
|
<div class="filter-menu-button__item" role="menuitemcheckbox" aria-checked="false">
|
|
531
531
|
<span class="filter-menu-button__checkbox">
|
|
532
532
|
<svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
|
|
533
|
-
<use
|
|
533
|
+
<use href="#icon-checkbox-unchecked"></use>
|
|
534
534
|
</svg>
|
|
535
535
|
<svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
|
|
536
|
-
<use
|
|
536
|
+
<use href="#icon-checkbox-checked"></use>
|
|
537
537
|
</svg>
|
|
538
538
|
</span>
|
|
539
539
|
<span class="filter-menu-button__text">Item 3</span>
|
|
@@ -103,7 +103,7 @@ export const select = () => `
|
|
|
103
103
|
<option value="item3">Pick Option 3</option>
|
|
104
104
|
</select>
|
|
105
105
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
106
|
-
<use
|
|
106
|
+
<use href="#icon-dropdown"></use>
|
|
107
107
|
</svg>
|
|
108
108
|
</span>
|
|
109
109
|
</span>
|
|
@@ -120,7 +120,7 @@ export const selectInline = () => `
|
|
|
120
120
|
<option value="item3">Pick Option 3</option>
|
|
121
121
|
</select>
|
|
122
122
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
123
|
-
<use
|
|
123
|
+
<use href="#icon-dropdown"></use>
|
|
124
124
|
</svg>
|
|
125
125
|
</span>
|
|
126
126
|
</span>
|
|
@@ -137,7 +137,7 @@ export const selectInlineDoubled = () => `
|
|
|
137
137
|
<option value="item3">Pick Option 3</option>
|
|
138
138
|
</select>
|
|
139
139
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
140
|
-
<use
|
|
140
|
+
<use href="#icon-dropdown"></use>
|
|
141
141
|
</svg>
|
|
142
142
|
</span>
|
|
143
143
|
</span>
|
|
@@ -151,7 +151,7 @@ export const selectInlineDoubled = () => `
|
|
|
151
151
|
<option value="item3">Pick Option 3</option>
|
|
152
152
|
</select>
|
|
153
153
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
154
|
-
<use
|
|
154
|
+
<use href="#icon-dropdown"></use>
|
|
155
155
|
</svg>
|
|
156
156
|
</span>
|
|
157
157
|
</span>
|
|
@@ -170,7 +170,7 @@ export const RTLSelectInline = () => `
|
|
|
170
170
|
<option value="item3">Pick Option 3</option>
|
|
171
171
|
</select>
|
|
172
172
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
173
|
-
<use
|
|
173
|
+
<use href="#icon-dropdown"></use>
|
|
174
174
|
</svg>
|
|
175
175
|
</span>
|
|
176
176
|
</span>
|