@ebay/skin 17.1.0 → 17.2.0-next.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 (193) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/chilled-dots-whisper.md +5 -0
  3. package/.changeset/config.json +11 -0
  4. package/.changeset/five-bats-appear.md +5 -0
  5. package/.changeset/gentle-moles-collect.md +5 -0
  6. package/.changeset/healthy-kings-hang.md +5 -0
  7. package/.changeset/pre.json +17 -0
  8. package/.changeset/pretty-rabbits-smash.md +5 -0
  9. package/.changeset/slow-maps-guess.md +5 -0
  10. package/.changeset/stale-lamps-retire.md +5 -0
  11. package/.changeset/unlucky-files-tickle.md +5 -0
  12. package/.github/workflows/jekyll-gh-pages.yml +53 -9
  13. package/CHANGELOG.md +28 -0
  14. package/CONTRIBUTING.md +28 -0
  15. package/_cdn/skin/v17.2.0-next.0/skin-default.min.css +69 -0
  16. package/_cdn/skin/v17.2.0-next.0/skin-full.min.css +151 -0
  17. package/_cdn/skin/v17.2.0-next.0/skin-headless.min.css +6 -0
  18. package/dist/button/button.css +0 -1
  19. package/dist/combobox/combobox.css +5 -7
  20. package/dist/date-textbox/date-textbox.css +1 -1
  21. package/dist/filter-menu/filter-menu.css +2 -2
  22. package/dist/filter-menu-button/filter-menu-button.css +7 -4
  23. package/dist/icon/icon.css +24 -0
  24. package/dist/infotip/infotip.css +3 -3
  25. package/dist/listbox/listbox.css +3 -2
  26. package/dist/listbox-button/listbox-button.css +5 -7
  27. package/dist/menu/menu.css +3 -2
  28. package/dist/menu-button/menu-button.css +5 -9
  29. package/dist/signal/signal.css +4 -3
  30. package/dist/svg/icon/icon-bank-24.svg +4 -2
  31. package/dist/svg/icon/icon-bank-64.svg +4 -2
  32. package/dist/svg/icon/icon-calendar-16.svg +4 -5
  33. package/dist/svg/icon/icon-calendar-24.svg +4 -5
  34. package/dist/svg/icon/icon-calendar-64.svg +4 -5
  35. package/dist/svg/icon/icon-credit-card-16.svg +4 -2
  36. package/dist/svg/icon/icon-credit-card-24.svg +4 -2
  37. package/dist/svg/icon/icon-credit-card-64.svg +4 -2
  38. package/dist/svg/icon/icon-gift-16.svg +2 -2
  39. package/dist/svg/icon/icon-gift-24.svg +4 -2
  40. package/dist/svg/icon/icon-gift-64.svg +4 -2
  41. package/dist/svg/icon/icon-locked-16.svg +4 -2
  42. package/dist/svg/icon/icon-locked-20.svg +7 -0
  43. package/dist/svg/icon/icon-locked-24.svg +4 -2
  44. package/dist/svg/icon/icon-mail-20.svg +7 -0
  45. package/dist/svg/icon/icon-passkey-16.svg +7 -0
  46. package/dist/svg/icon/icon-passkey-24.svg +7 -0
  47. package/dist/svg/icon/icon-passkey-64.svg +7 -0
  48. package/dist/svg/icon/icon-swap-24.svg +7 -0
  49. package/dist/svg/icon/icon-unlocked-16.svg +4 -3
  50. package/dist/svg/icon/icon-unlocked-24.svg +4 -5
  51. package/dist/svg/icon/icon-venmo-12-colored.svg +1 -0
  52. package/dist/svg/icon/icon-venmo-18-colored.svg +1 -0
  53. package/dist/svg/icon/icon-venmo-24-colored.svg +1 -0
  54. package/dist/svg/icon/icon-venmo-32-colored.svg +1 -0
  55. package/dist/svg/icons.svg +103 -42
  56. package/dist/tokens/evo-dark.css +1 -0
  57. package/dist/tokens/evo-light.css +1 -0
  58. package/dist/tooltip/tooltip.css +2 -2
  59. package/dist/tourtip/tourtip.css +2 -6
  60. package/package.json +15 -11
  61. package/scripts/develop-module_proper/code-generators/doc-generator.js +19 -13
  62. package/src/less/breadcrumbs/stories/button-cascade.stories.js +9 -9
  63. package/src/less/breadcrumbs/stories/button-overflow.stories.js +11 -11
  64. package/src/less/breadcrumbs/stories/buttons.stories.js +5 -5
  65. package/src/less/breadcrumbs/stories/link-cascade.stories.js +9 -9
  66. package/src/less/breadcrumbs/stories/link-overflow.stories.js +11 -11
  67. package/src/less/breadcrumbs/stories/links.stories.js +5 -5
  68. package/src/less/button/button.less +0 -1
  69. package/src/less/button/stories/button/base.stories.js +2 -2
  70. package/src/less/button/stories/button/borderless.stories.js +4 -4
  71. package/src/less/button/stories/button/primary.stories.js +1 -1
  72. package/src/less/button/stories/button/secondary.stories.js +1 -1
  73. package/src/less/button/stories/button/tertiary.stories.js +1 -1
  74. package/src/less/button/stories/destructive-button/primary.stories.js +1 -1
  75. package/src/less/button/stories/destructive-button/secondary.stories.js +1 -1
  76. package/src/less/button/stories/destructive-button/tertiary.stories.js +1 -1
  77. package/src/less/carousel/stories/carousel.stories.js +25 -25
  78. package/src/less/checkbox/stories/checked.stories.js +16 -16
  79. package/src/less/checkbox/stories/mixed.stories.js +2 -2
  80. package/src/less/checkbox/stories/unchecked.stories.js +8 -8
  81. package/src/less/chip/stories/interactive-chip.stories.js +17 -17
  82. package/src/less/chips-combobox/stories/chips-combobox.stories.js +34 -34
  83. package/src/less/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  84. package/src/less/combobox/stories/combobox.stories.js +10 -10
  85. package/src/less/cta-button/stories/cascade.stories.js +3 -3
  86. package/src/less/cta-button/stories/cta-button.stories.js +1 -1
  87. package/src/less/cta-button/stories/dimensions.stories.js +2 -2
  88. package/src/less/date-textbox/date-textbox.less +1 -1
  89. package/src/less/details/stories/cascade.stories.js +3 -3
  90. package/src/less/details/stories/details.stories.js +4 -4
  91. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +6 -6
  92. package/src/less/field/stories/stacked.stories.js +12 -12
  93. package/src/less/field/stories/unstacked.stories.js +4 -4
  94. package/src/less/filter-menu/stories/filter-menu.stories.js +30 -30
  95. package/src/less/filter-menu-button/filter-menu-button.less +3 -3
  96. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +83 -83
  97. package/src/less/floating-label/stories/floating-label.stories.js +5 -5
  98. package/src/less/global/stories/global.stories.js +12 -12
  99. package/src/less/icon/generated/icon.less +24 -0
  100. package/src/less/icon-button/stories/alignment.stories.js +6 -6
  101. package/src/less/infotip/infotip.less +3 -3
  102. package/src/less/infotip/stories/infotip.stories.js +10 -10
  103. package/src/less/inline-notice/stories/inline.stories.js +10 -10
  104. package/src/less/listbox/stories/cascade.stories.js +9 -9
  105. package/src/less/listbox/stories/listbox.stories.js +15 -15
  106. package/src/less/listbox-button/stories/base.stories.js +43 -43
  107. package/src/less/listbox-button/stories/cascade.stories.js +15 -15
  108. package/src/less/listbox-button/stories/dimensions.stories.js +5 -5
  109. package/src/less/listbox-button/stories/error/error.base.stories.js +38 -38
  110. package/src/less/listbox-button/stories/error/error.cascade.stories.js +15 -15
  111. package/src/less/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  112. package/src/less/listbox-button/stories/error/error.form.stories.js +10 -10
  113. package/src/less/listbox-button/stories/form.stories.js +15 -15
  114. package/src/less/listbox-button/stories/subtitle.stories.js +38 -38
  115. package/src/less/menu/stories/fake-menu.stories.js +4 -4
  116. package/src/less/menu/stories/multiSelect.stories.js +9 -9
  117. package/src/less/menu-button/stories/base.stories.js +29 -29
  118. package/src/less/menu-button/stories/cascade.stories.js +6 -6
  119. package/src/less/menu-button/stories/dimensions.stories.js +1 -1
  120. package/src/less/menu-button/stories/fake-menu-button.stories.js +6 -6
  121. package/src/less/mixins/private/dropdown-mixins.less +3 -6
  122. package/src/less/mixins/private/filter-menu-mixins.less +1 -1
  123. package/src/less/mixins/private/selection-list-mixins.less +0 -2
  124. package/src/less/page-notice/stories/page-notice.stories.js +12 -12
  125. package/src/less/page-notice/stories/test.stories.js +7 -7
  126. package/src/less/pagination/stories/button-cascade.stories.js +6 -6
  127. package/src/less/pagination/stories/buttons.stories.js +4 -4
  128. package/src/less/pagination/stories/link-cascade.stories.js +6 -6
  129. package/src/less/pagination/stories/links.stories.js +4 -4
  130. package/src/less/pagination/stories/overflow.stories.js +16 -16
  131. package/src/less/progress-spinner/stories/progress-spinner.stories.js +4 -4
  132. package/src/less/progress-stepper/stories/progress-stepper.stories.js +49 -49
  133. package/src/less/radio/stories/checked.stories.js +16 -16
  134. package/src/less/radio/stories/unchecked.stories.js +8 -8
  135. package/src/less/section-notice/stories/icon-16.stories.js +12 -12
  136. package/src/less/section-notice/stories/icon-24.stories.js +20 -20
  137. package/src/less/section-notice/stories/iconless.stories.js +4 -4
  138. package/src/less/section-notice/stories/test.stories.js +4 -4
  139. package/src/less/section-title/stories/rtl.stories.js +3 -3
  140. package/src/less/section-title/stories/section-title.stories.js +3 -3
  141. package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  142. package/src/less/select/stories/cascade.stories.js +3 -3
  143. package/src/less/select/stories/default.stories.js +8 -8
  144. package/src/less/select/stories/floating-label.stories.js +4 -4
  145. package/src/less/signal/signal.less +4 -3
  146. package/src/less/split-button/stories/base.stories.js +12 -12
  147. package/src/less/split-button/stories/rtl.stories.js +6 -6
  148. package/src/less/split-button/stories/size.stories.js +2 -2
  149. package/src/less/star-rating/stories/star-rating.stories.js +15 -15
  150. package/src/less/star-rating-select/stories/star-rating-select.stories.js +10 -10
  151. package/src/less/textbox/stories/icon.stories.js +10 -10
  152. package/src/less/textbox/stories/rtl/icon.stories.js +7 -7
  153. package/src/less/toast-dialog/stories/toast-dialog.stories.js +3 -3
  154. package/src/less/toggle-button/stories/gallery-layout.stories.js +3 -3
  155. package/src/less/toggle-button/stories/list-layout.stories.js +3 -3
  156. package/src/less/tooltip/stories/pointer.stories.js +12 -12
  157. package/src/less/tooltip/stories/tooltip.stories.js +2 -2
  158. package/src/less/tooltip/tooltip.less +2 -2
  159. package/src/less/tourtip/stories/tourtip.stories.js +4 -4
  160. package/src/less/tourtip/tourtip.less +2 -7
  161. package/src/svg/icon/icon-bank-24.svg +4 -2
  162. package/src/svg/icon/icon-bank-64.svg +4 -2
  163. package/src/svg/icon/icon-calendar-16.svg +4 -5
  164. package/src/svg/icon/icon-calendar-24.svg +4 -5
  165. package/src/svg/icon/icon-calendar-64.svg +4 -5
  166. package/src/svg/icon/icon-credit-card-16.svg +4 -2
  167. package/src/svg/icon/icon-credit-card-24.svg +4 -2
  168. package/src/svg/icon/icon-credit-card-64.svg +4 -2
  169. package/src/svg/icon/icon-gift-16.svg +2 -2
  170. package/src/svg/icon/icon-gift-24.svg +4 -2
  171. package/src/svg/icon/icon-gift-64.svg +4 -2
  172. package/src/svg/icon/icon-locked-16.svg +4 -2
  173. package/src/svg/icon/icon-locked-20.svg +7 -0
  174. package/src/svg/icon/icon-locked-24.svg +4 -2
  175. package/src/svg/icon/icon-mail-20.svg +7 -0
  176. package/src/svg/icon/icon-passkey-16.svg +7 -0
  177. package/src/svg/icon/icon-passkey-24.svg +7 -0
  178. package/src/svg/icon/icon-passkey-64.svg +7 -0
  179. package/src/svg/icon/icon-swap-24.svg +7 -0
  180. package/src/svg/icon/icon-unlocked-16.svg +4 -3
  181. package/src/svg/icon/icon-unlocked-24.svg +4 -5
  182. package/src/svg/icon/icon-venmo-12-colored.svg +1 -0
  183. package/src/svg/icon/icon-venmo-18-colored.svg +1 -0
  184. package/src/svg/icon/icon-venmo-24-colored.svg +1 -0
  185. package/src/svg/icon/icon-venmo-32-colored.svg +1 -0
  186. package/src/svg/icons.svg +103 -42
  187. package/src/tokens/evo-dark.css +1 -0
  188. package/src/tokens/evo-light.css +1 -0
  189. package/svg.svg +103 -42
  190. package/.storybook/preview-head.html +0 -68930
  191. package/_cdn/skin/v17.1.0/skin-default.min.css +0 -69
  192. package/_cdn/skin/v17.1.0/skin-full.min.css +0 -151
  193. package/_cdn/skin/v17.1.0/skin-headless.min.css +0 -6
