@ebay/skin 17.2.0-next.0 → 17.3.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 (69) hide show
  1. package/.changeset/clever-trees-trade.md +5 -0
  2. package/.changeset/fresh-suits-fold.md +5 -0
  3. package/.changeset/grumpy-emus-jump.md +5 -0
  4. package/.changeset/loud-zebras-fail.md +5 -0
  5. package/.changeset/pre.json +9 -9
  6. package/.changeset/strange-forks-flow.md +5 -0
  7. package/.changeset/strong-schools-tap.md +5 -0
  8. package/.changeset/strong-toys-behave.md +5 -0
  9. package/.changeset/tough-cougars-poke.md +5 -0
  10. package/.github/workflows/jekyll-gh-pages.yml +3 -4
  11. package/CHANGELOG.md +40 -0
  12. package/_cdn/skin/v17.3.0-next.0/skin-default.min.css +69 -0
  13. package/_cdn/skin/v17.3.0-next.0/skin-full.min.css +151 -0
  14. package/_cdn/skin/v17.3.0-next.0/skin-headless.min.css +6 -0
  15. package/dist/button/button.css +6 -6
  16. package/dist/combobox/combobox.css +5 -2
  17. package/dist/date-textbox/date-textbox.css +3 -2
  18. package/dist/education-notice/education-notice.css +61 -0
  19. package/dist/filter-menu-button/filter-menu-button.css +3 -2
  20. package/dist/infotip/infotip.css +3 -2
  21. package/dist/listbox/listbox.css +4 -1
  22. package/dist/listbox-button/listbox-button.css +10 -7
  23. package/dist/menu/menu.css +4 -1
  24. package/dist/menu-button/menu-button.css +7 -2
  25. package/dist/progress-bar-expressive/progress-bar-expressive.css +277 -0
  26. package/dist/toggle-button-group/toggle-button-group.css +1 -1
  27. package/dist/tooltip/tooltip.css +3 -2
  28. package/dist/tourtip/tourtip.css +3 -2
  29. package/education-notice.browser.json +1 -0
  30. package/education-notice.css +1 -0
  31. package/education-notice.js +1 -0
  32. package/education-notice.mjs +1 -0
  33. package/index.browser.json +2 -0
  34. package/index.css +2 -0
  35. package/index.js +2 -0
  36. package/index.mjs +2 -0
  37. package/package.json +31 -32
  38. package/progress-bar-expressive.browser.json +1 -0
  39. package/progress-bar-expressive.css +1 -0
  40. package/progress-bar-expressive.js +1 -0
  41. package/progress-bar-expressive.mjs +1 -0
  42. package/src/less/bundles/skin-headless.less +2 -0
  43. package/src/less/button/button.less +3 -0
  44. package/src/less/carousel/stories/carousel.stories.js +44 -44
  45. package/src/less/date-textbox/date-textbox.less +1 -1
  46. package/src/less/education-notice/education-notice.less +74 -0
  47. package/src/less/education-notice/stories/base.stories.js +152 -0
  48. package/src/less/filter-menu-button/filter-menu-button.less +1 -1
  49. package/src/less/listbox-button/listbox-button.less +3 -2
  50. package/src/less/mixins/private/bubble-mixins.less +7 -3
  51. package/src/less/mixins/private/dropdown-mixins.less +1 -1
  52. package/src/less/mixins/private/selection-list-mixins.less +2 -0
  53. package/src/less/pagination/stories/overflow.stories.js +12 -12
  54. package/src/less/progress-bar-expressive/progress-bar-expressive.less +456 -0
  55. package/src/less/progress-bar-expressive/stories/progress-bar-expressive.stories.js +117 -0
  56. package/src/less/section-notice/section-notice.less +1 -0
  57. package/src/less/toggle-button-group/stories/gallery-layout.stories.js +91 -0
  58. package/src/less/toggle-button-group/toggle-button-group.less +1 -1
  59. package/.changeset/chilled-dots-whisper.md +0 -5
  60. package/.changeset/five-bats-appear.md +0 -5
  61. package/.changeset/gentle-moles-collect.md +0 -5
  62. package/.changeset/healthy-kings-hang.md +0 -5
  63. package/.changeset/pretty-rabbits-smash.md +0 -5
  64. package/.changeset/slow-maps-guess.md +0 -5
  65. package/.changeset/stale-lamps-retire.md +0 -5
  66. package/.changeset/unlucky-files-tickle.md +0 -5
  67. package/_cdn/skin/v17.2.0-next.0/skin-default.min.css +0 -69
  68. package/_cdn/skin/v17.2.0-next.0/skin-full.min.css +0 -151
  69. package/_cdn/skin/v17.2.0-next.0/skin-headless.min.css +0 -6
