chore: auto merge branches (#43378)

chore: merge master into feature
This commit is contained in:
github-actions[bot] 2023-07-05 10:16:04 +00:00 committed by GitHub
commit 1ad266f7bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 1030 additions and 94 deletions

View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
import { css } from '@emotion/react';
import * as React from 'react';
import useSiteToken from '../../../hooks/useSiteToken';
interface ColorChunkProps {
@ -23,7 +23,7 @@ const useStyle = () => {
display: inline-block;
width: 6px;
height: 6px;
border-radius: ${token.borderRadiusSM}px;
border-radius: 50%;
margin-inline-end: 4px;
border: 1px solid ${token.colorSplit};
`,

View File

@ -17,12 +17,16 @@ const locales = {
description: '描述',
type: '类型',
value: '默认值',
componentToken: '组件 Token',
globalToken: '全局 Token',
},
en: {
token: 'Token Name',
description: 'Description',
type: 'Type',
value: 'Default Value',
componentToken: 'Component Token',
globalToken: 'Global Token',
},
};
@ -48,9 +52,10 @@ interface SubTokenTableProps {
defaultOpen?: boolean;
title: string;
tokens: string[];
component?: string;
}
const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title }) => {
const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title, component }) => {
const [, lang] = useLocale(locales);
const { token } = useSiteToken();
const columns = useColumns();
@ -64,7 +69,10 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
}
const data = tokens
.sort((token1, token2) => {
.sort(
component
? undefined
: (token1, token2) => {
const hasColor1 = token1.toLowerCase().includes('color');
const hasColor2 = token2.toLowerCase().includes('color');
@ -77,9 +85,12 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
}
return token1 < token2 ? -1 : 1;
})
},
)
.map((name) => {
const meta = tokenMeta[name];
const meta = component
? tokenMeta.components[component].find((item) => item.token === name)
: tokenMeta.global[name];
if (!meta) {
return null;
@ -89,7 +100,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
name,
desc: lang === 'cn' ? meta.desc : meta.descEn,
type: meta.type,
value: defaultToken[name],
value: component ? tokenData[component].component[name] : defaultToken[name],
};
})
.filter(Boolean);
@ -122,28 +133,31 @@ export interface ComponentTokenTableProps {
}
const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component }) => {
const [locale] = useLocale(locales);
const [mergedGlobalTokens] = useMemo(() => {
const globalTokenSet = new Set<string>();
let componentTokens: Record<string, string> = {};
component.split(',').forEach((comp) => {
const { global: globalTokens = [], component: singleComponentTokens = [] } =
tokenData[comp] || {};
const { global: globalTokens = [] } = tokenData[comp] || {};
globalTokens.forEach((token: string) => {
globalTokenSet.add(token);
});
componentTokens = {
...componentTokens,
...singleComponentTokens,
};
});
return [Array.from(globalTokenSet), componentTokens] as const;
return [Array.from(globalTokenSet)] as const;
}, [component]);
return <SubTokenTable title="Global Token" tokens={mergedGlobalTokens} />;
return (
<>
<SubTokenTable
title={locale.componentToken}
tokens={tokenMeta.components[component].map((item) => item.token)}
component={component}
/>
<SubTokenTable title={locale.globalToken} tokens={mergedGlobalTokens} />
</>
);
};
export default React.memo(ComponentTokenTable);

View File

@ -98,7 +98,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
const data = React.useMemo<TokenData[]>(
() =>
Object.entries(tokenMeta)
Object.entries(tokenMeta.global)
.filter(([, meta]) => meta.source === type)
.map(([token, meta]) => ({
name: token,

View File

@ -4,12 +4,20 @@ const path = require('path');
const blogList = [
'check-conduct',
'contributor-development-maintenance-guide',
'css-in-js',
'extract-ssr',
'getContainer',
'github-actions-workflow',
'issue-helper',
'mock-project-build',
'modal-hook-order',
'render-times',
'testing-migrate',
'render-times',
'to-be-collaborator',
'tooltip-align',
'tree-shaking',
'why-not-static',
].map((blogName) => path.join(__dirname, `../../docs/blog/${blogName}.en-US.md`));
describe('blog', () => {

View File

@ -1,4 +1,5 @@
import * as React from 'react';
import type { AnyObject } from './type';
export const { isValidElement } = React;
@ -6,8 +7,6 @@ export function isFragment(child: any): boolean {
return child && isValidElement(child) && child.type === React.Fragment;
}
type AnyObject = Record<PropertyKey, any>;
type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void);
export function replaceElement(

View File

@ -1,2 +1,4 @@
/** https://github.com/Microsoft/TypeScript/issues/29729 */
export type LiteralUnion<T extends string> = T | (string & {});
export type AnyObject = Record<PropertyKey, any>;

View File

@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Link horizontal padding
*/
linkPaddingBlock: number;
/**
* @desc
* @descEN Link vertical padding
*/
linkPaddingInlineStart: number;
}

View File

@ -4,14 +4,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Background color of Avatar
*/
containerSize: number;
/**
* @desc
* @descEN Size of large Avatar
*/
containerSizeLG: number;
/**
* @desc
* @descEN Size of small Avatar
*/
containerSizeSM: number;
/**
* @desc
* @descEN Font size of Avatar
*/
textFontSize: number;
/**
* @desc
* @descEN Font size of large Avatar
*/
textFontSizeLG: number;
/**
* @desc
* @descEN Font size of small Avatar
*/
textFontSizeSM: number;
/**
* @desc
* @descEN Spacing between avatars in a group
*/
groupSpace: number;
/**
* @desc
* @descEN Overlapping of avatars in a group
*/
groupOverlapping: number;
/**
* @desc
* @descEN Border color of avatars in a group
*/
groupBorderColor: string;
}

View File

@ -4,12 +4,40 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Text color of Breadcrumb item
*/
itemColor: string;
/**
* @desc
* @descEN Icon size
*/
iconFontSize: number;
/**
* @desc
* @descEN Text color of link
*/
linkColor: string;
/**
* @desc
* @descEN Color of hovered link
*/
linkHoverColor: string;
/**
* @desc
* @descEN Text color of the last item
*/
lastItemColor: string;
/**
* @desc
* @descEN Margin of separator
*/
separatorMargin: number;
/**
* @desc
* @descEN Color of separator
*/
separatorColor: string;
}

View File

@ -8,11 +8,35 @@ import type { FullToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Width of year select
*/
yearControlWidth: number;
/**
* @desc
* @descEN Width of month select
*/
monthControlWidth: number;
/**
* @desc
* @descEN Height of mini calendar content
*/
miniContentHeight: number;
/**
* @desc
* @descEN Background color of full calendar
*/
fullBg: string;
/**
* @desc
* @descEN Background color of full calendar panel
*/
fullPanelBg: string;
/**
* @desc
* @descEN Background color of selected date item
*/
itemActiveBg: string;
}

View File

@ -5,14 +5,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Background color of card header
*/
headerBg: string;
/**
* @desc
* @descEN Font size of card header
*/
headerFontSize: number;
/**
* @desc
* @descEN Font size of small card header
*/
headerFontSizeSM: number;
/**
* @desc
* @descEN Height of card header
*/
headerHeight: number;
/**
* @desc
* @descEN Height of small card header
*/
headerHeightSM: number;
/**
* @desc
* @descEN Background color of card actions
*/
actionsBg: string;
/**
* @desc
* @descEN Margin of each item in card actions
*/
actionsLiMargin: string;
/**
* @desc
* @descEN Margin bottom of tabs component
*/
tabsMarginBottom: number;
/**
* @desc
* @descEN Text color of extra area
*/
extraColor: string;
}

View File

@ -3,10 +3,22 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Width of indicator
*/
dotWidth: number;
/**
* @desc
* @descEN Height of indicator
*/
dotHeight: number;
/** @deprecated Use `dotActiveWidth` instead. */
dotWidthActive: number;
/**
* @desc
* @descEN Width of active indicator
*/
dotActiveWidth: number;
}

View File

@ -1,12 +1,24 @@
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal';
import { textEllipsis } from '../../style';
import { genCompactItemStyle } from '../../style/compact-item';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Width of Cascader
*/
controlWidth: number;
/**
* @desc
* @descEN Width of item
*/
controlItemWidth: number;
/**
* @desc
* @descEN Height of dropdown
*/
dropdownHeight: number;
}

View File

@ -23,8 +23,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
export interface ComponentToken {
/**
* @desc
* @descEN Width of preset area
*/
presetsWidth: number;
/**
* @desc
* @descEN Max width of preset area
*/
presetsMaxWidth: number;
/**
* @desc z-index
* @descEN z-index of popup
*/
zIndexPopup: number;
}

View File

@ -6,11 +6,35 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
// Component token here
/**
* @desc
* @descEN Background color of label
*/
labelBg: string;
/**
* @desc
* @descEN Bottom margin of title
*/
titleMarginBottom: number;
/**
* @desc
* @descEN Bottom padding of item
*/
itemPaddingBottom: number;
/**
* @desc
* @descEN Right margin of colon
*/
colonMarginRight: number;
/**
* @desc
* @descEN Left margin of colon
*/
colonMarginLeft: number;
/**
* @desc
* @descEN Text color of extra area
*/
extraColor: string;
}

View File

@ -3,8 +3,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genMotionStyle from './motion';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of drawer
*/
zIndexPopup: number;
/**
* @desc
* @descEN Horizontal padding of footer
*/
footerPaddingBlock: number;
/**
* @desc
* @descEN Vertical padding of footer
*/
footerPaddingInline: number;
}

View File

@ -14,6 +14,10 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genStatusStyle from './status';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of dropdown
*/
zIndexPopup: number;
}

View File

@ -7,9 +7,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of preview popup
*/
zIndexPopup: number;
/**
* @desc
* @descEN Size of preview operation icon
*/
previewOperationSize: number;
/**
* @desc
* @descEN Color of preview operation icon
*/
previewOperationColor: string;
/**
* @desc
* @descEN Disabled color of preview operation icon
*/
previewOperationColorDisabled: string;
}

View File

@ -15,10 +15,26 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Width of input
*/
controlWidth: number;
/**
* @desc
* @descEN Width of control button
*/
handleWidth: number;
/**
* @desc
* @descEN Icon size of control button
*/
handleFontSize: number;
/** Default `auto`. Set `true` will always show the handle */
/**
* Default `auto`. Set `true` will always show the handle
* @desc
* @descEN Handle visible
*/
handleVisible: 'auto' | true;
}

View File

@ -5,16 +5,60 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Width of content
*/
contentWidth: number;
/**
* @desc
* @descEN Padding of large item
*/
itemPaddingLG: string;
/**
* @desc
* @descEN Padding of small item
*/
itemPaddingSM: string;
/**
* @desc
* @descEN Padding of item
*/
itemPadding: string;
/**
* @desc
* @descEN Background color of header
*/
headerBg: string;
/**
* @desc
* @descEN Background color of footer
*/
footerBg: string;
/**
* @desc
* @descEN Padding of empty text
*/
emptyTextPadding: CSSProperties['padding'];
/**
* @desc Meta
* @descEN Margin bottom of meta
*/
metaMarginBottom: CSSProperties['marginBottom'];
/**
* @desc
* @descEN Right margin of avatar
*/
avatarMarginRight: CSSProperties['marginRight'];
/**
* @desc
* @descEN Margin bottom of title
*/
titleMarginBottom: CSSProperties['marginBottom'];
/**
* @desc
* @descEN Font size of description
*/
descriptionFontSize: number;
}

View File

@ -7,13 +7,25 @@ import {
genStatusStyle,
initInputToken,
} from '../../input/style';
import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal';
import { resetComponent, textEllipsis } from '../../style';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of popup
*/
zIndexPopup: number;
/**
* @desc
* @descEN Height of popup
*/
dropdownHeight: number;
/**
* @desc
* @descEN Height of menu item
*/
controlItemWidth: number;
}

View File

@ -11,112 +11,223 @@ import getVerticalStyle from './vertical';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
/**
* @desc
* @descEN Width of popup menu
*/
dropdownWidth: number;
/**
* @desc z-index
* @descEN z-index of popup menu
*/
zIndexPopup: number;
// Group
/** @deprecated Use `groupTitleColor` instead */
colorGroupTitle: string;
/**
* @desc
* @descEN Color of group title text
*/
groupTitleColor: string;
// radius
/** @deprecated Use `itemBorderRadius` instead */
radiusItem: number;
/**
* @desc
* @descEN Radius of menu item
*/
itemBorderRadius: number;
/** @deprecated Use `subMenuItemBorderRadius` instead */
radiusSubMenuItem: number;
/**
* @desc
* @descEN Radius of sub-menu item
*/
subMenuItemBorderRadius: number;
// Item Text
// > Default
/** @deprecated Use `itemColor` instead */
colorItemText: string;
/**
* @desc
* @descEN Color of menu item text
*/
itemColor: string;
/** @deprecated Use `itemHoverColor` instead */
colorItemTextHover: string;
/**
* @desc
* @descEN Hover color of menu item text
*/
itemHoverColor: string;
/** @deprecated Use `horizontalItemHoverColor` instead */
colorItemTextHoverHorizontal: string;
/**
* @desc
* @descEN Hover color of horizontal menu item text
*/
horizontalItemHoverColor: string;
/** @deprecated Use `itemSelectedColor` instead */
colorItemTextSelected: string;
/**
* @desc
* @descEN Color of selected menu item text
*/
itemSelectedColor: string;
/** @deprecated Use `horizontalItemSelectedColor` instead */
colorItemTextSelectedHorizontal: string;
/**
* @desc
* @descEN Color of selected horizontal menu item text
*/
horizontalItemSelectedColor: string;
// > Disabled
/** @deprecated Use `itemDisabledColor` instead */
colorItemTextDisabled: string;
/**
* @desc
* @descEN Color of disabled menu item text
*/
itemDisabledColor: string;
// > Danger
/** @deprecated Use `dangerItemColor` instead */
colorDangerItemText: string;
/**
* @desc
* @descEN Color of danger menu item text
*/
dangerItemColor: string;
/** @deprecated Use `dangerItemHoverColor` instead */
colorDangerItemTextHover: string;
/**
* @desc
* @descEN Hover color of danger menu item text
*/
dangerItemHoverColor: string;
/** @deprecated Use `dangerItemSelectedColor` instead */
colorDangerItemTextSelected: string;
/**
* @desc
* @descEN Color of selected danger menu item text
*/
dangerItemSelectedColor: string;
/** @deprecated Use `dangerItemActiveBg` instead */
colorDangerItemBgActive: string;
/**
* @desc
* @descEN Color of active danger menu item text
*/
dangerItemActiveBg: string;
/** @deprecated Use `dangerItemSelectedBg` instead */
colorDangerItemBgSelected: string;
/**
* @desc
* @descEN Color of selected danger menu item text
*/
dangerItemSelectedBg: string;
// Item Bg
/** @deprecated Use `itemBg` instead */
colorItemBg: string;
/**
* @desc
*/
itemBg: string;
/** @deprecated Use `itemHoverBg` instead */
colorItemBgHover: string;
/**
* @desc
* @descEN Background color of menu item when hover
*/
itemHoverBg: string;
/** @deprecated Use `subMenuItemBg` instead */
colorSubItemBg: string;
/**
* @desc
* @descEN Background color of sub-menu item
*/
subMenuItemBg: string;
// > Default
/** @deprecated Use `itemActiveBg` instead */
colorItemBgActive: string;
/**
* @desc
* @descEN Background color of menu item when active
*/
itemActiveBg: string;
/** @deprecated Use `itemSelectedBg` instead */
colorItemBgSelected: string;
/**
* @desc
* @descEN Background color of menu item when selected
*/
itemSelectedBg: string;
/** @deprecated Use `horizontalItemSelectedBg` instead */
colorItemBgSelectedHorizontal: string;
/**
* @desc
* @descEN Background color of horizontal menu item when selected
*/
horizontalItemSelectedBg: string;
// Ink Bar
/** @deprecated Use `activeBarWidth` instead */
colorActiveBarWidth: number;
/**
* @desc
* @descEN Width of menu item active bar
*/
activeBarWidth: number;
/** @deprecated Use `activeBarHeight` instead */
colorActiveBarHeight: number;
/**
* @desc
* @descEN Height of menu item active bar
*/
activeBarHeight: number;
/** @deprecated Use `activeBarBorderWidth` instead */
colorActiveBarBorderSize: number;
/**
* @desc
* @descEN Border width of menu item active bar
*/
activeBarBorderWidth: number;
/**
* @desc
* @descEN Horizontal margin of menu item
*/
itemMarginInline: number;
/**
* @desc
* @descEN Background color of horizontal menu item when hover
*/
horizontalItemHoverBg: string;
/**
* @desc
* @descEN Border radius of horizontal menu item
*/
horizontalItemBorderRadius: number;
}

View File

@ -9,8 +9,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
// Component token here
/**
* @desc z-index
* @descEN z-index of Message
*/
zIndexPopup: number;
/**
* @desc
* @descEN Background color of Message
*/
contentBg: string;
/**
* @desc
* @descEN Padding of Message
*/
contentPadding: CSSProperties['padding'];
}

View File

@ -8,11 +8,35 @@ import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
// Component token here
/**
* @desc
* @descEN Background color of header
*/
headerBg: string;
/**
* @desc
* @descEN Line height of title
*/
titleLineHeight: number;
/**
* @desc
* @descEN Font size of title
*/
titleFontSize: number;
/**
* @desc
* @descEN Font color of title
*/
titleColor: string;
/**
* @desc
* @descEN Background color of content
*/
contentBg: string;
/**
* @desc
* @descEN Background color of footer
*/
footerBg: string;
}

View File

@ -7,7 +7,15 @@ import genNotificationPlacementStyle from './placement';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of Notification
*/
zIndexPopup: number;
/**
* @desc
* @descEN Width of Notification
*/
width: number;
}

View File

@ -10,14 +10,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Background color of Pagination item
*/
itemBg: string;
/**
* @desc
* @descEN Size of Pagination item
*/
itemSize: number;
/**
* @desc
* @descEN Background color of active Pagination item
*/
itemActiveBg: string;
/**
* @desc
* @descEN Size of small Pagination item
*/
itemSizeSM: number;
/**
* @desc
* @descEN Background color of Pagination item link
*/
itemLinkBg: string;
/**
* @desc
* @descEN Background color of disabled active Pagination item
*/
itemActiveBgDisabled: string;
/**
* @desc
* @descEN Text color of disabled active Pagination item
*/
itemActiveColorDisabled: string;
/**
* @desc
* @descEN Background color of input
*/
itemInputBg: string;
/**
* @desc top
* @descEN Top of Pagination size changer
*/
miniOptionsSizeChangerTop: number;
}

View File

@ -2,6 +2,10 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of Popconfirm
*/
zIndexPopup: number;
}

View File

@ -5,8 +5,20 @@ import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/inte
import { PresetColors, genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Width of Popover
*/
width: number;
/**
* @desc
* @descEN Min width of Popover
*/
minWidth: number;
/**
* @desc z-index
* @descEN z-index of Popover
*/
zIndexPopup: number;
}

View File

@ -6,18 +6,62 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
// ============================== Tokens ==============================
export interface ComponentToken {
// Radio
/**
* @desc
* @descEN Radio size
*/
radioSize: number;
/**
* @desc
* @descEN Size of Radio dot
*/
dotSize: number;
/**
* @desc
* @descEN Color of disabled Radio dot
*/
dotColorDisabled: string;
// Radio buttons
/**
* @desc
* @descEN Background color of Radio button
*/
buttonBg: string;
/**
* @desc
* @descEN Background color of checked Radio button
*/
buttonCheckedBg: string;
/**
* @desc
* @descEN Color of Radio button text
*/
buttonColor: string;
/**
* @desc
* @descEN Horizontal padding of Radio button
*/
buttonPaddingInline: number;
/**
* @desc
* @descEN Background color of checked and disabled Radio button
*/
buttonCheckedBgDisabled: string;
/**
* @desc
* @descEN Color of checked and disabled Radio button text
*/
buttonCheckedColorDisabled: string;
/**
* @desc
* @descEN Color of checked solid Radio button text
*/
buttonSolidCheckedColor: string;
/**
* @desc
* @descEN Margin right of Radio button
*/
wrapperMarginInlineEnd: number;
}

View File

@ -4,9 +4,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export type ComponentToken = {
/**
* @desc
* @descEN Star color
*/
starColor: string;
/**
* @desc
* @descEN Star size
*/
starSize: number;
/**
* @desc
* @descEN Scale of star when hover
*/
starHoverScale: CSSObject['transform'];
/**
* @desc
* @descEN Star background color
*/
starBg: string;
};

View File

@ -4,9 +4,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Title font size
*/
titleFontSize: number;
/**
* @desc
* @descEN Subtitle font size
*/
subtitleFontSize: number;
/**
* @desc
* @descEN Icon size
*/
iconFontSize: number;
/**
* @desc
* @descEN Margin of extra area
*/
extraMargin: CSSProperties['margin'];
}

View File

@ -4,10 +4,30 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Text color of item
*/
itemColor: string;
/**
* @desc
* @descEN Text color of item when hover
*/
itemHoverColor: string;
/**
* @desc
* @descEN Background color of item when hover
*/
itemHoverBg: string;
/**
* @desc
* @descEN Background color of item when active
*/
itemActiveBg: string;
/**
* @desc
* @descEN Background color of item when selected
*/
itemSelectedBg: string;
}

View File

@ -8,6 +8,10 @@ import genMultipleStyle from './multiple';
import genSingleStyle from './single';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of dropdown
*/
zIndexPopup: number;
}

View File

@ -8,11 +8,35 @@ export type ComponentToken = {
color: string;
/** @deprecated use gradientToColor instead. */
colorGradientEnd: string;
/**
* @desc
* @descEN Start color of gradient
*/
gradientFromColor: string;
/**
* @desc
* @descEN End color of gradient
*/
gradientToColor: string;
/**
* @desc
* @descEN Height of title skeleton
*/
titleHeight: number;
/**
* @desc
* @descEN Border radius of skeleton
*/
blockRadius: number;
/**
* @desc
* @descEN Margin top of paragraph skeleton
*/
paragraphMarginTop: number;
/**
* @desc
* @descEN Line height of paragraph skeleton
*/
paragraphLiHeight: number;
};

View File

@ -12,12 +12,40 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
// horizontal: full (水平时,水平方向命名为 full)
export interface ComponentToken {
/**
* @desc
* @descEN Height of slider
*/
controlSize: number;
/**
* @desc
* @descEN Height of rail
*/
railSize: number;
/**
* @desc
* @descEN Size of handle
*/
handleSize: number;
/**
* @desc
* @descEN Size of handle when hover
*/
handleSizeHover: number;
/**
* @desc
* @descEN Border width of handle
*/
handleLineWidth: number;
/**
* @desc
* @descEN Border width of handle when hover
*/
handleLineWidthHover: number;
/**
* @desc
* @descEN Size of dot
*/
dotSize: number;
railBg: string;
railHoverBg: string;

View File

@ -1,10 +1,14 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent } from '../../style';
export interface ComponentToken {
/**
* @desc
* @descEN Height of content area
*/
contentHeight: number;
}

View File

@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Title font size
*/
titleFontSize: number;
/**
* @desc
* @descEN Content font size
*/
contentFontSize: number;
}

View File

@ -14,18 +14,70 @@ import genStepsSmallStyle from './small';
import genStepsVerticalStyle from './vertical';
export interface ComponentToken {
/**
* @desc
* @descEN Max width of description area
*/
descriptionMaxWidth: number;
/**
* @desc
* @descEN Size of custom icon container
*/
customIconSize: number;
/**
* @desc top
* @descEN Top of custom icon
*/
customIconTop: number;
/**
* @desc
* @descEN Font size of custom icon
*/
customIconFontSize: number;
/**
* @desc
* @descEN Size of icon container
*/
iconSize: number;
/**
* @desc top
* @descEN Top of icon
*/
iconTop: number;
/**
* @desc
* @descEN Size of icon
*/
iconFontSize: number;
/**
* @desc
* @descEN Size of dot
*/
dotSize: number;
/**
* @desc
* @descEN Current size of dot
*/
dotCurrentSize: number;
/**
* @desc
* @descEN Color of arrow in nav
*/
navArrowColor: string;
/**
* @desc
* @descEN Max width of nav content
*/
navContentMaxWidth: CSSProperties['maxWidth'];
/**
* @desc
* @descEN Size of small steps icon
*/
iconSizeSM: number;
/**
* @desc
* @descEN Line height of title
*/
titleLineHeight: number;
}

View File

@ -5,6 +5,7 @@ import omit from 'rc-util/lib/omit';
import * as React from 'react';
import type { Breakpoint } from '../_util/responsiveObserver';
import scrollTo from '../_util/scrollTo';
import type { AnyObject } from '../_util/type';
import warning from '../_util/warning';
import type { SizeType } from '../config-provider/SizeContext';
import type { ConfigConsumerProps } from '../config-provider/context';
@ -19,7 +20,6 @@ import Spin from '../spin';
import type { TooltipProps } from '../tooltip';
import renderExpandIcon from './ExpandIcon';
import RcTable from './RcTable';
import type { AnyObject } from './Table';
import type { FilterState } from './hooks/useFilter';
import useFilter, { getFilterData } from './hooks/useFilter';
import useLazyKVMap from './hooks/useLazyKVMap';
@ -109,7 +109,7 @@ export interface TableProps<RecordType>
showSorterTooltip?: boolean | TooltipProps;
}
const InternalTable = <RecordType extends AnyObject = any>(
const InternalTable = <RecordType extends AnyObject = AnyObject>(
props: InternalTableProps<RecordType>,
ref: React.MutableRefObject<HTMLDivElement>,
) => {

View File

@ -1,5 +1,6 @@
import { EXPAND_COLUMN, Summary } from 'rc-table';
import * as React from 'react';
import type { AnyObject } from '../_util/type';
import Column from './Column';
import ColumnGroup from './ColumnGroup';
import type { TableProps } from './InternalTable';
@ -12,13 +13,11 @@ import {
} from './hooks/useSelection';
import type { RefTable } from './interface';
export type AnyObject = Record<PropertyKey, any>;
const Table = <RecordType extends AnyObject = any>(
const Table = <RecordType extends AnyObject = AnyObject>(
props: TableProps<RecordType>,
ref: React.Ref<HTMLDivElement>,
) => {
const renderTimesRef = React.useRef(0);
const renderTimesRef = React.useRef<number>(0);
renderTimesRef.current += 1;
return <InternalTable<RecordType> {...props} ref={ref} _renderTimes={renderTimesRef.current} />;
};

View File

@ -251,7 +251,7 @@ describe('Table', () => {
dataIndex: 'name',
},
];
render(<Table columns={columns} rowKey={(record, index) => record + index} />);
render(<Table columns={columns} rowKey={(record, index) => record.key + index} />);
expect(warnSpy).toHaveBeenCalledWith(
'Warning: [antd: Table] `index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
);

View File

@ -9,12 +9,12 @@ import { convertDataToEntities } from 'rc-tree/lib/utils/treeUtil';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import * as React from 'react';
import { useCallback, useMemo, useState } from 'react';
import type { AnyObject } from '../../_util/type';
import warning from '../../_util/warning';
import type { CheckboxProps } from '../../checkbox';
import Checkbox from '../../checkbox';
import Dropdown from '../../dropdown';
import Radio from '../../radio';
import type { AnyObject } from '../Table';
import type {
ColumnType,
ColumnsType,
@ -38,7 +38,7 @@ export const SELECTION_NONE = 'SELECT_NONE' as const;
const EMPTY_LIST: React.Key[] = [];
interface UseSelectionConfig<RecordType extends AnyObject = any> {
interface UseSelectionConfig<RecordType extends AnyObject = AnyObject> {
prefixCls: string;
pageData: RecordType[];
data: RecordType[];
@ -56,7 +56,7 @@ export type INTERNAL_SELECTION_ITEM =
| typeof SELECTION_INVERT
| typeof SELECTION_NONE;
const flattenData = <RecordType extends AnyObject = any>(
const flattenData = <RecordType extends AnyObject = AnyObject>(
childrenColumnName: keyof RecordType,
data?: RecordType[],
): RecordType[] => {
@ -70,7 +70,7 @@ const flattenData = <RecordType extends AnyObject = any>(
return list;
};
const useSelection = <RecordType extends AnyObject = any>(
const useSelection = <RecordType extends AnyObject = AnyObject>(
config: UseSelectionConfig<RecordType>,
rowSelection?: TableRowSelection<RecordType>,
): readonly [TransformColumns<RecordType>, Set<Key>] => {

View File

@ -7,23 +7,24 @@ import type {
import { ExpandableConfig, GetRowKey } from 'rc-table/lib/interface';
import type * as React from 'react';
import type { Breakpoint } from '../_util/responsiveObserver';
import type { AnyObject } from '../_util/type';
import type { CheckboxProps } from '../checkbox';
import type { PaginationProps } from '../pagination';
import type { TooltipProps } from '../tooltip';
import type { InternalTableProps, TableProps } from './InternalTable';
import type { INTERNAL_SELECTION_ITEM } from './hooks/useSelection';
export type RefTable = <RecordType extends object = any>(
export type RefTable = <RecordType extends AnyObject = AnyObject>(
props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLDivElement> },
) => React.ReactElement;
export type RefInternalTable = <RecordType extends object = any>(
export type RefInternalTable = <RecordType extends AnyObject = AnyObject>(
props: React.PropsWithChildren<InternalTableProps<RecordType>> & {
ref?: React.Ref<HTMLDivElement>;
},
) => React.ReactElement;
export { GetRowKey, ExpandableConfig };
export { ExpandableConfig, GetRowKey };
export type Key = React.Key;
@ -82,7 +83,7 @@ export type ColumnTitle<RecordType> =
export type FilterValue = (Key | boolean)[];
export type FilterKey = Key[] | null;
export type FilterSearchType<RecordType = Record<string, any>> =
export type FilterSearchType<RecordType = AnyObject> =
| boolean
| ((input: string, record: RecordType) => boolean);
export interface FilterConfirmProps {

View File

@ -5,28 +5,120 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genMotionStyle from './motion';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of dropdown menu
*/
zIndexPopup: number;
/**
* @desc
* @descEN Background color of card tab
*/
cardBg: string;
/**
* @desc
* @descEN Height of card tab
*/
cardHeight: number;
/**
* @desc
* @descEN Padding of card tab
*/
cardPadding: string;
/**
* @desc
* @descEN Padding of small card tab
*/
cardPaddingSM: string;
/**
* @desc
* @descEN Padding of large card tab
*/
cardPaddingLG: string;
/**
* @desc
* @descEN Font size of title
*/
titleFontSize: number;
/**
* @desc
* @descEN Font size of large title
*/
titleFontSizeLG: number;
/**
* @desc
* @descEN Font size of small title
*/
titleFontSizeSM: number;
/**
* @desc
* @descEN Color of indicator
*/
inkBarColor: string;
/**
* @desc
* @descEN Horizontal margin of horizontal tab
*/
horizontalMargin: string;
/**
* @desc
* @descEN Horizontal gutter of horizontal tab
*/
horizontalItemGutter: number;
/**
* @desc
* @descEN Horizontal margin of horizontal tab item
*/
horizontalItemMargin: string;
/**
* @desc RTL
* @descEN Horizontal margin of horizontal tab item (RTL)
*/
horizontalItemMarginRTL: string;
/**
* @desc
* @descEN Horizontal padding of horizontal tab item
*/
horizontalItemPadding: string;
/**
* @desc
* @descEN Horizontal padding of large horizontal tab item
*/
horizontalItemPaddingLG: string;
/**
* @desc
* @descEN Horizontal padding of small horizontal tab item
*/
horizontalItemPaddingSM: string;
/**
* @desc
* @descEN Vertical padding of vertical tab item
*/
verticalItemPadding: string;
/**
* @desc
* @descEN Vertical margin of vertical tab item
*/
verticalItemMargin: string;
/**
* @desc
* @descEN Text color of active tab
*/
itemActiveColor: string;
/**
* @desc
* @descEN Text color of hover tab
*/
itemHoverColor: string;
/**
* @desc
* @descEN Text color of selected tab
*/
itemSelectedColor: string;
/**
* @desc
* @descEN Gutter of card tab
*/
cardGutter: number;
}

View File

@ -6,7 +6,15 @@ import type { FullToken } from '../../theme/internal';
import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Default background color
*/
defaultBg: string;
/**
* @desc
* @descEN Default text color
*/
defaultColor: string;
}

View File

@ -4,10 +4,30 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Line color
*/
tailColor: string;
/**
* @desc
* @descEN Line width
*/
tailWidth: number;
/**
* @desc
* @descEN Border width of node
*/
dotBorderWidth: number;
/**
* @desc
* @descEN Background color of node
*/
dotBg: string;
/**
* @desc
* @descEN Bottom padding of item
*/
itemPaddingBottom: number;
}

View File

@ -5,7 +5,12 @@ import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../th
import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc z-index
* @descEN z-index of tooltip
*/
zIndexPopup: number;
/** @deprecated */
colorBgDefault: string;
}

View File

@ -4,11 +4,35 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc
* @descEN Width of list
*/
listWidth: number;
/**
* @desc
* @descEN Width of large list
*/
listWidthLG: number;
/**
* @desc
* @descEN Height of list
*/
listHeight: number;
/**
* @desc
* @descEN Height of list item
*/
itemHeight: number;
/**
* @desc
* @descEN Vertical padding of list item
*/
itemPaddingBlock: number;
/**
* @desc
* @descEN Height of header
*/
headerHeight: number;
}

View File

@ -12,9 +12,16 @@ import {
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
/**
* @desc
* @descEN Margin top of title
*/
titleMarginTop: number | string;
/**
* @desc
* @descEN Margin bottom of title
*/
titleMarginBottom: number | string;
fontWeightStrong: number;
}
export type TypographyToken = FullToken<'Typography'>;
@ -126,9 +133,8 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
export default genComponentStyleHook(
'Typography',
(token) => [genTypographyStyle(token)],
(token) => ({
() => ({
titleMarginTop: '1.2em',
titleMarginBottom: '0.5em',
fontWeightStrong: token.fontWeightStrong,
}),
);

View File

@ -9,6 +9,10 @@ import { genPictureCardStyle, genPictureStyle } from './picture';
import genRtlStyle from './rtl';
export interface ComponentToken {
/**
* @desc
* @descEN Action button color
*/
actionsColor: string;
}

View File

@ -2,11 +2,20 @@ import fs from 'fs-extra';
import type { DeclarationReflection } from 'typedoc';
import { Application, TSConfigReader, TypeDocReader } from 'typedoc';
type TokenMeta = {
seed: ReturnType<typeof getTokenList>;
map: ReturnType<typeof getTokenList>;
alias: ReturnType<typeof getTokenList>;
components: Record<string, ReturnType<typeof getTokenList>>;
};
function getTokenList(list?: DeclarationReflection[], source?: string) {
return (list || [])
.filter(
(item) =>
!item.comment?.blockTags.some((tag) => tag.tag === '@internal' || tag.tag === '@private'),
!item.comment?.blockTags.some(
(tag) => tag.tag === '@internal' || tag.tag === '@private' || tag.tag === '@deprecated',
),
)
.map((item) => ({
source,
@ -40,7 +49,8 @@ const main = () => {
app.bootstrap({
// typedoc options here
entryPoints: ['components/theme/interface/index.ts'],
entryPoints: ['components/theme/interface/index.ts', 'components/*/style/index.{ts,tsx}'],
skipErrorChecking: true,
});
const project = app.convert();
@ -48,9 +58,19 @@ const main = () => {
if (project) {
// Project may not have converted correctly
const output = 'components/version/token-meta.json';
const tokenMeta: Record<PropertyKey, ReturnType<typeof getTokenList>> = {};
const tokenMeta: TokenMeta = {
seed: [],
map: [],
alias: [],
components: {},
};
// eslint-disable-next-line no-restricted-syntax
project?.children?.forEach((file) => {
// Global Token
if (file.name === 'theme/interface') {
let presetColors: string[] = [];
project.children?.forEach((type) => {
file.children?.forEach((type) => {
if (type.name === 'SeedToken') {
tokenMeta.seed = getTokenList(type.children, 'seed');
} else if (type.name === 'MapToken') {
@ -79,10 +99,22 @@ const main = () => {
tokenMeta.map = tokenMeta.map.filter(
(item) => !tokenMeta.seed.some((seedItem) => seedItem.token === item.token),
);
} else {
const component = file.name
.slice(0, file.name.indexOf('/'))
.replace(/(^(.)|-(.))/g, (match) => match.replace('-', '').toUpperCase());
const componentToken = file.children?.find((item) => item.name === `ComponentToken`);
if (componentToken) {
tokenMeta.components[component] = getTokenList(componentToken.children, component);
}
}
});
const finalMeta = Object.entries(tokenMeta).reduce((acc, [key, value]) => {
value.forEach((item) => {
acc[item.token] = {
if (key !== 'components') {
(value as any[]).forEach((item) => {
acc.global = acc.global || {};
acc.global[item.token] = {
name: item.name,
nameEn: item.nameEn,
desc: item.desc,
@ -91,6 +123,9 @@ const main = () => {
source: key,
};
});
} else {
acc.components = value;
}
return acc;
}, {} as any);