@ebay/skin 15.3.0 → 15.4.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 (87) hide show
  1. package/_cdn/skin/v15.4.0-0/skin-default.min.css +6 -0
  2. package/_cdn/skin/v15.4.0-0/skin-full.min.css +6 -0
  3. package/_cdn/skin/v15.4.0-0/skin-headless.min.css +6 -0
  4. package/_cdn/skin/v15.4.0-0/skin-legacy.min.css +6 -0
  5. package/dist/filter-menu-button/filter-menu-button.css +3 -0
  6. package/dist/listbox-button/listbox-button.css +12 -0
  7. package/dist/page-notice/page-notice.css +3 -4
  8. package/dist/section-notice/section-notice.css +2 -2
  9. package/package.json +1 -1
  10. package/src/less/breadcrumbs/stories/button-cascade.stories.js +9 -9
  11. package/src/less/breadcrumbs/stories/buttons.stories.js +5 -5
  12. package/src/less/breadcrumbs/stories/link-cascade.stories.js +9 -9
  13. package/src/less/breadcrumbs/stories/links.stories.js +5 -5
  14. package/src/less/button/stories/button/base.stories.js +5 -5
  15. package/src/less/button/stories/button/borderless.stories.js +4 -4
  16. package/src/less/button/stories/button/cascade.stories.js +3 -3
  17. package/src/less/button/stories/button/dimensions.stories.js +1 -1
  18. package/src/less/button/stories/button/primary.stories.js +4 -4
  19. package/src/less/button/stories/button/secondary.stories.js +4 -4
  20. package/src/less/button/stories/button/tertiary.stories.js +4 -4
  21. package/src/less/button/stories/destructive-button/primary.stories.js +3 -3
  22. package/src/less/button/stories/destructive-button/secondary.stories.js +3 -3
  23. package/src/less/button/stories/destructive-button/tertiary.stories.js +3 -3
  24. package/src/less/button/stories/fake-button/base.stories.js +2 -2
  25. package/src/less/button/stories/fake-button/cascade.stories.js +3 -3
  26. package/src/less/button/stories/fake-button/dimensions.stories.js +1 -1
  27. package/src/less/button/stories/fake-button/primary.stories.js +4 -4
  28. package/src/less/button/stories/fake-button/secondary.stories.js +4 -4
  29. package/src/less/carousel/stories/carousel.stories.js +16 -16
  30. package/src/less/checkbox/stories/checked.stories.js +16 -16
  31. package/src/less/checkbox/stories/mixed.stories.js +2 -2
  32. package/src/less/checkbox/stories/unchecked.stories.js +8 -8
  33. package/src/less/combobox/stories/combobox.stories.js +10 -10
  34. package/src/less/cta-button/stories/cascade.stories.js +3 -3
  35. package/src/less/cta-button/stories/cta-button.stories.js +1 -1
  36. package/src/less/cta-button/stories/dimensions.stories.js +2 -2
  37. package/src/less/details/stories/cascade.stories.js +3 -3
  38. package/src/less/details/stories/details.stories.js +4 -4
  39. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +6 -6
  40. package/src/less/field/stories/stacked.stories.js +5 -5
  41. package/src/less/field/stories/unstacked.stories.js +4 -4
  42. package/src/less/filter-menu/stories/filter-menu.stories.js +30 -30
  43. package/src/less/filter-menu-button/filter-menu-button.less +3 -0
  44. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +83 -83
  45. package/src/less/floating-label/stories/floating-label.stories.js +5 -5
  46. package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js +4 -4
  47. package/src/less/global/stories/global.stories.js +12 -12
  48. package/src/less/icon/stories/icon.stories.js +5 -5
  49. package/src/less/icon-button/stories/alignment.stories.js +6 -6
  50. package/src/less/infotip/stories/infotip.stories.js +8 -8
  51. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +4 -4
  52. package/src/less/listbox/stories/cascade.stories.js +9 -9
  53. package/src/less/listbox/stories/listbox.stories.js +9 -9
  54. package/src/less/listbox-button/listbox-button.less +15 -0
  55. package/src/less/listbox-button/stories/form.stories.js +97 -0
  56. package/src/less/menu/stories/fake-menu.stories.js +4 -4
  57. package/src/less/menu/stories/multiSelect.stories.js +9 -9
  58. package/src/less/menu-button/stories/base.stories.js +29 -29
  59. package/src/less/menu-button/stories/cascade.stories.js +6 -6
  60. package/src/less/menu-button/stories/dimensions.stories.js +1 -1
  61. package/src/less/menu-button/stories/fake-menu-button.stories.js +6 -6
  62. package/src/less/page-notice/page-notice.less +3 -4
  63. package/src/less/pagination/stories/button-cascade.stories.js +6 -6
  64. package/src/less/pagination/stories/buttons.stories.js +4 -4
  65. package/src/less/pagination/stories/link-cascade.stories.js +6 -6
  66. package/src/less/pagination/stories/links.stories.js +4 -4
  67. package/src/less/pagination/stories/overflow.stories.js +16 -16
  68. package/src/less/panel-dialog/stories/panel-dialog.stories.js +6 -6
  69. package/src/less/progress-spinner/stories/progress-spinner.stories.js +4 -4
  70. package/src/less/radio/stories/checked.stories.js +16 -16
  71. package/src/less/radio/stories/unchecked.stories.js +8 -8
  72. package/src/less/section-notice/section-notice.less +2 -2
  73. package/src/less/select/stories/cascade.stories.js +3 -3
  74. package/src/less/select/stories/default.stories.js +8 -8
  75. package/src/less/select/stories/floating-label.stories.js +4 -4
  76. package/src/less/split-button/stories/base.stories.js +12 -12
  77. package/src/less/split-button/stories/rtl.stories.js +6 -6
  78. package/src/less/split-button/stories/size.stories.js +2 -2
  79. package/src/less/textbox/stories/icon.stories.js +10 -10
  80. package/src/less/textbox/stories/rtl/icon.stories.js +7 -7
  81. package/src/less/tooltip/stories/pointer.stories.js +12 -12
  82. package/src/less/tooltip/stories/tooltip.stories.js +2 -2
  83. package/src/less/tourtip/stories/tourtip.stories.js +4 -4
  84. package/_cdn/skin/v15.3.0/skin-default.min.css +0 -6
  85. package/_cdn/skin/v15.3.0/skin-full.min.css +0 -6
  86. package/_cdn/skin/v15.3.0/skin-headless.min.css +0 -6
  87. package/_cdn/skin/v15.3.0/skin-legacy.min.css +0 -6
