Repository: exadel-inc/esl
Pull request #2350 (2024-04-16 18:25:03)

refactor(esl-carousel): rename `data-slides-area` container to mo obvious `esl-carousel-slides`


Patch:
diff --git a/site/src/landing/overview/overview.less b/site/src/landing/overview/overview.less
index e0cba6e8d..105bf81c0 100644
--- a/site/src/landing/overview/overview.less
+++ b/site/src/landing/overview/overview.less
@@ -9,7 +9,7 @@
     position: relative;
     padding: 20px 40px;
 
-    &-scene[data-slides-area] {
+    &-scene[esl-carousel-slides] {
       width: 100%;
     }
 
diff --git a/site/views/_includes/landing/overview.njk b/site/views/_includes/landing/overview.njk
index 35ce7e2bf..023d85ede 100644
--- a/site/views/_includes/landing/overview.njk
+++ b/site/views/_includes/landing/overview.njk
@@ -2,7 +2,7 @@
   <esl-carousel class="overview-carousel">
     <button class="overview-btn-prev-wrapper" data-slide-target="prev"></button>
 
-    <div data-slides-area class="overview-carousel-scene">
+    <div esl-carousel-slides class="overview-carousel-scene">
       <esl-carousel-slide active class="overview-carousel-item">
         <div class="overview-item">
           <div class="overview-illustration">
diff --git a/site/views/examples/carousel.marquee.njk b/site/views/examples/carousel.marquee.njk
index 6d27255d4..aec674aa0 100644
--- a/site/views/examples/carousel.marquee.njk
+++ b/site/views/examples/carousel.marquee.njk
@@ -13,7 +13,7 @@ icon: examples/carousel.svg
                   type="default"
                   esl-carousel-touch
                   esl-carousel-relate-to="#nav-carousel">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for item in slides %}
         <esl-carousel-slide>
         <div class="img-container">
@@ -35,7 +35,7 @@ icon: examples/carousel.svg
                   esl-carousel-touch
                   type="default"
                   count="5">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for item in slides %}
         <esl-carousel-slide>
           <div class="img-container img-container-4-3"
diff --git a/site/views/examples/carousel.njk b/site/views/examples/carousel.njk
index 1f779a73f..a8df72d48 100644
--- a/site/views/examples/carousel.njk
+++ b/site/views/examples/carousel.njk
@@ -19,7 +19,7 @@ icon: examples/carousel.svg
                   media="@XS|@SM|@MD|@LG|@XL"
                   loop="true"
                   count="1|2|3|4|5">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for item in cards %}
           <esl-carousel-slide {{ 'active' if loop.first }}>
             <div class="card">
@@ -59,7 +59,7 @@ icon: examples/carousel.svg
                   esl-carousel-touch
                   count="2"
                   loop="true">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for i in range(0, 6) -%}
           <esl-carousel-slide style="max-width: 50%">
             <div class="card">
@@ -91,7 +91,7 @@ icon: examples/carousel.svg
                    media="@XS|@SM|@MD|@LG|@XL"
                    count="2|3|4|5|6"
                    loop="true">
-        <div data-slides-area>
+        <div esl-carousel-slides>
         {% for item in items %}
            <esl-carousel-slide {{ 'active' if loop.first }}>
               <div class="card" style="justify-content: center; background: {{item.background}}">
@@ -121,7 +121,7 @@ icon: examples/carousel.svg
     <esl-carousel esl-carousel-touch="none | @XS => drag"
                   media="@XS|@SM|@MD|@LG|@XL"
                   count="2|3|4|5|6">
-      <div data-slides-area>
+      <div esl-carousel-slides>
         {% for item in items %}
           <esl-carousel-slide {{ 'active' if loop.first }}>
             <div class="card" style="justify-content: center; background: {{item.background}}">
@@ -149,7 +149,7 @@ icon: examples/carousel.svg
      </button>
 
      <esl-carousel esl-carousel-touch="@touch => swipe" loop="true">
-        <div data-slides-area>
+        <div esl-carousel-slides>
           {% for i in range(0, 4) -%}
            <esl-carousel-slide>
               <div class="card">
