@ebay/skin 15.0.0 → 15.1.0-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/.github/PULL_REQUEST_TEMPLATE.md +1 -0
  2. package/_cdn/skin/v15.1.0-1/skin-default.min.css +6 -0
  3. package/_cdn/skin/v15.1.0-1/skin-full.min.css +6 -0
  4. package/_cdn/skin/v15.1.0-1/skin-headless.min.css +6 -0
  5. package/_cdn/skin/v15.1.0-1/skin-legacy.min.css +6 -0
  6. package/dist/combobox/combobox.css +6 -0
  7. package/dist/drawer-dialog/drawer-dialog.css +11 -5
  8. package/dist/filter-menu/filter-menu.css +54 -45
  9. package/dist/filter-menu-button/filter-menu-button.css +24 -0
  10. package/dist/floating-label/floating-label.css +12 -0
  11. package/dist/fullscreen-dialog/fullscreen-dialog.css +3 -0
  12. package/dist/inline-notice/inline-notice.css +1 -1
  13. package/dist/lightbox-dialog/lightbox-dialog.css +3 -0
  14. package/dist/listbox/listbox.css +6 -0
  15. package/dist/listbox-button/listbox-button.css +22 -0
  16. package/dist/menu/menu.css +2 -0
  17. package/dist/page-notice/page-notice.css +4 -1
  18. package/dist/panel-dialog/panel-dialog.css +3 -0
  19. package/dist/section-notice/section-notice.css +47 -17
  20. package/dist/tourtip/tourtip.css +28 -0
  21. package/package.json +21 -21
  22. package/src/less/drawer-dialog/drawer-dialog.less +10 -5
  23. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +12 -174
  24. package/src/less/filter-menu/filter-menu.less +16 -52
  25. package/src/less/filter-menu/stories/filter-menu.stories.js +40 -0
  26. package/src/less/floating-label/floating-label.less +15 -0
  27. package/src/less/floating-label/stories/floating-label.stories.js +1 -1
  28. package/src/less/inline-notice/inline-notice.less +1 -1
  29. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +23 -0
  30. package/src/less/listbox-button/listbox-button.less +20 -0
  31. package/src/less/listbox-button/stories/base.stories.js +48 -41
  32. package/src/less/listbox-button/stories/cascade.stories.js +21 -18
  33. package/src/less/listbox-button/stories/dimensions.stories.js +7 -6
  34. package/src/less/menu/menu.less +2 -0
  35. package/src/less/mixins/private/dialog-mixins.less +3 -0
  36. package/src/less/mixins/private/filter-menu-mixins.less +13 -0
  37. package/src/less/mixins/private/listbox-mixins.less +7 -0
  38. package/src/less/page-notice/page-notice.less +5 -1
  39. package/src/less/page-notice/stories/page-notice.stories.js +16 -0
  40. package/src/less/section-notice/section-notice.less +56 -17
  41. package/src/less/section-notice/stories/rtl.stories.js +66 -0
  42. package/src/less/section-notice/stories/section-notice.stories.js +59 -0
  43. package/src/less/section-notice/stories/test.stories.js +24 -0
  44. package/src/less/tourtip/stories/tourtip.stories.js +51 -0
  45. package/src/less/tourtip/tourtip.less +40 -0
  46. package/_cdn/skin/v15.0.0/skin-default.min.css +0 -6
  47. package/_cdn/skin/v15.0.0/skin-full.min.css +0 -6
  48. package/_cdn/skin/v15.0.0/skin-headless.min.css +0 -6
  49. package/_cdn/skin/v15.0.0/skin-legacy.min.css +0 -6
package/src/less/listbox-button/stories/base.stories.js CHANGED
@@ -4,9 +4,10 @@ export const collapsedUnselected = () => `
4
4
  <span class="listbox-button">
5
5
  <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox">
6
6
  <span class="btn__cell">
7
- <span class="btn__text">Color</span>
7
+ <span class="btn__label">Color: </span>
8
+ <span class="btn__text">-</span>
8
9
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
9
- <use xlink:href="#icon-dropdown"></use>
10
+ <use href="#icon-dropdown"></use>
10
11
  </svg>
11
12
  </span>
12
13
  </button>
@@ -15,25 +16,25 @@ export const collapsedUnselected = () => `
15
16
  <div class="listbox-button__option" role="option">
16
17
  <span class="listbox-button__value">Red</span>
17
18
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
18
- <use xlink:href="#icon-tick-small"></use>
19
+ <use href="#icon-tick-small"></use>
19
20
  </svg>