package/src/less/split-button/stories/base.stories.js CHANGED
@@ -9,7 +9,7 @@ export const primaryCollapsed = () => `
9
9
  <span class="menu-button">
10
10
  <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
11
11
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
12
- <use xlink:href="#icon-dropdown"></use>
12
+ <use href="#icon-dropdown"></use>
13
13
  </svg>
14
14
  </button>
15
15
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -39,7 +39,7 @@ export const primaryExpanded = () => `
39
39
  <span class="menu-button">
40
40
  <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
41
41
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
42
- <use xlink:href="#icon-dropdown"></use>
42
+ <use href="#icon-dropdown"></use>
43
43
  </svg>
44
44
  </button>
45
45
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -69,7 +69,7 @@ export const secondaryCollapsed = () => `
69
69
  <span class="menu-button">
70
70
  <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
71
71
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
72
- <use xlink:href="#icon-dropdown"></use>
72
+ <use href="#icon-dropdown"></use>
73
73
  </svg>
74
74
  </button>
75
75
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -99,7 +99,7 @@ export const secondaryExpanded = () => `
99
99
  <span class="menu-button">
100
100
  <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
101
101
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
102
- <use xlink:href="#icon-dropdown"></use>
102
+ <use href="#icon-dropdown"></use>
103
103
  </svg>
104
104
  </button>
105
105
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -129,7 +129,7 @@ export const tertiaryCollapsed = () => `
129
129
  <span class="menu-button">
130
130
  <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
131
131
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
132
- <use xlink:href="#icon-dropdown"></use>
132
+ <use href="#icon-dropdown"></use>
133
133
  </svg>
134
134
  </button>
135
135
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -159,7 +159,7 @@ export const tertiaryExpanded = () => `
159
159
  <span class="menu-button">
