From 4ae0d6bcf57f72b503ac2aed5a1646c3f4cfe805 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Thu, 15 Jun 2023 10:22:17 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20migrate=20less=20to=20token?= =?UTF-8?q?=20for=20Slider=20(#42428)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ feat: migrate less to token for Slider * ✨ feat: update snap * ✨ feat: update style * ✨ feat: update style * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: update * ✨ feat: update snap * ✨ feat: update * ✨ feat: update * ✨ feat: 删除未使用token * ✨ feat: update doc * ✨ feat: update dome * ✨ feat: update * ✨ feat: test ci * 📝 doc: update doc * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: add demo * ✨ feat: add demo * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * Apply suggestions from code review --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 365 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 213 ++++++++++ components/slider/demo/component-token.md | 7 + components/slider/demo/component-token.tsx | 59 +++ components/slider/index.en-US.md | 1 + components/slider/index.zh-CN.md | 1 + components/slider/style/index.tsx | 42 +- docs/react/migrate-less-variables.en-US.md | 28 +- docs/react/migrate-less-variables.zh-CN.md | 26 +- 9 files changed, 727 insertions(+), 15 deletions(-) create mode 100644 components/slider/demo/component-token.md create mode 100644 components/slider/demo/component-token.tsx diff --git a/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap index cd19775155..fbf09fb2b0 100644 --- a/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -141,6 +141,371 @@ Array [ ] `; +exports[`renders components/slider/demo/component-token.tsx extend context correctly 1`] = ` +Array [ +
+
+
+
+
+
+
+
+ +
+
+
, +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
, +
+
+
+
+
+
+
+
+
+ +
+
+
+
, +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
, +
+
+
+
+
+ + + + +
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+ + 0°C + + + 26°C + + + 37°C + + + + 100°C + + +
+
+
, +] +`; + exports[`renders components/slider/demo/draggableTrack.tsx extend context correctly 1`] = `
+
+
+
+
+
, +
+
+
+
+
+
+
, +
+
+
+
+
+
+
+
, +
+
+
+
+
+
+
+
+
, +
+
+
+
+
+ + + + +
+
+
+
+ + 0°C + + + 26°C + + + 37°C + + + + 100°C + + +
+
+
, +] +`; + exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
100°C, + }, +}; + +const App: React.FC = () => ( + + + +
+ +
+
+ +
+
+ +
+ +); + +export default App; diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md index fe21190220..1fa93633c6 100644 --- a/components/slider/index.en-US.md +++ b/components/slider/index.en-US.md @@ -27,6 +27,7 @@ To input a value in a range. Control visible of ToolTip Reverse Draggable track +Component Token ## API diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index ebb285619a..a418046415 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -28,6 +28,7 @@ demo: 控制 ToolTip 的显示 反向 范围可拖拽 +组件 Token ## API diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index 93a1317b02..d75d59d5f5 100644 --- a/components/slider/style/index.tsx +++ b/components/slider/style/index.tsx @@ -19,6 +19,15 @@ export interface ComponentToken { handleLineWidth: number; handleLineWidthHover: number; dotSize: number; + railBg: string; + railHoverBg: string; + trackBg: string; + trackHoverBg: string; + handleColor: string; + handleActiveColor: string; + dotBorderColor: string; + dotActiveBorderColor: string; + trackBgDisabled: string; } interface SliderToken extends FullToken<'Slider'> { @@ -49,25 +58,25 @@ const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-rail`]: { position: 'absolute', - backgroundColor: token.colorFillTertiary, + backgroundColor: token.railBg, borderRadius: token.borderRadiusXS, transition: `background-color ${token.motionDurationMid}`, }, [`${componentCls}-track`]: { position: 'absolute', - backgroundColor: token.colorPrimaryBorder, + backgroundColor: token.trackBg, borderRadius: token.borderRadiusXS, transition: `background-color ${token.motionDurationMid}`, }, '&:hover': { [`${componentCls}-rail`]: { - backgroundColor: token.colorFillSecondary, + backgroundColor: token.railHoverBg, }, [`${componentCls}-track`]: { - backgroundColor: token.colorPrimaryBorderHover, + backgroundColor: token.trackHoverBg, }, [`${componentCls}-dot`]: { @@ -79,7 +88,7 @@ const genBaseStyle: GenerateStyle = (token) => { }, [`${componentCls}-dot-active`]: { - borderColor: token.colorPrimary, + borderColor: token.dotActiveBorderColor, }, }, @@ -112,7 +121,7 @@ const genBaseStyle: GenerateStyle = (token) => { width: token.handleSize, height: token.handleSize, backgroundColor: token.colorBgElevated, - boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorder}`, + boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.handleColor}`, borderRadius: '50%', cursor: 'pointer', transition: ` @@ -139,7 +148,7 @@ const genBaseStyle: GenerateStyle = (token) => { }, '&::after': { - boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`, + boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.handleActiveColor}`, width: token.handleSizeHover, height: token.handleSizeHover, insetInlineStart: (token.handleSize - token.handleSizeHover) / 2, @@ -178,14 +187,14 @@ const genBaseStyle: GenerateStyle = (token) => { width: dotSize, height: dotSize, backgroundColor: token.colorBgElevated, - border: `${token.handleLineWidth}px solid ${token.colorBorderSecondary}`, + border: `${token.handleLineWidth}px solid ${token.dotBorderColor}`, borderRadius: '50%', cursor: 'pointer', transition: `border-color ${token.motionDurationSlow}`, pointerEvents: 'auto', '&-active': { - borderColor: token.colorPrimaryBorder, + borderColor: token.dotActiveBorderColor, }, }, @@ -193,18 +202,18 @@ const genBaseStyle: GenerateStyle = (token) => { cursor: 'not-allowed', [`${componentCls}-rail`]: { - backgroundColor: `${token.colorFillSecondary} !important`, + backgroundColor: `${token.railBg} !important`, }, [`${componentCls}-track`]: { - backgroundColor: `${token.colorTextDisabled} !important`, + backgroundColor: `${token.trackBgDisabled} !important`, }, [` ${componentCls}-dot `]: { backgroundColor: token.colorBgElevated, - borderColor: token.colorTextDisabled, + borderColor: token.trackBgDisabled, boxShadow: 'none', cursor: 'not-allowed', }, @@ -339,6 +348,15 @@ export default genComponentStyleHook( dotSize: 8, handleLineWidth, handleLineWidthHover, + railBg: token.colorFillTertiary, + railHoverBg: token.colorFillSecondary, + trackBg: token.colorPrimaryBorder, + trackHoverBg: token.colorPrimaryBorderHover, + handleColor: token.colorPrimaryBorder, + handleActiveColor: token.colorPrimary, + dotBorderColor: token.colorBorderSecondary, + dotActiveBorderColor: token.colorPrimaryBorder, + trackBgDisabled: token.colorBgContainerDisabled, }; }, ); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 15c9a7a913..f929d686cb 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -389,9 +389,33 @@ export default App; | `@skeleton-to-color` | `gradientToColor` | - | | `@skeleton-paragraph-margin-top` | `paragraphMarginTop` | - | | `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - | -| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 | +| `@skeleton-paragraph-li-margin-top` | - | Deprecated for style change | - +### Slider + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@slider-margin` | - | Could be customized with `className` or `style` | +| `@slider-rail-background-color` | `railBg` | - | +| `@slider-rail-background-color-hover` | `railHoverBg` | - | +| `@slider-track-background-color` | `trackBg` | - | +| `@slider-track-background-color-hover` | `trackHoverBg` | - | +| `@slider-handle-border-width` | `handleLineWidth` | - | +| `@slider-handle-background-color` | - | Deprecated | +| `@slider-handle-color` | `handleColor` | - | +| `@slider-handle-color-hover` | `handleActiveColor` | - | +| `@slider-handle-color-focus` | `handleActiveColor` | - | +| `@slider-handle-color-focus-shadow` | - Deprecated | +| `@slider-handle-color-tooltip-open` | `handleActiveColor` | - | +| `@slider-handle-size` | `handleSize` | - | +| `@slider-handle-margin-top` | - | Deprecated | +| `@slider-handle-margin-left` | - | Deprecated | +| `@slider-handle-shadow` | - | Deprecated | +| `@slider-dot-border-color` | `dotBorderColor` | - | +| `@slider-dot-border-color-active` | `dotActiveBorderColor` | - | +| `@slider-disabled-color` | `trackBgDisabled` | - | +| `@slider-disabled-background-color` | - | Deprecated | ### Statistic diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 389f46c7d8..c101103b27 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -388,7 +388,31 @@ Mentions 提及 | `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - | | `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 | - +### Slider 滑动输入条 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@slider-margin` | - | 可由 `className` 或 `style` 直接修改 | +| `@slider-rail-background-color` | `railBg` | - | +| `@slider-rail-background-color-hover` | `railHoverBg` | - | +| `@slider-track-background-color` | `trackBg` | - | +| `@slider-track-background-color-hover` | `trackHoverBg` | - | +| `@slider-handle-border-width` | `handleLineWidth` | - | +| `@slider-handle-background-color` | - | 已废弃 | +| `@slider-handle-color` | `handleColor` | - | +| `@slider-handle-color-hover` | `handleActiveColor` | - | +| `@slider-handle-color-focus` | `handleActiveColor` | - | +| `@slider-handle-color-focus-shadow` | - | 已废弃 | +| `@slider-handle-color-tooltip-open` | `handleActiveColor` | - | +| `@slider-handle-size` | `handleSize` | - | +| `@slider-handle-margin-top` | - | 已废弃 | +| `@slider-handle-margin-left` | - | 已废弃 | +| `@slider-handle-shadow` | - | 已废弃 | +| `@slider-dot-border-color` | `dotBorderColor` | - | +| `@slider-dot-border-color-active` | `dotActiveBorderColor` | - | +| `@slider-disabled-color` | `trackBgDisabled` | - | +| `@slider-disabled-background-color` | - | 已废弃 | ### Statistic 统计数值