From 1d71888e1bcd3d8db738f573671626e21b0df24c Mon Sep 17 00:00:00 2001
From: akai <akainice@gmail.com>
Date: Mon, 18 Jan 2021 19:27:11 +0800
Subject: [PATCH] feat: [Carousel] move the dots to the middle bottom of the
 slide

BREAKING CHANGE: rename `.Carousel-indicators` to `.Carousel-dots`
---
 src/components/Carousel/index.tsx      |  2 +-
 src/components/Carousel/style.less     | 24 +++++++++++++++---------
 src/styles/var.less                    | 12 ++++++++++++
 storybook/stories/Carousel.stories.tsx |  8 ++++----
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index f382c762..b1559475 100644
--- a/src/components/Carousel/index.tsx
+++ b/src/components/Carousel/index.tsx
@@ -462,7 +462,7 @@ export const Carousel = React.forwardRef<CarouselHandle, CarouselProps>((props,
         )}
       </div>
       {dots && (
-        <ol className="Carousel-indicators">
+        <ol className="Carousel-dots">
           {React.Children.map(children, (_, i) => (
             <li key={i}>
               <button
diff --git a/src/components/Carousel/style.less b/src/components/Carousel/style.less
index 85874c9a..a9a52915 100644
--- a/src/components/Carousel/style.less
+++ b/src/components/Carousel/style.less
@@ -1,4 +1,5 @@
 .Carousel {
+  position: relative;
   overflow: hidden;
 
   &--draggable {
@@ -22,21 +23,26 @@
   &-inner {
     display: flex;
   }
-  &-indicators {
+  &-dots {
+    position: absolute;
+    z-index: 1;
+    bottom: @carousel-dots-bottom;
+    left: 50%;
+    transform: translateX(-50%);
     display: flex;
     justify-content: center;
     list-style-type: none;
   }
   &-dot {
     display: block;
-    width: 8px;
-    height: 8px;
-    margin: 0 3px;
-    padding: 0;
-    border: 0;
-    border-radius: 50%;
-    background: var(--gray-4);
-    transition: 0.3s;
+    width: @carousel-dot-width;
+    height: @carousel-dot-height;
+    margin: @carousel-dot-margin;
+    padding: @carousel-dot-padding;
+    border: @carousel-dot-border;
+    border-radius: @carousel-dot-border-radius;
+    background: @carousel-dot-bg;
+    transition: @carousel-dot-transition;
     cursor: pointer;
 
     &.active {
diff --git a/src/styles/var.less b/src/styles/var.less
index 851a1c93..9d285fa7 100644
--- a/src/styles/var.less
+++ b/src/styles/var.less
@@ -184,6 +184,18 @@
 @card-column-btn-bg: var(--white);
 @card-column-btn-primary-color: var(--brand-1);
 
+// Carousel
+@carousel-dots-bottom: 8px;
+
+@carousel-dot-width: 8px;
+@carousel-dot-height: @carousel-dot-width;
+@carousel-dot-margin: 0 4px;
+@carousel-dot-padding: 0;
+@carousel-dot-border: 0;
+@carousel-dot-border-radius: 50%;
+@carousel-dot-bg: var(--gray-4);
+@carousel-dot-transition: 0.3s;
+
 // Modals
 @modal-width: 320px;
 @modal-border-radius: 12px;
diff --git a/storybook/stories/Carousel.stories.tsx b/storybook/stories/Carousel.stories.tsx
index 772b1dcb..62b3ef43 100644
--- a/storybook/stories/Carousel.stories.tsx
+++ b/storybook/stories/Carousel.stories.tsx
@@ -22,7 +22,7 @@ export const ManyImages = (ars) => (
     {imgs.map((img, i) => (
       <div key={i}>
         <p>{i}</p>
-        <img width="320" src={img} alt="" />
+        <img width="100%" src={img} alt="" />
       </div>
     ))}
   </Carousel>
@@ -52,10 +52,10 @@ function TestMethods() {
     <div>
       <Carousel ref={carouselRef}>
         {imgs.map((img, i) => (
-          <div key={i} onClick={handleClick}>
+          <div key={i}>
             <p>{i}</p>
-            <a href="javascript:;">
-              <img width="320" src={img} alt="" />
+            <a href={img} onClick={handleClick}>
+              <img width="100%" src={img} alt="" />
             </a>
           </div>
         ))}