160
160
  <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
161
161
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
162
- <use xlink:href="#icon-dropdown"></use>
162
+ <use href="#icon-dropdown"></use>
163
163
  </svg>
164
164
  </button>
165
165
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -187,7 +187,7 @@ export const fakePrimaryCollapsed = () => `
187
187
  <span class="menu-button">
188
188
  <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
189
189
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
190
- <use xlink:href="#icon-dropdown"></use>
190
+ <use href="#icon-dropdown"></use>
191
191
  </svg>
192
192
  </button>
193
193
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -215,7 +215,7 @@ export const fakePrimaryExpanded = () => `
215
215
  <span class="menu-button">
216
216
  <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
217
217
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
218
- <use xlink:href="#icon-dropdown"></use>
218
+ <use href="#icon-dropdown"></use>
219
219
  </svg>
220
220
  </button>
221
221
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -243,7 +243,7 @@ export const fakeSecondaryCollapsed = () => `
243
243
  <span class="menu-button">
244
244
  <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
245
245
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
246
- <use xlink:href="#icon-dropdown"></use>
246
+ <use href="#icon-dropdown"></use>
247
247
  </svg>
248
248
  </button>
249
249
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -271,7 +271,7 @@ export const fakeSecondaryExpanded = () => `
271
271
  <span class="menu-button">
272
272
  <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
273
273
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
274
- <use xlink:href="#icon-dropdown"></use>
274
+ <use href="#icon-dropdown"></use>
275
275
  </svg>
276
276
  </button>
277
277
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -299,7 +299,7 @@ export const fakeTertiaryCollapsed = () => `
299
299
  <span class="menu-button">
300
300
  <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
301
301
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
302
- <use xlink:href="#icon-dropdown"></use>
302
+ <use href="#icon-dropdown"></use>
303
303
  </svg>
304
304
  </button>
305
305
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -327,7 +327,7 @@ export const fakeTertiaryExpanded = () => `
327
327
  <span class="menu-button">
328
328
  <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
329
329
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
330
- <use xlink:href="#icon-dropdown"></use>
330
+ <use href="#icon-dropdown"></use>
331
331
  </svg>
332
332
  </button>
333
333
  <div class="menu-button__menu menu-button__menu--reverse">
package/src/less/split-button/stories/rtl.stories.js CHANGED
@@ -11,7 +11,7 @@ export const primaryCollapsed = () => `
11
11
  <span class="menu-button">
12
12
  <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
13
13
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
14
- <use xlink:href="#icon-dropdown"></use>
14
+ <use href="#icon-dropdown"></use>
15
15
  </svg>
16
16
  </button>
17
17
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -43,7 +43,7 @@ export const primaryExpanded = () => `
43
43
  <span class="menu-button">
44
44
  <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
45
45
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
46
- <use xlink:href="#icon-dropdown"></use>
46
+ <use href="#icon-dropdown"></use>
47
47
  </svg>
48
48
  </button>
49
49
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -75,7 +75,7 @@ export const secondaryCollapsed = () => `
75
75
  <span class="menu-button">
76
76
  <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
77
77
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
78
- <use xlink:href="#icon-dropdown"></use>
78
+ <use href="#icon-dropdown"></use>
79
79
  </svg>
80
80
  </button>
81
81
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -107,7 +107,7 @@ export const secondaryExpanded = () => `
107
107
  <span class="menu-button">
108
108
  <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
109
109
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
110
- <use xlink:href="#icon-dropdown"></use>
110
+ <use href="#icon-dropdown"></use>
111
111
  </svg>
112
112
  </button>
113
113
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -139,7 +139,7 @@ export const tertiaryCollapsed = () => `
139
139
  <span class="menu-button">
140
140
  <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
141
141
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
142
- <use xlink:href="#icon-dropdown"></use>
142
+ <use href="#icon-dropdown"></use>
143
143
  </svg>
144
144
  </button>
145
145
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -171,7 +171,7 @@ export const tertiaryExpanded = () => `
171
171
  <span class="menu-button">
172
172
  <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