package/src/less/section-notice/stories/icon-16.stories.js CHANGED
@@ -3,7 +3,7 @@ export default { title: "Skin/Section Notice/Icon 16" };
3
3
  export const body = () => `
4
4
  <div class="section-notice section-notice--confirmation" role="region">
5
5
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
6
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
6
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
7
7
  <use href="#icon-confirmation-filled-16"></use>
8
8
  </svg>
9
9
  </div>
@@ -16,7 +16,7 @@ export const body = () => `
16
16
  export const title = () => `
17
17
  <div class="section-notice section-notice--confirmation" role="region">
18
18
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
19
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
19
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
20
20
  <use href="#icon-confirmation-filled-16"></use>
21
21
  </svg>
22
22
  </div>
@@ -31,7 +31,7 @@ export const title = () => `
31
31
  export const linkCTA = () => `
32
32
  <div class="section-notice section-notice--confirmation" role="region">
33
33
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
34
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
34
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
35
35
  <use href="#icon-confirmation-filled-16"></use>
36
36
  </svg>
37
37
  </div>
@@ -49,7 +49,7 @@ export const linkCTA = () => `
49
49
  export const fakeLinkCTA = () => `
50
50
  <div class="section-notice section-notice--confirmation" role="region">
51
51
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
52
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
52
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
53
53
  <use href="#icon-confirmation-filled-16"></use>
54
54
  </svg>
55
55
  </div>
@@ -66,7 +66,7 @@ export const fakeLinkCTA = () => `
66
66
  export const dismiss = () => `
67
67
  <div class="section-notice section-notice--confirmation" role="region">
68
68
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
69
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
69
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
70
70
  <use href="#icon-confirmation-filled-16"></use>
71
71
  </svg>
72
72
  </div>
@@ -76,7 +76,7 @@ export const dismiss = () => `
76
76
  </div>
