@ebay/skin 15.3.0 → 15.4.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.
Files changed (87) hide show
  1. package/_cdn/skin/v15.4.0/skin-default.min.css +6 -0
  2. package/_cdn/skin/v15.4.0/skin-full.min.css +6 -0
  3. package/_cdn/skin/v15.4.0/skin-headless.min.css +6 -0
  4. package/_cdn/skin/v15.4.0/skin-legacy.min.css +6 -0
  5. package/dist/filter-menu-button/filter-menu-button.css +3 -0
  6. package/dist/listbox-button/listbox-button.css +12 -0
  7. package/dist/page-notice/page-notice.css +3 -4
  8. package/dist/section-notice/section-notice.css +2 -2
  9. package/package.json +1 -1
  10. package/src/less/breadcrumbs/stories/button-cascade.stories.js +9 -9
  11. package/src/less/breadcrumbs/stories/buttons.stories.js +5 -5
  12. package/src/less/breadcrumbs/stories/link-cascade.stories.js +9 -9
  13. package/src/less/breadcrumbs/stories/links.stories.js +5 -5
  14. package/src/less/button/stories/button/base.stories.js +5 -5
  15. package/src/less/button/stories/button/borderless.stories.js +4 -4
  16. package/src/less/button/stories/button/cascade.stories.js +3 -3
  17. package/src/less/button/stories/button/dimensions.stories.js +1 -1
  18. package/src/less/button/stories/button/primary.stories.js +4 -4
  19. package/src/less/button/stories/button/secondary.stories.js +4 -4
  20. package/src/less/button/stories/button/tertiary.stories.js +4 -4
  21. package/src/less/button/stories/destructive-button/primary.stories.js +3 -3
  22. package/src/less/button/stories/destructive-button/secondary.stories.js +3 -3
  23. package/src/less/button/stories/destructive-button/tertiary.stories.js +3 -3
  24. package/src/less/button/stories/fake-button/base.stories.js +2 -2
  25. package/src/less/button/stories/fake-button/cascade.stories.js +3 -3
  26. package/src/less/button/stories/fake-button/dimensions.stories.js +1 -1
  27. package/src/less/button/stories/fake-button/primary.stories.js +4 -4
  28. package/src/less/button/stories/fake-button/secondary.stories.js +4 -4
  29. package/src/less/carousel/stories/carousel.stories.js +16 -16
  30. package/src/less/checkbox/stories/checked.stories.js +16 -16
  31. package/src/less/checkbox/stories/mixed.stories.js +2 -2
  32. package/src/less/checkbox/stories/unchecked.stories.js +8 -8
  33. package/src/less/combobox/stories/combobox.stories.js +10 -10
  34. package/src/less/cta-button/stories/cascade.stories.js +3 -3
  35. package/src/less/cta-button/stories/cta-button.stories.js +1 -1
  36. package/src/less/cta-button/stories/dimensions.stories.js +2 -2
  37. package/src/less/details/stories/cascade.stories.js +3 -3
  38. package/src/less/details/stories/details.stories.js +4 -4
  39. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +6 -6
  40. package/src/less/field/stories/stacked.stories.js +5 -5
  41. package/src/less/field/stories/unstacked.stories.js +4 -4
  42. package/src/less/filter-menu/stories/filter-menu.stories.js +30 -30
  43. package/src/less/filter-menu-button/filter-menu-button.less +3 -0
  44. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +83 -83
  45. package/src/less/floating-label/stories/floating-label.stories.js +5 -5
  46. package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +4 -4
  47. package/src/less/global/stories/global.stories.js +12 -12
  48. package/src/less/icon/stories/icon.stories.js +5 -5
  49. package/src/less/icon-button/stories/alignment.stories.js +6 -6
  50. package/src/less/infotip/stories/infotip.stories.js +8 -8
  51. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +4 -4
  52. package/src/less/listbox/stories/cascade.stories.js +9 -9
  53. package/src/less/listbox/stories/listbox.stories.js +9 -9
  54. package/src/less/listbox-button/listbox-button.less +15 -0
  55. package/src/less/listbox-button/stories/form.stories.js +97 -0
  56. package/src/less/menu/stories/fake-menu.stories.js +4 -4
  57. package/src/less/menu/stories/multiSelect.stories.js +9 -9
  58. package/src/less/menu-button/stories/base.stories.js +29 -29
  59. package/src/less/menu-button/stories/cascade.stories.js +6 -6
  60. package/src/less/menu-button/stories/dimensions.stories.js +1 -1
  61. package/src/less/menu-button/stories/fake-menu-button.stories.js +6 -6
  62. package/src/less/page-notice/page-notice.less +3 -4
  63. package/src/less/pagination/stories/button-cascade.stories.js +6 -6
  64. package/src/less/pagination/stories/buttons.stories.js +4 -4
  65. package/src/less/pagination/stories/link-cascade.stories.js +6 -6
  66. package/src/less/pagination/stories/links.stories.js +4 -4
  67. package/src/less/pagination/stories/overflow.stories.js +16 -16
  68. package/src/less/panel-dialog/stories/panel-dialog.stories.js +6 -6
  69. package/src/less/progress-spinner/stories/progress-spinner.stories.js +4 -4
  70. package/src/less/radio/stories/checked.stories.js +16 -16
  71. package/src/less/radio/stories/unchecked.stories.js +8 -8
  72. package/src/less/section-notice/section-notice.less +2 -2
  73. package/src/less/select/stories/cascade.stories.js +3 -3
  74. package/src/less/select/stories/default.stories.js +8 -8
  75. package/src/less/select/stories/floating-label.stories.js +4 -4
  76. package/src/less/split-button/stories/base.stories.js +12 -12
  77. package/src/less/split-button/stories/rtl.stories.js +6 -6
  78. package/src/less/split-button/stories/size.stories.js +2 -2
  79. package/src/less/textbox/stories/icon.stories.js +10 -10
  80. package/src/less/textbox/stories/rtl/icon.stories.js +7 -7
  81. package/src/less/tooltip/stories/pointer.stories.js +12 -12
  82. package/src/less/tooltip/stories/tooltip.stories.js +2 -2
  83. package/src/less/tourtip/stories/tourtip.stories.js +4 -4
  84. package/_cdn/skin/v15.3.0/skin-default.min.css +0 -6
  85. package/_cdn/skin/v15.3.0/skin-full.min.css +0 -6
  86. package/_cdn/skin/v15.3.0/skin-headless.min.css +0 -6
  87. package/_cdn/skin/v15.3.0/skin-legacy.min.css +0 -6