20
21
  </div>
21
22
  <div class="listbox-button__option" role="option">
22
23
  <span class="listbox-button__value">Blue</span>
23
24
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
24
- <use xlink:href="#icon-tick-small"></use>
25
+ <use href="#icon-tick-small"></use>
25
26
  </svg>
26
27
  </div>
27
28
  <div class="listbox-button__option" role="option">
28
29
  <span class="listbox-button__value">Yellow</span>
29
30
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
30
- <use xlink:href="#icon-tick-small"></use>
31
+ <use href="#icon-tick-small"></use>
31
32
  </svg>
32
33
  </div>
33
34
  <div class="listbox-button__option" role="option">
34
35
  <span class="listbox-button__value">Green</span>
35
36
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
36
- <use xlink:href="#icon-tick-small"></use>
37
+ <use href="#icon-tick-small"></use>
37
38
  </svg>
38
39
  </div>
39
40
  </div>
@@ -45,9 +46,10 @@ export const expandedUnselected = () => `
45
46
  <span class="listbox-button">
46
47
  <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
47
48
  <span class="btn__cell">
48
- <span class="btn__text">Color</span>
49
+ <span class="btn__label">Color: </span>
50
+ <span class="btn__text">-</span>
49
51
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
50
- <use xlink:href="#icon-dropdown"></use>
52
+ <use href="#icon-dropdown"></use>
51
53
  </svg>
52
54
  </span>
53
55
  </button>
@@ -56,25 +58,25 @@ export const expandedUnselected = () => `
56
58
  <div class="listbox-button__option" role="option">
57
59
  <span class="listbox-button__value">Red</span>
58
60
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
59
- <use xlink:href="#icon-tick-small"></use>
61
+ <use href="#icon-tick-small"></use>
60
62
  </svg>
61
63
  </div>
62
64
  <div class="listbox-button__option" role="option">
63
65
  <span class="listbox-button__value">Blue</span>
64
66
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
65
- <use xlink:href="#icon-tick-small"></use>
67
+ <use href="#icon-tick-small"></use>
66
68
  </svg>
67
69
  </div>
68
70
  <div class="listbox-button__option" role="option">
69
71
  <span class="listbox-button__value">Yellow</span>
70
72
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
71
- <use xlink:href="#icon-tick-small"></use>
73
+ <use href="#icon-tick-small"></use>
72
74
  </svg>
73
75
  </div>
74
76
  <div class="listbox-button__option" role="option">
75
77
  <span class="listbox-button__value">Green</span>
76
78
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
77
- <use xlink:href="#icon-tick-small"></use>
79
+ <use href="#icon-tick-small"></use>
78
80
  </svg>
79
81
  </div>
80
82
  </div>
@@ -86,9 +88,10 @@ export const collapsedSelected = () => `
86
88
  <span class="listbox-button">
87
89
  <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox">
88
90
  <span class="btn__cell">
89
- <span class="btn__text">Color: Blue</span>
91
+ <span class="btn__label">Color: </span>
92
+ <span class="btn__text">Blue</span>
90
93
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
91
- <use xlink:href="#icon-dropdown"></use>
94
+ <use href="#icon-dropdown"></use>
92
95
  </svg>
93
96
  </span>
94
97
  </button>
@@ -97,25 +100,25 @@ export const collapsedSelected = () => `
97
100
  <div class="listbox-button__option" role="option">
98
101
  <span class="listbox-button__value">Red</span>
99
102
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
100
- <use xlink:href="#icon-tick-small"></use>
103
+ <use href="#icon-tick-small"></use>
101
104
  </svg>
102
105
  </div>
103
106
  <div class="listbox-button__option" role="option" aria-selected="true">
104
107
  <span class="listbox-button__value">Blue</span>
105
108
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
106
- <use xlink:href="#icon-tick-small"></use>
109
+ <use href="#icon-tick-small"></use>
107
110
  </svg>
108
111
  </div>
109
112
  <div class="listbox-button__option" role="option">
110
113
  <span class="listbox-button__value">Yellow</span>
111
114
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
112
- <use xlink:href="#icon-tick-small"></use>
115
+ <use href="#icon-tick-small"></use>
113
116
  </svg>
114
117
  </div>
115
118
  <div class="listbox-button__option" role="option">
116
119
  <span class="listbox-button__value">Green</span>
117
120
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
118
- <use xlink:href="#icon-tick-small"></use>
121
+ <use href="#icon-tick-small"></use>
119
122
  </svg>