77
77
  <div class="section-notice__footer">
78
78
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
79
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
79
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
80
80
  <use href="#icon-close-16"></use>
81
81
  </svg>
82
82
  </button>
@@ -87,7 +87,7 @@ export const dismiss = () => `
87
87
  export const dismissAndLinkCTA = () => `
88
88
  <div class="section-notice section-notice--confirmation" role="region">
89
89
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
90
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
90
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
91
91
  <use href="#icon-confirmation-filled-16"></use>
92
92
  </svg>
93
93
  </div>
@@ -98,7 +98,7 @@ export const dismissAndLinkCTA = () => `
98
98
  <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
99
99
  <div class="section-notice__footer">
100
100
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
101
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
101
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
102
102
  <use href="#icon-close-16"></use>
103
103
  </svg>
104
104
  </button>
@@ -109,7 +109,7 @@ export const dismissAndLinkCTA = () => `
109
109
  export const dismissAndFakeLinkCTA = () => `
110
110
  <div class="section-notice section-notice--confirmation" role="region">
111
111
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
112
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
112
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
113
113
  <use href="#icon-confirmation-filled-16"></use>
114
114
  </svg>
115
115
  </div>
@@ -122,7 +122,7 @@ export const dismissAndFakeLinkCTA = () => `
122
122
  </p>