diff --git a/src/modules/esl-carousel/core/esl-carousel.less b/src/modules/esl-carousel/core/esl-carousel.less
index ce7e58b0b..38dfd895f 100644
--- a/src/modules/esl-carousel/core/esl-carousel.less
+++ b/src/modules/esl-carousel/core/esl-carousel.less
@@ -12,7 +12,7 @@ esl-carousel {
   /* stylelint-disable-next-line */
   overflow: clip;
 
-  [data-slides-area] {
+  [esl-carousel-slides] {
     position: relative;
     width: 100%;
     display: flex;
@@ -21,10 +21,10 @@ esl-carousel {
     transform: translate3d(0px, 0px, 0px);
   }
 
-  &.esl-carousel-vertical [data-slides-area] {
+  &.esl-carousel-vertical [esl-carousel-slides] {
     flex-direction: column;
   }
-  &.esl-carousel-horizontal [data-slides-area] {
+  &.esl-carousel-horizontal [esl-carousel-slides] {
     flex-direction: row;
   }
 
@@ -32,8 +32,8 @@ esl-carousel {
     cursor: grabbing;
   }
 
-  &[dragging] [data-slides-area],
-  &[animating] [data-slides-area] {
+  &[dragging] [esl-carousel-slides],
+  &[animating] [esl-carousel-slides] {
     user-select: none;
     touch-action: pan-y;
     pointer-events: none;
diff --git a/src/modules/esl-carousel/core/esl-carousel.ts b/src/modules/esl-carousel/core/esl-carousel.ts
index 5d90e0b85..a843c723e 100644
--- a/src/modules/esl-carousel/core/esl-carousel.ts
+++ b/src/modules/esl-carousel/core/esl-carousel.ts
@@ -211,10 +211,10 @@ export class ESLCarousel extends ESLBaseElement {
   /** @returns carousel slides area */
   @memoize()
   public get $slidesArea(): HTMLElement {
-    const $provided = this.querySelector('[data-slides-area]');
+    const $provided = this.querySelector('[esl-carousel-slides]');
     if ($provided) return $provided as HTMLElement;
     const $container = document.createElement('div');
-    $container.setAttribute('data-slides-area', '');
+    $container.setAttribute('esl-carousel-slides', '');
     this.appendChild($container);
     return $container ;
   }
diff --git a/src/modules/esl-carousel/plugin/dots/README.md b/src/modules/esl-carousel/plugin/dots/README.md
index 0478ba5dc..7bc407a64 100644
--- a/src/modules/esl-carousel/plugin/dots/README.md
+++ b/src/modules/esl-carousel/plugin/dots/README.md
@@ -9,7 +9,7 @@ Example:
 ```html
     <esl-carousel-slide esl-carousel-container>
       <esl-carousel count="1">
-        <div data-slides-area>
+        <div esl-carousel-slides>
           <esl-carousel-slide>Slide 1</esl-carousel-slide>
           <esl-carousel-slide>Slide 2</esl-carousel-slide>
           <esl-carousel-slide>Slide 3</esl-carousel-slide>
diff --git a/src/modules/esl-carousel/renderers/esl-carousel.default.renderer.less b/src/modules/esl-carousel/renderers/esl-carousel.default.renderer.less
index 7c886df41..f2793535e 100644
--- a/src/modules/esl-carousel/renderers/esl-carousel.default.renderer.less
+++ b/src/modules/esl-carousel/renderers/esl-carousel.default.renderer.less
@@ -1,5 +1,5 @@
 .esl-carousel-default-renderer {
-  [data-slides-area] {
+  [esl-carousel-slides] {
     display: flex;
     flex-wrap: nowrap;
     transition: none;
@@ -7,7 +7,7 @@
     max-height: 100%;
   }
 
-  &[animating] [data-slides-area] {
+  &[animating] [esl-carousel-slides] {
     transition: transform 0.25s linear;
   }
 


Test patch:
diff --git a/site/src/esl-carousel-demo/test-carousel.less b/site/src/esl-carousel-demo/test-carousel.less
index 52f0ea0b4..484e8d1a1 100644
--- a/site/src/esl-carousel-demo/test-carousel.less
+++ b/site/src/esl-carousel-demo/test-carousel.less
@@ -39,7 +39,7 @@
   }
 
   &.main-carousel {
-    div[data-slides-area] {
+    div[esl-carousel-slides] {
       min-height: 500px;
       gap: 0;
     }