npm - @ebay/skin - Versions diffs - 15.5.1 → 16.0.0-1 - Mend

@ebay/skin 15.5.1 → 16.0.0-1

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 (949) hide show

package/src/less/radio/stories/checked.stories.js CHANGED Viewed

@@ -5,10 +5,10 @@ export const base = () => `
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r1" type="radio" checked />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -20,10 +20,10 @@ export const RTL = () => `
         <input aria-label="Foreground SVG radio example" class="radio__control" name="r1" type="radio" checked />
         <span class="radio__icon" hidden>
             <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-                <use href="#icon-radio-unchecked"></use>
+                <use href="#icon-radio-unchecked-18"></use>
             </svg>
             <svg aria-hidden="true" class="radio__checked" focusable="false">
-                <use href="#icon-radio-checked"></use>
+                <use href="#icon-radio-checked-18"></use>
             </svg>
         </span>
     </span>
@@ -35,10 +35,10 @@ export const disabled = () => `
     <input aria-label="Disabled Foreground SVG radio example" class="radio__control" name="r3" disabled checked type="radio" />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -49,10 +49,10 @@ export const customColour = () => `
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r5" type="radio" checked />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false" style="color: #5ba71b">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -63,7 +63,7 @@ export const customIcon = () => `
 <input aria-label="Custom radio example" class="radio__control" name="r7" type="radio" checked />
 <span class="radio__icon" hidden>
     <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-        <use href="#icon-radio-unchecked"></use>
+        <use href="#icon-radio-unchecked-18"></use>
     </svg>
     <svg aria-hidden="true" class="radio__checked" focusable="false">
         <use href="#icon-confirmation"></use>
@@ -80,10 +80,10 @@ export const multiLineLabel = () => `
             <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
             <span class="radio__icon" hidden>
                 <svg class="radio__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-unchecked"></use>
+                    <use href="#icon-radio-unchecked-18"></use>
                 </svg>
                 <svg class="radio__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-checked"></use>
+                    <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>
         </span>
@@ -94,10 +94,10 @@ export const multiLineLabel = () => `
             <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
             <span class="radio__icon" hidden>
                 <svg class="radio__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-unchecked"></use>
+                    <use href="#icon-radio-unchecked-18"></use>
                 </svg>
                 <svg class="radio__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-checked"></use>
+                    <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>
         </span>
@@ -108,10 +108,10 @@ export const multiLineLabel = () => `
             <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
             <span class="radio__icon" hidden>
                 <svg class="radio__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-unchecked"></use>
+                    <use href="#icon-radio-unchecked-18"></use>
                 </svg>
                 <svg class="radio__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-checked"></use>
+                    <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>
         </span>

package/src/less/radio/stories/unchecked.stories.js CHANGED Viewed

@@ -5,10 +5,10 @@ export const base = () => `
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r2" type="radio" />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -19,10 +19,10 @@ export const disabled = () => `
     <input aria-label="Disabled Foreground SVG radio example" class="radio__control" name="r4" type="radio" disabled />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -33,10 +33,10 @@ export const customColour = () => `
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r6" type="radio" />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false" style="color: #5ba71b">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -47,7 +47,7 @@ export const customIcon = () => `
     <input aria-label="Custom radio example" class="radio__control" name="r8" type="radio" />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
             <use href="#icon-confirmation"></use>

package/src/less/section-notice/stories/rtl.stories.js CHANGED Viewed

@@ -4,8 +4,8 @@ export const confirmationWithButton = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg class="icon icon--confirmation-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -22,8 +22,8 @@ export const dismissableWithTitle = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--information" role="region" aria-label="Information">
         <div class="page-notice__header">
-            <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-                <use href="#icon-information-filled-small"></use>
+            <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+                <use href="#icon-information-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -33,8 +33,8 @@ export const dismissableWithTitle = () => `
         <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
         <div class="page-notice__footer">
             <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
-                    <use href="#icon-close-small"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </a>
         </div>
@@ -46,8 +46,8 @@ export const dismissableWithoutTitle = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--information" role="region" aria-label="Information">
         <div class="page-notice__header">
-            <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-                <use href="#icon-information-filled-small"></use>
+            <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+                <use href="#icon-information-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -56,8 +56,8 @@ export const dismissableWithoutTitle = () => `
         <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
         <div class="page-notice__footer">
             <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
-                    <use href="#icon-close-small"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </a>
         </div>

package/src/less/section-notice/stories/section-notice.stories.js CHANGED Viewed

@@ -33,8 +33,8 @@ export const generalWithLink = () => `
 export const confirmationWithParagraph = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -49,8 +49,8 @@ export const confirmationWithParagraph = () => `
 export const confirmationWithButton = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -65,8 +65,8 @@ export const confirmationWithButton = () => `
 export const confirmationWithLink = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -81,8 +81,8 @@ export const confirmationWithLink = () => `
 export const attentionWithButton = () => `
 <div class="section-notice section-notice--attention" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-small">
-            <use href="#icon-attention-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-16">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -97,8 +97,8 @@ export const attentionWithButton = () => `
 export const attentionWithLink = () => `
 <div class="section-notice section-notice--attention" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-small">
-            <use href="#icon-attention-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-16">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -113,8 +113,8 @@ export const attentionWithLink = () => `
 export const informationWithButton = () => `
 <div class="section-notice section-notice--information" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--information-filled-small">
-            <use href="#icon-information-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--information-filled-16">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -129,8 +129,8 @@ export const informationWithButton = () => `
 export const informationWithLink = () => `
 <div class="section-notice section-notice--information" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--information-filled-small">
-            <use href="#icon-information-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--information-filled-16">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -145,8 +145,8 @@ export const informationWithLink = () => `
 export const dismissableWithTitle = () => `
 <section class="section-notice section-notice--information" role="region" aria-label="Information">
     <div class="section-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -156,8 +156,8 @@ export const dismissableWithTitle = () => `
     <p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="section-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