123
123
  <div class="section-notice__footer">
124
124
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
125
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
125
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
126
126
  <use href="#icon-close-16"></use>
127
127
  </svg>
128
128
  </button>
@@ -135,7 +135,7 @@ export const RTL = () => `
135
135
  <div dir="rtl">
136
136
  <div class="section-notice section-notice--confirmation" role="region">
137
137
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
138
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
138
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
139
139
  <use href="#icon-confirmation-filled-16"></use>
140
140
  </svg>
141
141
  </div>
@@ -146,7 +146,7 @@ export const RTL = () => `
146
146
  <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
147
147
  <div class="section-notice__footer">
148
148
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
149
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
149
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
150
150
  <use href="#icon-close-16"></use>
151
151
  </svg>
152
152
  </button>
package/src/less/section-notice/stories/icon-24.stories.js CHANGED
@@ -3,7 +3,7 @@ export default { title: "Skin/Section Notice/Icon 24" };
3
3
  export const body = () => `
4
4
  <div class="section-notice" role="region">
5
5
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
6
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
6
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
7
7
  <use href="#icon-lightbulb-24"></use>
8
8
  </svg>
9
9
  </div>
@@ -16,7 +16,7 @@ export const body = () => `
16
16
  export const title = () => `
17
17
  <div class="section-notice" role="region">
18
18
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
19
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
19
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
20
20
  <use href="#icon-lightbulb-24"></use>
21
21
  </svg>
22
22
  </div>
@@ -31,7 +31,7 @@ export const title = () => `
31
31
  export const linkCTA = () => `
32
32
  <div class="section-notice" role="region">
33
33
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
34
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
34
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
35
35
  <use href="#icon-lightbulb-24"></use>
36
36
  </svg>
37
37
  </div>
@@ -49,7 +49,7 @@ export const linkCTA = () => `
49
49
  export const fakeLinkCTA = () => `
50
50
  <div class="section-notice" role="region">
51
51
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
52
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
52
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
53
53
  <use href="#icon-lightbulb-24"></use>
54
54
  </svg>
55
55
  </div>
@@ -66,7 +66,7 @@ export const fakeLinkCTA = () => `
66
66
  export const dismiss = () => `
67
67
  <div class="section-notice" role="region">
68
68
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
69
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
69
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
70
70
  <use href="#icon-lightbulb-24"></use>
71
71
  </svg>
72
72
  </div>
@@ -76,7 +76,7 @@ export const dismiss = () => `
76
76
  </div>
