@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/src/sass/fullscreen-dialog/stories/fullscreen-dialog.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- export default { title: "Skin/Fullscreen Dialog" };
1
+ export default { title: "Skin/Fullscreen Dialog (DEPRECATED)" };
2
2
 
3
3
  export const closeButton = () => `
4
4
  <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
package/src/sass/icon/icon.scss CHANGED
@@ -80,4 +80,13 @@ svg {
80
80
  &.icon--disabled {
81
81
  filter: var(--color-icon-disabled-filter);
82
82
  }
83
+ &.icon--attention-filled {
84
+ @include color-token(color-foreground-attention);
85
+ }
86
+ &.icon--confirmation-filled {
87
+ @include color-token(color-foreground-confirmation);
88
+ }
89
+ &.icon--information-filled {
90
+ @include color-token(color-foreground-information);
91
+ }
83
92
  }
package/src/sass/lightbox-dialog/lightbox-dialog.scss CHANGED
@@ -191,7 +191,7 @@ button.icon-btn.lightbox-dialog__prev {
191
191
  }
192
192
 
193
193
  [dir="rtl"] {
194
- button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
194
+ button.icon-btn.lightbox-dialog__prev .icon--16 {
195
195
  transform: rotate(180deg);
196
196
  }
197
197
  }
package/src/sass/select/select.scss CHANGED
@@ -31,7 +31,7 @@ span.select {
31
31
  vertical-align: middle;
32
32
  }
33
33
 
34
- .select svg.icon--chevron-down-12 {
34
+ .select svg.icon--12 {
35
35
  height: 100%;
36
36
  pointer-events: none;
37
37
  position: absolute;
package/src/sass/textbox/stories/icon.stories.js CHANGED
@@ -88,8 +88,10 @@ export const fullyDecorated = () => `
88
88
  <span>$</span>
89
89
  <input class="textbox__control" type="text" placeholder="placeholder text" />
90
90
  <span>%</span>
91
- <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
92
- <use href="#icon-mail-24"></use>
93
- </svg>
91
+ <button class="icon-btn icon-btn--transparent icon-btn--small" type="button" aria-label="Mail">
92
+ <svg class="icon icon--mail-16" width="16" height="16" aria-hidden="true">
93
+ <use href="#icon-mail-16"></use>
94
+ </svg>
95
+ </button>
94
96
  </span>
