@ebay/skin 15.3.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/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/package.json +1 -1
- 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/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/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/_cdn/skin/v15.3.0/skin-default.min.css +0 -6
- package/_cdn/skin/v15.3.0/skin-full.min.css +0 -6
- package/_cdn/skin/v15.3.0/skin-headless.min.css +0 -6
- package/_cdn/skin/v15.3.0/skin-legacy.min.css +0 -6
|
@@ -7,7 +7,7 @@ export const closeButton = () => `
|
|
|
7
7
|
<h2 id="fullscreen-dialog-title">Dialog Full</h2>
|
|
8
8
|
<button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
|
|
9
9
|
<svg class="icon icon--close-small" aria-hidden="true">
|
|
10
|
-
<use
|
|
10
|
+
<use href="#icon-close-small"></use>
|
|
11
11
|
</svg>
|
|
12
12
|
</button>
|
|
13
13
|
</div>
|
|
@@ -30,7 +30,7 @@ export const withFooter = () => `
|
|
|
30
30
|
<h2 id="fullscreen-dialog-title">Dialog Full</h2>
|
|
31
31
|
<button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
|
|
32
32
|
<svg class="icon icon--close-small" aria-hidden="true">
|
|
33
|
-
<use
|
|
33
|
+
<use href="#icon-close-small"></use>
|
|
34
34
|
</svg>
|
|
35
35
|
</button>
|
|
36
36
|
</div>
|
|
@@ -58,7 +58,7 @@ export const RTL = () => `
|
|
|
58
58
|
<h2 id="fullscreen-dialog-title">Dialog Full</h2>
|
|
59
59
|
<button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
|
|
60
60
|
<svg class="icon icon--close-small" aria-hidden="true">
|
|
61
|
-
<use
|
|
61
|
+
<use href="#icon-close-small"></use>
|
|
62
62
|
</svg>
|
|
63
63
|
</button>
|
|
64
64
|
</div>
|
|
@@ -82,7 +82,7 @@ export const backButton = () => `
|
|
|
82
82
|
<h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
|
|
83
83
|
<button class="icon-btn fullscreen-dialog__back" type="button" aria-label="Back">
|
|
84
84
|
<svg class="icon icon--back" aria-hidden="true">
|
|
85
|
-
<use
|
|
85
|
+
<use href="#icon-back"></use>
|
|
86
86
|
</svg>
|
|
87
87
|
</button>
|
|
88
88
|
</div>
|
|
@@ -42,7 +42,7 @@ export const alignment = () => `
|
|
|
42
42
|
<option value="3">Option 3</option>
|
|
43
43
|
</select>
|
|
44
44
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
45
|
-
<use
|
|
45
|
+
<use href="#icon-dropdown"></use>
|
|
46
46
|
</svg>
|
|
47
47
|
</span>
|
|
48
48
|
|
|
@@ -54,7 +54,7 @@ export const alignment = () => `
|
|
|
54
54
|
<span class="combobox__control">
|
|
55
55
|
<input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
|
|
56
56
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
57
|
-
<use
|
|
57
|
+
<use href="#icon-dropdown"></use>
|
|
58
58
|
</svg>
|
|
59
59
|
</span>
|
|
60
60
|
</span>
|
|
@@ -64,7 +64,7 @@ export const alignment = () => `
|
|
|
64
64
|
<span class="btn__cell">
|
|
65
65
|
<span class="btn__text">Options</span>
|
|
66
66
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
67
|
-
<use
|
|
67
|
+
<use href="#icon-dropdown"></use>
|
|
68
68
|
</svg>
|
|
69
69
|
</span>
|
|
70
70
|
</button>
|
|
@@ -75,7 +75,7 @@ export const alignment = () => `
|
|
|
75
75
|
<span class="btn__cell">
|
|
76
76
|
<span class="btn__text">Menu</span>
|
|
77
77
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
78
|
-
<use
|
|
78
|
+
<use href="#icon-dropdown"></use>
|
|
79
79
|
</svg>
|
|
80
80
|
</span>
|
|
81
81
|
</button>
|
|
@@ -95,7 +95,7 @@ export const RTLAlignment = () => `
|
|
|
95
95
|
<option value="3">Option 3</option>
|
|
96
96
|
</select>
|
|
97
97
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
98
|
-
<use
|
|
98
|
+
<use href="#icon-dropdown"></use>
|
|
99
99
|
</svg>
|
|
100
100
|
</span>
|
|
101
101
|
|
|
@@ -107,7 +107,7 @@ export const RTLAlignment = () => `
|
|
|
107
107
|
<span class="combobox__control">
|
|
108
108
|
<input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
|
|
109
109
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
110
|
-
<use
|
|
110
|
+
<use href="#icon-dropdown"></use>
|
|
111
111
|
</svg>
|
|
112
112
|
</span>
|
|
113
113
|
</span>
|
|
@@ -117,7 +117,7 @@ export const RTLAlignment = () => `
|
|
|
117
117
|
<span class="btn__cell">
|
|
118
118
|
<span class="btn__text">Options</span>
|
|
119
119
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
120
|
-
<use
|
|
120
|
+
<use href="#icon-dropdown"></use>
|
|
121
121
|
</svg>
|
|
122
122
|
</span>
|
|
123
123
|
</button>
|
|
@@ -128,7 +128,7 @@ export const RTLAlignment = () => `
|
|
|
128
128
|
<span class="btn__cell">
|
|
129
129
|
<span class="btn__text">Menu</span>
|
|
130
130
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
131
|
-
<use
|
|
131
|
+
<use href="#icon-dropdown"></use>
|
|
132
132
|
</svg>
|
|
133
133
|
</span>
|
|
134
134
|
</button>
|
|
@@ -148,7 +148,7 @@ export const alignmentLarge = () => `
|
|
|
148
148
|
<option value="3">Option 3</option>
|
|
149
149
|
</select>
|
|
150
150
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
151
|
-
<use
|
|
151
|
+
<use href="#icon-dropdown"></use>
|
|
152
152
|
</svg>
|
|
153
153
|
</span>
|
|
154
154
|
|
|
@@ -160,7 +160,7 @@ export const alignmentLarge = () => `
|
|
|
160
160
|
<span class="combobox__control">
|
|
161
161
|
<input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
|
|
162
162
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
163
|
-
<use
|
|
163
|
+
<use href="#icon-dropdown"></use>
|
|
164
164
|
</svg>
|
|
165
165
|
</span>
|
|
166
166
|
</span>
|
|
@@ -170,7 +170,7 @@ export const alignmentLarge = () => `
|
|
|
170
170
|
<span class="btn__cell">
|
|
171
171
|
<span class="btn__text">Options</span>
|
|
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
|
</button>
|
|
@@ -181,7 +181,7 @@ export const alignmentLarge = () => `
|
|
|
181
181
|
<span class="btn__cell">
|
|
182
182
|
<span class="btn__text">Menu</span>
|
|
183
183
|
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
184
|
-
<use
|
|
184
|
+
<use href="#icon-dropdown"></use>
|
|
185
185
|
</svg>
|
|
186
186
|
</span>
|
|
187
187
|
</button>
|
|
@@ -3,7 +3,7 @@ export default { title: 'Icon' };
|
|
|
3
3
|
export const insideHeading = () => `
|
|
4
4
|
<h2>
|
|
5
5
|
<svg class="icon icon--information">
|
|
6
|
-
<use
|
|
6
|
+
<use href="#icon-information"></use>
|
|
7
7
|
</svg>
|
|
8
8
|
<span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
|
|
9
9
|
</h2>
|
|
@@ -13,7 +13,7 @@ export const RTLInsideHeading = () => `
|
|
|
13
13
|
<div dir="rtl">
|
|
14
14
|
<h2>
|
|
15
15
|
<svg class="icon icon--information">
|
|
16
|
-
<use
|
|
16
|
+
<use href="#icon-information"></use>
|
|
17
17
|
</svg>
|
|
18
18
|
<span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
|
|
19
19
|
</h2>
|
|
@@ -23,7 +23,7 @@ export const RTLInsideHeading = () => `
|
|
|
23
23
|
export const insideParagraph = () => `
|
|
24
24
|
<p>
|
|
25
25
|
<svg class="icon icon--information">
|
|
26
|
-
<use
|
|
26
|
+
<use href="#icon-information"></use>
|
|
27
27
|
</svg>
|
|
28
28
|
<span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
|
|
29
29
|
</p>
|
|
@@ -32,7 +32,7 @@ export const insideParagraph = () => `
|
|
|
32
32
|
export const insideLink = () => `
|
|
33
33
|
<a href="http://www.ebay.com">
|
|
34
34
|
<svg class="icon icon--window">
|
|
35
|
-
<use
|
|
35
|
+
<use href="#icon-window"></use>
|
|
36
36
|
</svg>
|
|
37
37
|
<span>There was an error with your payment. Please try again.</span>
|
|
38
38
|
</a>
|
|
@@ -40,7 +40,7 @@ export const insideLink = () => `
|
|
|
40
40
|
|
|
41
41
|
export const beforeLink = () => `
|
|
42
42
|
<svg class="icon icon--window">
|
|
43
|
-
<use
|
|
43
|
+
<use href="#icon-window"></use>
|
|
44
44
|
</svg>
|
|
45
45
|
<a href="http://www.ebay.com">
|
|
46
46
|
<span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
|
|
@@ -2,27 +2,27 @@ export default { title: 'Icon Button/Alignment' };
|
|
|
2
2
|
|
|
3
3
|
export const menu = () => `
|
|
4
4
|
<button aria-label="menu" type="button" class="icon-btn">
|
|
5
|
-
<svg class="icon icon--menu" aria-hidden="true" focusable="false" width="16" height="16"><use
|
|
5
|
+
<svg class="icon icon--menu" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-menu"></use></svg>
|
|
6
6
|
</button>
|
|
7
7
|
<a aria-label="menu" class="icon-link" href="http://www.ebay.com">
|
|
8
|
-
<svg class="icon icon--menu" aria-hidden="true" focusable="false" width="16" height="16"><use
|
|
8
|
+
<svg class="icon icon--menu" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-menu"></use></svg>
|
|
9
9
|
</a>
|
|
10
10
|
`;
|
|
11
11
|
|
|
12
12
|
export const settings = () => `
|
|
13
13
|
<button aria-label="settings" type="button" class="icon-btn">
|
|
14
|
-
<svg class="icon icon--settings" aria-hidden="true" focusable="false" width="16" height="16"><use
|
|
14
|
+
<svg class="icon icon--settings" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-settings"></use></svg>
|
|
15
15
|
</button>
|
|
16
16
|
<a aria-label="settings" class="icon-link" href="http://www.ebay.com">
|
|
17
|
-
<svg class="icon icon--settings" aria-hidden="true" focusable="false" width="16" height="16"><use
|
|
17
|
+
<svg class="icon icon--settings" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-settings"></use></svg>
|
|
18
18
|
</a>
|
|
19
19
|
`;
|
|
20
20
|
|
|
21
21
|
export const close = () => `
|
|
22
22
|
<button aria-label="close" type="button" class="icon-btn">
|
|
23
|
-
<svg class="icon icon--close" aria-hidden="true" focusable="false" width="16" height="16"><use
|
|
23
|
+
<svg class="icon icon--close" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-close"></use></svg>
|
|
24
24
|
</button>
|
|
25
25
|
<a aria-label="close" class="icon-link" href="http://www.ebay.com">
|
|
26
|
-
<svg class="icon icon--close" aria-hidden="true" focusable="false" width="16" height="16"><use
|
|
26
|
+
<svg class="icon icon--close" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-close"></use></svg>
|
|
27
27
|
</a>
|
|
28
28
|
`;
|
|
@@ -4,7 +4,7 @@ export const collapsed = () => `
|
|
|
4
4
|
<span class="infotip">
|
|
5
5
|
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
|
|
6
6
|
<svg class="icon icon--information-small" focusable="false" width="16" height="16" aria-hidden="true">
|
|
7
|
-
<use
|
|
7
|
+
<use href="#icon-information-small"></use>
|
|
8
8
|
</svg>
|
|
9
9
|
</button>
|
|
10
10
|
<div class="infotip__overlay">
|
|
@@ -17,7 +17,7 @@ export const collapsed = () => `
|
|
|
17
17
|
</span>
|
|
18
18
|
<button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
|
|
19
19
|
<svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
|
|
20
|
-
<use
|
|
20
|
+
<use href="#icon-close"></use>
|
|
21
21
|
</svg>
|
|
22
22
|
</button>
|
|
23
23
|
</div>
|
|
@@ -29,7 +29,7 @@ export const expanded = () => `
|
|
|
29
29
|
<span class="infotip">
|
|
30
30
|
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
|
|
31
31
|
<svg class="icon icon--information-small" focusable="false" width="16" height="16" aria-hidden="true">
|
|
32
|
-
<use
|
|
32
|
+
<use href="#icon-information-small"></use>
|
|
33
33
|
</svg>
|
|
34
34
|
</button>
|
|
35
35
|
<div class="infotip__overlay">
|
|
@@ -42,7 +42,7 @@ export const expanded = () => `
|
|
|
42
42
|
</span>
|
|
43
43
|
<button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
|
|
44
44
|
<svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
|
|
45
|
-
<use
|
|
45
|
+
<use href="#icon-close"></use>
|
|
46
46
|
</svg>
|
|
47
47
|
</button>
|
|
48
48
|
</div>
|
|
@@ -56,7 +56,7 @@ export const paragraphCollapsed = () => `
|
|
|
56
56
|
<span class="infotip">
|
|
57
57
|
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
|
|
58
58
|
<svg class="icon icon--information-small" focusable="false" width="16" height="16" aria-hidden="true">
|
|
59
|
-
<use
|
|
59
|
+
<use href="#icon-information-small"></use>
|
|
60
60
|
</svg>
|
|
61
61
|
</button>
|
|
62
62
|
<span class="infotip__overlay">
|
|
@@ -69,7 +69,7 @@ export const paragraphCollapsed = () => `
|
|
|
69
69
|
</span>
|
|
70
70
|
<button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
|
|
71
71
|
<svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
|
|
72
|
-
<use
|
|
72
|
+
<use href="#icon-close"></use>
|
|
73
73
|
</svg>
|
|
74
74
|
</button>
|
|
75
75
|
</span>
|
|
@@ -84,7 +84,7 @@ export const paragraphExpanded = () => `
|
|
|
84
84
|
<span class="infotip">
|
|
85
85
|
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
|
|
86
86
|
<svg class="icon icon--information-small" focusable="false" width="16" height="16" aria-hidden="true">
|
|
87
|
-
<use
|
|
87
|
+
<use href="#icon-information-small"></use>
|
|
88
88
|
</svg>
|
|
89
89
|
</button>
|
|
90
90
|
<span class="infotip__overlay">
|
|
@@ -97,7 +97,7 @@ export const paragraphExpanded = () => `
|
|
|
97
97
|
</span>
|
|
98
98
|
<button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
|
|
99
99
|
<svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
|
|
100
|
-
<use
|
|
100
|
+
<use href="#icon-close"></use>
|
|
101
101
|
</svg>
|
|
102
102
|
</button>
|
|
103
103
|
</span>
|
|
@@ -7,7 +7,7 @@ export const base = () => `
|
|
|
7
7
|
<h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
|
|
8
8
|
<button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
|
|
9
9
|
<svg class="icon icon--close-small" aria-hidden="true">
|
|
10
|
-
<use
|
|
10
|
+
<use href="#icon-close-small"></use>
|
|
11
11
|
</svg>
|
|
12
12
|
</button>
|
|
13
13
|
</div>
|
|
@@ -30,7 +30,7 @@ export const baseWithFooter = () => `
|
|
|
30
30
|
<h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
|
|
31
31
|
<button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
|
|
32
32
|
<svg class="icon icon--close-small" aria-hidden="true">
|
|
33
|
-
<use
|
|
33
|
+
<use href="#icon-close-small"></use>
|
|
34
34
|
</svg>
|
|
35
35
|
</button>
|
|
36
36
|
</div>
|
|
@@ -59,7 +59,7 @@ export const baseRTL = () => `
|
|
|
59
59
|
<h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
|
|
60
60
|
<button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
|
|
61
61
|
<svg class="icon icon--close-small" aria-hidden="true">
|
|
62
|
-
<use
|
|
62
|
+
<use href="#icon-close-small"></use>
|
|
63
63
|
</svg>
|
|
64
64
|
</button>
|
|
65
65
|
</div>
|
|
@@ -83,7 +83,7 @@ export const baseWithLongHeader = () => `
|
|
|
83
83
|
<h2 id="lightbox-dialog-title">Dialog Lightbox with a very long header that should wrap to the next line, but is actually cut off</h2>
|
|
84
84
|
<button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
|
|
85
85
|
<svg class="icon icon--close-small" aria-hidden="true">
|
|
86
|
-
<use
|
|
86
|
+
<use href="#icon-close-small"></use>
|
|
87
87
|
</svg>
|
|
88
88
|
</button>
|
|
89
89
|
</div>
|
|
@@ -6,19 +6,19 @@ export const RTL = () => `
|
|
|
6
6
|
<div class="listbox__option" role="option" aria-selected="true">
|
|
7
7
|
<span class="listbox__value">Option 1</span>
|
|
8
8
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
9
|
-
<use
|
|
9
|
+
<use href="#icon-tick-small"></use>
|
|
10
10
|
</svg>
|
|
11
11
|
</div>
|
|
12
12
|
<div class="listbox__option" role="option">
|
|
13
13
|
<span class="listbox__value">Option 2</span>
|
|
14
14
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
15
|
-
<use
|
|
15
|
+
<use href="#icon-tick-small"></use>
|
|
16
16
|
</svg>
|
|
17
17
|
</div>
|
|
18
18
|
<div class="listbox__option" role="option">
|
|
19
19
|
<span class="listbox__value">Option 3</span>
|
|
20
20
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
21
|
-
<use
|
|
21
|
+
<use href="#icon-tick-small"></use>
|
|
22
22
|
</svg>
|
|
23
23
|
</div>
|
|
24
24
|
</div>
|
|
@@ -31,19 +31,19 @@ export const color = () => `
|
|
|
31
31
|
<div class="listbox__option" role="option" aria-selected="true">
|
|
32
32
|
<span class="listbox__value">Option 1</span>
|
|
33
33
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
34
|
-
<use
|
|
34
|
+
<use href="#icon-tick-small"></use>
|
|
35
35
|
</svg>
|
|
36
36
|
</div>
|
|
37
37
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
38
38
|
<span class="listbox__value">Option 2</span>
|
|
39
39
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
40
|
-
<use
|
|
40
|
+
<use href="#icon-tick-small"></use>
|
|
41
41
|
</svg>
|
|
42
42
|
</div>
|
|
43
43
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
44
44
|
<span class="listbox__value">Option 3</span>
|
|
45
45
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
46
|
-
<use
|
|
46
|
+
<use href="#icon-tick-small"></use>
|
|
47
47
|
</svg>
|
|
48
48
|
</div>
|
|
49
49
|
</div>
|
|
@@ -56,19 +56,19 @@ export const fontSize = () => `
|
|
|
56
56
|
<div class="listbox__option" role="option" aria-selected="true">
|
|
57
57
|
<span class="listbox__value">Option 1</span>
|
|
58
58
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
59
|
-
<use
|
|
59
|
+
<use href="#icon-tick-small"></use>
|
|
60
60
|
</svg>
|
|
61
61
|
</div>
|
|
62
62
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
63
63
|
<span class="listbox__value">Option 2</span>
|
|
64
64
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
65
|
-
<use
|
|
65
|
+
<use href="#icon-tick-small"></use>
|
|
66
66
|
</svg>
|
|
67
67
|
</div>
|
|
68
68
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
69
69
|
<span class="listbox__value">Option 3</span>
|
|
70
70
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
71
|
-
<use
|
|
71
|
+
<use href="#icon-tick-small"></use>
|
|
72
72
|
</svg>
|
|
73
73
|
</div>
|
|
74
74
|
</div>
|
|
@@ -6,19 +6,19 @@ export const unselected = () => `
|
|
|
6
6
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
7
7
|
<span class="listbox__value">Option 1</span>
|
|
8
8
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
9
|
-
<use
|
|
9
|
+
<use href="#icon-tick-small"></use>
|
|
10
10
|
</svg>
|
|
11
11
|
</div>
|
|
12
12
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
13
13
|
<span class="listbox__value">Option 2</span>
|
|
14
14
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
15
|
-
<use
|
|
15
|
+
<use href="#icon-tick-small"></use>
|
|
16
16
|
</svg>
|
|
17
17
|
</div>
|
|
18
18
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
19
19
|
<span class="listbox__value">Option 3</span>
|
|
20
20
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
21
|
-
<use
|
|
21
|
+
<use href="#icon-tick-small"></use>
|
|
22
22
|
</svg>
|
|
23
23
|
</div>
|
|
24
24
|
</div>
|
|
@@ -31,19 +31,19 @@ export const selected = () => `
|
|
|
31
31
|
<div class="listbox__option" role="option" aria-selected="true">
|
|
32
32
|
<span class="listbox__value">Option 1</span>
|
|
33
33
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
34
|
-
<use
|
|
34
|
+
<use href="#icon-tick-small"></use>
|
|
35
35
|
</svg>
|
|
36
36
|
</div>
|
|
37
37
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
38
38
|
<span class="listbox__value">Option 2</span>
|
|
39
39
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
40
|
-
<use
|
|
40
|
+
<use href="#icon-tick-small"></use>
|
|
41
41
|
</svg>
|
|
42
42
|
</div>
|
|
43
43
|
<div class="listbox__option" role="option" aria-selected="false">
|
|
44
44
|
<span class="listbox__value">Option 3</span>
|
|
45
45
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
46
|
-
<use
|
|
46
|
+
<use href="#icon-tick-small"></use>
|
|
47
47
|
</svg>
|
|
48
48
|
</div>
|
|
49
49
|
</div>
|
|
@@ -56,19 +56,19 @@ export const multiSelected = () => `
|
|
|
56
56
|
<div class="listbox__option" role="option" aria-selected="true">
|
|
57
57
|
<span class="listbox__value">Option 1</span>
|
|
58
58
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
59
|
-
<use
|
|
59
|
+
<use href="#icon-tick-small"></use>
|
|
60
60
|
</svg>
|
|
61
61
|
</div>
|
|
62
62
|
<div class="listbox__option" role="option" aria-selected="true">
|
|
63
63
|
<span class="listbox__value">Option 2</span>
|
|
64
64
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
65
|
-
<use
|
|
65
|
+
<use href="#icon-tick-small"></use>
|
|
66
66
|
</svg>
|
|
67
67
|
</div>
|
|
68
68
|
<div class="listbox__option" role="option" aria-selected="true">
|
|
69
69
|
<span class="listbox__value">Option 3</span>
|
|
70
70
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
71
|
-
<use
|
|
71
|
+
<use href="#icon-tick-small"></use>
|
|
72
72
|
</svg>
|
|
73
73
|
</div>
|
|
74
74
|
</div>
|
|
@@ -50,6 +50,21 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
.listbox-button.listbox-button--form button {
|
|
54
|
+
.background-color-token(listbox-button-background-color, color-background-secondary);
|
|
55
|
+
.border-color-token(listbox-button-border-color, color-stroke-default);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.listbox-button.listbox-button--form button[disabled],
|
|
59
|
+
.listbox-button.listbox-button--form button[aria-disabled="true"] {
|
|
60
|
+
.border-color-token(listbox-button-disabled-border-color, color-background-disabled);
|
|
61
|
+
.color-token(listbox-button-disabled-foreground-color, color-foreground-disabled);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.listbox-button.listbox-button--form button:focus {
|
|
65
|
+
.background-color-token(combobox-textbox-focus-background-color, color-background-primary);
|
|
66
|
+
}
|
|
67
|
+
|
|
53
68
|
.listbox-button .btn__label {
|
|
54
69
|
.color-token(listbox-button-label-color, color-foreground-secondary);
|
|
55
70
|
margin-right: 3px;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
export default { title: 'Listbox Button/Form' };
|
|
2
|
+
|
|
3
|
+
export const enabled = () => `
|
|
4
|
+
<span class="listbox-button listbox-button--form">
|
|
5
|
+
<button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox">
|
|
6
|
+
<span class="btn__cell">
|
|
7
|
+
<span class="btn__label">Color: </span>
|
|
8
|
+
<span class="btn__text">-</span>
|
|
9
|
+
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
10
|
+
<use href="#icon-dropdown"></use>
|
|
11
|
+
</svg>
|
|
12
|
+
</span>
|
|
13
|
+
</button>
|
|
14
|
+
<div class="listbox-button__listbox">
|
|
15
|
+
<div class="listbox-button__options" role="listbox">
|
|
16
|
+
<div class="listbox-button__option" role="option">
|
|
17
|
+
<span class="listbox-button__value">Red</span>
|
|
18
|
+
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
19
|
+
<use href="#icon-tick-small"></use>
|
|
20
|
+
</svg>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="listbox-button__option" role="option">
|
|
23
|
+
<span class="listbox-button__value">Blue</span>
|
|
24
|
+
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
25
|
+
<use href="#icon-tick-small"></use>
|
|
26
|
+
</svg>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="listbox-button__option" role="option">
|
|
29
|
+
<span class="listbox-button__value">Yellow</span>
|
|
30
|
+
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
31
|
+
<use href="#icon-tick-small"></use>
|
|
32
|
+
</svg>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="listbox-button__option" role="option">
|
|
35
|
+
<span class="listbox-button__value">Green</span>
|
|
36
|
+
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
37
|
+
<use href="#icon-tick-small"></use>
|
|
38
|
+
</svg>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<select hidden="" class="listbox__native">
|
|
43
|
+
<option value="1"></option>
|
|
44
|
+
<option value="2"></option>
|
|
45
|
+
<option value="3"></option>
|
|
46
|
+
<option value="4"></option>
|
|
47
|
+
</select>
|
|
48
|
+
</span>
|
|
49
|
+
`;
|
|
50
|
+
|
|
51
|
+
export const disabled = () => `
|
|
52
|
+
<span class="listbox-button listbox-button--form">
|
|
53
|
+
<button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox" disabled>
|
|
54
|
+
<span class="btn__cell">
|
|
55
|
+
<span class="btn__label">Color: </span>
|
|
56
|
+
<span class="btn__text">-</span>
|
|
57
|
+
<svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
|
|
58
|
+
<use href="#icon-dropdown"></use>
|
|
59
|
+
</svg>
|
|
60
|
+
</span>
|
|
61
|
+
</button>
|
|
62
|
+
<div class="listbox-button__listbox">
|
|
63
|
+
<div class="listbox-button__options" role="listbox">
|
|
64
|
+
<div class="listbox-button__option" role="option">
|
|
65
|
+
<span class="listbox-button__value">Red</span>
|
|
66
|
+
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
67
|
+
<use href="#icon-tick-small"></use>
|
|
68
|
+
</svg>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="listbox-button__option" role="option">
|
|
71
|
+
<span class="listbox-button__value">Blue</span>
|
|
72
|
+
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
73
|
+
<use href="#icon-tick-small"></use>
|
|
74
|
+
</svg>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="listbox-button__option" role="option">
|
|
77
|
+
<span class="listbox-button__value">Yellow</span>
|
|
78
|
+
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
79
|
+
<use href="#icon-tick-small"></use>
|
|
80
|
+
</svg>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="listbox-button__option" role="option">
|
|
83
|
+
<span class="listbox-button__value">Green</span>
|
|
84
|
+
<svg class="icon icon--tick-small" focusable="false" height="8" width="8">
|
|
85
|
+
<use href="#icon-tick-small"></use>
|
|
86
|
+
</svg>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
<select hidden="" class="listbox__native">
|
|
91
|
+
<option value="1"></option>
|
|
92
|
+
<option value="2"></option>
|
|
93
|
+
<option value="3"></option>
|
|
94
|
+
<option value="4"></option>
|
|
95
|
+
</select>
|
|
96
|
+
</span>
|
|
97
|
+
`;
|
|
@@ -37,7 +37,7 @@ export const linksSelected = () => `
|
|
|
37
37
|
<a aria-current="page" class="fake-menu__item" href="http://www.ebay.com">
|
|
38
38
|
<span>Link 1</span>
|
|
39
39
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
|
|
40
|
-
<use
|
|
40
|
+
<use href="#icon-tick-small"></use>
|
|
41
41
|
</svg>
|
|
42
42
|
</a>
|
|
43
43
|
</li>
|
|
@@ -54,7 +54,7 @@ export const buttonsSelected = () => `
|
|
|
54
54
|
<button aria-current="page" class="fake-menu__item">
|
|
55
55
|
<span>Button 1</span>
|
|
56
56
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
|
|
57
|
-
<use
|
|
57
|
+
<use href="#icon-tick-small"></use>
|
|
58
58
|
</svg>
|
|
59
59
|
</button>
|
|
60
60
|
</li>
|
|
@@ -71,7 +71,7 @@ export const linksDisabled = () => `
|
|
|
71
71
|
<a aria-current="page" class="fake-menu__item">
|
|
72
72
|
<span>Link 1</span>
|
|
73
73
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
|
|
74
|
-
<use
|
|
74
|
+
<use href="#icon-tick-small"></use>
|
|
75
75
|
</svg>
|
|
76
76
|
</a>
|
|
77
77
|
</li>
|
|
@@ -88,7 +88,7 @@ export const buttonsDisabled = () => `
|
|
|
88
88
|
<button aria-current="page" class="fake-menu__item" disabled>
|
|
89
89
|
<span>Button 1</span>
|
|
90
90
|
<svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
|
|
91
|
-
<use
|
|
91
|
+
<use href="#icon-tick-small"></use>
|
|
92
92
|
</svg>
|
|
93
93
|
</button>
|
|
94
94
|
</li>
|