173
173
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
174
- <use xlink:href="#icon-dropdown"></use>
174
+ <use href="#icon-dropdown"></use>
175
175
  </svg>
176
176
  </button>
177
177
  <div class="menu-button__menu menu-button__menu--reverse">
package/src/less/split-button/stories/size.stories.js CHANGED
@@ -9,7 +9,7 @@ export const longTextCollapsed = () => `
9
9
  <span class="menu-button">
10
10
  <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
11
11
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
12
- <use xlink:href="#icon-dropdown"></use>
12
+ <use href="#icon-dropdown"></use>
13
13
  </svg>
14
14
  </button>
15
15
  <div class="menu-button__menu menu-button__menu--reverse">
@@ -39,7 +39,7 @@ export const longTextExpanded = () => `
39
39
  <span class="menu-button">
40
40
  <button class="btn btn--primary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
41
41
  <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
42
- <use xlink:href="#icon-dropdown"></use>
42
+ <use href="#icon-dropdown"></use>
43
43
  </svg>
44
44
  </button>
45
45
  <div class="menu-button__menu menu-button__menu--reverse">
package/src/less/textbox/stories/icon.stories.js CHANGED
@@ -3,7 +3,7 @@ export default { title: 'Textbox/Icon' };
3
3
  export const base = () => `
4
4
  <span class="textbox">
5
5
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
6
- <use xlink:href="#icon-messages"></use>
6
+ <use href="#icon-messages"></use>
7
7
  </svg>
8
8
  <input class="textbox__control" type="text" placeholder="placeholder text" />
9
9
  </span>
@@ -13,7 +13,7 @@ export const end = () => `
13
13
  <span class="textbox textbox--icon-end">
14
14
  <input class="textbox__control" type="text" placeholder="placeholder text" />
15
15
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
16
- <use xlink:href="#icon-messages"></use>
16
+ <use href="#icon-messages"></use>
17
17
  </svg>
18
18
  </span>
19
19
  `;
@@ -21,11 +21,11 @@ export const end = () => `
21
21
  export const dual = () => `
22
22
  <span class="textbox textbox--icon-end">
23
23
  <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
24
- <use xlink:href="#icon-search"></use>
24
+ <use href="#icon-search"></use>
25
25
  </svg>
26
26
  <input class="textbox__control" type="text" placeholder="placeholder text" />
27
27
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
28
- <use xlink:href="#icon-messages"></use>
28
+ <use href="#icon-messages"></use>
29
29
  </svg>
30
30
  </span>
31
31
  `;
@@ -35,7 +35,7 @@ export const actionable = () => `
35
35
  <input class="textbox__control" type="text" placeholder="placeholder text" />
36
36
  <button class="icon-btn" type="button" aria-label="Choose Contact">
37
37
  <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
38
- <use xlink:href="#icon-messages"></use>
38
+ <use href="#icon-messages"></use>
39
39
  </svg>
40
40
  </button>
41
41
  </span>
@@ -44,12 +44,12 @@ export const actionable = () => `
44
44
  export const dualActionable = () => `
45
45
  <span class="textbox textbox--icon-end">
46
46
  <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
47
- <use xlink:href="#icon-search"></use>
47
+ <use href="#icon-search"></use>
48
48
  </svg>
49
49
  <input class="textbox__control" type="text" placeholder="placeholder text" />
50
50
  <button class="icon-btn" type="button" aria-label="Choose Contact">
51
51
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
52
- <use xlink:href="#icon-messages"></use>
52
+ <use href="#icon-messages"></use>
53
53
  </svg>
54
54
  </button>
55
55
  </span>
@@ -60,7 +60,7 @@ export const actionableLarge = () => `
60
60
  <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
61
61
  <button class="icon-btn" type="button" aria-label="Choose Contact">
62
62
  <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
63
- <use xlink:href="#icon-messages"></use>
63
+ <use href="#icon-messages"></use>
64
64
  </svg>
65
65
  </button>
66
66
  </span>
@@ -69,12 +69,12 @@ export const actionableLarge = () => `
69
69
  export const dualActionableLarge = () => `
70
70
  <span class="textbox textbox--icon-end">
71
71
  <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
72
- <use xlink:href="#icon-search"></use>
72
+ <use href="#icon-search"></use>
73
73
  </svg>