package/src/less/field/stories/unstacked.stories.js CHANGED
@@ -16,7 +16,7 @@ export const inlineLevel = () => `
16
16
  <option value="item3">Option 3</option>
17
17
  </select>
18
18
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
19
- <use xlink:href="#icon-dropdown"></use>
19
+ <use href="#icon-dropdown"></use>
20
20
  </svg>
21
21
  </span>
22
22
  </span>
@@ -52,7 +52,7 @@ export const RTL = () => `
52
52
  <option value="item3">Option 3</option>
53
53
  </select>
54
54
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
55
- <use xlink:href="#icon-dropdown"></use>
55
+ <use href="#icon-dropdown"></use>
56
56
  </svg>
57
57
  </span>
58
58
  </span>
@@ -88,7 +88,7 @@ export const blockLevel = () => `
88
88
  <option value="item3">Option 3</option>
89
89
  </select>
90
90
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
91
- <use xlink:href="#icon-dropdown"></use>
91
+ <use href="#icon-dropdown"></use>
92
92
  </svg>
93
93
  </span>
94
94
  </div>
@@ -123,7 +123,7 @@ export const disabled = () => `
123
123
  <option value="item3">Option 3</option>
124
124
  </select>
125
125
  <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
126
- <use xlink:href="#icon-dropdown"></use>
126
+ <use href="#icon-dropdown"></use>
127
127
  </svg>
128
128
  </span>
129
129
  </span>
package/src/less/filter-menu/stories/filter-menu.stories.js CHANGED
@@ -6,10 +6,10 @@ export const base = () => `
6
6
  <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
7
7
  <span class="filter-menu__checkbox">
8
8
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
9
- <use xlink:href="#icon-checkbox-unchecked"></use>
9
+ <use href="#icon-checkbox-unchecked"></use>
10
10
  </svg>
11
11
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
12
- <use xlink:href="#icon-checkbox-checked"></use>
12
+ <use href="#icon-checkbox-checked"></use>
13
13
  </svg>
14
14
  </span>
15
15
  <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
@@ -17,10 +17,10 @@ export const base = () => `
17
17
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
18
18
  <span class="filter-menu__checkbox">
19
19
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
20
- <use xlink:href="#icon-checkbox-unchecked"></use>
20
+ <use href="#icon-checkbox-unchecked"></use>
21
21
  </svg>