77
77
  <div class="section-notice__footer">
78
78
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
79
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
79
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
80
80
  <use href="#icon-close-16"></use>
81
81
  </svg>
82
82
  </button>
@@ -87,7 +87,7 @@ export const dismiss = () => `
87
87
  export const dismissAndLinkCTA = () => `
88
88
  <div class="section-notice" role="region">
89
89
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
90
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
90
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
91
91
  <use href="#icon-lightbulb-24"></use>
92
92
  </svg>
93
93
  </div>
@@ -98,7 +98,7 @@ export const dismissAndLinkCTA = () => `
98
98
  <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
99
99
  <div class="section-notice__footer">
100
100
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
101
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
101
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
102
102
  <use href="#icon-close-16"></use>
103
103
  </svg>
104
104
  </button>
@@ -109,7 +109,7 @@ export const dismissAndLinkCTA = () => `
109
109
  export const dismissAndFakeLinkCTA = () => `
110
110
  <div class="section-notice" role="region">
111
111
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
112
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
112
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
113
113
  <use href="#icon-lightbulb-24"></use>
114
114
  </svg>
115
115
  </div>
@@ -122,7 +122,7 @@ export const dismissAndFakeLinkCTA = () => `
122
122
  </p>
123
123
  <div class="section-notice__footer">
124
124
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
125
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
125
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
126
126
  <use href="#icon-close-16"></use>
127
127
  </svg>
128
128
  </button>
@@ -133,7 +133,7 @@ export const dismissAndFakeLinkCTA = () => `
133
133
  export const education = () => `
134
134
  <div class="section-notice section-notice--education" role="region">
135
135
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
136
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
136
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
137
137
  <use href="#icon-lightbulb-24"></use>
138
138
  </svg>
139
139
  </div>
@@ -146,7 +146,7 @@ export const education = () => `
146
146
  </p>
147
147
  <div class="section-notice__footer">
148
148
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
149
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
149
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
150
150
  <use href="#icon-close-16"></use>
151
151
  </svg>
152
152
  </button>
@@ -158,7 +158,7 @@ export const RTL = () => `
158
158
  <div dir="rtl">
159
159
  <div class="section-notice" role="region">
160
160
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
161
- <svg aria-hidden="true" focusable="false" class="icon icon--lightbulb-24">
161
+ <svg aria-hidden="true" class="icon icon--lightbulb-24">
162
162
  <use href="#icon-lightbulb-24"></use>
163
163
  </svg>
164
164
  </div>
@@ -169,7 +169,7 @@ export const RTL = () => `
169
169
  <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
170
170
  <div class="section-notice__footer">
171
171
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
172
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
172
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
173
173
  <use href="#icon-close-16"></use>
174
174
  </svg>
175
175
  </button>
@@ -181,7 +181,7 @@ export const RTL = () => `
181
181
  export const vault = () => `
182
182
  <div class="section-notice" role="region">
183
183
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
184
- <svg aria-hidden="true" focusable="false" class="icon--the-ebay-vault-24">
184
+ <svg aria-hidden="true" class="icon--the-ebay-vault-24">
185
185
  <use href="#icon-the-ebay-vault-24"></use>
186
186
  </svg>
187
187
  </div>
@@ -194,7 +194,7 @@ export const vault = () => `
194
194
  </p>