74
74
  <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
75
75
  <button class="icon-btn" type="button" aria-label="Choose Contact">
76
76
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
77
- <use xlink:href="#icon-messages"></use>
77
+ <use href="#icon-messages"></use>
78
78
  </svg>
79
79
  </button>
80
80
  </span>
package/src/less/textbox/stories/rtl/icon.stories.js CHANGED
@@ -4,7 +4,7 @@ export const base = () => `
4
4
  <div dir="rtl">
5
5
  <span class="textbox">
6
6
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
7
- <use xlink:href="#icon-messages"></use>
7
+ <use href="#icon-messages"></use>
8
8
  </svg>
9
9
  <input class="textbox__control" type="text" placeholder="placeholder text" />
10
10
  </span>
@@ -16,7 +16,7 @@ export const end = () => `
16
16
  <span class="textbox textbox--icon-end">
17
17
  <input class="textbox__control" type="text" placeholder="placeholder text" />
18
18
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
19
- <use xlink:href="#icon-messages"></use>
19
+ <use href="#icon-messages"></use>
20
20
  </svg>
21
21
  </span>
22
22
  </div>
@@ -26,12 +26,12 @@ export const dual = () => `
26
26
  <div dir="rtl">
27
27
  <span class="textbox textbox--icon-end">
28
28
  <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
29
- <use xlink:href="#icon-search"></use>
29
+ <use href="#icon-search"></use>
30
30
  </svg>
31
31
 
32
32
  <input class="textbox__control" type="text" placeholder="placeholder text" />
33
33
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
34
- <use xlink:href="#icon-messages"></use>
34
+ <use href="#icon-messages"></use>
35
35
  </svg>
36
36
  </span>
37
37
  </div>
@@ -43,7 +43,7 @@ export const actionable = () => `
43
43
  <input class="textbox__control" type="text" placeholder="placeholder text" />
44
44
  <button class="icon-btn" type="button" aria-label="Choose Contact">
45
45
  <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
46
- <use xlink:href="#icon-messages"></use>
46
+ <use href="#icon-messages"></use>
47
47
  </svg>
48
48
  </button>
49
49
  </span>
@@ -54,13 +54,13 @@ export const dualActionable = () => `
54
54
  <div dir="rtl">
55
55
  <span class="textbox textbox--icon-end">
56
56
  <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
57
- <use xlink:href="#icon-search"></use>
57
+ <use href="#icon-search"></use>
58
58
  </svg>
59
59
 
60
60
  <input class="textbox__control" type="text" placeholder="placeholder text" />
61
61
  <button class="icon-btn" type="button" aria-label="Choose Contact">
62
62
  <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
63
- <use xlink:href="#icon-messages"></use>
63
+ <use href="#icon-messages"></use>
64
64
  </svg>
65
65
  </button>
66
66
  </span>
package/src/less/tooltip/stories/pointer.stories.js CHANGED
@@ -95,7 +95,7 @@ export const top = () => `
95
95
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
96
96
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
97
97
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
98
- <use xlink:href="#icon-settings"></use>
98
+ <use href="#icon-settings"></use>
99
99
  </svg>
100
100
  </button>
101
101
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('top')}">
@@ -115,7 +115,7 @@ export const topLeft = () => `
115
115
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
116
116
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
117
117
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
118
- <use xlink:href="#icon-settings"></use>
118
+ <use href="#icon-settings"></use>
119
119
  </svg>
120
120
  </button>
121
121
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -137,7 +137,7 @@ export const leftTop = () => `
137
137
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
138
138
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
139
139
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
140
- <use xlink:href="#icon-settings"></use>
140
+ <use href="#icon-settings"></use>
141
141
  </svg>
142
142
  </button>
143
143
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -159,7 +159,7 @@ export const left = () => `
159
159
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
160
160
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
161
161
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
162
- <use xlink:href="#icon-settings"></use>
162
+ <use href="#icon-settings"></use>
163
163
  </svg>
164
164
  </button>
165
165
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('left')}">
@@ -179,7 +179,7 @@ export const leftBottom = () => `
179
179
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
180
180
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
181
181
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
182
- <use xlink:href="#icon-settings"></use>
182
+ <use href="#icon-settings"></use>
183
183
  </svg>
