From d57c86d92c9aeb449ae160eb1428f35e151b83bf Mon Sep 17 00:00:00 2001 From: dingkang Date: Tue, 22 Aug 2023 16:28:20 +0800 Subject: [PATCH] feat: migrate less to token for DatePicker (#42607) * feat: migrate less to token for time-picker * feat: add component-token demo * feat:update token with API Naming rules * feat: migrate less to token for Time-pikker * chore: code clean * chore: code clean * chore: udpate * feat: picker token * chore: add comment --------- Co-authored-by: MadCcc <1075746765@qq.com> --- components/calendar/style/index.ts | 31 ++- .../date-picker/__tests__/demo-extend.test.ts | 2 +- .../date-picker/__tests__/demo.test.tsx | 2 +- .../date-picker/demo/component-token.md | 7 + .../date-picker/demo/component-token.tsx | 51 ++++ components/date-picker/index.en-US.md | 5 +- components/date-picker/index.zh-CN.md | 6 +- components/date-picker/style/index.ts | 245 +++++++++++------- docs/react/migrate-less-variables.en-US.md | 25 +- docs/react/migrate-less-variables.zh-CN.md | 25 +- 10 files changed, 285 insertions(+), 114 deletions(-) create mode 100644 components/date-picker/demo/component-token.md create mode 100644 components/date-picker/demo/component-token.tsx diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index cf11ecb93d..5d81b22760 100644 --- a/components/calendar/style/index.ts +++ b/components/calendar/style/index.ts @@ -1,6 +1,10 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { PickerPanelToken } from '../../date-picker/style'; -import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style'; +import type { PanelComponentToken, PickerPanelToken } from '../../date-picker/style'; +import { + genPanelStyle, + initPanelComponentToken, + initPickerPanelToken, +} from '../../date-picker/style'; import { resetComponent } from '../../style'; import type { FullToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; @@ -38,7 +42,7 @@ export interface ComponentToken { itemActiveBg: string; } -interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken { +interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelComponentToken { calendarCls: string; dateValueHeight: number; weekHeight: number; @@ -213,14 +217,19 @@ export default genComponentStyleHook( 'Calendar', (token) => { const calendarCls = `${token.componentCls}-calendar`; - const calendarToken = mergeToken(token, initPickerPanelToken(token), { - calendarCls, - pickerCellInnerCls: `${token.componentCls}-cell-inner`, - dateValueHeight: token.controlHeightSM, - weekHeight: token.controlHeightSM * 0.75, - dateContentHeight: - (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2, - }); + const calendarToken = mergeToken( + token, + initPickerPanelToken(token), + initPanelComponentToken(token), + { + calendarCls, + pickerCellInnerCls: `${token.componentCls}-cell-inner`, + dateValueHeight: token.controlHeightSM, + weekHeight: token.controlHeightSM * 0.75, + dateContentHeight: + (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2, + }, + ); return [genCalendarStyles(calendarToken)]; }, diff --git a/components/date-picker/__tests__/demo-extend.test.ts b/components/date-picker/__tests__/demo-extend.test.ts index b0867412e2..ec36011f2d 100644 --- a/components/date-picker/__tests__/demo-extend.test.ts +++ b/components/date-picker/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('date-picker', { skip: ['locale.tsx'] }); +extendTest('date-picker', { skip: ['locale.tsx', 'component-token.tsx'] }); diff --git a/components/date-picker/__tests__/demo.test.tsx b/components/date-picker/__tests__/demo.test.tsx index db64682abc..162c3a5a26 100644 --- a/components/date-picker/__tests__/demo.test.tsx +++ b/components/date-picker/__tests__/demo.test.tsx @@ -2,7 +2,7 @@ import dayjs from 'dayjs'; import * as React from 'react'; import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; -demoTest('date-picker', { skip: ['locale.tsx'], testRootProps: false }); +demoTest('date-picker', { skip: ['locale.tsx', 'component-token.tsx'], testRootProps: false }); rootPropsTest('date-picker', (DatePicker, props) => , { findRootElements: () => document.querySelectorAll('.ant-picker, .ant-picker-dropdown'), diff --git a/components/date-picker/demo/component-token.md b/components/date-picker/demo/component-token.md new file mode 100644 index 0000000000..de91480d0a --- /dev/null +++ b/components/date-picker/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +Component Token Debug. + +## en-US + +Component Token Debug. diff --git a/components/date-picker/demo/component-token.tsx b/components/date-picker/demo/component-token.tsx new file mode 100644 index 0000000000..97b57100f3 --- /dev/null +++ b/components/date-picker/demo/component-token.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import type { DatePickerProps } from 'antd'; +import { ConfigProvider, DatePicker, Space, TimePicker } from 'antd'; +import dayjs from 'dayjs'; + +/** Test usage. Do not use in your production. */ + +const { RangePicker } = DatePicker; + +const onChange: DatePickerProps['onChange'] = (date, dateString) => { + console.log(date, dateString); +}; + +const App: React.FC = () => ( + + + + + + + + +); + +export default App; diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 66568076c3..b2a25e7646 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -35,6 +35,7 @@ By clicking the input box, you can select a date from a popup calendar. Customized Range Picker Suffix \_InternalPanelDoNotUseOrYouWillBeFired +Component Token ## API @@ -56,17 +57,17 @@ The default locale is en-US, if you need to use other languages, recommend to us If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json). ```jsx -import 'dayjs/locale/zh-cn'; import locale from 'antd/es/date-picker/locale/zh_CN'; +import 'dayjs/locale/zh-cn'; ; ``` ```jsx // The default locale is en-US, if you want to use other locale, just set locale in entry file globally. +import locale from 'antd/locale/zh_CN'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; -import locale from 'antd/locale/zh_CN'; diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index bcb7e655e2..d4bf19f265 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -36,6 +36,7 @@ demo: 自定义日期范围选择 后缀图标 \_InternalPanelDoNotUseOrYouWillBeFired +组件 Token ## API @@ -57,17 +58,17 @@ demo: 如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。 ```jsx -import 'dayjs/locale/zh-cn'; import locale from 'antd/es/date-picker/locale/zh_CN'; +import 'dayjs/locale/zh-cn'; ; ``` ```jsx // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale +import locale from 'antd/locale/zh_CN'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; -import locale from 'antd/locale/zh_CN'; @@ -245,7 +246,6 @@ export type FormatType = Generic | GenericFn | Array; ```js import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; - import updateLocale from 'dayjs/plugin/updateLocale'; dayjs.extend(updateLocale); diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 8173b72f45..0d86348d7d 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -23,7 +23,72 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; -export interface ComponentToken extends Exclude { +export interface PanelComponentToken { + /** + * @desc 单元格悬浮态背景色 + * @descEN Background color of cell hover state + */ + cellHoverBg: string; + /** + * @desc 选取范围内的单元格背景色 + * @descEN Background color of cell in range + */ + cellActiveWithRangeBg: string; + /** + * @desc 选取范围内的单元格悬浮态背景色 + * @descEN Background color of hovered cell in range + */ + cellHoverWithRangeBg: string; + /** + * @desc 单元格禁用态背景色 + * @descEN Background color of disabled cell + */ + cellBgDisabled: string; + /** + * @desc 选取范围时单元格边框色 + * @descEN Border color of cell in range when picking + */ + cellRangeBorderColor: string; + /** + * @desc 时间列宽度 + * @descEN Width of time column + */ + timeColumnWidth: number; + /** + * @desc 时间列高度 + * @descEN Height of time column + */ + timeColumnHeight: number; + /** + * @desc 时间单元格高度 + * @descEN Height of time cell + */ + timeCellHeight: number; + /** + * @desc 单元格高度 + * @descEN Height of cell + */ + cellHeight: number; + /** + * @desc 单元格宽度 + * @descEN Width of cell + */ + cellWidth: number; + /** + * @desc 单元格文本高度 + * @descEN Height of cell text + */ + textHeight: number; + /** + * @desc 十年/年/季/月/周单元格高度 + * @descEN Height of decade/year/quarter/month/week cell + */ + withoutTimeCellHeight: number; +} + +export interface ComponentToken + extends Exclude, + PanelComponentToken { /** * @desc 预设区域宽度 * @descEN Width of preset area @@ -44,17 +109,8 @@ export interface ComponentToken extends Exclude export type PickerPanelToken = { pickerCellCls: string; pickerCellInnerCls: string; - pickerTextHeight: number; - pickerPanelCellWidth: number; - pickerPanelCellHeight: number; - pickerDateHoverRangeBorderColor: string; - pickerBasicCellHoverWithRangeColor: string; - pickerPanelWithoutTimeCellHeight: number; pickerDatePanelPaddingHorizontal: number; pickerYearMonthCellWidth: number; - pickerTimePanelColumnHeight: number; - pickerTimePanelColumnWidth: number; - pickerTimePanelCellHeight: number; pickerCellPaddingVertical: number; pickerQuarterPanelContentHeight: number; pickerCellBorderGap: number; @@ -64,7 +120,7 @@ export type PickerPanelToken = { type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken; -type SharedPickerToken = TokenWithCommonCls & PickerPanelToken; +type SharedPickerToken = TokenWithCommonCls & PickerPanelToken & PanelComponentToken; const genPikerPadding = ( token: PickerToken, @@ -88,23 +144,23 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { componentCls, pickerCellCls, pickerCellInnerCls, - pickerPanelCellHeight, + cellHeight, motionDurationSlow, borderRadiusSM, motionDurationMid, - controlItemBgHover, + cellHoverBg, lineWidth, lineType, colorPrimary, - controlItemBgActive, + cellActiveWithRangeBg, colorTextLightSolid, controlHeightSM, - pickerDateHoverRangeBorderColor, + cellRangeBorderColor, pickerCellBorderGap, - pickerBasicCellHoverWithRangeColor, - pickerPanelCellWidth, + cellHoverWithRangeBg, + cellWidth, colorTextDisabled, - colorBgContainerDisabled, + cellBgDisabled, } = token; return { @@ -114,7 +170,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { insetInlineStart: 0, insetInlineEnd: 0, zIndex: 1, - height: pickerPanelCellHeight, + height: cellHeight, transform: 'translateY(-50%)', transition: `all ${motionDurationSlow}`, content: '""', @@ -125,9 +181,9 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { position: 'relative', zIndex: 2, display: 'inline-block', - minWidth: pickerPanelCellHeight, - height: pickerPanelCellHeight, - lineHeight: `${pickerPanelCellHeight}px`, + minWidth: cellHeight, + height: cellHeight, + lineHeight: `${cellHeight}px`, borderRadius: borderRadiusSM, transition: `background ${motionDurationMid}, border ${motionDurationMid}`, }, @@ -143,7 +199,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]: { [pickerCellInnerCls]: { - background: controlItemBgHover, + background: cellHoverBg, }, }, @@ -167,7 +223,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { position: 'relative', '&::before': { - background: controlItemBgActive, + background: cellActiveWithRangeBg, }, }, @@ -182,7 +238,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single), &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: { '&::before': { - background: controlItemBgActive, + background: cellActiveWithRangeBg, }, }, @@ -207,8 +263,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { top: '50%', zIndex: 0, height: controlHeightSM, - borderTop: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, - borderBottom: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderTop: `${lineWidth}px dashed ${cellRangeBorderColor}`, + borderBottom: `${lineWidth}px dashed ${cellRangeBorderColor}`, transform: 'translateY(-50%)', transition: `all ${motionDurationSlow}`, content: '""', @@ -237,7 +293,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { ${componentCls}-panel > :not(${componentCls}-date-panel) &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: { - background: pickerBasicCellHoverWithRangeColor, + background: cellHoverWithRangeBg, }, // range start border-radius @@ -268,8 +324,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-start${pickerCellCls}-range-hover-edge-start${pickerCellCls}-range-hover-edge-start-near-range::after, &-in-view${pickerCellCls}-range-hover-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after, &-in-view${pickerCellCls}-range-hover-start::after`]: { - insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + insetInlineStart: (cellWidth - cellHeight) / 2, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, borderStartStartRadius: borderRadiusSM, borderEndStartRadius: borderRadiusSM, }, @@ -280,8 +336,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-end${pickerCellCls}-range-hover-edge-end${pickerCellCls}-range-hover-edge-end-near-range::after, &-in-view${pickerCellCls}-range-hover-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after, &-in-view${pickerCellCls}-range-hover-end::after`]: { - insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + insetInlineEnd: (cellWidth - cellHeight) / 2, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, borderStartEndRadius: borderRadiusSM, borderEndEndRadius: borderRadiusSM, }, @@ -296,7 +352,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { }, '&::before': { - background: colorBgContainerDisabled, + background: cellBgDisabled, }, }, [`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: { @@ -312,7 +368,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { pickerCellInnerCls, pickerYearMonthCellWidth, pickerControlIconSize, - pickerPanelCellWidth, + cellWidth, paddingSM, paddingXS, paddingXXS, @@ -325,35 +381,35 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { colorSplit, pickerControlIconBorderWidth, colorIcon, - pickerTextHeight, + textHeight, motionDurationMid, colorIconHover, fontWeightStrong, - pickerPanelCellHeight, + cellHeight, pickerCellPaddingVertical, colorTextDisabled, colorText, fontSize, - pickerBasicCellHoverWithRangeColor, + cellHoverWithRangeBg, motionDurationSlow, - pickerPanelWithoutTimeCellHeight, + withoutTimeCellHeight, pickerQuarterPanelContentHeight, colorLink, colorLinkActive, colorLinkHover, - pickerDateHoverRangeBorderColor, + cellRangeBorderColor, borderRadiusSM, colorTextLightSolid, - controlItemBgHover, - pickerTimePanelColumnHeight, - pickerTimePanelColumnWidth, - pickerTimePanelCellHeight, + cellHoverBg, + timeColumnHeight, + timeColumnWidth, + timeCellHeight, controlItemBgActive, marginXXS, pickerDatePanelPaddingHorizontal, } = token; - const pickerPanelWidth = pickerPanelCellWidth * 7 + pickerDatePanelPaddingHorizontal * 2; + const pickerPanelWidth = cellWidth * 7 + pickerDatePanelPaddingHorizontal * 2; const commonHoverCellFixedDistance = (pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth - paddingSM; @@ -419,7 +475,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { button: { padding: 0, color: colorIcon, - lineHeight: `${pickerTextHeight}px`, + lineHeight: `${textHeight}px`, background: 'transparent', border: 0, cursor: 'pointer', @@ -439,7 +495,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { '&-view': { flex: 'auto', fontWeight: fontWeightStrong, - lineHeight: `${pickerTextHeight}px`, + lineHeight: `${textHeight}px`, button: { color: 'inherit', @@ -518,12 +574,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { 'th, td': { position: 'relative', - minWidth: pickerPanelCellHeight, + minWidth: cellHeight, fontWeight: 'normal', }, th: { - height: pickerPanelCellHeight + pickerCellPaddingVertical * 2, + height: cellHeight + pickerCellPaddingVertical * 2, color: colorText, verticalAlign: 'middle', }, @@ -551,7 +607,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { top: 0, bottom: 0, zIndex: -1, - background: pickerBasicCellHoverWithRangeColor, + background: cellHoverWithRangeBg, transition: `all ${motionDurationSlow}`, content: '""', }, @@ -560,14 +616,14 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start ${pickerCellInnerCls}::after`]: { - insetInlineEnd: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2, + insetInlineEnd: -(cellWidth - cellHeight) / 2, insetInlineStart: 0, }, [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]: { insetInlineEnd: 0, - insetInlineStart: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2, + insetInlineStart: -(cellWidth - cellHeight) / 2, }, // Hover with range start & end @@ -580,7 +636,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { &-quarter-panel, &-month-panel`]: { [`${componentCls}-content`]: { - height: pickerPanelWithoutTimeCellHeight * 4, + height: withoutTimeCellHeight * 4, }, [pickerCellInnerCls]: { @@ -596,20 +652,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { // Quarter Panel Special Style [`${componentCls}-cell-range-hover-start::after`]: { insetInlineStart: quarterHoverCellFixedDistance, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, [`${componentCls}-panel-rtl &`]: { insetInlineEnd: quarterHoverCellFixedDistance, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, }, }, [`${componentCls}-cell-range-hover-end::after`]: { insetInlineEnd: quarterHoverCellFixedDistance, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, [`${componentCls}-panel-rtl &`]: { insetInlineStart: quarterHoverCellFixedDistance, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, }, }, }, @@ -622,12 +678,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { '&-footer': { width: 'min-content', minWidth: '100%', - lineHeight: `${pickerTextHeight - 2 * lineWidth}px`, + lineHeight: `${textHeight - 2 * lineWidth}px`, textAlign: 'center', '&-extra': { padding: `0 ${paddingSM}`, - lineHeight: `${pickerTextHeight - 2 * lineWidth}px`, + lineHeight: `${textHeight - 2 * lineWidth}px`, textAlign: 'start', '&:not(:last-child)': { @@ -716,20 +772,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { &-month-panel`]: { [`${componentCls}-cell-range-hover-start::after`]: { insetInlineStart: commonHoverCellFixedDistance, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, [`${componentCls}-panel-rtl &`]: { insetInlineEnd: commonHoverCellFixedDistance, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, }, }, [`${componentCls}-cell-range-hover-end::after`]: { insetInlineEnd: commonHoverCellFixedDistance, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, [`${componentCls}-panel-rtl &`]: { insetInlineStart: commonHoverCellFixedDistance, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, }, }, }, @@ -768,7 +824,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { [`&:hover td`]: { '&:before': { - background: controlItemBgHover, + background: cellHoverBg, }, }, @@ -804,10 +860,10 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { }, [`${componentCls}-content`]: { - width: pickerPanelCellWidth * 7, + width: cellWidth * 7, th: { - width: pickerPanelCellWidth, + width: cellWidth, boxSizing: 'border-box', padding: 0, }, @@ -849,12 +905,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { [`${componentCls}-content`]: { display: 'flex', flex: 'auto', - height: pickerTimePanelColumnHeight, + height: timeColumnHeight, }, '&-column': { flex: '1 0 auto', - width: pickerTimePanelColumnWidth, + width: timeColumnWidth, margin: `${paddingXXS}px 0`, padding: 0, overflowY: 'hidden', @@ -865,7 +921,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { '&::after': { display: 'block', - height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight, + height: timeColumnHeight - timeCellHeight, content: '""', }, @@ -889,20 +945,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { marginInline: marginXXS, [`${componentCls}-time-panel-cell-inner`]: { display: 'block', - width: pickerTimePanelColumnWidth - 2 * marginXXS, - height: pickerTimePanelCellHeight, + width: timeColumnWidth - 2 * marginXXS, + height: timeCellHeight, margin: 0, paddingBlock: 0, paddingInlineEnd: 0, - paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2, + paddingInlineStart: (timeColumnWidth - timeCellHeight) / 2, color: colorText, - lineHeight: `${pickerTimePanelCellHeight}px`, + lineHeight: `${timeCellHeight}px`, borderRadius: borderRadiusSM, cursor: 'pointer', transition: `background ${motionDurationMid}`, '&:hover': { - background: controlItemBgHover, + background: cellHoverBg, }, }, @@ -925,7 +981,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { }, // https://github.com/ant-design/ant-design/issues/39227 [`&-datetime-panel ${componentCls}-time-panel-column:after`]: { - height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight + paddingXXS * 2, + height: timeColumnHeight - timeCellHeight + paddingXXS * 2, }, }, }; @@ -1018,8 +1074,8 @@ const genPickerStyle: GenerateStyle = (token) => { zIndexPopup, paddingXXS, paddingSM, - pickerTextHeight, - controlItemBgActive, + textHeight, + cellActiveWithRangeBg, colorPrimaryBorder, sizePopupArrow, borderRadiusXS, @@ -1029,7 +1085,7 @@ const genPickerStyle: GenerateStyle = (token) => { boxShadowSecondary, borderRadiusSM, colorSplit, - controlItemBgHover, + cellHoverBg, presetsWidth, presetsMaxWidth, boxShadowPopoverArrow, @@ -1311,7 +1367,7 @@ const genPickerStyle: GenerateStyle = (token) => { marginBottom: 0, padding: `${paddingXXS}px ${paddingSM}px`, overflow: 'hidden', - lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`, + lineHeight: `${textHeight - 2 * lineWidth - paddingXS / 2}px`, textAlign: 'start', listStyle: 'none', display: 'flex', @@ -1324,7 +1380,7 @@ const genPickerStyle: GenerateStyle = (token) => { // https://github.com/ant-design/ant-design/issues/23687 [`${componentCls}-preset > ${antCls}-tag-blue`]: { color: colorPrimary, - background: controlItemBgActive, + background: cellActiveWithRangeBg, borderColor: colorPrimaryBorder, cursor: 'pointer', }, @@ -1398,7 +1454,7 @@ const genPickerStyle: GenerateStyle = (token) => { }, '&:hover': { - background: controlItemBgHover, + background: cellHoverBg, }, }, }, @@ -1472,23 +1528,12 @@ const genPickerStyle: GenerateStyle = (token) => { }; export const initPickerPanelToken = (token: TokenWithCommonCls): PickerPanelToken => { - const pickerTimePanelCellHeight = 28; - const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS, padding } = - token; + const { componentCls, controlHeightLG, paddingXXS, padding } = token; return { pickerCellCls: `${componentCls}-cell`, pickerCellInnerCls: `${componentCls}-cell-inner`, - pickerTextHeight: controlHeightLG, - pickerPanelCellWidth: controlHeightSM * 1.5, - pickerPanelCellHeight: controlHeightSM, - pickerDateHoverRangeBorderColor: new TinyColor(colorPrimary).lighten(20).toHexString(), - pickerBasicCellHoverWithRangeColor: new TinyColor(colorPrimary).lighten(35).toHexString(), - pickerPanelWithoutTimeCellHeight: controlHeightLG * 1.65, pickerYearMonthCellWidth: controlHeightLG * 1.5, - pickerTimePanelColumnHeight: pickerTimePanelCellHeight * 8, - pickerTimePanelColumnWidth: controlHeightLG * 1.4, - pickerTimePanelCellHeight, pickerQuarterPanelContentHeight: controlHeightLG * 1.4, pickerCellPaddingVertical: paddingXXS + paddingXXS / 2, pickerCellBorderGap: 2, // Magic for gap between cells @@ -1498,6 +1543,21 @@ export const initPickerPanelToken = (token: TokenWithCommonCls): Pi }; }; +export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => ({ + cellHoverBg: token.controlItemBgHover, + cellActiveWithRangeBg: token.controlItemBgActive, + cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(), + cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(), + cellBgDisabled: token.colorBgContainerDisabled, + timeColumnWidth: token.controlHeightLG * 1.4, + timeColumnHeight: 28 * 8, + timeCellHeight: 28, + cellWidth: token.controlHeightSM * 1.5, + cellHeight: token.controlHeightSM, + textHeight: token.controlHeightLG, + withoutTimeCellHeight: token.controlHeightLG * 1.65, +}); + // ============================== Export ============================== export default genComponentStyleHook( 'DatePicker', @@ -1516,6 +1576,7 @@ export default genComponentStyleHook( }, (token) => ({ ...initComponentToken(token), + ...initPanelComponentToken(token), presetsWidth: 120, presetsMaxWidth: 200, zIndexPopup: token.zIndexPopupBase + 50, diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index d107536a31..7d9d6217ef 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -17,6 +17,8 @@ We could configure global token and component token for each component through t import React from 'react'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import { Checkbox, ConfigProvider, Radio } from 'antd'; + const App: React.FC = () => ( +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@picker-bg` | `colorBgContainer` | Global Token | +| `@picker-basic-cell-hover-color` | `cellHoverBg` | - | +| `@picker-basic-cell-active-with-range-color` | `cellActiveWithRangeBg` | - | +| `@picker-basic-cell-hover-with-range-color` | `cellHoverWithRangeBg` | - | +| `@picker-basic-cell-disabled-bg` | `cellBgDisabled` | - | +| `@picker-border-color` | `colorSplit` | Global Token | +| `@picker-date-hover-range-border-color` | `cellRangeBorderColor` | - | +| `@picker-date-hover-range-color` | `cellHoverWithRangeColor` | - | +| `@picker-time-panel-column-width` | `timeColumnWidth` | - | +| `@picker-time-panel-column-height` | `timeColumnHeight` | - | +| `@picker-time-panel-cell-height` | `timeCellHeight` | - | +| `@picker-panel-cell-height` | `cellHeight` | - | +| `@picker-panel-cell-width` | `cellWidth` | - | +| `@picker-text-height` | `textHeight` | - | +| `@picker-panel-without-time-cell-height` | `withoutTimeCellHeight` | - | + ### Descriptions @@ -829,8 +852,6 @@ export default App; | `@timeline-dot-bg` | `dotBg` | - | | `@timeline-item-padding-bottom` | `itemPaddingBottom` | - | - - ### Tooltip diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 13c236e58d..c607b2e685 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -17,6 +17,8 @@ title: 从 Less 变量到 Design Token import React from 'react'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import { Checkbox, ConfigProvider, Radio } from 'antd'; + const App: React.FC = () => ( +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@picker-bg` | `colorBgContainer` | 全局 Token | +| `@picker-basic-cell-hover-color` | `cellHoverBg` | - | +| `@picker-basic-cell-active-with-range-color` | `cellActiveWithRangeBg` | - | +| `@picker-basic-cell-hover-with-range-color` | `cellHoverWithRangeBg` | - | +| `@picker-basic-cell-disabled-bg` | `cellBgDisabled` | - | +| `@picker-border-color` | `colorSplit` | 全局 Token | +| `@picker-date-hover-range-border-color` | `cellRangeBorderColor` | - | +| `@picker-date-hover-range-color` | `cellHoverWithRangeColor` | - | +| `@picker-time-panel-column-width` | `timeColumnWidth` | - | +| `@picker-time-panel-column-height` | `timeColumnHeight` | - | +| `@picker-time-panel-cell-height` | `timeCellHeight` | - | +| `@picker-panel-cell-height` | `cellHeight` | - | +| `@picker-panel-cell-width` | `cellWidth` | - | +| `@picker-text-height` | `textHeight` | - | +| `@picker-panel-without-time-cell-height` | `withoutTimeCellHeight` | - | + ### Descriptions 描述列表 @@ -827,8 +850,6 @@ Mentions 提及 | `@timeline-dot-bg` | `dotBg` | - | | `@timeline-item-padding-bottom` | `itemPaddingBottom` | - | - - ### Tooltip 文字提示