From ed127e941879fe5bb083b57806d063d0fbebcb8e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 19 Apr 2024 17:17:56 +0800
Subject: [PATCH] feat: Carousel support arrows for switching (#48542)

* feat: Carousel support arrows function

* fix: order matters

* feat: Carousel support arrows in vertical mode

* chore: update snapshot

* Apply suggestions from code review

Signed-off-by: afc163 <afc163@gmail.com>

* chore: fix lint

* chore: fix lint

* chore: dotMargin => dotGap

---------

Signed-off-by: afc163 <afc163@gmail.com>
---
 .../__snapshots__/demo-extend.test.ts.snap    | 311 ++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 304 +++++++++++++++
 components/carousel/demo/arrows.md            |   7 +
 components/carousel/demo/arrows.tsx           |  47 +++
 components/carousel/index.en-US.md            |   2 +
 components/carousel/index.tsx                 |   4 +
 components/carousel/index.zh-CN.md            |   2 +
 components/carousel/style/index.ts            | 347 +++++++++++-------
 components/date-picker/style/panel.ts         |  12 +-
 9 files changed, 887 insertions(+), 149 deletions(-)
 create mode 100644 components/carousel/demo/arrows.md
 create mode 100644 components/carousel/demo/arrows.tsx

diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
index 80ef71c3ff..ebe3c3c045 100644
--- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,5 +1,316 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders components/carousel/demo/arrows.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-carousel"
+  >
+    <div
+      class="slick-slider slick-initialized"
+      dir="ltr"
+    >
+      <button
+        aria-label="prev"
+        class="slick-arrow slick-prev slick-disabled"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display: block;"
+        type="button"
+      />
+      <div
+        class="slick-list"
+      >
+        <div
+          class="slick-track"
+          style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+        >
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  1
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  2
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  3
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  4
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-label="next"
+        class="slick-arrow slick-next"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display: block;"
+        type="button"
+      />
+      <ul
+        class="slick-dots slick-dots-bottom"
+        style="display: block;"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>,
+  <br />,
+  <div
+    class="ant-carousel ant-carousel-vertical"
+  >
+    <div
+      class="slick-slider slick-vertical slick-initialized"
+      dir="ltr"
+    >
+      <button
+        aria-label="prev"
+        class="slick-arrow slick-prev slick-disabled"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display: block;"
+        type="button"
+      />
+      <div
+        class="slick-list"
+        style="height: 0px;"
+      >
+        <div
+          class="slick-track"
+          style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+        >
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  1
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  2
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  3
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline: none; width: 0px;"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width: 100%; display: inline-block;"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin: 0px; height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                >
+                  4
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-label="next"
+        class="slick-arrow slick-next"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display: block;"
+        type="button"
+      />
+      <ul
+        class="slick-dots slick-dots-left"
+        style="display: block;"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders components/carousel/demo/arrows.tsx extend context correctly 2`] = `
+[
+  "Warning: React does not recognize the \`%s\` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase \`%s\` instead. If you accidentally passed it from a parent component, remove it from the DOM element.%s",
+]
+`;
+
 exports[`renders components/carousel/demo/autoplay.tsx extend context correctly 1`] = `
 <div
   class="ant-carousel"
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
index d2e7d3bfdb..8517ec57cb 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,5 +1,309 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders components/carousel/demo/arrows.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-carousel"
+  >
+    <div
+      class="slick-slider slick-initialized"
+      dir="ltr"
+    >
+      <button
+        aria-label="prev"
+        class="slick-arrow slick-prev slick-disabled"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display:block"
+        type="button"
+      />
+      <div
+        class="slick-list"
+      >
+        <div
+          class="slick-track"
+          style="width:400%;left:0%"
+        >
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  1
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  2
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  3
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  4
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-label="next"
+        class="slick-arrow slick-next"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display:block"
+        type="button"
+      />
+      <ul
+        class="slick-dots slick-dots-bottom"
+        style="display:block"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>,
+  <br />,
+  <div
+    class="ant-carousel ant-carousel-vertical"
+  >
+    <div
+      class="slick-slider slick-vertical slick-initialized"
+      dir="ltr"
+    >
+      <button
+        aria-label="prev"
+        class="slick-arrow slick-prev slick-disabled"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display:block"
+        type="button"
+      />
+      <div
+        class="slick-list"
+      >
+        <div
+          class="slick-track"
+          style="width:400%;left:0%"
+        >
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  1
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  2
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  3
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline:none;width:25%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3
+                  style="margin:0;height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
+                  4
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        aria-label="next"
+        class="slick-arrow slick-next"
+        currentslide="0"
+        data-role="none"
+        slidecount="4"
+        style="display:block"
+        type="button"
+      />
+      <ul
+        class="slick-dots slick-dots-left"
+        style="display:block"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/carousel/demo/autoplay.tsx correctly 1`] = `
 <div
   class="ant-carousel"
diff --git a/components/carousel/demo/arrows.md b/components/carousel/demo/arrows.md
new file mode 100644
index 0000000000..03bf70d394
--- /dev/null
+++ b/components/carousel/demo/arrows.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+显示切换箭头。
+
+## en-US
+
+Show the arrows for switching.
diff --git a/components/carousel/demo/arrows.tsx b/components/carousel/demo/arrows.tsx
new file mode 100644
index 0000000000..a0fdaf58d7
--- /dev/null
+++ b/components/carousel/demo/arrows.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Carousel } from 'antd';
+
+const contentStyle: React.CSSProperties = {
+  margin: 0,
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
+const App: React.FC = () => (
+  <>
+    <Carousel arrows infinite={false}>
+      <div>
+        <h3 style={contentStyle}>1</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>2</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>3</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>4</h3>
+      </div>
+    </Carousel>
+    <br />
+    <Carousel arrows dotPosition="left" infinite={false}>
+      <div>
+        <h3 style={contentStyle}>1</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>2</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>3</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>4</h3>
+      </div>
+    </Carousel>
+  </>
+);
+
+export default App;
diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
index 9027df75f8..bb8da01285 100644
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -22,6 +22,7 @@ demo:
 <code src="./demo/position.tsx">Position</code>
 <code src="./demo/autoplay.tsx">Scroll automatically</code>
 <code src="./demo/fade.tsx">Fade in</code>
+<code src="./demo/arrows.tsx" version="5.17.0">Arrows for switching</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
@@ -30,6 +31,7 @@ Common props ref：[Common props](/docs/react/common-props)
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| arrows | Whether to show switch arrows | boolean | false | 5.17.0 |
 | autoplay | Whether to scroll automatically | boolean | false |  |
 | autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` |  |
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index c963d66147..915b09bdf6 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -35,6 +35,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const {
     dots = true,
     arrows = false,
+    prevArrow = <button type="button" aria-label="prev" />,
+    nextArrow = <button type="button" aria-label="next" />,
     draggable = false,
     waitForAnimate = false,
     dotPosition = 'bottom',
@@ -115,6 +117,8 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         dots={enableDots}
         dotsClass={dsClass}
         arrows={arrows}
+        prevArrow={prevArrow}
+        nextArrow={nextArrow}
         draggable={draggable}
         verticalSwiping={vertical}
         waitForAnimate={waitForAnimate}
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index 872112885e..9061edcc1b 100644
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -23,6 +23,7 @@ demo:
 <code src="./demo/position.tsx">位置</code>
 <code src="./demo/autoplay.tsx">自动切换</code>
 <code src="./demo/fade.tsx">渐显</code>
+<code src="./demo/arrows.tsx" version="5.17.0">切换箭头</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
@@ -31,6 +32,7 @@ demo:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| arrows | 是否显示箭头 | boolean | false | 5.17.0 |
 | autoplay | 是否自动切换 | boolean | false |  |
 | autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` |  |
diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts
index 8bb5087e30..87660d6cf6 100644
--- a/components/carousel/style/index.ts
+++ b/components/carousel/style/index.ts
@@ -2,7 +2,7 @@ import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genStyleHooks, mergeToken } from '../../theme/internal';
+import { genStyleHooks } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
@@ -15,6 +15,16 @@ export interface ComponentToken {
    * @descEN Height of indicator
    */
   dotHeight: number;
+  /**
+   * @desc 指示点之间的间距
+   * @descEN gap between indicator
+   */
+  dotGap: number;
+  /**
+   * @desc 指示点距离边缘的距离
+   * @descEN dot offset to Carousel edge
+   */
+  dotOffset: number;
   /** @deprecated Use `dotActiveWidth` instead. */
   dotWidthActive: number;
   /**
@@ -22,19 +32,22 @@ export interface ComponentToken {
    * @descEN Width of active indicator
    */
   dotActiveWidth: number;
+  /**
+   * @desc 切换箭头大小
+   * @descEN Size of arrows
+   */
+  arrowSize: number;
+  /**
+   * @desc 切换箭头边距
+   * @descEN arrows offset to Carousel edge
+   */
+  arrowOffset: number;
 }
 
