mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: Add some token for Select to customize hover/focus style (#50951)

Browse Source 
* feat: add some token in select

* feat: add some token in select
This commit is contained in:
kiner-tang 2024-09-22 18:36:05 +08:00 committed by GitHub
parent 8c4fbcdb92
commit ff4989ccca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/select/demo/component-token.tsx
View File

@ -20,6 +20,9 @@ const App: React.FC = () => (
multipleItemBorderColor: 'rgba(0,0,0,0.06)',
multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)',
optionSelectedColor: '#1677ff',
hoverBorderColor: 'red',
activeBorderColor: 'green',
activeOutlineColor: 'pink',
},
},
}}

22
components/select/style/token.ts
View File

@ -113,6 +113,21 @@ export interface ComponentToken extends MultipleSelectorToken {
* @descEN Inline end padding of arrow
*/
showArrowPaddingInlineEnd: number;
/**
* @desc 悬浮态边框色
* @descEN Hover border color
*/
hoverBorderColor: string;
/**
* @desc 激活态边框色
* @descEN Active border color
*/
activeBorderColor: string;
/**
* @desc 激活态 outline 颜色
* @descEN Active outline color
*/
activeOutlineColor: string;
}
export interface SelectorToken {
@ -151,6 +166,10 @@ export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
colorBgContainerDisabled,
colorTextDisabled,
colorPrimaryHover,
colorPrimary,
controlOutline,
} = token;
// Item height default use `controlHeight - 2 * paddingXXS`,
@ -196,5 +215,8 @@ export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
multipleItemColorDisabled: colorTextDisabled,
multipleItemBorderColorDisabled: 'transparent',
showArrowPaddingInlineEnd: Math.ceil(token.fontSize * 1.25),
hoverBorderColor: colorPrimaryHover,
activeBorderColor: colorPrimary,
activeOutlineColor: controlOutline,
};
};

16
components/select/style/variants.ts
View File

@ -12,7 +12,7 @@ const genBaseOutlinedStyle = (
borderColor: string;
hoverBorderHover: string;
activeBorderColor: string;
activeShadowColor: string;
activeOutlineColor: string;
},
): CSSObject => {
const { componentCls, antCls, controlOutlineWidth } = token;
@ -30,7 +30,7 @@ const genBaseOutlinedStyle = (
[`${componentCls}-focused& ${componentCls}-selector`]: {
borderColor: options.activeBorderColor,
boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeShadowColor}`,
boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeOutlineColor}`,
outline: 0,
},
},
@ -44,7 +44,7 @@ const genOutlinedStatusStyle = (
borderColor: string;
hoverBorderHover: string;
activeBorderColor: string;
activeShadowColor: string;
activeOutlineColor: string;
},
): CSSObject => ({
[`&${token.componentCls}-status-${options.status}`]: {
@ -56,9 +56,9 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
'&-outlined': {
...genBaseOutlinedStyle(token, {
borderColor: token.colorBorder,
hoverBorderHover: token.colorPrimaryHover,
activeBorderColor: token.colorPrimary,
activeShadowColor: token.controlOutline,
hoverBorderHover: token.hoverBorderColor,
activeBorderColor: token.activeBorderColor,
activeOutlineColor: token.activeOutlineColor,
}),
...genOutlinedStatusStyle(token, {
@ -66,7 +66,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
borderColor: token.colorError,
hoverBorderHover: token.colorErrorHover,
activeBorderColor: token.colorError,
activeShadowColor: token.colorErrorOutline,
activeOutlineColor: token.colorErrorOutline,
}),
...genOutlinedStatusStyle(token, {
@ -74,7 +74,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
borderColor: token.colorWarning,
hoverBorderHover: token.colorWarningHover,
activeBorderColor: token.colorWarning,
activeShadowColor: token.colorWarningOutline,
activeOutlineColor: token.colorWarningOutline,
}),
[`&${token.componentCls}-disabled`]: {