mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: migrate less to token for DatePicker (#42607)

Browse Source 
* 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>
This commit is contained in:
dingkang 2023-08-22 16:28:20 +08:00 committed by GitHub
parent 820a9213c3
commit d57c86d92c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 285 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/calendar/style/index.ts
View File

@ -1,6 +1,10 @@
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import type { PickerPanelToken } from '../../date-picker/style'; import type { PanelComponentToken, PickerPanelToken } from '../../date-picker/style';
import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style'; import {
genPanelStyle,
initPanelComponentToken,
initPickerPanelToken,
} from '../../date-picker/style';
import { resetComponent } from '../../style'; import { resetComponent } from '../../style';
import type { FullToken } from '../../theme/internal'; import type { FullToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@ -38,7 +42,7 @@ export interface ComponentToken {
itemActiveBg: string; itemActiveBg: string;
} }
interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken { interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelComponentToken {
calendarCls: string; calendarCls: string;
dateValueHeight: number; dateValueHeight: number;
weekHeight: number; weekHeight: number;
@ -213,14 +217,19 @@ export default genComponentStyleHook(
'Calendar', 'Calendar',
(token) => { (token) => {
const calendarCls = `${token.componentCls}-calendar`; const calendarCls = `${token.componentCls}-calendar`;
const calendarToken = mergeToken<CalendarToken>(token, initPickerPanelToken(token), { const calendarToken = mergeToken<CalendarToken>(
calendarCls, token,
pickerCellInnerCls: `${token.componentCls}-cell-inner`, initPickerPanelToken(token),
dateValueHeight: token.controlHeightSM, initPanelComponentToken(token),
weekHeight: token.controlHeightSM * 0.75, {
dateContentHeight: calendarCls,
(token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2, 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)]; return [genCalendarStyles(calendarToken)];
}, },

2
components/date-picker/__tests__/demo-extend.test.ts
View File

@ -1,3 +1,3 @@
import { extendTest } from '../../../tests/shared/demoTest'; import { extendTest } from '../../../tests/shared/demoTest';
extendTest('date-picker', { skip: ['locale.tsx'] }); extendTest('date-picker', { skip: ['locale.tsx', 'component-token.tsx'] });

2
components/date-picker/__tests__/demo.test.tsx
View File

@ -2,7 +2,7 @@ import dayjs from 'dayjs';
import * as React from 'react'; import * as React from 'react';
import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; 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) => <DatePicker {...props} value={dayjs()} />, { rootPropsTest('date-picker', (DatePicker, props) => <DatePicker {...props} value={dayjs()} />, {
findRootElements: () => document.querySelectorAll('.ant-picker, .ant-picker-dropdown'), findRootElements: () => document.querySelectorAll('.ant-picker, .ant-picker-dropdown'),

7
components/date-picker/demo/component-token.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
Component Token Debug.
## en-US
Component Token Debug.

51
components/date-picker/demo/component-token.tsx Normal file
View File

@ -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 = () => (
<ConfigProvider
theme={{
components: {
DatePicker: {
presetsWidth: 160,
zIndexPopup: 888,
cellHoverWithRangeBg: '#f0f0f0',
cellActiveWithRangeBg: '#e6bbff',
cellRangeBorderColor: 'green',
timeColumnWidth: 80,
timeColumnHeight: 250,
timeCellHeight: 30,
cellWidth: 64,
cellHeight: 40,
textHeight: 45,
withoutTimeCellHeight: 70,
},
},
}}
>
<Space direction="vertical">
<DatePicker
presets={[
{ label: 'Yesterday', value: dayjs().add(-1, 'd') },
{ label: 'Last Week', value: dayjs().add(-7, 'd') },
{ label: 'Last Month', value: dayjs().add(-1, 'month') },
]}
onChange={onChange}
/>
<RangePicker />
<TimePicker onChange={onChange} />
<DatePicker onChange={onChange} picker="month" />
</Space>
</ConfigProvider>
);
export default App;

5
components/date-picker/index.en-US.md
View File

@ -35,6 +35,7 @@ By clicking the input box, you can select a date from a popup calendar.
<code src="./demo/start-end.tsx" debug>Customized Range Picker</code> <code src="./demo/start-end.tsx" debug>Customized Range Picker</code>
<code src="./demo/suffix.tsx" debug>Suffix</code> <code src="./demo/suffix.tsx" debug>Suffix</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
## API ## 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). 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 ```jsx
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN'; import locale from 'antd/es/date-picker/locale/zh_CN';
import 'dayjs/locale/zh-cn';
<DatePicker locale={locale} />; <DatePicker locale={locale} />;
``` ```
```jsx ```jsx
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally. // 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 from 'dayjs';
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
import locale from 'antd/locale/zh_CN';
<ConfigProvider locale={locale}> <ConfigProvider locale={locale}>
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} /> <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />

6
components/date-picker/index.zh-CN.md
View File

@ -36,6 +36,7 @@ demo:
<code src="./demo/start-end.tsx" debug>自定义日期范围选择</code> <code src="./demo/start-end.tsx" debug>自定义日期范围选择</code>
<code src="./demo/suffix.tsx" debug>后缀图标</code> <code src="./demo/suffix.tsx" debug>后缀图标</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
## API ## API
@ -57,17 +58,17 @@ demo:
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。 如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
```jsx ```jsx
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN'; import locale from 'antd/es/date-picker/locale/zh_CN';
import 'dayjs/locale/zh-cn';
<DatePicker locale={locale} />; <DatePicker locale={locale} />;
``` ```
```jsx ```jsx
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
import locale from 'antd/locale/zh_CN';
<ConfigProvider locale={locale}> <ConfigProvider locale={locale}>
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} /> <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
@ -245,7 +246,6 @@ export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
```js ```js
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
import updateLocale from 'dayjs/plugin/updateLocale'; import updateLocale from 'dayjs/plugin/updateLocale';
dayjs.extend(updateLocale); dayjs.extend(updateLocale);

245
components/date-picker/style/index.ts
View File

@ -23,7 +23,72 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
export interface ComponentToken extends Exclude<SharedComponentToken, 'addonBg'> { 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<SharedComponentToken, 'addonBg'>,
PanelComponentToken {
/** /**
* @desc 预设区域宽度 * @desc 预设区域宽度
* @descEN Width of preset area * @descEN Width of preset area
@ -44,17 +109,8 @@ export interface ComponentToken extends Exclude<SharedComponentToken, 'addonBg'>
export type PickerPanelToken = { export type PickerPanelToken = {
pickerCellCls: string; pickerCellCls: string;
pickerCellInnerCls: string; pickerCellInnerCls: string;
pickerTextHeight: number;
pickerPanelCellWidth: number;
pickerPanelCellHeight: number;
pickerDateHoverRangeBorderColor: string;
pickerBasicCellHoverWithRangeColor: string;
pickerPanelWithoutTimeCellHeight: number;
pickerDatePanelPaddingHorizontal: number; pickerDatePanelPaddingHorizontal: number;
pickerYearMonthCellWidth: number; pickerYearMonthCellWidth: number;
pickerTimePanelColumnHeight: number;
pickerTimePanelColumnWidth: number;
pickerTimePanelCellHeight: number;
pickerCellPaddingVertical: number; pickerCellPaddingVertical: number;
pickerQuarterPanelContentHeight: number; pickerQuarterPanelContentHeight: number;
pickerCellBorderGap: number; pickerCellBorderGap: number;
@ -64,7 +120,7 @@ export type PickerPanelToken = {
type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken; type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken;
type SharedPickerToken = TokenWithCommonCls<GlobalToken> & PickerPanelToken; type SharedPickerToken = TokenWithCommonCls<GlobalToken> & PickerPanelToken & PanelComponentToken;
const genPikerPadding = ( const genPikerPadding = (
token: PickerToken, token: PickerToken,
@ -88,23 +144,23 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
componentCls, componentCls,
pickerCellCls, pickerCellCls,
pickerCellInnerCls, pickerCellInnerCls,
pickerPanelCellHeight, cellHeight,
motionDurationSlow, motionDurationSlow,
borderRadiusSM, borderRadiusSM,
motionDurationMid, motionDurationMid,
controlItemBgHover, cellHoverBg,
lineWidth, lineWidth,
lineType, lineType,
colorPrimary, colorPrimary,
controlItemBgActive, cellActiveWithRangeBg,
colorTextLightSolid, colorTextLightSolid,
controlHeightSM, controlHeightSM,
pickerDateHoverRangeBorderColor, cellRangeBorderColor,
pickerCellBorderGap, pickerCellBorderGap,
pickerBasicCellHoverWithRangeColor, cellHoverWithRangeBg,
pickerPanelCellWidth, cellWidth,
colorTextDisabled, colorTextDisabled,
colorBgContainerDisabled, cellBgDisabled,
} = token; } = token;
return { return {
@ -114,7 +170,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
insetInlineStart: 0, insetInlineStart: 0,
insetInlineEnd: 0, insetInlineEnd: 0,
zIndex: 1, zIndex: 1,
height: pickerPanelCellHeight, height: cellHeight,
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
transition: `all ${motionDurationSlow}`, transition: `all ${motionDurationSlow}`,
content: '""', content: '""',
@ -125,9 +181,9 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
position: 'relative', position: 'relative',
zIndex: 2, zIndex: 2,
display: 'inline-block', display: 'inline-block',
minWidth: pickerPanelCellHeight, minWidth: cellHeight,
height: pickerPanelCellHeight, height: cellHeight,
lineHeight: `${pickerPanelCellHeight}px`, lineHeight: `${cellHeight}px`,
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
transition: `background ${motionDurationMid}, border ${motionDurationMid}`, 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)`]: &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]:
{ {
[pickerCellInnerCls]: { [pickerCellInnerCls]: {
background: controlItemBgHover, background: cellHoverBg,
}, },
}, },
@ -167,7 +223,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
position: 'relative', position: 'relative',
'&::before': { '&::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-start:not(${pickerCellCls}-range-start-single),
&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: { &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: {
'&::before': { '&::before': {
background: controlItemBgActive, background: cellActiveWithRangeBg,
}, },
}, },
@ -207,8 +263,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
top: '50%', top: '50%',
zIndex: 0, zIndex: 0,
height: controlHeightSM, height: controlHeightSM,
borderTop: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderTop: `${lineWidth}px dashed ${cellRangeBorderColor}`,
borderBottom: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderBottom: `${lineWidth}px dashed ${cellRangeBorderColor}`,
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
transition: `all ${motionDurationSlow}`, transition: `all ${motionDurationSlow}`,
content: '""', content: '""',
@ -237,7 +293,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
${componentCls}-panel ${componentCls}-panel
> :not(${componentCls}-date-panel) > :not(${componentCls}-date-panel)
&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: { &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: {
background: pickerBasicCellHoverWithRangeColor, background: cellHoverWithRangeBg,
}, },
// range start border-radius // 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}-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-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after,
&-in-view${pickerCellCls}-range-hover-start::after`]: { &-in-view${pickerCellCls}-range-hover-start::after`]: {
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineStart: (cellWidth - cellHeight) / 2,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`,
borderStartStartRadius: borderRadiusSM, borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: 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}-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-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after,
&-in-view${pickerCellCls}-range-hover-end::after`]: { &-in-view${pickerCellCls}-range-hover-end::after`]: {
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineEnd: (cellWidth - cellHeight) / 2,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`,
borderStartEndRadius: borderRadiusSM, borderStartEndRadius: borderRadiusSM,
borderEndEndRadius: borderRadiusSM, borderEndEndRadius: borderRadiusSM,
}, },
@ -296,7 +352,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
}, },
'&::before': { '&::before': {
background: colorBgContainerDisabled, background: cellBgDisabled,
}, },
}, },
[`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: { [`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: {
@ -312,7 +368,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
pickerCellInnerCls, pickerCellInnerCls,
pickerYearMonthCellWidth, pickerYearMonthCellWidth,
pickerControlIconSize, pickerControlIconSize,
pickerPanelCellWidth, cellWidth,
paddingSM, paddingSM,
paddingXS, paddingXS,
paddingXXS, paddingXXS,
@ -325,35 +381,35 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
colorSplit, colorSplit,
pickerControlIconBorderWidth, pickerControlIconBorderWidth,
colorIcon, colorIcon,
pickerTextHeight, textHeight,
motionDurationMid, motionDurationMid,
colorIconHover, colorIconHover,
fontWeightStrong, fontWeightStrong,
pickerPanelCellHeight, cellHeight,
pickerCellPaddingVertical, pickerCellPaddingVertical,
colorTextDisabled, colorTextDisabled,
colorText, colorText,
fontSize, fontSize,
pickerBasicCellHoverWithRangeColor, cellHoverWithRangeBg,
motionDurationSlow, motionDurationSlow,
pickerPanelWithoutTimeCellHeight, withoutTimeCellHeight,
pickerQuarterPanelContentHeight, pickerQuarterPanelContentHeight,
colorLink, colorLink,
colorLinkActive, colorLinkActive,
colorLinkHover, colorLinkHover,
pickerDateHoverRangeBorderColor, cellRangeBorderColor,
borderRadiusSM, borderRadiusSM,
colorTextLightSolid, colorTextLightSolid,
controlItemBgHover, cellHoverBg,
pickerTimePanelColumnHeight, timeColumnHeight,
pickerTimePanelColumnWidth, timeColumnWidth,
pickerTimePanelCellHeight, timeCellHeight,
controlItemBgActive, controlItemBgActive,
marginXXS, marginXXS,
pickerDatePanelPaddingHorizontal, pickerDatePanelPaddingHorizontal,
} = token; } = token;
const pickerPanelWidth = pickerPanelCellWidth * 7 + pickerDatePanelPaddingHorizontal * 2; const pickerPanelWidth = cellWidth * 7 + pickerDatePanelPaddingHorizontal * 2;
const commonHoverCellFixedDistance = const commonHoverCellFixedDistance =
(pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth - paddingSM; (pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth - paddingSM;
@ -419,7 +475,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
button: { button: {
padding: 0, padding: 0,
color: colorIcon, color: colorIcon,
lineHeight: `${pickerTextHeight}px`, lineHeight: `${textHeight}px`,
background: 'transparent', background: 'transparent',
border: 0, border: 0,
cursor: 'pointer', cursor: 'pointer',
@ -439,7 +495,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
'&-view': { '&-view': {
flex: 'auto', flex: 'auto',
fontWeight: fontWeightStrong, fontWeight: fontWeightStrong,
lineHeight: `${pickerTextHeight}px`, lineHeight: `${textHeight}px`,
button: { button: {
color: 'inherit', color: 'inherit',
@ -518,12 +574,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
'th, td': { 'th, td': {
position: 'relative', position: 'relative',
minWidth: pickerPanelCellHeight, minWidth: cellHeight,
fontWeight: 'normal', fontWeight: 'normal',
}, },
th: { th: {
height: pickerPanelCellHeight + pickerCellPaddingVertical * 2, height: cellHeight + pickerCellPaddingVertical * 2,
color: colorText, color: colorText,
verticalAlign: 'middle', verticalAlign: 'middle',
}, },
@ -551,7 +607,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
top: 0, top: 0,
bottom: 0, bottom: 0,
zIndex: -1, zIndex: -1,
background: pickerBasicCellHoverWithRangeColor, background: cellHoverWithRangeBg,
transition: `all ${motionDurationSlow}`, transition: `all ${motionDurationSlow}`,
content: '""', content: '""',
}, },
@ -560,14 +616,14 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
[`&-date-panel [`&-date-panel
${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start
${pickerCellInnerCls}::after`]: { ${pickerCellInnerCls}::after`]: {
insetInlineEnd: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineEnd: -(cellWidth - cellHeight) / 2,
insetInlineStart: 0, insetInlineStart: 0,
}, },
[`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]: [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]:
{ {
insetInlineEnd: 0, insetInlineEnd: 0,
insetInlineStart: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineStart: -(cellWidth - cellHeight) / 2,
}, },
// Hover with range start & end // Hover with range start & end
@ -580,7 +636,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
&-quarter-panel, &-quarter-panel,
&-month-panel`]: { &-month-panel`]: {
[`${componentCls}-content`]: { [`${componentCls}-content`]: {
height: pickerPanelWithoutTimeCellHeight * 4, height: withoutTimeCellHeight * 4,
}, },
[pickerCellInnerCls]: { [pickerCellInnerCls]: {
@ -596,20 +652,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
// Quarter Panel Special Style // Quarter Panel Special Style
[`${componentCls}-cell-range-hover-start::after`]: { [`${componentCls}-cell-range-hover-start::after`]: {
insetInlineStart: quarterHoverCellFixedDistance, insetInlineStart: quarterHoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`,
[`${componentCls}-panel-rtl &`]: { [`${componentCls}-panel-rtl &`]: {
insetInlineEnd: quarterHoverCellFixedDistance, insetInlineEnd: quarterHoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`,
}, },
}, },
[`${componentCls}-cell-range-hover-end::after`]: { [`${componentCls}-cell-range-hover-end::after`]: {
insetInlineEnd: quarterHoverCellFixedDistance, insetInlineEnd: quarterHoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`,
[`${componentCls}-panel-rtl &`]: { [`${componentCls}-panel-rtl &`]: {
insetInlineStart: quarterHoverCellFixedDistance, insetInlineStart: quarterHoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`,
}, },
}, },
}, },
@ -622,12 +678,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
'&-footer': { '&-footer': {
width: 'min-content', width: 'min-content',
minWidth: '100%', minWidth: '100%',
lineHeight: `${pickerTextHeight - 2 * lineWidth}px`, lineHeight: `${textHeight - 2 * lineWidth}px`,
textAlign: 'center', textAlign: 'center',
'&-extra': { '&-extra': {
padding: `0 ${paddingSM}`, padding: `0 ${paddingSM}`,
lineHeight: `${pickerTextHeight - 2 * lineWidth}px`, lineHeight: `${textHeight - 2 * lineWidth}px`,
textAlign: 'start', textAlign: 'start',
'&:not(:last-child)': { '&:not(:last-child)': {
@ -716,20 +772,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
&-month-panel`]: { &-month-panel`]: {
[`${componentCls}-cell-range-hover-start::after`]: { [`${componentCls}-cell-range-hover-start::after`]: {
insetInlineStart: commonHoverCellFixedDistance, insetInlineStart: commonHoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`,
[`${componentCls}-panel-rtl &`]: { [`${componentCls}-panel-rtl &`]: {
insetInlineEnd: commonHoverCellFixedDistance, insetInlineEnd: commonHoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`,
}, },
}, },
[`${componentCls}-cell-range-hover-end::after`]: { [`${componentCls}-cell-range-hover-end::after`]: {
insetInlineEnd: commonHoverCellFixedDistance, insetInlineEnd: commonHoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`,
[`${componentCls}-panel-rtl &`]: { [`${componentCls}-panel-rtl &`]: {
insetInlineStart: commonHoverCellFixedDistance, insetInlineStart: commonHoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`,
}, },
}, },
}, },
@ -768,7 +824,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
[`&:hover td`]: { [`&:hover td`]: {
'&:before': { '&:before': {
background: controlItemBgHover, background: cellHoverBg,
}, },
}, },
@ -804,10 +860,10 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
}, },
[`${componentCls}-content`]: { [`${componentCls}-content`]: {
width: pickerPanelCellWidth * 7, width: cellWidth * 7,
th: { th: {
width: pickerPanelCellWidth, width: cellWidth,
boxSizing: 'border-box', boxSizing: 'border-box',
padding: 0, padding: 0,
}, },
@ -849,12 +905,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
[`${componentCls}-content`]: { [`${componentCls}-content`]: {
display: 'flex', display: 'flex',
flex: 'auto', flex: 'auto',
height: pickerTimePanelColumnHeight, height: timeColumnHeight,
}, },
'&-column': { '&-column': {
flex: '1 0 auto', flex: '1 0 auto',
width: pickerTimePanelColumnWidth, width: timeColumnWidth,
margin: `${paddingXXS}px 0`, margin: `${paddingXXS}px 0`,
padding: 0, padding: 0,
overflowY: 'hidden', overflowY: 'hidden',
@ -865,7 +921,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
'&::after': { '&::after': {
display: 'block', display: 'block',
height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight, height: timeColumnHeight - timeCellHeight,
content: '""', content: '""',
}, },
@ -889,20 +945,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
marginInline: marginXXS, marginInline: marginXXS,
[`${componentCls}-time-panel-cell-inner`]: { [`${componentCls}-time-panel-cell-inner`]: {
display: 'block', display: 'block',
width: pickerTimePanelColumnWidth - 2 * marginXXS, width: timeColumnWidth - 2 * marginXXS,
height: pickerTimePanelCellHeight, height: timeCellHeight,
margin: 0, margin: 0,
paddingBlock: 0, paddingBlock: 0,
paddingInlineEnd: 0, paddingInlineEnd: 0,
paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2, paddingInlineStart: (timeColumnWidth - timeCellHeight) / 2,
color: colorText, color: colorText,
lineHeight: `${pickerTimePanelCellHeight}px`, lineHeight: `${timeCellHeight}px`,
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
cursor: 'pointer', cursor: 'pointer',
transition: `background ${motionDurationMid}`, transition: `background ${motionDurationMid}`,
'&:hover': { '&:hover': {
background: controlItemBgHover, background: cellHoverBg,
}, },
}, },
@ -925,7 +981,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
}, },
// https://github.com/ant-design/ant-design/issues/39227 // https://github.com/ant-design/ant-design/issues/39227
[`&-datetime-panel ${componentCls}-time-panel-column:after`]: { [`&-datetime-panel ${componentCls}-time-panel-column:after`]: {
height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight + paddingXXS * 2, height: timeColumnHeight - timeCellHeight + paddingXXS * 2,
}, },
}, },
}; };
@ -1018,8 +1074,8 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
zIndexPopup, zIndexPopup,
paddingXXS, paddingXXS,
paddingSM, paddingSM,
pickerTextHeight, textHeight,
controlItemBgActive, cellActiveWithRangeBg,
colorPrimaryBorder, colorPrimaryBorder,
sizePopupArrow, sizePopupArrow,
borderRadiusXS, borderRadiusXS,
@ -1029,7 +1085,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
boxShadowSecondary, boxShadowSecondary,
borderRadiusSM, borderRadiusSM,
colorSplit, colorSplit,
controlItemBgHover, cellHoverBg,
presetsWidth, presetsWidth,
presetsMaxWidth, presetsMaxWidth,
boxShadowPopoverArrow, boxShadowPopoverArrow,
@ -1311,7 +1367,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
marginBottom: 0, marginBottom: 0,
padding: `${paddingXXS}px ${paddingSM}px`, padding: `${paddingXXS}px ${paddingSM}px`,
overflow: 'hidden', overflow: 'hidden',
lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`, lineHeight: `${textHeight - 2 * lineWidth - paddingXS / 2}px`,
textAlign: 'start', textAlign: 'start',
listStyle: 'none', listStyle: 'none',
display: 'flex', display: 'flex',
@ -1324,7 +1380,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
// https://github.com/ant-design/ant-design/issues/23687 // https://github.com/ant-design/ant-design/issues/23687
[`${componentCls}-preset > ${antCls}-tag-blue`]: { [`${componentCls}-preset > ${antCls}-tag-blue`]: {
color: colorPrimary, color: colorPrimary,
background: controlItemBgActive, background: cellActiveWithRangeBg,
borderColor: colorPrimaryBorder, borderColor: colorPrimaryBorder,
cursor: 'pointer', cursor: 'pointer',
}, },
@ -1398,7 +1454,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
}, },
'&:hover': { '&:hover': {
background: controlItemBgHover, background: cellHoverBg,
}, },
}, },
}, },
@ -1472,23 +1528,12 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
}; };
export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): PickerPanelToken => { export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): PickerPanelToken => {
const pickerTimePanelCellHeight = 28; const { componentCls, controlHeightLG, paddingXXS, padding } = token;
const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS, padding } =
token;
return { return {
pickerCellCls: `${componentCls}-cell`, pickerCellCls: `${componentCls}-cell`,
pickerCellInnerCls: `${componentCls}-cell-inner`, 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, pickerYearMonthCellWidth: controlHeightLG * 1.5,
pickerTimePanelColumnHeight: pickerTimePanelCellHeight * 8,
pickerTimePanelColumnWidth: controlHeightLG * 1.4,
pickerTimePanelCellHeight,
pickerQuarterPanelContentHeight: controlHeightLG * 1.4, pickerQuarterPanelContentHeight: controlHeightLG * 1.4,
pickerCellPaddingVertical: paddingXXS + paddingXXS / 2, pickerCellPaddingVertical: paddingXXS + paddingXXS / 2,
pickerCellBorderGap: 2, // Magic for gap between cells pickerCellBorderGap: 2, // Magic for gap between cells
@ -1498,6 +1543,21 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): 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 ==============================
export default genComponentStyleHook( export default genComponentStyleHook(
'DatePicker', 'DatePicker',
@ -1516,6 +1576,7 @@ export default genComponentStyleHook(
}, },
(token) => ({ (token) => ({
...initComponentToken(token), ...initComponentToken(token),
...initPanelComponentToken(token),
presetsWidth: 120, presetsWidth: 120,
presetsMaxWidth: 200, presetsMaxWidth: 200,
zIndexPopup: token.zIndexPopupBase + 50, zIndexPopup: token.zIndexPopupBase + 50,

25
docs/react/migrate-less-variables.en-US.md
View File

@ -17,6 +17,8 @@ We could configure global token and component token for each component through t
import React from 'react'; import React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd'; import { Checkbox, ConfigProvider, Radio } from 'antd';
import { Checkbox, ConfigProvider, Radio } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<ConfigProvider <ConfigProvider
theme={{ theme={{
@ -268,6 +270,27 @@ export default App;
| `@collapse-content-bg` | `contentBg` | - | | `@collapse-content-bg` | `contentBg` | - |
| `@collapse-header-arrow-left` | - | Deprecated | | `@collapse-header-arrow-left` | - | Deprecated |
### DatePicker
<!-- prettier-ignore -->
| 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 ### Descriptions
<!-- prettier-ignore --> <!-- prettier-ignore -->
@ -829,8 +852,6 @@ export default App;
| `@timeline-dot-bg` | `dotBg` | - | | `@timeline-dot-bg` | `dotBg` | - |
| `@timeline-item-padding-bottom` | `itemPaddingBottom` | - | | `@timeline-item-padding-bottom` | `itemPaddingBottom` | - |
<!-- ### TimePicker -->
### Tooltip ### Tooltip
<!-- prettier-ignore --> <!-- prettier-ignore -->

25
docs/react/migrate-less-variables.zh-CN.md
View File

@ -17,6 +17,8 @@ title: 从 Less 变量到 Design Token
import React from 'react'; import React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd'; import { Checkbox, ConfigProvider, Radio } from 'antd';
import { Checkbox, ConfigProvider, Radio } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<ConfigProvider <ConfigProvider
theme={{ theme={{
@ -266,6 +268,27 @@ export default App;
| `@collapse-content-bg` | `contentBg` | - | | `@collapse-content-bg` | `contentBg` | - |
| `@collapse-header-arrow-left` | - | 已废弃 | | `@collapse-header-arrow-left` | - | 已废弃 |
### DatePicker 日期选择框
<!-- prettier-ignore -->
| 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 描述列表 ### Descriptions 描述列表
<!-- prettier-ignore --> <!-- prettier-ignore -->
@ -827,8 +850,6 @@ Mentions 提及
| `@timeline-dot-bg` | `dotBg` | - | | `@timeline-dot-bg` | `dotBg` | - |
| `@timeline-item-padding-bottom` | `itemPaddingBottom` | - | | `@timeline-item-padding-bottom` | `itemPaddingBottom` | - |
<!-- ### TimePicker 时间选择 -->
### Tooltip 文字提示 ### Tooltip 文字提示
<!-- prettier-ignore --> <!-- prettier-ignore -->