-interface CarouselToken extends FullToken<'Carousel'> {
-  carouselArrowSize: string | number;
-  carouselDotOffset: string | number;
-  carouselDotInline: string | number;
-}
+interface CarouselToken extends FullToken<'Carousel'> {}
 
 const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
-  const { componentCls, antCls, carouselArrowSize, carouselDotOffset, marginXXS } = token;
-  const arrowOffset = token.calc(carouselArrowSize).mul(-1.25).equal();
-
-  const carouselDotMargin = marginXXS;
+  const { componentCls, antCls } = token;
 
   return {
     [componentCls]: {
@@ -133,142 +146,176 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
         display: 'block',
         height: 'auto',
       },
+    },
+  };
+};
 
-      '.slick-arrow.slick-hidden': {
-        display: 'none',
-      },
+const genArrowsStyle: GenerateStyle<CarouselToken> = (token) => {
+  const { componentCls, motionDurationSlow, arrowSize, arrowOffset } = token;
+  const arrowLength = token.calc(arrowSize).div(1.414).equal();
 
-      // Arrows
-      '.slick-prev, .slick-next': {
-        position: 'absolute',
-        top: '50%',
-        display: 'block',
-        width: carouselArrowSize,
-        height: carouselArrowSize,
-        marginTop: token.calc(carouselArrowSize).mul(-1).div(2).equal(),
-        padding: 0,
-        color: 'transparent',
-        fontSize: 0,
-        lineHeight: 0,
-        background: 'transparent',
-        border: 0,
-        outline: 'none',
-        cursor: 'pointer',
-
-        '&:hover, &:focus': {
-          color: 'transparent',
+  return [
+    {
+      [componentCls]: {
+        // Arrows
+        '.slick-prev, .slick-next': {
+          position: 'absolute',
+          top: '50%',
+          width: arrowSize,
+          height: arrowSize,
+          transform: 'translateY(-50%)',
+          color: '#fff',
+          opacity: 0.4,
           background: 'transparent',
+          padding: 0,
+          lineHeight: 0,
+          border: 0,
           outline: 'none',
+          cursor: 'pointer',
+          zIndex: 1,
+          transition: `opacity ${motionDurationSlow}`,
 
-          '&::before': {
+          '&:hover, &:focus': {
             opacity: 1,
           },
-        },
 
-        '&.slick-disabled::before': {
-          opacity: 0.25,
-        },
-      },
-
-      '.slick-prev': {
-        insetInlineStart: arrowOffset,
-
-        '&::before': {
-          content: '"←"',
-        },
-      },
-
-      '.slick-next': {
-        insetInlineEnd: arrowOffset,
-
-        '&::before': {
-          content: '"→"',
-        },
-      },
-
-      // Dots
-      '.slick-dots': {
-        position: 'absolute',
-        insetInlineEnd: 0,
-        bottom: 0,
-        insetInlineStart: 0,
-        zIndex: 15,
-        display: 'flex !important',
-        justifyContent: 'center',
-        paddingInlineStart: 0,
-        margin: 0,
-        listStyle: 'none',
-
-        '&-bottom': {
-          bottom: carouselDotOffset,
-        },
-
-        '&-top': {
-          top: carouselDotOffset,
-          bottom: 'auto',
-        },
-
-        li: {
-          position: 'relative',
-          display: 'inline-block',
-          flex: '0 1 auto',
-          boxSizing: 'content-box',
-          width: token.dotWidth,
-          height: token.dotHeight,
-          marginInline: carouselDotMargin,
-          padding: 0,
-          textAlign: 'center',
-          textIndent: -999,
-          verticalAlign: 'top',
-          transition: `all ${token.motionDurationSlow}`,
-
-          button: {
-            position: 'relative',
-            display: 'block',
-            width: '100%',
-            height: token.dotHeight,
-            padding: 0,
-            color: 'transparent',
-            fontSize: 0,
-            background: token.colorBgContainer,
-            border: 0,
-            borderRadius: token.dotHeight,
-            outline: 'none',
-            cursor: 'pointer',
-            opacity: 0.3,
-            transition: `all ${token.motionDurationSlow}`,
-
-            '&: hover, &:focus': {
-              opacity: 0.75,
-            },
-
-            '&::after': {
-              position: 'absolute',
-              inset: token.calc(carouselDotMargin).mul(-1).equal(),
-              content: '""',
-            },
+          '&.slick-disabled': {
+            pointerEvents: 'none',
+            opacity: 0,
           },
 
-          '&.slick-active': {
-            width: token.dotActiveWidth,
+          '&::after': {
+            boxSizing: 'border-box',
+            position: 'absolute',
+            top: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
+            insetInlineStart: token.calc(arrowSize).sub(arrowLength).div(2).equal(),
+            display: 'inline-block',
+            width: arrowLength,
+            height: arrowLength,
+            border: `0 solid currentcolor`,
+            borderInlineWidth: '2px 0',
+            borderBlockWidth: '2px 0',
+            borderRadius: 1,
+            content: '""',
+          },
+        },
 
-            '& button': {
-              background: token.colorBgContainer,
-              opacity: 1,
+        '.slick-prev': {
+          insetInlineStart: arrowOffset,
+
+          '&::after': {
+            transform: 'rotate(-45deg)',
+          },
+        },
+
+        '.slick-next': {
+          insetInlineEnd: arrowOffset,
+
+          '&::after': {
+            transform: 'rotate(135deg)',
+          },
+        },
+      },
+    },
+  ];
+};
+
+const genDotsStyle: GenerateStyle<CarouselToken> = (token) => {
+  const {
+    componentCls,
+    dotOffset,
+    dotWidth,
+    dotHeight,
+    dotGap,
+    colorBgContainer,
+    motionDurationSlow,
+  } = token;
+  return [
+    {
+      [componentCls]: {
+        '.slick-dots': {
+          position: 'absolute',
+          insetInlineEnd: 0,
+          bottom: 0,
+          insetInlineStart: 0,
+          zIndex: 15,
+          display: 'flex !important',
+          justifyContent: 'center',
+          paddingInlineStart: 0,
+          margin: 0,
+          listStyle: 'none',
+
+          '&-bottom': {
+            bottom: dotOffset,
+          },
+
+          '&-top': {
+            top: dotOffset,
+            bottom: 'auto',
+          },
+
+          li: {
+            position: 'relative',
+            display: 'inline-block',
+            flex: '0 1 auto',
+            boxSizing: 'content-box',
+            width: dotWidth,
+            height: dotHeight,
+            marginInline: dotGap,
+            padding: 0,
+            textAlign: 'center',
+            textIndent: -999,
+            verticalAlign: 'top',
+            transition: `all ${motionDurationSlow}`,
+
+            button: {
+              position: 'relative',
+              display: 'block',
+              width: '100%',
+              height: dotHeight,
+              padding: 0,
+              color: 'transparent',
+              fontSize: 0,
+              background: colorBgContainer,
+              border: 0,
+              borderRadius: dotHeight,
+              outline: 'none',
+              cursor: 'pointer',
+              opacity: 0.2,
+              transition: `all ${motionDurationSlow}`,
+
+              '&: hover, &:focus': {
+                opacity: 0.75,
+              },
+
+              '&::after': {
+                position: 'absolute',
+                inset: token.calc(dotGap).mul(-1).equal(),
+                content: '""',
+              },
             },
 
-            '&: hover, &:focus': {
-              opacity: 1,
+            '&.slick-active': {
+              width: token.dotActiveWidth,
+
+              '& button': {
+                background: colorBgContainer,
+                opacity: 1,
+              },
+
+              '&: hover, &:focus': {
+                opacity: 1,
+              },
             },
           },
         },
       },
     },
-  };
+  ];
 };
 
 const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
-  const { componentCls, carouselDotOffset, marginXXS } = token;
+  const { componentCls, dotOffset, arrowOffset, marginXXS } = token;
 
   const reverseSizeOfDot = {
     width: token.dotHeight,
@@ -277,6 +324,26 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
 
   return {
     [`${componentCls}-vertical`]: {
+      '.slick-prev, .slick-next': {
+        insetInlineStart: '50%',
+        marginBlockStart: 'unset',
+        transform: 'translateX(-50%)',
+      },
+      '.slick-prev': {
+        insetBlockStart: arrowOffset,
+        insetInlineStart: '50%',
+
+        '&::after': {
+          transform: 'rotate(45deg)',
+        },
+      },
+      '.slick-next': {
+        insetBlockStart: 'auto',
+        insetBlockEnd: arrowOffset,
+        '&::after': {
+          transform: 'rotate(-135deg)',
+        },
+      },
       '.slick-dots': {
         top: '50%',
         bottom: 'auto',
@@ -288,11 +355,11 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
 
         '&-left': {
           insetInlineEnd: 'auto',
-          insetInlineStart: carouselDotOffset,
+          insetInlineStart: dotOffset,
         },
 
         '&-right': {
-          insetInlineEnd: carouselDotOffset,
+          insetInlineEnd: dotOffset,
           insetInlineStart: 'auto',
         },
 
@@ -343,12 +410,16 @@ const genCarouselRtlStyle: GenerateStyle<CarouselToken> = (token) => {
   ];
 };
 
-export const prepareComponentToken: GetDefaultToken<'Carousel'> = () => {
+export const prepareComponentToken: GetDefaultToken<'Carousel'> = (token) => {
   const dotActiveWidth = 24;
 
   return {
+    arrowSize: 16,
+    arrowOffset: token.marginXS,
     dotWidth: 16,
     dotHeight: 3,
+    dotGap: token.marginXXS,
+    dotOffset: 12,
     dotWidthActive: dotActiveWidth,
     dotActiveWidth,
   };
@@ -357,19 +428,13 @@ export const prepareComponentToken: GetDefaultToken<'Carousel'> = () => {
 // ============================== Export ==============================
 export default genStyleHooks(
   'Carousel',
-  (token) => {
-    const { controlHeightLG, controlHeightSM } = token;
-    const carouselToken = mergeToken<CarouselToken>(token, {
-      carouselArrowSize: token.calc(controlHeightLG).div(2).equal(),
-      carouselDotOffset: token.calc(controlHeightSM).div(2).equal(),
-    });
-
-    return [
-      genCarouselStyle(carouselToken),
-      genCarouselVerticalStyle(carouselToken),
-      genCarouselRtlStyle(carouselToken),
-    ];
-  },
+  (token) => [
+    genCarouselStyle(token),
+    genArrowsStyle(token),
+    genDotsStyle(token),
+    genCarouselVerticalStyle(token),
+    genCarouselRtlStyle(token),
+  ],
   prepareComponentToken,
   {
     deprecatedTokens: [['dotWidthActive', 'dotActiveWidth']],
diff --git a/components/date-picker/style/panel.ts b/components/date-picker/style/panel.ts
index fc3188562a..128fd9716c 100644
--- a/components/date-picker/style/panel.ts
+++ b/components/date-picker/style/panel.ts
@@ -308,10 +308,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           width: pickerControlIconSize,
           height: pickerControlIconSize,
           border: `0 solid currentcolor`,
-          borderBlockStartWidth: pickerControlIconBorderWidth,
-          borderBlockEndWidth: 0,
-          borderInlineStartWidth: pickerControlIconBorderWidth,
-          borderInlineEndWidth: 0,
+          borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
+          borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
           content: '""',
         },
       },
@@ -326,10 +324,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           width: pickerControlIconSize,
           height: pickerControlIconSize,
           border: '0 solid currentcolor',
-          borderBlockStartWidth: pickerControlIconBorderWidth,
-          borderBlockEndWidth: 0,
-          borderInlineStartWidth: pickerControlIconBorderWidth,
-          borderInlineEndWidth: 0,
+          borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
+          borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
           content: '""',
         },
       },