120
123
  </div>
121
124
  </div>
@@ -127,9 +130,10 @@ export const expandedSelected = () => `
127
130
  <span class="listbox-button">
128
131
  <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
129
132
  <span class="btn__cell">
130
- <span class="btn__text">Color: Blue</span>
133
+ <span class="btn__label">Color: </span>
134
+ <span class="btn__text">Blue</span>
131
135
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
132
- <use xlink:href="#icon-dropdown"></use>
136
+ <use href="#icon-dropdown"></use>
133
137
  </svg>
134
138
  </span>
135
139
  </button>
@@ -138,25 +142,25 @@ export const expandedSelected = () => `
138
142
  <div class="listbox-button__option" role="option">
139
143
  <span class="listbox-button__value">Red</span>
140
144
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
141
- <use xlink:href="#icon-tick-small"></use>
145
+ <use href="#icon-tick-small"></use>
142
146
  </svg>
143
147
  </div>
144
148
  <div class="listbox-button__option" role="option" aria-selected="true">
145
149
  <span class="listbox-button__value">Blue</span>
146
150
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
147
- <use xlink:href="#icon-tick-small"></use>
151
+ <use href="#icon-tick-small"></use>
148
152
  </svg>
149
153
  </div>
150
154
  <div class="listbox-button__option" role="option">
151
155
  <span class="listbox-button__value">Yellow</span>
152
156
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
153
- <use xlink:href="#icon-tick-small"></use>
157
+ <use href="#icon-tick-small"></use>
154
158
  </svg>
155
159
  </div>
156
160
  <div class="listbox-button__option" role="option">
157
161
  <span class="listbox-button__value">Green</span>
158
162
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
159
- <use xlink:href="#icon-tick-small"></use>
163
+ <use href="#icon-tick-small"></use>
160
164
  </svg>
161
165
  </div>
162
166
  </div>
@@ -168,9 +172,10 @@ export const disabled = () => `
168
172
  <span class="listbox-button">
169
173
  <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox" disabled>
170
174
  <span class="btn__cell">
171
- <span class="btn__text">Color</span>
175
+ <span class="btn__label">Color: </span>
176
+ <span class="btn__text">Blue</span>
172
177
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
173
- <use xlink:href="#icon-dropdown"></use>
178
+ <use href="#icon-dropdown"></use>
174
179
  </svg>
175
180
  </span>
176
181
  </button>
@@ -179,25 +184,25 @@ export const disabled = () => `
179
184
  <div class="listbox-button__option" role="option">
180
185
  <span class="listbox-button__value">Red</span>
181
186
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
182
- <use xlink:href="#icon-tick-small"></use>
187
+ <use href="#icon-tick-small"></use>
183
188
  </svg>
184
189
  </div>
185
190
  <div class="listbox-button__option" role="option">
186
191
  <span class="listbox-button__value">Blue</span>
187
192
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
188
- <use xlink:href="#icon-tick-small"></use>
193
+ <use href="#icon-tick-small"></use>
189
194
  </svg>
190
195
  </div>
191
196
  <div class="listbox-button__option" role="option">
192
197
  <span class="listbox-button__value">Yellow</span>
193
198
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
194
- <use xlink:href="#icon-tick-small"></use>
199
+ <use href="#icon-tick-small"></use>
195
200
  </svg>
196
201
  </div>
197
202
  <div class="listbox-button__option" role="option">
198
203
  <span class="listbox-button__value">Green</span>
199
204
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
200
- <use xlink:href="#icon-tick-small"></use>
205
+ <use href="#icon-tick-small"></use>
201
206
  </svg>
202
207
  </div>
203
208
  </div>
@@ -209,9 +214,10 @@ export const invalid = () => `
209
214
  <span class="listbox-button">
210
215
  <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox" aria-invalid="true">
211
216
  <span class="btn__cell">
212
- <span class="btn__text">Color</span>
217
+ <span class="btn__label">Color: </span>
218
+ <span class="btn__text">Blue</span>
213
219
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
214
- <use xlink:href="#icon-dropdown"></use>
220
+ <use href="#icon-dropdown"></use>
215
221
  </svg>
216
222
  </span>
217
223
  </button>
@@ -220,25 +226,25 @@ export const invalid = () => `
220
226
  <div class="listbox-button__option" role="option">
221
227
  <span class="listbox-button__value">Red</span>
222
228
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
223
- <use xlink:href="#icon-tick-small"></use>
229
+ <use href="#icon-tick-small"></use>
224
230
  </svg>