95
97
  `;
package/src/sass/toggle-button/toggle-button.scss CHANGED
@@ -166,7 +166,7 @@
166
166
  }
167
167
 
168
168
  .toggle-button--list-layout .toggle-button__image-container,
169
- .toggle-button--list-layout .toggle-button__content {
169
+ .toggle-button--list-layout .toggle-button__content:not(:only-child) {
170
170
  align-self: self-start;
171
171
  }
172
172
 
package/src/sass/toggle-button-group/stories/list-layout.stories.js CHANGED
@@ -1,5 +1,138 @@
1
1
  export default { title: "Skin/Toggle Button Group/List Layout" };
2
2
 
3
+ export const titleOnly = () => `
4
+ <div class="toggle-button-group toggle-button-group--list-layout">
5
+ <ul aria-label="Buttons">
6
+ <li>
7
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
8
+ <span class="toggle-button__content">
9
+ <span class="toggle-button__title">Title</span>
10
+ </span>
11
+ </button>
12
+ </li>
13
+ <li>
14
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
15
+ <span class="toggle-button__content">
16
+ <span class="toggle-button__title">Title</span>
17
+ </span>
18
+ </button>
19
+ </li>
20
+ <li>
21
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
22
+ <span class="toggle-button__content">
23
+ <span class="toggle-button__title">Title</span>
24
+ </span>
25
+ </button>
26
+ </li>
27
+ <li>
28
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
29
+ <span class="toggle-button__content">
30
+ <span class="toggle-button__title">Title</span>
31
+ </span>
32
+ </button>
33
+ </li>
34
+ <li>
35
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
36
+ <span class="toggle-button__content">
37
+ <span class="toggle-button__title">Title</span>
38
+ </span>
39
+ </button>
40
+ </li>
41
+ </ul>
42
+ </div>
43
+ `;
44
+
45
+ export const titlaSubtitle = () => `
46
+ <div class="toggle-button-group toggle-button-group--list-layout">
47
+ <ul aria-label="Buttons">
48
+ <li>
49
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
50
+ <span class="toggle-button__content">
51
+ <span class="toggle-button__title">Title</span>
52
+ <span class="toggle-button__subtitle">Subtitle</span>
53
+ </span>
54
+ </button>
55
+ </li>
56
+ <li>
57
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
58
+ <span class="toggle-button__content">
59
+ <span class="toggle-button__title">Title</span>
60
+ <span class="toggle-button__subtitle">Subtitle</span>
61
+ </span>
62
+ </button>
63
+ </li>
64
+ <li>
65
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
66
+ <span class="toggle-button__content">
67
+ <span class="toggle-button__title">Title</span>
68
+ <span class="toggle-button__subtitle">Subtitle</span>
69
+ </span>
70
+ </button>
71
+ </li>
72
+ <li>
73
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
74
+ <span class="toggle-button__content">
75
+ <span class="toggle-button__title">Title</span>
76
+ <span class="toggle-button__subtitle">Subtitle</span>
77
+ </span>
78
+ </button>
79
+ </li>
80
+ <li>
81
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
82
+ <span class="toggle-button__content">
83
+ <span class="toggle-button__title">Title</span>
84
+ <span class="toggle-button__subtitle">Subtitle</span>
85
+ </span>
86
+ </button>
87
+ </li>
88
+ </ul>
89
+ </div>
90
+ `;
91
+
92
+ export const mixedContent = () => `
93
+ <div class="toggle-button-group toggle-button-group--list-layout">
94
+ <ul aria-label="Buttons">
95
+ <li>
96
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
97
+ <span class="toggle-button__content">
98
+ <span class="toggle-button__title">Title</span>
99
+ <span class="toggle-button__subtitle">Subtitle</span>
100
+ </span>
101
+ </button>
102
+ </li>
103
+ <li>
104
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
105
+ <span class="toggle-button__content">
106
+ <span class="toggle-button__title">Title</span>
107
+ </span>
108
+ </button>
109
+ </li>
110
+ <li>
111
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
112
+ <span class="toggle-button__content">
113
+ <span class="toggle-button__title">Title</span>
114
+ </span>
115
+ </button>
116
+ </li>
117
+ <li>
118
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
119
+ <span class="toggle-button__content">
120
+ <span class="toggle-button__title">Title</span>
121
+ <span class="toggle-button__subtitle">Subtitle</span>
122
+ </span>
123
+ </button>
124
+ </li>
125
+ <li>
126
+ <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
127
+ <span class="toggle-button__content">
128
+ <span class="toggle-button__title">Title</span>
129
+ </span>
130
+ </button>
131
+ </li>
132
+ </ul>
133
+ </div>
134
+ `;
135
+
3
136
  export const _320container = () => `
4
137
  <div style="width: 320px; border: 1px dashed orange;">
5
138
  <div class="toggle-button-group toggle-button-group--list-layout">
package/src/sass/toggle-button-group/toggle-button-group.scss CHANGED
@@ -91,7 +91,7 @@
91
91
  }
92
92
 
93
93
  .toggle-button-group--list-layout .toggle-button__image-container,
94
- .toggle-button-group--list-layout .toggle-button__content {
94
+ .toggle-button-group--list-layout .toggle-button__content:not(:only-child) {
95
95
  align-self: flex-start;
96
96
  }
97
97
 
package/.changeset/bright-kiwis-repeat.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": major
3
- ---
4
-
5
- refactor: removed all duplicate icon classes and added icon--{nn} classes
package/.changeset/chilled-games-stare.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": patch
3
- ---
4
-
5
- feat: added sass support and removed less support
package/.changeset/gold-radios-reply.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": major
3
- ---
4
-
5
- chore: removed deprecations
package/.changeset/light-lions-explode.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": major
3
- ---
4
-
5
- tokens: added tokens, colors, deprecations
package/.changeset/pre.json DELETED
@@ -1,15 +0,0 @@
1
- {
2
- "mode": "pre",
3
- "tag": "next",
4
- "initialVersions": {
5
- "@ebay/skin": "17.5.0"
6
- },
7
- "changesets": [
8
- "bright-kiwis-repeat",
9
- "chilled-games-stare",
10
- "gold-radios-reply",
11
- "light-lions-explode",
12
- "ten-rockets-double",
13
- "wild-donkeys-attack"
14
- ]
15
- }
package/.changeset/ten-rockets-double.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- feat(donut-chart): new module
package/.changeset/wild-donkeys-attack.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": major
3
- ---
4
-
5
- toggle-button-group: reworked responsiveness and added equal button heights