feat: cascader token (#44261)

* feat: cascader token

* docs: en
This commit is contained in:
MadCcc 2023-08-17 15:03:23 +08:00 committed by GitHub
parent cdc4e50873
commit 030f38594c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 15 deletions

View File

@ -1,3 +1,4 @@
import type { CSSProperties } from 'react';
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import { textEllipsis } from '../../style';
import { genCompactItemStyle } from '../../style/compact-item';
@ -20,6 +21,26 @@ export interface ComponentToken {
* @descEN Height of dropdown
*/
dropdownHeight: number;
/**
* @desc
* @descEN Background color of selected item
*/
optionSelectedBg: string;
/**
* @desc
* @descEN Font weight of selected item
*/
optionSelectedFontWeight: CSSProperties['fontWeight'];
/**
* @desc
* @descEN Padding of menu item
*/
optionPadding: CSSProperties['padding'];
/**
* @desc
* @descEN Padding of menu item (single column)
*/
menuPadding: CSSProperties['padding'];
}
type CascaderToken = FullToken<'Cascader'>;
@ -33,10 +54,6 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
${cascaderMenuItemCls}-loading-icon
`;
const itemPaddingVertical = Math.round(
(token.controlHeight - token.fontSize * token.lineHeight) / 2,
);
return [
// =====================================================
// == Control ==
@ -91,7 +108,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
minWidth: token.controlItemWidth,
height: token.dropdownHeight,
margin: 0,
padding: token.paddingXXS,
padding: token.menuPadding,
overflow: 'auto',
verticalAlign: 'top',
listStyle: 'none',
@ -106,7 +123,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center',
padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
padding: token.optionPadding,
lineHeight: token.lineHeight,
cursor: 'pointer',
transition: `all ${token.motionDurationMid}`,
@ -130,8 +147,8 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
[`&, &:hover`]: {
fontWeight: token.fontWeightStrong,
backgroundColor: token.controlItemBgActive,
fontWeight: token.optionSelectedFontWeight,
backgroundColor: token.optionSelectedBg,
},
},
@ -170,8 +187,22 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
};
// ============================== Export ==============================
export default genComponentStyleHook('Cascader', (token) => [genBaseStyle(token)], {
controlWidth: 184,
controlItemWidth: 111,
dropdownHeight: 180,
});
export default genComponentStyleHook(
'Cascader',
(token) => [genBaseStyle(token)],
(token) => {
const itemPaddingVertical = Math.round(
(token.controlHeight - token.fontSize * token.lineHeight) / 2,
);
return {
controlWidth: 184,
controlItemWidth: 111,
dropdownHeight: 180,
optionSelectedBg: token.controlItemBgActive,
optionSelectedFontWeight: token.fontWeightStrong,
optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`,
menuPadding: token.paddingXXS,
};
},
);

View File

@ -227,7 +227,19 @@ export default App;
| `@carousel-dot-height` | `dotHeight` | - |
| `@carousel-dot-active-width` | `dotActiveWidth` | - |
<!-- ### Cascader -->
### Cascader
<!-- prettier-ignore -->
| Less variables | Component Token | Note |
| --- | --- | --- |
| `@cascader-bg` | - | Deprecated |
| `@cascader-item-selected-bg` | `optionSelectedBg` | - |
| `@cascader-menu-bg` | - | Deprecated |
| `@cascader-menu-border-color-split` | `colorSplit` | Global Token |
| `@cascader-dropdown-vertical-padding` | `optionPadding` | - |
| `@cascader-dropdown-edge-child-vertical-padding` | `menuPadding` | - |
| `@cascader-dropdown-font-size` | - | Deprecated |
| `@cascader-dropdown-line-height` | `lineHeight` | Global Token |
<!-- ### Checkbox -->

View File

@ -227,7 +227,19 @@ export default App;
| `@carousel-dot-height` | `dotHeight` | - |
| `@carousel-dot-active-width` | `dotActiveWidth` | - |
<!-- ### Cascader 级联选择 -->
### Cascader 级联选择
<!-- prettier-ignore -->
| Less 变量 | Component Token | 备注 |
| --- | --- | --- |
| `@cascader-bg` | - | 已废弃 |
| `@cascader-item-selected-bg` | `optionSelectedBg` | - |
| `@cascader-menu-bg` | - | 已废弃 |
| `@cascader-menu-border-color-split` | `colorSplit` | 全局 Token |
| `@cascader-dropdown-vertical-padding` | `optionPadding` | - |
| `@cascader-dropdown-edge-child-vertical-padding` | `menuPadding` | - |
| `@cascader-dropdown-font-size` | - | 已废弃 |
| `@cascader-dropdown-line-height` | `lineHeight` | 全局 Token |
### Checkbox 多选框