195
195
  <div class="section-notice__footer">
196
196
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
197
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
197
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
198
198
  <use href="#icon-close-16"></use>
199
199
  </svg>
200
200
  </button>
@@ -205,7 +205,7 @@ export const vault = () => `
205
205
  export const selling = () => `
206
206
  <div class="section-notice" role="region">
207
207
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
208
- <svg aria-hidden="true" focusable="false" class="icon--selling-24">
208
+ <svg aria-hidden="true" class="icon--selling-24">
209
209
  <use href="#icon-selling-24"></use>
210
210
  </svg>
211
211
  </div>
@@ -218,7 +218,7 @@ export const selling = () => `
218
218
  </p>
219
219
  <div class="section-notice__footer">
220
220
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
221
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
221
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
222
222
  <use href="#icon-close-16"></use>
223
223
  </svg>
224
224
  </button>
@@ -229,7 +229,7 @@ export const selling = () => `
229
229
  export const warranty = () => `
230
230
  <div class="section-notice" role="region">
231
231
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
232
- <svg aria-hidden="true" focusable="false" class="icon--free-warranty-24">
232
+ <svg aria-hidden="true" class="icon--free-warranty-24">
233
233
  <use href="#icon-free-warranty-24"></use>
234
234
  </svg>
235
235
  </div>
@@ -242,7 +242,7 @@ export const warranty = () => `
242
242
  </p>
243
243
  <div class="section-notice__footer">
244
244
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
245
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
245
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
246
246
  <use href="#icon-close-16"></use>
247
247
  </svg>
248
248
  </button>
package/src/less/section-notice/stories/iconless.stories.js CHANGED
@@ -51,7 +51,7 @@ export const dismiss = () => `
51
51
  </div>
52
52
  <div class="section-notice__footer">
53
53
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
54
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
54
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
55
55
  <use href="#icon-close-16"></use>
56
56
  </svg>
57
57
  </button>
@@ -68,7 +68,7 @@ export const dismissAndLinkCTA = () => `
68
68
  <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
69
69
  <div class="section-notice__footer">
70
70
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
71
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
71
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
72
72
  <use href="#icon-close-16"></use>
73
73
  </svg>
74
74
  </button>
@@ -87,7 +87,7 @@ export const dismissAndFakeLinkCTA = () => `
87
87
  </p>
88
88
  <div class="section-notice__footer">
89
89
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
90
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
90
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
91
91
  <use href="#icon-close-16"></use>
92
92
  </svg>
93
93
  </button>
@@ -106,7 +106,7 @@ export const RTL = () => `
106
106
  <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
107
107
  <div class="section-notice__footer">
108
108
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
109
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
109
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
110
110
  <use href="#icon-close-16"></use>
111
111
  </svg>
112
112
  </button>
package/src/less/section-notice/stories/test.stories.js CHANGED
@@ -3,7 +3,7 @@ export default { title: "Skin/Section Notice/Tests" };
3
3
  export const longBody = () => `
4
4
  <div class="section-notice section-notice--confirmation" role="region">
5
5
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
6
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
6
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
7
7
  <use href="#icon-confirmation-filled-16"></use>
8
8
  </svg>
9
9
  </div>
@@ -13,7 +13,7 @@ export const longBody = () => `
13
13
  <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
14
14
  <div class="section-notice__footer">
15
15
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
16
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
16
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
17
17
  <use href="#icon-close-16"></use>
18
18
  </svg>
19
19
  </button>
@@ -24,7 +24,7 @@ export const longBody = () => `
24
24
  export const longTitle = () => `
25
25
  <div class="section-notice section-notice--confirmation" role="region">
26
26
  <div class="section-notice__header" role="region" aria-roledescription="Notice">
27
- <svg aria-hidden="true" focusable="false" class="icon icon--confirmation-filled-16">
27
+ <svg aria-hidden="true" class="icon icon--confirmation-filled-16">
28
28
  <use href="#icon-confirmation-filled-16"></use>
29
29
  </svg>
30
30
  </div>
@@ -35,7 +35,7 @@ export const longTitle = () => `
35
35
  <p class="section-notice__cta"><a href="https://www.ebay.com">Action</a></p>
36
36
  <div class="section-notice__footer">
37
37
  <button aria-label="Close notice" class="fake-link section-notice__dismiss">
38
- <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
38
+ <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
39
39
  <use href="#icon-close-16"></use>
40
40
  </svg>
41
41
  </button>
package/src/less/section-title/stories/rtl.stories.js CHANGED
@@ -53,7 +53,7 @@ export const overflow = () => `
53
53
  <div class="section-title__overflow">
