@ebay/skin 18.0.0-next.0 → 18.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.
Files changed (47) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/breadcrumbs/breadcrumbs.css +2 -2
  3. package/dist/bundles/skin-default.css +34 -29
  4. package/dist/bundles/skin-default.css.map +1 -1
  5. package/dist/bundles/skin-full.css +34 -29
  6. package/dist/bundles/skin-full.css.map +1 -1
  7. package/dist/bundles/skin-headless.css +34 -29
  8. package/dist/bundles/skin-headless.css.map +1 -1
  9. package/dist/button/button.css +2 -2
  10. package/dist/carousel/carousel.css +3 -8
  11. package/dist/carousel/carousel.css.map +1 -1
  12. package/dist/combobox/combobox.css +2 -2
  13. package/dist/filter-menu/filter-menu.css +8 -8
  14. package/dist/filter-menu/filter-menu.css.map +1 -1
  15. package/dist/filter-menu-button/filter-menu-button.css +9 -9
  16. package/dist/icon/icon.css +9 -0
  17. package/dist/icon/icon.css.map +1 -1
  18. package/dist/lightbox-dialog/lightbox-dialog.css +1 -1
  19. package/dist/select/select.css +1 -1
  20. package/dist/toggle-button/toggle-button.css +1 -1
  21. package/dist/toggle-button-group/toggle-button-group.css +1 -1
  22. package/lint.log +3 -3
  23. package/package.json +1 -1
  24. package/src/sass/breadcrumbs/breadcrumbs.scss +2 -2
  25. package/src/sass/button/button.scss +2 -2
  26. package/src/sass/carousel/carousel.scss +2 -9
  27. package/src/sass/combobox/combobox.scss +2 -2
  28. package/src/sass/drawer-dialog/stories/drawer-dialog.stories.js +1 -1
  29. package/src/sass/filter-menu/filter-menu.scss +8 -9
  30. package/src/sass/filter-menu/stories/filter-menu.stories.js +24 -24
  31. package/src/sass/filter-menu-button/filter-menu-button.scss +9 -9
  32. package/src/sass/filter-menu-button/stories/filter-menu-button.stories.js +116 -116
  33. package/src/sass/fullscreen-dialog/stories/fullscreen-dialog.stories.js +1 -1
  34. package/src/sass/icon/icon.scss +9 -0
  35. package/src/sass/lightbox-dialog/lightbox-dialog.scss +1 -1
  36. package/src/sass/select/select.scss +1 -1
  37. package/src/sass/textbox/stories/icon.stories.js +5 -3
  38. package/src/sass/toggle-button/toggle-button.scss +1 -1
  39. package/src/sass/toggle-button-group/stories/list-layout.stories.js +133 -0
  40. package/src/sass/toggle-button-group/toggle-button-group.scss +1 -1
  41. package/.changeset/bright-kiwis-repeat.md +0 -5
  42. package/.changeset/chilled-games-stare.md +0 -5
  43. package/.changeset/gold-radios-reply.md +0 -5
  44. package/.changeset/light-lions-explode.md +0 -5
  45. package/.changeset/pre.json +0 -15
  46. package/.changeset/ten-rockets-double.md +0 -5
  47. package/.changeset/wild-donkeys-attack.md +0 -5
package/dist/button/button.css CHANGED
@@ -254,8 +254,8 @@ button.btn--primary.btn--destructive .progress-spinner {
254
254
  --color-spinner-icon-foreground: #ec7089;
255
255
  }
256
256
 
