From ffedddb211bac4df253f4fafb4153ffb980d0947 Mon Sep 17 00:00:00 2001 From: muxin <434980373@qq.com> Date: Fri, 19 May 2023 14:58:40 +0800 Subject: [PATCH] feat: migrate less to token for Carousel (#42157) * feat: rename Carousel token * docs: add component-token demo * fix: use dotActiveWidth instead of dotWidthActive * fix: use deprecatedTokens option --- .../__snapshots__/demo-extend.test.ts.snap | 234 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 234 ++++++++++++++++++ components/carousel/demo/component-token.md | 7 + components/carousel/demo/component-token.tsx | 41 +++ components/carousel/index.en-US.md | 1 + components/carousel/index.zh-CN.md | 1 + components/carousel/style/index.ts | 20 +- docs/react/migrate-less-variables.en-US.md | 9 +- docs/react/migrate-less-variables.zh-CN.md | 9 +- 9 files changed, 549 insertions(+), 7 deletions(-) create mode 100644 components/carousel/demo/component-token.md create mode 100644 components/carousel/demo/component-token.tsx diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap index 481fc4b933..1d0e8f2008 100644 --- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -468,6 +468,240 @@ exports[`renders components/carousel/demo/basic.tsx extend context correctly 1`] `; +exports[`renders components/carousel/demo/component-token.tsx extend context correctly 1`] = ` +
+
+
+
+ +
+
+
+

+ 1 +

+
+
+
+ + + + + + + +
+
+ +
+
+`; + exports[`renders components/carousel/demo/fade.tsx extend context correctly 1`] = `
`; +exports[`renders components/carousel/demo/component-token.tsx correctly 1`] = ` +
+
+
+
+ +
+
+
+

+ 1 +

+
+
+
+ + + + + + + +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+`; + exports[`renders components/carousel/demo/fade.tsx correctly 1`] = `
( + + +
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+ + +); diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index d8cf484682..a47e12eded 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -23,6 +23,7 @@ A carousel component. Scales with its container. Position Scroll automatically Fade in +Component Token ## API diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 41fbd4a32d..b37fcc6a0c 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -24,6 +24,7 @@ demo: 位置 自动切换 渐显 +组件 Token ## API diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts index efba2ce2af..aa1526f4ad 100644 --- a/components/carousel/style/index.ts +++ b/components/carousel/style/index.ts @@ -1,11 +1,13 @@ +import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -import { resetComponent } from '../../style'; export interface ComponentToken { dotWidth: number; dotHeight: number; + /** @deprecated Use `dotActiveWidth` instead. */ dotWidthActive: number; + dotActiveWidth: number; } interface CarouselToken extends FullToken<'Carousel'> { @@ -233,7 +235,7 @@ const genCarouselStyle: GenerateStyle = (token) => { }, '&.slick-active': { - width: token.dotWidthActive, + width: token.dotActiveWidth, '& button': { background: token.colorBgContainer, @@ -342,9 +344,17 @@ export default genComponentStyleHook( genCarouselRtlStyle(carouselToken), ]; }, + () => { + const dotActiveWidth = 24; + + return { + dotWidth: 16, + dotHeight: 3, + dotWidthActive: dotActiveWidth, + dotActiveWidth, + }; + }, { - dotWidth: 16, - dotHeight: 3, - dotWidthActive: 24, + deprecatedTokens: [['dotWidthActive', 'dotActiveWidth']], }, ); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index c26da6fb1c..564a6677b5 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -50,7 +50,14 @@ This document contains the correspondence between all the less variables related - +## Carousel + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@carousel-dot-width` | `dotWidth` | - | +| `@carousel-dot-height` | `dotHeight` | - | +| `@carousel-dot-active-width` | `dotActiveWidth` | - | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 2bbaf3a412..e304a46c30 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -50,7 +50,14 @@ title: Less 变量迁移 Design Token - +## Carousel 走马灯 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@carousel-dot-width` | `dotWidth` | - | +| `@carousel-dot-height` | `dotHeight` | - | +| `@carousel-dot-active-width` | `dotActiveWidth` | - |