54
54
  <span class="menu-button">
55
55
  <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
56
- <svg class="icon icon--overflow-vertical-24" focusable="false" width="24" height="24" aria-hidden="true">
56
+ <svg class="icon icon--overflow-vertical-24" width="24" height="24" aria-hidden="true">
57
57
  <use href="#icon-overflow-vertical-24"></use>
58
58
  </svg>
59
59
  </button>
@@ -79,7 +79,7 @@ export const withFavorite = () => `
79
79
  </div>
80
80
  <div class="section-title__info">
81
81
  <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
82
- <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
82
+ <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
83
83
  <use href="#icon-save-16"></use>
84
84
  </svg>
85
85
  </button>
@@ -97,7 +97,7 @@ export const withFavoriteAndLink = () => `
97
97
  </div>
98
98
  <div class="section-title__info">
99
99
  <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
100
- <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
100
+ <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
101
101
  <use href="#icon-save-16"></use>
102
102
  </svg>
103
103
  </button>
package/src/less/section-title/stories/section-title.stories.js CHANGED
@@ -44,7 +44,7 @@ export const overflow = () => `
44
44
  <div class="section-title__overflow">
45
45
  <span class="menu-button">
46
46
  <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
47
- <svg class="icon icon--overflow-vertical-24" focusable="false" width="24" height="24" aria-hidden="true">
47
+ <svg class="icon icon--overflow-vertical-24" width="24" height="24" aria-hidden="true">
48
48
  <use href="#icon-overflow-vertical-24"></use>
49
49
  </svg>
50
50
  </button>
@@ -68,7 +68,7 @@ export const withFavorite = () => `
68
68
  </div>
69
69
  <div class="section-title__info">
70
70
  <button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
71
- <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
71
+ <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
72
72
  <use href="#icon-save-16"></use>
73
73
  </svg>
74
74
  </button>
@@ -84,7 +84,7 @@ export const withFavoriteAndLink = () => `
84
84
  </div>
85
85
  <div class="section-title__info">
86
86
  <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
87
- <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
87
+ <svg aria-hidden="true" class="icon icon--save-16" width="16" height="14">
88
88
  <use href="#icon-save-16"></use>
89
89
  </svg>
90
90
  </button>
package/src/less/segmented-buttons/stories/segmented-buttons.stories.js CHANGED
@@ -36,7 +36,7 @@ export const withIcons = () => `
36
36
  <li>
37
37
  <button type="button" aria-current="true" class="segmented-buttons__button">
38
38
  <span class="segmented-buttons__button-cell">
39
- <svg aria-hidden="true" class="icon icon--full-view-24" focusable="false" height="16" width="16">
39
+ <svg aria-hidden="true" class="icon icon--full-view-24" height="16" width="16">
40
40
  <use href="#icon-full-view-24"></use>
41
41
  </svg>
42
42
  <span>Desktop</span>
@@ -46,7 +46,7 @@ export const withIcons = () => `
46
46
  <li>
47
47
  <button type="button" class="segmented-buttons__button">
48
48
  <span class="segmented-buttons__button-cell">
49
- <svg aria-hidden="true" class="icon icon--mobile-24" focusable="false" height="16" width="16">
49
+ <svg aria-hidden="true" class="icon icon--mobile-24" height="16" width="16">
50
50
  <use href="#icon-mobile-24"></use>
51
51
  </svg>
52
52
  <span>Mobile</span>
package/src/less/select/stories/cascade.stories.js CHANGED
@@ -8,7 +8,7 @@ export const RTL = () => `
8
8
  <option value="2">Option 2</option>
9
9
  <option value="3">Option 3</option>
10
10
  </select>
11
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
11
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
12
12
  <use href="#icon-chevron-down-12"></use>
13
13
  </svg>
14
14
  </span>
@@ -22,7 +22,7 @@ export const fontSize = () => `
22
22
  <option value="2">Option 2</option>
23
23
  <option value="3">Option 3</option>
24
24
  </select>
25
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
25
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
26
26
  <use href="#icon-chevron-down-12"></use>
27
27
  </svg>
28
28
  </span>
@@ -35,7 +35,7 @@ export const color = () => `
35
35
  <option value="2">Option 2</option>
36
36
  <option value="3">Option 3</option>
37
37
  </select>
38
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
38
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
39
39
  <use href="#icon-chevron-down-12"></use>
40
40
  </svg>
41
41
  </span>