257
- a.fake-btn[aria-expanded="true"] svg.icon--chevron-down-12,
258
- button.btn[aria-expanded="true"] svg.icon--chevron-down-12 {
257
+ a.fake-btn[aria-expanded="true"] svg.icon--12,
258
+ button.btn[aria-expanded="true"] svg.icon--12 {
259
259
  transform: rotate(180deg);
260
260
  }
261
261
 
package/dist/carousel/carousel.css CHANGED
@@ -135,18 +135,14 @@ div.carousel {
135
135
  }
136
136
  .carousel__control--prev {
137
137
  left: calc(var(--spacing-200) * -1);
138
+ -webkit-margin-end: 1px;
139
+ margin-inline-end: 1px;
138
140
  }
139
141
  .carousel__control--next {
140
142
  right: calc(var(--spacing-200) * -1);
141
- }
142
- .carousel__control .icon--chevron-right-12 {
143
143
  -webkit-margin-start: 1px;
144
144
  margin-inline-start: 1px;
145
145
  }
146
- .carousel__control .icon--chevron-left-12 {
147
- -webkit-margin-end: 1px;
148
- margin-inline-end: 1px;
149
- }
150
146
  .carousel__control svg {
151
147
  color: var(
152
148
  --carousel-paddle-foreground-color,
@@ -224,8 +220,7 @@ span.carousel__container {
224
220
  left: calc(var(--spacing-200) * -1);
225
221
  right: unset;
226
222
  }
227
- [dir="rtl"] .carousel__control .icon--chevron-left-12,
228
- [dir="rtl"] .carousel__control .icon--chevron-right-12 {
223
+ [dir="rtl"] .carousel__control .icon--12 {
229
224
  transform: rotate(180deg);
230
225
  }
231
226
  @supports not (
package/dist/carousel/carousel.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/sass/carousel/carousel.scss","carousel.css","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/public/_utility-mixins.scss"],"names":[],"mappings":"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","file":"carousel.css"}
1
+ {"version":3,"sources":["../../src/sass/carousel/carousel.scss","carousel.css","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/public/_utility-mixins.scss"],"names":[],"mappings":"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","file":"carousel.css"}
package/dist/combobox/combobox.css CHANGED
@@ -169,11 +169,11 @@ span.combobox {
169
169
  display: block;
170
170
  }
171
171
 
172
- .combobox--expanded svg.icon--chevron-down-12 {
172
+ .combobox--expanded svg.icon--12 {
173
173
  transform: rotate(180deg);
174
174
  }
175
175
 
176
- .combobox__control > svg.icon--chevron-down-12 {
176
+ .combobox__control > svg.icon--12 {
177
177
  color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));
178
178
  pointer-events: none;
179
179
  position: absolute;
package/dist/filter-menu/filter-menu.css CHANGED
@@ -180,27 +180,27 @@ button.filter-menu__footer:hover {
180
180
  margin-left: 8px;
181
181
  }
182
182
 
183
- .filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked-18,
184
- .filter-menu__item[role="menuitemradio"] svg.icon--radio-checked-18 {
183
+ .filter-menu__item[role="menuitemcheckbox"] svg.icon--checked,
184
+ .filter-menu__item[role="menuitemradio"] svg.icon--checked {
185
185
  display: none;
186
186
  }
187
187
 
188
- .filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked-18,
189
- .filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked-18 {
188
+ .filter-menu__item[role="menuitemcheckbox"] svg.icon--unchecked,
189
+ .filter-menu__item[role="menuitemradio"] svg.icon--unchecked {
190
190
  display: block;
191
191
  }
192
192
 
193
193
  .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
194
- svg.icon--checkbox-unchecked-18,
194
+ svg.icon--unchecked,
195
195
  .filter-menu__item[role="menuitemradio"][aria-checked="true"]
196
- svg.icon--radio-unchecked-18 {
196
+ svg.icon--unchecked {
197
197
  display: none;
198
198
  }
199
199
 
200
200
  .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
201
- svg.icon--checkbox-checked-18,
201
+ svg.icon--checked,
202
202
  .filter-menu__item[role="menuitemradio"][aria-checked="true"]
203
- svg.icon--radio-checked-18 {
203
+ svg.icon--checked {
204
204
  display: block;
205
205
  }
206
206
  div.filter-menu__item[role^="menuitem"]:focus:not(:focus-visible) {
package/dist/filter-menu/filter-menu.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/sass/filter-menu/filter-menu.scss","../../src/sass/mixins/private/_token-mixins.scss","filter-menu.css","../../src/sass/mixins/private/_filter-menu-mixins.scss"],"names":[],"mappings":"AAIA;ECFQ,0FAAA;EDSJ,eAAA;AEAJ;;AFGA;EAEI,oBAAA;AEAJ;;AFGA;EAEI,cAAA;EACA,cAAA;EACA,iBAAA;AEAJ;;AFGA;EAEI,oBAAA;AEAJ;;AFGA;EAEI,aAAA;EACA,aAAA;EACA,WAAA;EACA,cAAA;EACA,UAAA;AEAJ;AFEI;ECrCI,yEAAA;ED2CA,WAAA;EACA,UAAA;AEHR;;AFOA;EAEI,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AEJJ;AFMI;ECvDI,4EAAA;ACqDR;;AFUA;EAEI,aAAA;AEPJ;;AFUA;ECpEQ,2FAAA;EEIJ,qBAAA;EFJI,+EAAA;EEUJ,YAAA;EACA,kCAAA;EACA,6BAAA;EACA,iBAAA;EACA,QAAA;EH0DA,gBAAA;EGzDA,UAAA;ADyDJ;ACvDI;EACI,4EAAA;AD0DR;ACpDI;EFxBI,yFAAA;ACiFR;AClDQ;EF/BA,mFAAA;ACsFR;AChDQ;EACI,wBAAA;ADoDZ;AFjBI;EACI,iBAAA;AEoBR;;AFhBA;EC/EQ,2FAAA;EDmFJ,WAAA;ECnFI,wEAAA;EDsFJ,sBAAA;EACA,oBAAA;EACA,QAAA;EGpFA,qBAAA;EFJI,+EAAA;EEUJ,YAAA;EACA,kCAAA;EACA,6BAAA;EACA,iBAAA;EACA,QAAA;EH2EA,YAAA;EG1EA,UAAA;ADmGJ;ACjGI;EACI,4EAAA;ADoGR;AC9FI;EFxBI,yFAAA;AC2HR;AC5FQ;EF/BA,mFAAA;ACgIR;AC1FQ;EACI,wBAAA;AD8FZ;AF1CI;EACI,iDAAA;AE6CR;;AFzCA;EAEI,WAAA;EACA,eAAA;AE4CJ;;AFzCA;EAEI,YAAA;AE4CJ;;AFzCA;EAEI,aAAA;AE4CJ;;AFzCA;EAII,YAAA;AE0CJ;;AFvCA;EAII,aAAA;AEwCJ;AFpCA;EACI,YAAA;AEwCJ","file":"filter-menu.css"}
1
+ {"version":3,"sources":["../../src/sass/filter-menu/filter-menu.scss","../../src/sass/mixins/private/_token-mixins.scss","filter-menu.css","../../src/sass/mixins/private/_filter-menu-mixins.scss"],"names":[],"mappings":"AAIA;ECFQ,0FAAA;EDSJ,eAAA;AEAJ;;AFGA;EAEI,oBAAA;AEAJ;;AFGA;EAEI,cAAA;EACA,cAAA;EACA,iBAAA;AEAJ;;AFGA;EAEI,oBAAA;AEAJ;;AFGA;EAEI,aAAA;EACA,aAAA;EACA,WAAA;EACA,cAAA;EACA,UAAA;AEAJ;AFEI;ECrCI,yEAAA;ED2CA,WAAA;EACA,UAAA;AEHR;;AFOA;EAEI,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AEJJ;AFMI;ECvDI,4EAAA;ACqDR;;AFUA;EAEI,aAAA;AEPJ;;AFUA;ECpEQ,2FAAA;EEIJ,qBAAA;EFJI,+EAAA;EEUJ,YAAA;EACA,kCAAA;EACA,6BAAA;EACA,iBAAA;EACA,QAAA;EH0DA,gBAAA;EGzDA,UAAA;ADyDJ;ACvDI;EACI,4EAAA;AD0DR;ACpDI;EFxBI,yFAAA;ACiFR;AClDQ;EF/BA,mFAAA;ACsFR;AChDQ;EACI,wBAAA;ADoDZ;AFjBI;EACI,iBAAA;AEoBR;;AFhBA;EC/EQ,2FAAA;EDmFJ,WAAA;ECnFI,wEAAA;EDsFJ,sBAAA;EACA,oBAAA;EACA,QAAA;EGpFA,qBAAA;EFJI,+EAAA;EEUJ,YAAA;EACA,kCAAA;EACA,6BAAA;EACA,iBAAA;EACA,QAAA;EH2EA,YAAA;EG1EA,UAAA;ADmGJ;ACjGI;EACI,4EAAA;ADoGR;AC9FI;EFxBI,yFAAA;AC2HR;AC5FQ;EF/BA,mFAAA;ACgIR;AC1FQ;EACI,wBAAA;AD8FZ;AF1CI;EACI,iDAAA;AE6CR;;AFzCA;EAEI,WAAA;EACA,eAAA;AE4CJ;;AFzCA;EAEI,YAAA;AE4CJ;;AFzCA;EAEI,aAAA;AE4CJ;;AFzCA;EAII,YAAA;AE0CJ;;AFxCA;EAII,aAAA;AEyCJ;AFrCA;EACI,YAAA;AEyCJ","file":"filter-menu.css"}
package/dist/filter-menu-button/filter-menu-button.css CHANGED
@@ -62,7 +62,7 @@ button.filter-menu-button__button:hover {
62
62
  .filter-menu-button__button-cell {
63
63
  display: flex;
64
64
  }
65
- .filter-menu-button__button-cell svg.icon--chevron-down-12 {
65
+ .filter-menu-button__button-cell svg.icon--12 {
66
66
  align-self: center;
67
67
  color: var(
68
68
  --filter-menu-button-icon-color,
@@ -189,7 +189,7 @@ span.filter-menu-button__radio {
189
189
  width: 18px;
190
190
  }
191
191
 
192
- span.filter-menu-button__checkbox svg.icon--checkbox-unchecked-18 {
192
+ span.filter-menu-button__checkbox svg.icon--unchecked {
193
193
  color: var(
194
194
  --filter-menu-item-unchecked-color,
195
195
  var(--color-foreground-secondary)
@@ -198,7 +198,7 @@ span.filter-menu-button__checkbox svg.icon--checkbox-unchecked-18 {
198
198
  height: 18px;
199
199
  width: 18px;
200
200
  }
201
- span.filter-menu-button__checkbox svg.icon--checkbox-checked-18 {
201
+ span.filter-menu-button__checkbox svg.icon--checked {
202
202
  color: var(
203
203
  --filter-menu-item-checked-color,
204
204
  var(--color-foreground-primary)
@@ -208,7 +208,7 @@ span.filter-menu-button__checkbox svg.icon--checkbox-checked-18 {
208
208
  width: 18px;
209
209
  }
210
210
 
211
- span.filter-menu-button__radio svg.icon--radio-unchecked-18 {
211
+ span.filter-menu-button__radio svg.icon--unchecked {
212
212
  color: var(
213
213
  --filter-menu-item-unchecked-color,
214
214
  var(--color-foreground-primary)
@@ -217,7 +217,7 @@ span.filter-menu-button__radio svg.icon--radio-unchecked-18 {
217
217
  height: 18px;
218
218
  width: 18px;
219
219
  }
220
- span.filter-menu-button__radio svg.icon--radio-checked-18 {
220
+ span.filter-menu-button__radio svg.icon--checked {
221
221
  color: var(
222
222
  --filter-menu-item-checked-color,
223
223
  var(--color-foreground-primary)
@@ -372,20 +372,20 @@ button.filter-menu-button__footer:hover {
372
372
  }
373
373
 
374
374
  .filter-menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
375
- svg.icon--checkbox-unchecked-18 {
375
+ svg.icon--unchecked {
376
376
  display: none;
377
377
  }
378
378
  .filter-menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
379
- svg.icon--checkbox-checked-18 {
379
+ svg.icon--checked {
380
380
  display: block;
381
381
  }
382
382
 
383
383
  .filter-menu-button__item[role="menuitemradio"][aria-checked="true"]
384
- svg.icon--radio-unchecked-18 {
384
+ svg.icon--unchecked {
385
385
  display: none;
386
386
  }
387
387
  .filter-menu-button__item[role="menuitemradio"][aria-checked="true"]
388
- svg.icon--radio-checked-18 {
388
+ svg.icon--checked {
389
389
  display: block;
390
390
  }
391
391
  div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
package/dist/icon/icon.css CHANGED
@@ -65,5 +65,14 @@ svg.icon--64-colored {
65
65
  svg.icon--disabled {
66
66
  filter: var(--color-icon-disabled-filter);
67
67
  }
68
+ svg.icon--attention-filled {
69
+ color: var(--color-foreground-attention);
70
+ }
71
+ svg.icon--confirmation-filled {
72
+ color: var(--color-foreground-confirmation);
73
+ }
74
+ svg.icon--information-filled {
75
+ color: var(--color-foreground-information);
76
+ }
68
77
 
69
78
  /*# sourceMappingURL=icon.css.map */
package/dist/icon/icon.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/sass/icon/icon.scss","../../src/sass/mixins/private/_icon-mixins.scss","icon.css"],"names":[],"mappings":"AAII;ECCA,oBAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,qBAAA;ACFJ;AFDI;EACI,WAAA;EACA,UAAA;AEGR;AFAI;EACI,WAAA;EACA,UAAA;AEER;AFCI;EACI,WAAA;EACA,UAAA;AECR;AFEI;EACI,WAAA;EACA,UAAA;AEAR;AFGI;EACI,WAAA;EACA,UAAA;AEDR;AFII;EACI,WAAA;EACA,UAAA;AEFR;AFKI;EACI,WAAA;EACA,UAAA;AEHR;AFMI;EACI,WAAA;EACA,UAAA;AEJR;AFOI;EACI,WAAA;AELR;AFQI;EACI,WAAA;AENR;AFSI;EACI,WAAA;AEPR;AFUI;EACI,WAAA;AERR;AFWI;EACI,WAAA;AETR;AFYI;EACI,WAAA;AEVR;AFaI;EACI,WAAA;AEXR;AFcI;EACI,WAAA;AEZR;AFeI;EACI,wCAAA;AEbR","file":"icon.css"}
1
+ {"version":3,"sources":["../../src/sass/icon/icon.scss","../../src/sass/mixins/private/_icon-mixins.scss","icon.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAII;ECCA,oBAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,qBAAA;ACFJ;AFDI;EACI,WAAA;EACA,UAAA;AEGR;AFAI;EACI,WAAA;EACA,UAAA;AEER;AFCI;EACI,WAAA;EACA,UAAA;AECR;AFEI;EACI,WAAA;EACA,UAAA;AEAR;AFGI;EACI,WAAA;EACA,UAAA;AEDR;AFII;EACI,WAAA;EACA,UAAA;AEFR;AFKI;EACI,WAAA;EACA,UAAA;AEHR;AFMI;EACI,WAAA;EACA,UAAA;AEJR;AFOI;EACI,WAAA;AELR;AFQI;EACI,WAAA;AENR;AFSI;EACI,WAAA;AEPR;AFUI;EACI,WAAA;AERR;AFWI;EACI,WAAA;AETR;AFYI;EACI,WAAA;AEVR;AFaI;EACI,WAAA;AEXR;AFcI;EACI,WAAA;AEZR;AFeI;EACI,wCAAA;AEbR;AFeI;EG9EI,uCAAA;ADkER;AFeI;EGjFI,0CAAA;ADqER;AFeI;EGpFI,yCAAA;ADwER","file":"icon.css"}
package/dist/lightbox-dialog/lightbox-dialog.css CHANGED
@@ -237,7 +237,7 @@ button.icon-btn.lightbox-dialog__prev {
237
237
  max-height: 95%;
238
238
  }
239
239
 
240
- [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
240
+ [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--16 {
241
241
  transform: rotate(180deg);
242
242
  }
243
243
 
package/dist/select/select.css CHANGED
@@ -28,7 +28,7 @@ span.select {
28
28
  vertical-align: middle;
29
29
  }
30
30
 
31
- .select svg.icon--chevron-down-12 {
31
+ .select svg.icon--12 {
32
32
  height: 100%;
33
33
  pointer-events: none;
34
34
  position: absolute;
package/dist/toggle-button/toggle-button.css CHANGED
@@ -159,7 +159,7 @@
159
159
  min-width: var(--toggle-button-list-width-min);
160
160
  }
161
161
 
162
- .toggle-button--list-layout .toggle-button__content,
162
+ .toggle-button--list-layout .toggle-button__content:not(:only-child),
163
163
  .toggle-button--list-layout .toggle-button__image-container {
164
164
  align-self: self-start;
165
165
  }
package/dist/toggle-button-group/toggle-button-group.css CHANGED
@@ -59,7 +59,7 @@
59
59
  min-width: auto;
60
60
  }
61
61
 
62
- .toggle-button-group--list-layout .toggle-button__content,
62
+ .toggle-button-group--list-layout .toggle-button__content:not(:only-child),
63
63
  .toggle-button-group--list-layout .toggle-button__image-container {
64
64
  align-self: flex-start;
65
65
  }
package/lint.log CHANGED
@@ -1,9 +1,9 @@
1
1
 
2
2
  /home/runner/work/skin/skin/docs/src/js/main.js
3
3
  1:1 warning Unused eslint-disable directive (no problems were reported from 'no-console')
4
- 43:56 warning Unused eslint-disable directive (no problems were reported from 'no-console')
5
- 293:25 warning Unused eslint-disable directive (no problems were reported from 'eqeqeq')
6
- 295:25 warning Unused eslint-disable directive (no problems were reported from 'eqeqeq')
4
+ 41:56 warning Unused eslint-disable directive (no problems were reported from 'no-console')
5
+ 287:25 warning Unused eslint-disable directive (no problems were reported from 'eqeqeq')
6
+ 289:25 warning Unused eslint-disable directive (no problems were reported from 'eqeqeq')
7
7
 
8
8
  ✖ 4 problems (0 errors, 4 warnings)
9
9
  0 errors and 4 warnings potentially fixable with the `--fix` option.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
3
  "description": "Skin - CSS modules that represent the brand eBay",
4
- "version": "18.0.0-next.0",
4
+ "version": "18.0.0",
5
5
  "license": "MIT",
6
6
  "main": "./index.js",
7
7
  "maintainers": [
package/src/sass/breadcrumbs/breadcrumbs.scss CHANGED
@@ -42,7 +42,7 @@ nav.breadcrumbs > ul > li svg {
42
42
  margin-right: 3px;
43
43
  }
44
44
 
45
- nav.breadcrumbs > ul > li svg.icon--chevron-right-12 {
45
+ nav.breadcrumbs > ul > li svg.icon--12 {
46
46
  margin-left: var(--spacing-75);
47
47
  margin-right: var(--spacing-75);
48
48
  }
@@ -125,7 +125,7 @@ nav.breadcrumbs .menu-button__menu {
125
125
  font-size: var(--font-size-default);
126
126
  }
127
127
 
128
- [dir="rtl"] nav.breadcrumbs svg.icon--chevron-right-12 {
128
+ [dir="rtl"] nav.breadcrumbs svg.icon--12 {
129
129
  transform: rotate(180deg);
130
130
  }
131
131
 
package/src/sass/button/button.scss CHANGED
@@ -208,8 +208,8 @@ button.btn--primary.btn--destructive .progress-spinner {
208
208
  --color-spinner-icon-foreground: #ec7089;
209
209
  }
210
210
 
211
- button.btn[aria-expanded="true"] svg.icon--chevron-down-12,
212
- a.fake-btn[aria-expanded="true"] svg.icon--chevron-down-12 {
211
+ button.btn[aria-expanded="true"] svg.icon--12,
212
+ a.fake-btn[aria-expanded="true"] svg.icon--12 {
213
213
  transform: rotate(180deg);
214
214
  }
215
215
 
package/src/sass/carousel/carousel.scss CHANGED
@@ -21,20 +21,14 @@ $ebay-carousel-transition-function: ease-in-out;
21
21
 
22
22
  &--prev {
23
23
  left: calc(var(--spacing-200) * -1);
24
+ margin-inline-end: 1px;
24
25
  }
25
26
 
26
27
  &--next {
27
28
  right: calc(var(--spacing-200) * -1);
28
- }
29
-
30
- .icon--chevron-right-12 {
31
29
  margin-inline-start: 1px;
32
30
  }
33
31
 
34
- .icon--chevron-left-12 {
35
- margin-inline-end: 1px;
36
- }
37
-
38
32
  align-items: center;
39
33
  border: 1px solid;
40
34
  @include border-color-token(
@@ -220,8 +214,7 @@ span.carousel__container {
220
214
  right: unset;
221
215
  }
222
216
 
223
- .carousel__control .icon--chevron-left-12,
224
- .carousel__control .icon--chevron-right-12 {
217
+ .carousel__control .icon--12 {
225
218
  transform: rotate(180deg);
226
219
  }
227
220
  }
package/src/sass/combobox/combobox.scss CHANGED
@@ -87,11 +87,11 @@ span.combobox {
87
87
  display: block;
88
88
  }
89
89
 
90
- .combobox--expanded svg.icon--chevron-down-12 {
90
+ .combobox--expanded svg.icon--12 {
91
91
  transform: rotate(180deg);
92
92
  }
93
93
 
94
- .combobox__control > svg.icon--chevron-down-12 {
94
+ .combobox__control > svg.icon--12 {
95
95
  @include color-token(combobox-textbox-icon-color, color-foreground-primary);
96
96
 
97
97
  pointer-events: none;
package/src/sass/drawer-dialog/stories/drawer-dialog.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- export default { title: "Skin/Drawer Dialog" };
1
+ export default { title: "Skin/Drawer Dialog (DEPRECATED)" };
2
2
 
3
3
  export const empty = () => `
4
4
  <div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
package/src/sass/filter-menu/filter-menu.scss CHANGED
@@ -102,27 +102,26 @@ button.filter-menu-form__footer[type="submit"] {
102
102
  margin-left: 8px;
103
103
  }
104
104
 
105
- .filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked-18,
106
- .filter-menu__item[role="menuitemradio"] svg.icon--radio-checked-18 {
105
+ .filter-menu__item[role="menuitemradio"] svg.icon--checked,
106
+ .filter-menu__item[role="menuitemcheckbox"] svg.icon--checked {
107
107
  display: none;
108
108
  }
109
109
 
110
- .filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked-18,
111
- .filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked-18 {
110
+ .filter-menu__item[role="menuitemradio"] svg.icon--unchecked,
111
+ .filter-menu__item[role="menuitemcheckbox"] svg.icon--unchecked {
112
112
  display: block;
113
113
  }
114
114
 
115
115
  .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
116
- svg.icon--checkbox-unchecked-18,
116
+ svg.icon--unchecked,
117
117
  .filter-menu__item[role="menuitemradio"][aria-checked="true"]
118
- svg.icon--radio-unchecked-18 {
118
+ svg.icon--unchecked {
119
119
  display: none;
120
120
  }
121
-
122
121
  .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
123
- svg.icon--checkbox-checked-18,
122
+ svg.icon--checked,
124
123
  .filter-menu__item[role="menuitemradio"][aria-checked="true"]
125
- svg.icon--radio-checked-18 {
124
+ svg.icon--checked {
126
125
  display: block;
127
126
  }
128
127
 
package/src/sass/filter-menu/stories/filter-menu.stories.js CHANGED
@@ -5,10 +5,10 @@ export const base = () => `
5
5
  <div class="filter-menu__items" role="menu">
6
6
  <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
7
7
  <span class="filter-menu__checkbox">
8
- <svg class="icon icon--18" height="18" width="18">
8
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
9
9
  <use href="#icon-checkbox-unchecked-18"></use>
10
10
  </svg>
11
- <svg class="icon icon--18" height="18" width="18">
11
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
12
12
  <use href="#icon-checkbox-checked-18"></use>
13
13
  </svg>
14
14
  </span>
@@ -16,10 +16,10 @@ export const base = () => `
16
16
  </div>
17
17
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
18
18
  <span class="filter-menu__checkbox">
19
- <svg class="icon icon--18" height="18" width="18">
19
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
20
20
  <use href="#icon-checkbox-unchecked-18"></use>
21
21
  </svg>
22
- <svg class="icon icon--18" height="18" width="18">
22
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
23
23
  <use href="#icon-checkbox-checked-18"></use>
24
24
  </svg>
25
25
  </span>
@@ -27,10 +27,10 @@ export const base = () => `
27
27
  </div>
28
28
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
29
29
  <span class="filter-menu__checkbox">
30
- <svg class="icon icon--18" height="18" width="18">
30
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
31
31
  <use href="#icon-checkbox-unchecked-18"></use>
32
32
  </svg>
33
- <svg class="icon icon--18" height="18" width="18">
33
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
34
34
  <use href="#icon-checkbox-checked-18"></use>
35
35
  </svg>
36
36
  </span>
@@ -45,10 +45,10 @@ export const withDisabled = () => `
45
45
  <div class="filter-menu__items" role="menu">
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
- <svg class="icon icon--18" height="18" width="18">
48
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
49
49
  <use href="#icon-checkbox-unchecked-18"></use>
50
50
  </svg>
51
- <svg class="icon icon--18" height="18" width="18">
51
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
52
52
  <use href="#icon-checkbox-checked-18"></use>
53
53
  </svg>
54
54
  </span>
@@ -56,10 +56,10 @@ export const withDisabled = () => `
56
56
  </div>
57
57
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
58
58
  <span class="filter-menu__checkbox">
59
- <svg class="icon icon--18" height="18" width="18">
59
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
60
60
  <use href="#icon-checkbox-unchecked-18"></use>
61
61
  </svg>
62
- <svg class="icon icon--18" height="18" width="18">
62
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
63
63
  <use href="#icon-checkbox-checked-18"></use>
64
64
  </svg>
65
65
  </span>
@@ -67,10 +67,10 @@ export const withDisabled = () => `
67
67
  </div>
68
68
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
69
69
  <span class="filter-menu__checkbox">
70
- <svg class="icon icon--18" height="18" width="18">
70
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
71
71
  <use href="#icon-checkbox-unchecked-18"></use>
72
72
  </svg>
73
- <svg class="icon icon--18" height="18" width="18">
73
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
74
74
  <use href="#icon-checkbox-checked-18"></use>
75
75
  </svg>
76
76
  </span>
@@ -85,10 +85,10 @@ export const withFooterButton = () => `
85
85
  <div class="filter-menu__items" role="menu">
86
86
  <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
87
87
  <span class="filter-menu__checkbox">
88
- <svg class="icon icon--18" height="18" width="18">
88
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
89
89
  <use href="#icon-checkbox-unchecked-18"></use>
90
90
  </svg>
91
- <svg class="icon icon--18" height="18" width="18">
91
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
92
92
  <use href="#icon-checkbox-checked-18"></use>
93
93
  </svg>
94
94
  </span>
@@ -96,10 +96,10 @@ export const withFooterButton = () => `
96
96
  </div>
97
97
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
98
98
  <span class="filter-menu__checkbox">
99
- <svg class="icon icon--18" height="18" width="18">
99
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
100
100
  <use href="#icon-checkbox-unchecked-18"></use>
101
101
  </svg>
102
- <svg class="icon icon--18" height="18" width="18">
102
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
103
103
  <use href="#icon-checkbox-checked-18"></use>
104
104
  </svg>
105
105
  </span>
@@ -107,10 +107,10 @@ export const withFooterButton = () => `
107
107
  </div>
108
108
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
109
109
  <span class="filter-menu__checkbox">
110
- <svg class="icon icon--18" height="18" width="18">
110
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
111
111
  <use href="#icon-checkbox-unchecked-18"></use>
112
112
  </svg>
113
- <svg class="icon icon--18" height="18" width="18">
113
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
114
114
  <use href="#icon-checkbox-checked-18"></use>
115
115
  </svg>
116
116
  </span>
@@ -126,10 +126,10 @@ export const textSpacing = () => `
126
126
  <div class="filter-menu__items" role="menu">
127
127
  <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
128
128
  <span class="filter-menu__checkbox">
129
- <svg class="icon icon--18" height="18" width="18">
129
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
130
130
  <use href="#icon-checkbox-unchecked-18"></use>
131
131
  </svg>
132
- <svg class="icon icon--18" height="18" width="18">
132
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
133
133
  <use href="#icon-checkbox-checked-18"></use>
134
134
  </svg>
135
135
  </span>
@@ -137,10 +137,10 @@ export const textSpacing = () => `
137
137
  </div>
138
138
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
139
139
  <span class="filter-menu__checkbox">
140
- <svg class="icon icon--18" height="18" width="18">
140
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
141
141
  <use href="#icon-checkbox-unchecked-18"></use>
142
142
  </svg>
143
- <svg class="icon icon--18" height="18" width="18">
143
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
144
144
  <use href="#icon-checkbox-checked-18"></use>
145
145
  </svg>
146
146
  </span>
@@ -148,10 +148,10 @@ export const textSpacing = () => `
148
148
  </div>
149
149
  <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
150
150
  <span class="filter-menu__checkbox">
151
- <svg class="icon icon--18" height="18" width="18">
151
+ <svg class="icon icon--18 icon--unchecked" height="18" width="18">
152
152
  <use href="#icon-checkbox-unchecked-18"></use>
153
153
  </svg>
154
- <svg class="icon icon--18" height="18" width="18">
154
+ <svg class="icon icon--18 icon--checked" height="18" width="18">
155
155
  <use href="#icon-checkbox-checked-18"></use>
156
156
  </svg>
157
157
  </span>
package/src/sass/filter-menu-button/filter-menu-button.scss CHANGED
@@ -44,7 +44,7 @@ button.filter-menu-button__button {
44
44
  .filter-menu-button__button-cell {
45
45
  display: flex;
46
46
 
47
- svg.icon--chevron-down-12 {
47
+ svg.icon--12 {
48
48
  align-self: center;
49
49
  @include color-token(
50
50
  filter-menu-button-icon-color,
@@ -167,7 +167,7 @@ span.filter-menu-button__radio {
167
167
  }
168
168
 
169
169
  span.filter-menu-button__checkbox {
170
- svg.icon--checkbox-unchecked-18 {
170
+ svg.icon--unchecked {
171
171
  @include color-token(
172
172
  filter-menu-item-unchecked-color,
173
173
  color-foreground-secondary
@@ -178,7 +178,7 @@ span.filter-menu-button__checkbox {
178
178
  width: 18px;
179
179
  }
180
180
 
181
- svg.icon--checkbox-checked-18 {
181
+ svg.icon--checked {
182
182
  @include color-token(
183
183
  filter-menu-item-checked-color,
184
184
  color-foreground-primary
@@ -191,7 +191,7 @@ span.filter-menu-button__checkbox {
191
191
  }
192
192
 
193
193
  span.filter-menu-button__radio {
194
- svg.icon--radio-unchecked-18 {
194
+ svg.icon--unchecked {
195
195
  @include color-token(
196
196
  filter-menu-item-unchecked-color,
197
197
  color-foreground-primary
@@ -202,7 +202,7 @@ span.filter-menu-button__radio {
202
202
  width: 18px;
203
203
  }
204
204
 
205
- svg.icon--radio-checked-18 {
205
+ svg.icon--checked {
206
206
  @include color-token(
207
207
  filter-menu-item-checked-color,
208
208
  color-foreground-primary
@@ -294,21 +294,21 @@ button.filter-menu-button__footer {
294
294
  }
295
295
 
296
296
  .filter-menu-button__item[role="menuitemcheckbox"][aria-checked="true"] {
297
- svg.icon--checkbox-unchecked-18 {
297
+ svg.icon--unchecked {
298
298
  display: none;
299
299
  }
300
300
 
301
- svg.icon--checkbox-checked-18 {
301
+ svg.icon--checked {
302
302
  display: block;
303
303
  }
304
304
  }
305
305
 
306
306
  .filter-menu-button__item[role="menuitemradio"][aria-checked="true"] {
307
- svg.icon--radio-unchecked-18 {
307
+ svg.icon--unchecked {
308
308
  display: none;
309
309
  }
310
310
 
311
- svg.icon--radio-checked-18 {
311
+ svg.icon--checked {
312
312
  display: block;
313
313
  }
314
314
  }