225
231
  </div>
226
232
  <div class="listbox-button__option" role="option">
227
233
  <span class="listbox-button__value">Blue</span>
228
234
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
229
- <use xlink:href="#icon-tick-small"></use>
235
+ <use href="#icon-tick-small"></use>
230
236
  </svg>
231
237
  </div>
232
238
  <div class="listbox-button__option" role="option">
233
239
  <span class="listbox-button__value">Yellow</span>
234
240
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
235
- <use xlink:href="#icon-tick-small"></use>
241
+ <use href="#icon-tick-small"></use>
236
242
  </svg>
237
243
  </div>
238
244
  <div class="listbox-button__option" role="option">
239
245
  <span class="listbox-button__value">Green</span>
240
246
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
241
- <use xlink:href="#icon-tick-small"></use>
247
+ <use href="#icon-tick-small"></use>
242
248
  </svg>
243
249
  </div>
244
250
  </div>
@@ -250,9 +256,10 @@ export const longOption = () => `
250
256
  <span class="listbox-button">
251
257
  <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
252
258
  <span class="btn__cell">
253
- <span class="btn__text">Color: Red with very very very long text</span>
259
+ <span class="btn__label">Color: </span>
260
+ <span class="btn__text">Red with very very very long text</span>
254
261
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
255
- <use xlink:href="#icon-dropdown"></use>
262
+ <use href="#icon-dropdown"></use>
256
263
  </svg>
257
264
  </span>
258
265
  </button>
@@ -261,19 +268,19 @@ export const longOption = () => `
261
268
  <div class="listbox-button__option" role="option" aria-selected="true">
262
269
  <span class="listbox-button__value">Red with very very very long text</span>
263
270
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
264
- <use xlink:href="#icon-tick-small"></use>
271
+ <use href="#icon-tick-small"></use>
265
272
  </svg>
266
273
  </div>
267
274
  <div class="listbox-button__option" role="option">
268
275
  <span class="listbox-button__value">Blue</span>
269
276
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
270
- <use xlink:href="#icon-tick-small"></use>
277
+ <use href="#icon-tick-small"></use>
271
278
  </svg>
272
279
  </div>
273
280
  <div class="listbox-button__option" role="option">
274
281
  <span class="listbox-button__value">Yellow</span>
275
282
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
276
- <use xlink:href="#icon-tick-small"></use>
283
+ <use href="#icon-tick-small"></use>
277
284
  </svg>
278
285
  </div>
279
286
  </div>
package/src/less/listbox-button/stories/cascade.stories.js CHANGED
@@ -5,9 +5,10 @@ export const RTL = () => `
5
5
  <span class="listbox-button">
6
6
  <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
7
7
  <span class="btn__cell">
8
- <span class="btn__text">Color: Red</span>
8
+ <span class="btn__label">Color: </span>
9
+ <span class="btn__text">Red</span>
9
10
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
10
- <use xlink:href="#icon-dropdown"></use>
11
+ <use href="#icon-dropdown"></use>
11
12
  </svg>
12
13
  </span>
13
14
  </button>
@@ -16,25 +17,25 @@ export const RTL = () => `
16
17
  <div class="listbox-button__option" role="option" aria-selected="true">
17
18
  <span class="listbox-button__value">Red</span>
18
19
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
19
- <use xlink:href="#icon-tick-small"></use>
20
+ <use href="#icon-tick-small"></use>
20
21
  </svg>
21
22
  </div>
22
23
  <div class="listbox-button__option" role="option">
23
24
  <span class="listbox-button__value">Blue</span>
24
25
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
25
- <use xlink:href="#icon-tick-small"></use>
26
+ <use href="#icon-tick-small"></use>
26
27
  </svg>
27
28
  </div>
28
29
  <div class="listbox-button__option" role="option">
29
30
  <span class="listbox-button__value">Yellow</span>
30
31
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
31
- <use xlink:href="#icon-tick-small"></use>
32
+ <use href="#icon-tick-small"></use>
32
33
  </svg>
33
34
  </div>
34
35
  <div class="listbox-button__option" role="option">
35
36
  <span class="listbox-button__value">Green</span>
36
37
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
37
- <use xlink:href="#icon-tick-small"></use>
38
+ <use href="#icon-tick-small"></use>
38
39
  </svg>
39
40
  </div>
40
41
  </div>