package/src/less/select/stories/default.stories.js CHANGED
@@ -7,7 +7,7 @@ export const defaultSelection = () => `
7
7
  <option value="2">Option 2</option>
8
8
  <option value="3">Option 3</option>
9
9
  </select>
10
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
10
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
11
11
  <use href="#icon-chevron-down-12"></use>
12
12
  </svg>
13
13
  </span>
@@ -21,7 +21,7 @@ export const forcedSelection = () => `
21
21
  <option value="2">Option 2</option>
22
22
  <option value="3">Option 3</option>
23
23
  </select>
24
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
24
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
25
25
  <use href="#icon-chevron-down-12"></use>
26
26
  </svg>
27
27
  </span>
@@ -34,7 +34,7 @@ export const disabled = () => `
34
34
  <option value="2">Option 2</option>
35
35
  <option value="3">Option 3</option>
36
36
  </select>
37
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
37
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
38
38
  <use href="#icon-chevron-down-12"></use>
39
39
  </svg>
40
40
  </span>
@@ -47,7 +47,7 @@ export const fluid = () => `
47
47
  <option value="2">Option 2</option>
48
48
  <option value="3">Option 3</option>
49
49
  </select>
50
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
50
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
51
51
  <use href="#icon-chevron-down-12"></use>
52
52
  </svg>
53
53
  </div>
@@ -61,7 +61,7 @@ export const borderless = () => `
61
61
  <option value="2">Option 2</option>
62
62
  <option value="3">Option 3</option>
63
63
  </select>
64
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
64
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
65
65
  <use href="#icon-chevron-down-12"></use>
66
66
  </svg>
67
67
  </span>
@@ -74,7 +74,7 @@ export const large = () => `
74
74
  <option value="2">Option 2</option>
75
75
  <option value="3">Option 3</option>
76
76
  </select>
77
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
77
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
78
78
  <use href="#icon-chevron-down-12"></use>
79
79
  </svg>
80
80
  </span>
@@ -87,7 +87,7 @@ export const underline = () => `
87
87
  <option value="2">Option 2</option>
88
88
  <option value="3">Option 3</option>
89
89
  </select>
90
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
90
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
91
91
  <use href="#icon-chevron-down-12"></use>
92
92
  </svg>
93
93
  </span>
@@ -100,7 +100,7 @@ export const invalid = () => `
100
100
  <option value="2">Option 2</option>
101
101
  <option value="3">Option 3</option>
102
102
  </select>
103
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
103
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
104
104
  <use href="#icon-chevron-down-12"></use>
105
105
  </svg>
106
106
  </span>
package/src/less/select/stories/floating-label.stories.js CHANGED
@@ -9,7 +9,7 @@ export const defaultLabel = () => `
9
9
  <option value="2">Option 2</option>
10
10
  <option value="3">Option 3</option>
11
11
  </select>
12
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
12
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
13
13
  <use href="#icon-chevron-down-12"></use>
14
14
  </svg>
15
15
  </span>
@@ -26,7 +26,7 @@ export const selectedOption = () => `
26
26
  <option value="2">Option 2</option>
27
27
  <option value="3">Option 3</option>
28
28
  </select>
29
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
29
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
30
30
  <use href="#icon-chevron-down-12"></use>
31
31
  </svg>
32
32
  </span>
@@ -42,7 +42,7 @@ export const errorState = () => `
42
42
  <option value="2">Option 2</option>
43
43
  <option value="3">Option 3</option>
44
44
  </select>
45
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
45
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
46
46
  <use href="#icon-chevron-down-12"></use>
47
47
  </svg>
48
48
  </span>
@@ -58,7 +58,7 @@ export const disabled = () => `
58
58
  <option value="2">Option 2 can't pick</option>
59
59
  <option value="3">Option 3</option>
60
60
  </select>
61
- <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
61
+ <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
62
62
  <use href="#icon-chevron-down-12"></use>
63
63
  </svg>
64
64
  </span>
package/src/less/signal/signal.less CHANGED
@@ -2,15 +2,16 @@
2
2
  @import "../mixins/private/token-mixins.less";
3
3
 
4
4
  .signal {
5
- border: 1.5px solid;
5
+ border: 1px solid;
6
6
  border-radius: var(--border-radius-100);
7
7
  box-sizing: border-box;
8
8
  display: inline-block;
9
- font-size: var(--font-size-small);
9
+ font-size: var(--font-size-smallest);
10
10
  font-weight: bold;
11
11
  letter-spacing: 0.5px;
12
+ line-height: var(--spacing-150);
12
13
  margin: var(--spacing-100) 0;
13
- padding: 2px 12px 1px;
14
+ padding: 2px var(--spacing-100) 1px;
14
15
  text-align: center;
15
16
  text-transform: uppercase;
16
17
  }