package/src/less/progress-bar-expressive/stories/progress-bar-expressive.stories.js ADDED
@@ -0,0 +1,117 @@
1
+ export default { title: "Skin/Progress Bar Expressive" };
2
+
3
+ export const base = () => `
4
+ <div class="progress-bar-expressive">
5
+ <div role="progressbar" aria-label="Loading..." class="progress-bar-expressive__progress">
6
+ <div class="progress-bar-expressive__lines">
7
+ <div class="progress-bar-expressive__line"></div>
8
+ <div class="progress-bar-expressive__line"></div>
9
+ <div class="progress-bar-expressive__line"></div>
10
+ <div class="progress-bar-expressive__line"></div>
11
+
12
+ <div class="progress-bar-expressive__line"></div>
13
+ <div class="progress-bar-expressive__line"></div>
14
+ <div class="progress-bar-expressive__line"></div>
15
+ <div class="progress-bar-expressive__line"></div>
16
+
17
+ <div class="progress-bar-expressive__line"></div>
18
+ <div class="progress-bar-expressive__line"></div>
19
+ <div class="progress-bar-expressive__line"></div>
20
+ <div class="progress-bar-expressive__line"></div>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ `;
25
+
26
+ export const withMessages = () => `
27
+ <div class="progress-bar-expressive">
28
+ <div class="progress-bar-expressive__messages">
29
+ <div aria-hidden="true" class="progress-bar-expressive__message">
30
+ We're finishing your order.
31
+ </div>
32
+ <div role="status" id="unique-id" class="progress-bar-expressive__message">
33
+ Hang tight.
34
+ </div>
35
+ </div>
36
+ <div role="progressbar" aria-label="Loading..." aria-describedby="unique-id" class="progress-bar-expressive__progress">
37
+ <div class="progress-bar-expressive__lines">
38
+ <div class="progress-bar-expressive__line"></div>
39
+ <div class="progress-bar-expressive__line"></div>
40
+ <div class="progress-bar-expressive__line"></div>
41
+ <div class="progress-bar-expressive__line"></div>
42
+
43
+ <div class="progress-bar-expressive__line"></div>
44
+ <div class="progress-bar-expressive__line"></div>
45
+ <div class="progress-bar-expressive__line"></div>
46
+ <div class="progress-bar-expressive__line"></div>
47
+
48
+ <div class="progress-bar-expressive__line"></div>
49
+ <div class="progress-bar-expressive__line"></div>
50
+ <div class="progress-bar-expressive__line"></div>
51
+ <div class="progress-bar-expressive__line"></div>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ `;
56
+
57
+ export const withMediumText = () => `
58
+ <div class="progress-bar-expressive progress-bar-expressive--medium">
59
+ <div class="progress-bar-expressive__messages progress-bar-expressive__messages--medium">
60
+ <div aria-hidden="true" class="progress-bar-expressive__message">
61
+ We're finishing your order.
62
+ </div>
63
+ <div role="status" id="unique-id" class="progress-bar-expressive__message">
64
+ Hang tight.
65
+ </div>
66
+ </div>
67
+ <div role="progressbar" aria-label="Loading..." aria-describedby="unique-id" class="progress-bar-expressive__progress">
68
+ <div class="progress-bar-expressive__lines">
69
+ <div class="progress-bar-expressive__line"></div>
70
+ <div class="progress-bar-expressive__line"></div>
71
+ <div class="progress-bar-expressive__line"></div>
72
+ <div class="progress-bar-expressive__line"></div>
73
+
74
+ <div class="progress-bar-expressive__line"></div>
75
+ <div class="progress-bar-expressive__line"></div>
76
+ <div class="progress-bar-expressive__line"></div>
77
+ <div class="progress-bar-expressive__line"></div>
78
+
79
+ <div class="progress-bar-expressive__line"></div>
80
+ <div class="progress-bar-expressive__line"></div>
81
+ <div class="progress-bar-expressive__line"></div>
82
+ <div class="progress-bar-expressive__line"></div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ `;
87
+
88
+ export const withLongMessages = () => `
89
+ <div class="progress-bar-expressive">
90
+ <div class="progress-bar-expressive__messages">
91
+ <div aria-hidden="true" class="progress-bar-expressive__message">
92
+ Work with a content designer to simplify your messages.
93
+ </div>
94
+ <div role="status" id="unique-id" class="progress-bar-expressive__message">
95
+ Messages should be one line, but sometimes that's hard to achieve.
96
+ </div>
97
+ </div>
98
+ <div role="progressbar" aria-label="Loading..." aria-describedby="unique-id" class="progress-bar-expressive__progress">
99
+ <div class="progress-bar-expressive__lines">
100
+ <div class="progress-bar-expressive__line"></div>
101
+ <div class="progress-bar-expressive__line"></div>
102
+ <div class="progress-bar-expressive__line"></div>
103
+ <div class="progress-bar-expressive__line"></div>
104
+
105
+ <div class="progress-bar-expressive__line"></div>
106
+ <div class="progress-bar-expressive__line"></div>
107
+ <div class="progress-bar-expressive__line"></div>
108
+ <div class="progress-bar-expressive__line"></div>
109
+
110
+ <div class="progress-bar-expressive__line"></div>
111
+ <div class="progress-bar-expressive__line"></div>
112
+ <div class="progress-bar-expressive__line"></div>
113
+ <div class="progress-bar-expressive__line"></div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ `;
package/src/less/section-notice/section-notice.less CHANGED
@@ -16,6 +16,7 @@ section.section-notice {
16
16
  grid-template-columns: 32px auto auto auto;
17
17
  }
