feat(carousel): updated chevron sizes (#2283)

eBay · Mar 8, 2024 · 71fc1e2 · 71fc1e2
1 parent 2985359
commit 71fc1e2
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 68 deletions.
diff --git a/.changeset/tough-cougars-poke.md b/.changeset/tough-cougars-poke.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(carousel): updated chevron sizes
diff --git a/docs/_includes/carousel.html b/docs/_includes/carousel.html
@@ -14,8 +14,8 @@ <h3 id="carousel-continuous">Continuous Carousel</h3>
             <div class="carousel">
                 <div class="carousel__container">
                     <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                        <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                            {% include symbol.html name="chevron-left-12" %}
+                        <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                            {% include symbol.html name="chevron-left-16" %}
                         </svg>
                     </button>
                     <div class="carousel__viewport carousel__viewport--mask">
@@ -31,8 +31,8 @@ <h3 id="carousel-continuous">Continuous Carousel</h3>
                         </ul>
                     </div>
                     <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                        <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                            {% include symbol.html name="chevron-right-12" %}
+                        <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                            {% include symbol.html name="chevron-right-16" %}
                         </svg>
                     </button>
                 </div>
@@ -43,8 +43,8 @@ <h3 id="carousel-continuous">Continuous Carousel</h3>
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -60,8 +60,8 @@ <h3 id="carousel-continuous">Continuous Carousel</h3>
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -81,8 +81,8 @@ <h4 class="clipped" aria-live="polite">
                         <span>Top Products - Slide 1 of 2</span>
                     </h4>
                     <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                        <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                            {% include symbol.html name="chevron-left-12" %}
+                        <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                            {% include symbol.html name="chevron-left-16" %}
                         </svg>
                     </button>
                     <div class="carousel__viewport">
@@ -98,8 +98,8 @@ <h4 class="clipped" aria-live="polite">
                         </ul>
                     </div>
                     <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                        <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                            {% include symbol.html name="chevron-right-12" %}
+                        <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                            {% include symbol.html name="chevron-right-16" %}
                         </svg>
                     </button>
                 </div>
@@ -113,8 +113,8 @@ <h2 class="clipped" aria-live="polite">
             <span>Top Products - Slide 1 of 2</span>
         </h2>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -130,8 +130,8 @@ <h2 class="clipped" aria-live="polite">
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -150,8 +150,8 @@ <h4 class="clipped" aria-live="polite">
                         <span>Top Products - Slide 1 of 4</span>
                     </h4>
                     <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                        <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                            {% include symbol.html name="chevron-left-12" %}
+                        <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                            {% include symbol.html name="chevron-left-16" %}
                         </svg>
                     </button>
                     <div class="carousel__viewport">
@@ -163,8 +163,8 @@ <h4 class="clipped" aria-live="polite">
                         </ul>
                     </div>
                     <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                        <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                            {% include symbol.html name="chevron-right-12" %}
+                        <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                            {% include symbol.html name="chevron-right-16" %}
                         </svg>
                     </button>
                 </div>
@@ -183,8 +183,8 @@ <h2 class="clipped" aria-live="polite">
             <span>Top Products - Slide 1 of 4</span>
         </h2>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -196,8 +196,8 @@ <h2 class="clipped" aria-live="polite">
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>

diff --git a/src/less/carousel/stories/carousel.stories.js b/src/less/carousel/stories/carousel.stories.js
@@ -4,8 +4,8 @@ export const continuous = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -21,8 +21,8 @@ export const continuous = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -33,8 +33,8 @@ export const imageTreatment = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -50,8 +50,8 @@ export const imageTreatment = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -62,8 +62,8 @@ export const imageTreatmentLarge = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -79,8 +79,8 @@ export const imageTreatmentLarge = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -94,8 +94,8 @@ export const slides = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -111,8 +111,8 @@ export const slides = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -126,8 +126,8 @@ export const slideshow = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -139,8 +139,8 @@ export const slideshow = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -160,8 +160,8 @@ export const RTL = () => `
                 <span>Top Products - Slide 1 of 4</span>
             </h4>
             <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                    <use href="#icon-chevron-left-12"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                    <use href="#icon-chevron-left-16"></use>
                 </svg>
             </button>
             <div class="carousel__viewport">
@@ -173,8 +173,8 @@ export const RTL = () => `
                 </ul>
             </div>
             <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-right-12" >
-                    <use href="#icon-chevron-right-12"></use>
+                <svg aria-hidden="true" class="icon icon--chevron-right-16" >
+                    <use href="#icon-chevron-right-16"></use>
                 </svg>
             </button>
         </div>
@@ -191,8 +191,8 @@ export const hiddenScrollbar = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -208,8 +208,8 @@ export const hiddenScrollbar = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -221,8 +221,8 @@ export const continuousWithPaddlesVisible = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -238,8 +238,8 @@ export const continuousWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -254,8 +254,8 @@ export const slidesWithPaddlesVisible = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -271,8 +271,8 @@ export const slidesWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -287,8 +287,8 @@ export const slideshowWithPaddlesVisible = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -300,8 +300,8 @@ export const slideshowWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
@@ -318,8 +318,8 @@ export const hiddenScrollbarWithPaddlesVisible = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12">
-                <use href="#icon-chevron-left-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -335,8 +335,8 @@ export const hiddenScrollbarWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12">
-                <use href="#icon-chevron-right-12"></use>
+            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+                <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>