22
22
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
23
- <use xlink:href="#icon-checkbox-checked"></use>
23
+ <use href="#icon-checkbox-checked"></use>
24
24
  </svg>
25
25
  </span>
26
26
  <span class="filter-menu__text">Item 2</span>
@@ -28,10 +28,10 @@ export const base = () => `
28
28
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
29
29
  <span class="filter-menu__checkbox">
30
30
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
31
- <use xlink:href="#icon-checkbox-unchecked"></use>
31
+ <use href="#icon-checkbox-unchecked"></use>
32
32
  </svg>
33
33
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
34
- <use xlink:href="#icon-checkbox-checked"></use>
34
+ <use href="#icon-checkbox-checked"></use>
35
35
  </svg>
36
36
  </span>
37
37
  <span class="filter-menu__text">Item 3</span>
@@ -46,10 +46,10 @@ export const withDisabled = () => `
46
46
  <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false" aria-disabled="true">
47
47
  <span class="filter-menu__checkbox">
48
48
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
49
- <use xlink:href="#icon-checkbox-unchecked"></use>
49
+ <use href="#icon-checkbox-unchecked"></use>
50
50
  </svg>
51
51
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
52
- <use xlink:href="#icon-checkbox-checked"></use>
52
+ <use href="#icon-checkbox-checked"></use>
53
53
  </svg>
54
54
  </span>
55
55
  <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
@@ -57,10 +57,10 @@ export const withDisabled = () => `
57
57
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
58
58
  <span class="filter-menu__checkbox">
59
59
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
60
- <use xlink:href="#icon-checkbox-unchecked"></use>
60
+ <use href="#icon-checkbox-unchecked"></use>
61
61
  </svg>
62
62
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
63
- <use xlink:href="#icon-checkbox-checked"></use>
63
+ <use href="#icon-checkbox-checked"></use>
64
64
  </svg>
65
65
  </span>
66
66
  <span class="filter-menu__text">Item 2</span>
@@ -68,10 +68,10 @@ export const withDisabled = () => `
68
68
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
69
69
  <span class="filter-menu__checkbox">
70
70
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
71
- <use xlink:href="#icon-checkbox-unchecked"></use>
71
+ <use href="#icon-checkbox-unchecked"></use>
72
72
  </svg>
73
73
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
74
- <use xlink:href="#icon-checkbox-checked"></use>
74
+ <use href="#icon-checkbox-checked"></use>
75
75
  </svg>
76
76
  </span>
77
77
  <span class="filter-menu__text">Item 3</span>
@@ -86,10 +86,10 @@ export const withFooterButton = () => `
86
86
  <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
87
87
  <span class="filter-menu__checkbox">
88
88
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
89
- <use xlink:href="#icon-checkbox-unchecked"></use>
89
+ <use href="#icon-checkbox-unchecked"></use>
90
90
  </svg>
91
91
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
92
- <use xlink:href="#icon-checkbox-checked"></use>
92
+ <use href="#icon-checkbox-checked"></use>
93
93
  </svg>
94
94
  </span>
95
95
  <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
@@ -97,10 +97,10 @@ export const withFooterButton = () => `
97
97
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
98
98
  <span class="filter-menu__checkbox">
99
99
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
100
- <use xlink:href="#icon-checkbox-unchecked"></use>
100
+ <use href="#icon-checkbox-unchecked"></use>
101
101
  </svg>
102
102
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
103
- <use xlink:href="#icon-checkbox-checked"></use>
103
+ <use href="#icon-checkbox-checked"></use>
104
104
  </svg>
105
105
  </span>
106
106
  <span class="filter-menu__text">Item 2</span>
@@ -108,10 +108,10 @@ export const withFooterButton = () => `
108
108
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
109
109
  <span class="filter-menu__checkbox">
110
110
  <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
111
- <use xlink:href="#icon-checkbox-unchecked"></use>
111
+ <use href="#icon-checkbox-unchecked"></use>
112
112
  </svg>
113
113
  <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
114
- <use xlink:href="#icon-checkbox-checked"></use>
114
+ <use href="#icon-checkbox-checked"></use>
115
115
  </svg>
116
116
  </span>
117
117
  <span class="filter-menu__text">Item 3</span>
@@ -130,10 +130,10 @@ export const formVersion = () => `
130
130
  <input aria-label="filter menu checkbox example option 1" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-1" id="filter-menu-form-checkbox-item-1" />
131
131
  <span class="checkbox__icon" hidden>