18
18
 
19
+ // TODO: Remove in 18.0.0 since Education Notice is now its own module.
19
20
  .section-notice--education {
20
21
  .background-color-token(section-notice-education-background-color, color-background-education);
21
22
  }
package/src/less/toggle-button-group/stories/gallery-layout.stories.js CHANGED
@@ -1,5 +1,96 @@
1
1
  export default { title: "Skin/Toggle Button Group/Gallery Layout" };
2
2
 
3
+ export const usingIMGTag = () => `
4
+ <ul aria-label="Toggle buttons" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="3">
5
+ <li>
6
+ <button type="button" class="toggle-button" aria-pressed="false">
7
+ <span class="toggle-button__image-container">
8
+ <span class="toggle-button__image">
9
+ <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
10
+ </span>
11
+ </span>
12
+ <span class="toggle-button__content">
13
+ <span class="toggle-button__title">
14
+ <span>HTML Profile Image</span>
15
+ </span>
16
+ <span class="toggle-button__subtitle">Using Cover</span>
17
+ </span>
18
+ </button>
19
+ </li>
20
+ <li>
21
+ <button type="button" class="toggle-button" aria-pressed="false">
22
+ <span class="toggle-button__image-container">
23
+ <span class="toggle-button__image">
24
+ <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg" alt="">
25
+ </span>
26
+ </span>
27
+ <span class="toggle-button__content">
28
+ <span class="toggle-button__title">
29
+ <span>HTML Landscape Image</span>
30
+ </span>
31
+ <span class="toggle-button__subtitle">Using Cover</span>
32
+ </span>
33
+ </button>
34
+ </li>
35
+ <li>
36
+ <button type="button" class="toggle-button" aria-pressed="false">
37
+ <span class="toggle-button__image-container">
38
+ <span class="toggle-button__image">
39
+ <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg" alt="">
40
+ </span>
41
+ </span>
42
+ <span class="toggle-button__content">
43
+ <span class="toggle-button__title">
44
+ <span>HTML Square Image</span>
45
+ </span>
46
+ <span class="toggle-button__subtitle">Using Cover</span>
47
+ </span>
48
+ </button>
49
+ </li>
50
+ </ul>
51
+ `;
52
+
53
+ export const usingCSSImage = () => `
54
+ <ul aria-label="Toggle buttons" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="3">
55
+ <li>
56
+ <button type="button" class="toggle-button" aria-pressed="false">
57
+ <span class="toggle-button__image-container">
58
+ <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; background-position: center 15%;">
59
+ </span>
60
+ </span>
61
+ <span class="toggle-button__content">
62
+ <span class="toggle-button__title">CSS Profile Image</span>
63
+ <span class="toggle-button__subtitle">Using Contain</span>
64
+ </span>
65
+ </button>
66
+ </li>
67
+ <li>
68
+ <button type="button" class="toggle-button" aria-pressed="false">
69
+ <span class="toggle-button__image-container">
70
+ <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
71
+ </span>
72
+ </span>
73
+ <span class="toggle-button__content">
74
+ <span class="toggle-button__title">CSS Profile Image</span>
75
+ <span class="toggle-button__subtitle">Using Cover</span>
76
+ </span>
77
+ </button>
78
+ </li>
79
+ <li>
80
+ <button type="button" class="toggle-button" aria-pressed="false">
81
+ <span class="toggle-button__image-container">
82
+ <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 30%;">
83
+ </span>
84
+ </span>
85
+ <span class="toggle-button__content">
86
+ <span class="toggle-button__title">CSS Square Image</span>
87
+ <span class="toggle-button__subtitle">Using Cover</span>
88
+ </span>
89
+ </button>
90
+ </li>
91
+ </ul>
92
+ `;
93
+
3
94
  export const _2Column = () => `
4
95
  <ul aria-label="Buttons" class="toggle-button-group toggle-button-group--gallery-layout" data-columns="2">
5
96
  <li>
package/src/less/toggle-button-group/toggle-button-group.less CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .toggle-button-group li {
12
- display: inline-table;
12
+ display: inline-block;
13
13
  margin-bottom: var(--spacing-50);
14
14
  margin-left: var(--spacing-50);
15
15
  margin-right: var(--spacing-50);
package/.changeset/chilled-dots-whisper.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- icon updates
package/.changeset/five-bats-appear.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- ebay-signal has incorrect type size and internal padding
package/.changeset/gentle-moles-collect.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- Venmo icon: Missing borders
package/.changeset/healthy-kings-hang.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- flyout: update styling
package/.changeset/pretty-rabbits-smash.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- component status alignment
package/.changeset/slow-maps-guess.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- Docs: remove focusable attribute from examples and stories
package/.changeset/stale-lamps-retire.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- ebay-button: reduce width of stroke for priority=tertiary
package/.changeset/unlucky-files-tickle.md DELETED
@@ -1,5 +0,0 @@
1
- ---
2
- "@ebay/skin": minor
3
- ---
4
-
5
- feat: automatically publish skin