@@ -48,9 +49,10 @@ export const color = () => `
48
49
  <span class="listbox-button">
49
50
  <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
50
51
  <span class="btn__cell">
51
- <span class="btn__text">Color: Red</span>
52
+ <span class="btn__label">Color: </span>
53
+ <span class="btn__text">Red</span>
52
54
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
53
- <use xlink:href="#icon-dropdown"></use>
55
+ <use href="#icon-dropdown"></use>
54
56
  </svg>
55
57
  </span>
56
58
  </button>
@@ -59,25 +61,25 @@ export const color = () => `
59
61
  <div class="listbox-button__option" role="option" aria-selected="true">
60
62
  <span class="listbox-button__value">Red</span>
61
63
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
62
- <use xlink:href="#icon-tick-small"></use>
64
+ <use href="#icon-tick-small"></use>
63
65
  </svg>
64
66
  </div>
65
67
  <div class="listbox-button__option" role="option">
66
68
  <span class="listbox-button__value">Blue</span>
67
69
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
68
- <use xlink:href="#icon-tick-small"></use>
70
+ <use href="#icon-tick-small"></use>
69
71
  </svg>
70
72
  </div>
71
73
  <div class="listbox-button__option" role="option">
72
74
  <span class="listbox-button__value">Yellow</span>
73
75
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
74
- <use xlink:href="#icon-tick-small"></use>
76
+ <use href="#icon-tick-small"></use>
75
77
  </svg>
76
78
  </div>
77
79
  <div class="listbox-button__option" role="option">
78
80
  <span class="listbox-button__value">Green</span>
79
81
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
80
- <use xlink:href="#icon-tick-small"></use>
82
+ <use href="#icon-tick-small"></use>
81
83
  </svg>
82
84
  </div>
83
85
  </div>
@@ -91,9 +93,10 @@ export const fontSize = () => `
91
93
  <span class="listbox-button">
92
94
  <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
93
95
  <span class="btn__cell">
94
- <span class="btn__text">Color: Red</span>
96
+ <span class="btn__label">Color: </span>
97
+ <span class="btn__text">Red</span>
95
98
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
96
- <use xlink:href="#icon-dropdown"></use>
99
+ <use href="#icon-dropdown"></use>
97
100
  </svg>
98
101
  </span>
99
102
  </button>
@@ -102,25 +105,25 @@ export const fontSize = () => `
102
105
  <div class="listbox-button__option" role="option" aria-selected="true">
103
106
  <span class="listbox-button__value">Red</span>
104
107
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
105
- <use xlink:href="#icon-tick-small"></use>
108
+ <use href="#icon-tick-small"></use>
106
109
  </svg>
107
110
  </div>
108
111
  <div class="listbox-button__option" role="option">
109
112
  <span class="listbox-button__value">Blue</span>
110
113
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
111
- <use xlink:href="#icon-tick-small"></use>
114
+ <use href="#icon-tick-small"></use>
112
115
  </svg>
113
116
  </div>
114
117
  <div class="listbox-button__option" role="option">
115
118
  <span class="listbox-button__value">Yellow</span>
116
119
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
117
- <use xlink:href="#icon-tick-small"></use>
120
+ <use href="#icon-tick-small"></use>
118
121
  </svg>
119
122
  </div>
120
123
  <div class="listbox-button__option" role="option">
121
124
  <span class="listbox-button__value">Green</span>
122
125
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
123
- <use xlink:href="#icon-tick-small"></use>
126
+ <use href="#icon-tick-small"></use>
124
127
  </svg>
125
128
  </div>
126
129
  </div>
package/src/less/listbox-button/stories/dimensions.stories.js CHANGED
@@ -4,9 +4,10 @@ export const fluid = () => `
4
4
  <span class="listbox-button listbox-button--fluid">
5
5
  <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
6
6
  <span class="btn__cell">
7
- <span class="btn__text">Color: Red</span>
7
+ <span class="btn__label">Color: </span>
8
+ <span class="btn__text">Red</span>
8
9
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
9
- <use xlink:href="#icon-dropdown"></use>
10
+ <use href="#icon-dropdown"></use>
10
11
  </svg>
11
12
  </span>
12
13
  </button>
@@ -15,25 +16,25 @@ export const fluid = () => `
15
16
  <div class="listbox-button__option" role="option" aria-selected="true">
16
17
  <span class="listbox-button__value">Red</span>
17
18
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
18
- <use xlink:href="#icon-tick-small"></use>
19
+ <use href="#icon-tick-small"></use>
19
20
  </svg>
20
21
  </div>
21
22
  <div class="listbox-button__option" role="option">
