mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00
feat: Cascader add optionSelectedColor token (#51769)
This commit is contained in:
thinkasany
GitHub
parent
f17b761ae3
commit
c1f2aad2f9
@ -310,6 +310,162 @@ exports[`renders components/cascader/demo/change-on-select.tsx extend context co
|
|||||||
|
|
||||||
exports[`renders components/cascader/demo/change-on-select.tsx extend context correctly 2`] = `[]`;
|
exports[`renders components/cascader/demo/change-on-select.tsx extend context correctly 2`] = `[]`;
|
||||||
|
|
||||||
|
exports[`renders components/cascader/demo/component-token.tsx extend context correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-select-selector"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-wrap"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-search"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-select-selection-search-input"
|
||||||
|
id="rc_select_TEST_OR_SSR"
|
||||||
|
readonly=""
|
||||||
|
role="combobox"
|
||||||
|
style="opacity: 0;"
|
||||||
|
type="search"
|
||||||
|
unselectable="on"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-placeholder"
|
||||||
|
>
|
||||||
|
Please select
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-cascader-menus"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-cascader-menu"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
|
||||||
|
data-path-key="zhejiang"
|
||||||
|
role="menuitemcheckbox"
|
||||||
|
title="Zhejiang"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-cascader-menu-item-content"
|
||||||
|
>
|
||||||
|
Zhejiang
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-cascader-menu-item-expand-icon"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="right"
|
||||||
|
class="anticon anticon-right"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="right"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-checked="false"
|
||||||
|
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
|
||||||
|
data-path-key="jiangsu"
|
||||||
|
role="menuitemcheckbox"
|
||||||
|
title="Jiangsu"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-cascader-menu-item-content"
|
||||||
|
>
|
||||||
|
Jiangsu
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-cascader-menu-item-expand-icon"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="right"
|
||||||
|
class="anticon anticon-right"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="right"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-select-arrow"
|
||||||
|
style="user-select: none;"
|
||||||
|
unselectable="on"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="down"
|
||||||
|
class="anticon anticon-down ant-select-suffix"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="down"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders components/cascader/demo/component-token.tsx extend context correctly 2`] = `[]`;
|
||||||
|
|
||||||
exports[`renders components/cascader/demo/custom-dropdown.tsx extend context correctly 1`] = `
|
exports[`renders components/cascader/demo/custom-dropdown.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||||
|
|||||||
@ -128,6 +128,71 @@ exports[`renders components/cascader/demo/change-on-select.tsx correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders components/cascader/demo/component-token.tsx correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-select-selector"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-wrap"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-search"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-controls="undefined_list"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
aria-owns="undefined_list"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-select-selection-search-input"
|
||||||
|
readonly=""
|
||||||
|
role="combobox"
|
||||||
|
style="opacity:0"
|
||||||
|
type="search"
|
||||||
|
unselectable="on"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-select-selection-placeholder"
|
||||||
|
>
|
||||||
|
Please select
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-select-arrow"
|
||||||
|
style="user-select:none;-webkit-user-select:none"
|
||||||
|
unselectable="on"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="down"
|
||||||
|
class="anticon anticon-down ant-select-suffix"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="down"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
|
exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||||
|
|||||||
7
components/cascader/demo/component-token.md
Normal file
7
components/cascader/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
组件 Token
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Component Token
|
||||||
64
components/cascader/demo/component-token.tsx
Normal file
64
components/cascader/demo/component-token.tsx
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { CascaderProps } from 'antd';
|
||||||
|
import { Cascader, ConfigProvider } from 'antd';
|
||||||
|
|
||||||
|
interface Option {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
children?: Option[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const options: Option[] = [
|
||||||
|
{
|
||||||
|
value: 'zhejiang',
|
||||||
|
label: 'Zhejiang',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'hangzhou',
|
||||||
|
label: 'Hangzhou',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'xihu',
|
||||||
|
label: 'West Lake',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'jiangsu',
|
||||||
|
label: 'Jiangsu',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'nanjing',
|
||||||
|
label: 'Nanjing',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'zhonghuamen',
|
||||||
|
label: 'Zhong Hua Men',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const onChange: CascaderProps<Option>['onChange'] = (value) => {
|
||||||
|
console.log(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
components: {
|
||||||
|
Cascader: {
|
||||||
|
optionSelectedColor: 'red',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Cascader options={options} onChange={onChange} placeholder="Please select" />
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
@ -37,6 +37,7 @@ demo:
|
|||||||
<code src="./demo/status.tsx">Status</code>
|
<code src="./demo/status.tsx">Status</code>
|
||||||
<code src="./demo/panel.tsx" version=">= 5.10.0">Panel</code>
|
<code src="./demo/panel.tsx" version=">= 5.10.0">Panel</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
|
||||||
|
|
||||||
|
|||||||
@ -38,6 +38,7 @@ demo:
|
|||||||
<code src="./demo/status.tsx">自定义状态</code>
|
<code src="./demo/status.tsx">自定义状态</code>
|
||||||
<code src="./demo/panel.tsx" version=">= 5.10.0">面板使用</code>
|
<code src="./demo/panel.tsx" version=">= 5.10.0">面板使用</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
|
||||||
|
|
||||||
|
|||||||
@ -92,6 +92,7 @@ const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CS
|
|||||||
|
|
||||||
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
|
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
|
||||||
'&, &:hover': {
|
'&, &:hover': {
|
||||||
|
color: token.optionSelectedColor,
|
||||||
fontWeight: token.optionSelectedFontWeight,
|
fontWeight: token.optionSelectedFontWeight,
|
||||||
backgroundColor: token.optionSelectedBg,
|
backgroundColor: token.optionSelectedBg,
|
||||||
},
|
},
|
||||||
|
|||||||
@ -26,6 +26,11 @@ export interface ComponentToken {
|
|||||||
* @descEN Background color of selected item
|
* @descEN Background color of selected item
|
||||||
*/
|
*/
|
||||||
optionSelectedBg: string;
|
optionSelectedBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 选项选中时文本颜色
|
||||||
|
* @descEN Text color when option is selected
|
||||||
|
*/
|
||||||
|
optionSelectedColor: string;
|
||||||
/**
|
/**
|
||||||
* @desc 选项选中时字重
|
* @desc 选项选中时字重
|
||||||
* @descEN Font weight of selected item
|
* @descEN Font weight of selected item
|
||||||
@ -100,6 +105,7 @@ export const prepareComponentToken = (token: GlobalToken) => {
|
|||||||
optionSelectedFontWeight: token.fontWeightStrong,
|
optionSelectedFontWeight: token.fontWeightStrong,
|
||||||
optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`,
|
optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`,
|
||||||
menuPadding: token.paddingXXS,
|
menuPadding: token.paddingXXS,
|
||||||
|
optionSelectedColor: token.colorText,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user