184
184
  </button>
185
185
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -201,7 +201,7 @@ export const bottomLeft = () => `
201
201
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
202
202
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
203
203
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
204
- <use xlink:href="#icon-settings"></use>
204
+ <use href="#icon-settings"></use>
205
205
  </svg>
206
206
  </button>
207
207
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -223,7 +223,7 @@ export const bottom = () => `
223
223
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
224
224
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
225
225
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
226
- <use xlink:href="#icon-settings"></use>
226
+ <use href="#icon-settings"></use>
227
227
  </svg>
228
228
  </button>
229
229
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -245,7 +245,7 @@ export const bottomRight = () => `
245
245
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
246
246
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
247
247
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
248
- <use xlink:href="#icon-settings"></use>
248
+ <use href="#icon-settings"></use>
249
249
  </svg>
250
250
  </button>
251
251
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -267,7 +267,7 @@ export const rightBottom = () => `
267
267
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
268
268
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
269
269
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
270
- <use xlink:href="#icon-settings"></use>
270
+ <use href="#icon-settings"></use>
271
271
  </svg>
272
272
  </button>
273
273
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -289,7 +289,7 @@ export const right = () => `
289
289
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
290
290
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
291
291
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
292
- <use xlink:href="#icon-settings"></use>
292
+ <use href="#icon-settings"></use>
293
293
  </svg>
294
294
  </button>
295
295
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('right')}">
@@ -309,7 +309,7 @@ export const rightTop = () => `
309
309
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
310
310
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
311
311
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
312
- <use xlink:href="#icon-settings"></use>
312
+ <use href="#icon-settings"></use>
313
313
  </svg>
314
314
  </button>
315
315
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -331,7 +331,7 @@ export const topRight = () => `
331
331
  <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
332
332
  <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
333
333
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
334
- <use xlink:href="#icon-settings"></use>
334
+ <use href="#icon-settings"></use>
335
335
  </svg>
336
336
  </button>
337
337
  <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
package/src/less/tooltip/stories/tooltip.stories.js CHANGED
@@ -4,7 +4,7 @@ export const collapsed = () => `
4
4
  <span class="tooltip">
5
5
  <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
6
6
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
7
- <use xlink:href="#icon-settings"></use>
7
+ <use href="#icon-settings"></use>
8
8
  </svg>
9
9
  </button>
10
10
  <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 12px); left: 0">
@@ -23,7 +23,7 @@ export const expanded = () => `
23
23
  <span class="tooltip">
24
24
  <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="true" aria-label="Settings">
25
25
  <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
26
- <use xlink:href="#icon-settings"></use>
26
+ <use href="#icon-settings"></use>
27
27
  </svg>
28
28
  </button>
29
29
  <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% - 90px); left: 4px">
package/src/less/tourtip/stories/tourtip.stories.js CHANGED
@@ -13,7 +13,7 @@ export const collapsed = () => `
13
13
  </span>
14
14
  <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
15
15
  <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
16
- <use xlink:href="#icon-close"></use>
16
+ <use href="#icon-close"></use>
17
17
  </svg>
18
18
  </button>
19
19
  </div>
@@ -34,7 +34,7 @@ export const expanded = () => `
34
34
  </span>
35
35
  <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
36
36
  <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
37
- <use xlink:href="#icon-close"></use>
37
+ <use href="#icon-close"></use>
38
38
  </svg>
39
39
  </button>
40
40
  </div>
@@ -55,7 +55,7 @@ export const withActions = () => `
55
55
  </span>
56
56
  <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
57
57
  <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
58
- <use xlink:href="#icon-close"></use>
58
+ <use href="#icon-close"></use>
59
59
  </svg>
60
60
  </button>
61
61
  <div class="tourtip__footer">
@@ -81,7 +81,7 @@ export const withOneAction = () => `
81
81
  </span>
82
82
  <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
83
83
  <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
84
- <use xlink:href="#icon-close"></use>
84
+ <use href="#icon-close"></use>
85
85
  </svg>
86
86
  </button>
87
87
  <div class="tourtip__footer">