22
23
  <span class="listbox-button__value">Blue</span>
23
24
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
24
- <use xlink:href="#icon-tick-small"></use>
25
+ <use href="#icon-tick-small"></use>
25
26
  </svg>
26
27
  </div>
27
28
  <div class="listbox-button__option" role="option">
28
29
  <span class="listbox-button__value">Yellow</span>
29
30
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
30
- <use xlink:href="#icon-tick-small"></use>
31
+ <use href="#icon-tick-small"></use>
31
32
  </svg>
32
33
  </div>
33
34
  <div class="listbox-button__option" role="option">
34
35
  <span class="listbox-button__value">Green</span>
35
36
  <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
36
- <use xlink:href="#icon-tick-small"></use>
37
+ <use href="#icon-tick-small"></use>
37
38
  </svg>
38
39
  </div>
39
40
  </div>
package/src/less/menu/menu.less CHANGED
@@ -66,6 +66,8 @@ a.fake-menu__item:not([href]),
66
66
  button.fake-menu__item[disabled],
67
67
  div.menu__item[role^="menuitem"][aria-disabled="true"] {
68
68
  .color-token(menu-menuitem-disabled-foreground-color, color-foreground-disabled);
69
+ background-color: unset;
70
+ font-weight: unset;
69
71
  }
70
72
 
71
73
  div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-small {
package/src/less/mixins/private/dialog-mixins.less CHANGED
@@ -62,6 +62,9 @@
62
62
  align-self: center;
63
63
  flex: 1 1 auto;
64
64
  margin: 0;
65
+ overflow: hidden;
66
+ text-overflow: ellipsis;
67
+ white-space: nowrap;
65
68
  }
66
69
 
67
70
  & > :last-child:not(:only-child) {
package/src/less/mixins/private/filter-menu-mixins.less CHANGED
@@ -12,4 +12,17 @@
12
12
  &:hover {
13
13
  background-color: var(--color-state-primary-hover, color-state-primary-hover);
14
14
  }
15
+
16
+ &:disabled,
17
+ &[aria-disabled="true"] {
18
+ .color-token(filter-menu-item-foreground-color-disabled, color-foreground-disabled);
19
+
20
+ span > svg {
21
+ .color-token(filter-menu-item-icon-color-disabled, color-foreground-disabled);
22
+ }
23
+
24
+ &:hover {
25
+ background-color: inherit;
26
+ }
27
+ }
15
28
  }
package/src/less/mixins/private/listbox-mixins.less CHANGED
@@ -17,6 +17,13 @@
17
17
  &:active {
18
18
  font-weight: bold;
19
19
  }
20
+
21
+ &:disabled,
22
+ &[aria-disabled="true"] {
23
+ .color-token(listbox-option-disabled-foreground-color, color-foreground-disabled);
24
+ background-color: unset;
25
+ font-weight: unset;
26
+ }
20
27
  }
21
28
 
22
29
  .listbox-option-status() {
package/src/less/page-notice/page-notice.less CHANGED
@@ -112,9 +112,13 @@ span[role="region"].page-notice {
112
112
  text-align: right;
113
113
  }
114
114
 
115
- /* support legacy 6.5 notice with heading + paragaphs */
116
115
  .page-notice__main p {
117
116
  font-size: @font-size-regular;
117
+ margin: 2px 0 0;
118
+ }
119
+
120
+ /* support legacy 6.5 notice with heading + paragaphs */
121
+ .page-notice__main .page-notice__title ~ p {
118
122
  margin: @spacing-50 0 0;
119
123
  }
120
124
 
package/src/less/page-notice/stories/page-notice.stories.js CHANGED
@@ -126,6 +126,22 @@ export const informationWithLink = () => `
126
126
  </section>
127
127
  `;
128
128
 
129
+ export const InformationWithParagraph = () => `
130
+ <section class="page-notice page-notice--information" role="region" aria-label="Information">
131
+ <div class="page-notice__header">
132
+ <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
133
+ <use href="#icon-information-filled-small"></use>
134
+ </svg>
135
+ </div>
136
+ <div class="page-notice__main">
137
+ <p>You have opted into eBay Pay</p>
138
+ </div>
139
+ <div class="page-notice__footer">
140
+ <button class="fake-link">Dismiss</button>
141
+ </div>
142
+ </section>
143
+ `;
144
+
129
145
  export const dismissableWithTitle = () => `
130
146
  <section class="page-notice page-notice--information" role="region" aria-label="Information">
131
147
  <div class="page-notice__header">