-                <use href="#icon-close"></use>
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="10" width="10">
+                <use href="#icon-close-16"></use>
             </svg>
         </a>
     </div>
@@ -167,8 +167,8 @@ export const dismissableWithTitle = () => `
 export const dismissableWithoutTitle = () => `
 <section class="section-notice section-notice--information" role="region" aria-label="Information">
     <div class="section-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -177,8 +177,8 @@ export const dismissableWithoutTitle = () => `
     <p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="section-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
-                <use href="#icon-close"></use>
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="10" width="10">
+                <use href="#icon-close-16"></use>
             </svg>
         </a>
     </div>

package/src/less/section-notice/stories/test.stories.js CHANGED Viewed

@@ -4,8 +4,8 @@ export const RTL = () => `
 <div dir="rtl">
     <div class="section-notice section-notice--confirmation" role="region">
         <div class="section-notice__header" role="region" aria-roledescription="Notice">
-            <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="section-notice__main">
@@ -22,8 +22,8 @@ export const RTLDismissable = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--information" role="region" aria-label="Information">
         <div class="page-notice__header">
-            <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-                <use href="#icon-information-filled-small"></use>
+            <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+                <use href="#icon-information-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -33,8 +33,8 @@ export const RTLDismissable = () => `
         <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
         <div class="page-notice__footer">
             <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
-                    <use href="#icon-close-small"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </a>
         </div>
@@ -45,8 +45,8 @@ export const RTLDismissable = () => `
 export const longText = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -58,8 +58,8 @@ export const longText = () => `
 export const longTextWithCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -74,8 +74,8 @@ export const longTextWithCTA = () => `
 export const legacy = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -88,8 +88,8 @@ export const legacy = () => `
 export const legacyWithCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">

package/src/less/section-title/stories/rtl.stories.js CHANGED Viewed

@@ -53,8 +53,8 @@ export const overflow = () => `
         <div class="section-title__overflow">
             <span class="menu-button">
                 <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
-                    <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                        <use href="#icon-overflow"></use>
+                    <svg class="icon icon--overflow-vertical-24" focusable="false" width="24" height="24" aria-hidden="true">
+                        <use href="#icon-overflow-vertical-24"></use>
                     </svg>
                 </button>
                 <div class="menu-button__menu menu-button__menu--reverse">
@@ -79,8 +79,8 @@ export const withFavorite = () => `
         </div>
         <div class="section-title__info">
             <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
-                    <use href="#icon-save-small"></use>
+                <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
+                    <use href="#icon-save-16"></use>
                 </svg>
             </button>
         </div>
@@ -97,8 +97,8 @@ export const withFavoriteAndLink = () => `
         </div>
         <div class="section-title__info">
             <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
-                    <use href="#icon-save-small"></use>
+                <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
+                    <use href="#icon-save-16"></use>
                 </svg>
             </button>
         </div>

package/src/less/section-title/stories/section-title.stories.js CHANGED Viewed

@@ -44,8 +44,8 @@ export const overflow = () => `
     <div class="section-title__overflow">
         <span class="menu-button">
             <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-vertical-24" focusable="false" width="24" height="24" aria-hidden="true">
+                    <use href="#icon-overflow-vertical-24"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -68,8 +68,8 @@ export const withFavorite = () => `
     </div>
     <div class="section-title__info">
         <button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
-            <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
-                <use href="#icon-save-small"></use>
+            <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
+                <use href="#icon-save-16"></use>
             </svg>
         </button>
     </div>
@@ -84,8 +84,8 @@ export const withFavoriteAndLink = () => `
     </div>
     <div class="section-title__info">
         <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-            <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
-                <use href="#icon-save-small"></use>
+            <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
+                <use href="#icon-save-16"></use>
             </svg>
         </button>
     </div>

package/src/less/select/select.less CHANGED Viewed

@@ -26,7 +26,7 @@ span.select {
     vertical-align: middle;
 }
-.select svg.icon--dropdown {
+.select svg.icon--chevron-down-12 {
     height: 100%;
     pointer-events: none;
     position: absolute;

package/src/less/select/stories/cascade.stories.js CHANGED Viewed

@@ -8,8 +8,8 @@ export const RTL = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </div>
@@ -22,8 +22,8 @@ export const fontSize = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -35,8 +35,8 @@ export const color = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;

package/src/less/select/stories/default.stories.js CHANGED Viewed

@@ -7,8 +7,8 @@ export const defaultSelection = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -21,8 +21,8 @@ export const forcedSelection = () => `
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
-   <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-       <use href="#icon-dropdown"></use>
+   <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+       <use href="#icon-chevron-down-12"></use>
    </svg>
 </span>
 `;
@@ -34,8 +34,8 @@ export const disabled = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -47,8 +47,8 @@ export const fluid = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </div>
 `;
@@ -61,8 +61,8 @@ export const borderless = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -74,8 +74,8 @@ export const large = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -87,8 +87,8 @@ export const underline = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;
@@ -100,8 +100,8 @@ export const invalid = () => `
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
     </select>
-    <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-        <use href="#icon-dropdown"></use>
+    <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <use href="#icon-chevron-down-12"></use>
     </svg>
 </span>
 `;