132
132
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
133
- <use xlink:href="#icon-checkbox-unchecked"></use>
133
+ <use href="#icon-checkbox-unchecked"></use>
134
134
  </svg>
135
135
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
136
- <use xlink:href="#icon-checkbox-checked"></use>
136
+ <use href="#icon-checkbox-checked"></use>
137
137
  </svg>
138
138
  </span>
139
139
  </span>
@@ -144,10 +144,10 @@ export const formVersion = () => `
144
144
  <input aria-label="filter menu checkbox example option 2" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-2" id="filter-menu-form-checkbox-item-2" />
145
145
  <span class="checkbox__icon" hidden>
146
146
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
147
- <use xlink:href="#icon-checkbox-unchecked"></use>
147
+ <use href="#icon-checkbox-unchecked"></use>
148
148
  </svg>
149
149
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
150
- <use xlink:href="#icon-checkbox-checked"></use>
150
+ <use href="#icon-checkbox-checked"></use>
151
151
  </svg>
152
152
  </span>
153
153
  </span>
@@ -158,10 +158,10 @@ export const formVersion = () => `
158
158
  <input aria-label="filter menu checkbox example option 3" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-3" id="filter-menu-form-checkbox-item-3" />
159
159
  <span class="checkbox__icon" hidden>
160
160
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
161
- <use xlink:href="#icon-checkbox-unchecked"></use>
161
+ <use href="#icon-checkbox-unchecked"></use>
162
162
  </svg>
163
163
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
164
- <use xlink:href="#icon-checkbox-checked"></use>
164
+ <use href="#icon-checkbox-checked"></use>
165
165
  </svg>
166
166
  </span>
167
167
  </span>
@@ -183,10 +183,10 @@ export const RTL = () => `
183
183
  <input aria-label="filter menu checkbox example option 1" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-1" id="filter-menu-form-checkbox-item-1" />
184
184
  <span class="checkbox__icon" hidden>
185
185
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
186
- <use xlink:href="#icon-checkbox-unchecked"></use>
186
+ <use href="#icon-checkbox-unchecked"></use>
187
187
  </svg>
188
188
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
189
- <use xlink:href="#icon-checkbox-checked"></use>
189
+ <use href="#icon-checkbox-checked"></use>
190
190
  </svg>
191
191
  </span>
192
192
  </span>
@@ -197,10 +197,10 @@ export const RTL = () => `
197
197
  <input aria-label="filter menu checkbox example option 2" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-2" id="filter-menu-form-checkbox-item-2" />
198
198
  <span class="checkbox__icon" hidden>
199
199
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
200
- <use xlink:href="#icon-checkbox-unchecked"></use>
200
+ <use href="#icon-checkbox-unchecked"></use>
201
201
  </svg>
202
202
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
203
- <use xlink:href="#icon-checkbox-checked"></use>
203
+ <use href="#icon-checkbox-checked"></use>
204
204
  </svg>
205
205
  </span>
206
206
  </span>
@@ -211,10 +211,10 @@ export const RTL = () => `
211
211
  <input aria-label="filter menu checkbox example option 3" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-3" id="filter-menu-form-checkbox-item-3" />
212
212
  <span class="checkbox__icon" hidden>
213
213
  <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
214
- <use xlink:href="#icon-checkbox-unchecked"></use>
214
+ <use href="#icon-checkbox-unchecked"></use>
215
215
  </svg>
216
216
  <svg class="checkbox__checked" focusable="false" height="18" width="18">
217
- <use xlink:href="#icon-checkbox-checked"></use>
217
+ <use href="#icon-checkbox-checked"></use>
218
218
  </svg>
219
219
  </span>
220
220
  </span>
package/src/less/filter-menu-button/filter-menu-button.less CHANGED
@@ -112,6 +112,7 @@ button.filter-menu-button__button[aria-expanded="true"] + .filter-menu-button__m
112
112
  min-width: 100%;
113
113
  overflow-y: auto;
114
114
  position: relative;
115
+ transform: translateZ(0);
115
116
  }
116
117
 
117
118
  span.filter-menu-button__items {
@@ -210,7 +211,9 @@ button.filter-menu-button__footer {
210
211
  border-top-style: solid;
211
212
  border-top-width: 1px;
212
213
  bottom: 0;
214
+ outline-offset: -10;
213
215
  padding: 16px;
216
+ transform: translateZ(0);
214
217
 
215
218
  &:focus,
216
219
  &:hover {