GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: global token in Component Token override should be respected (#42535) 

* fix: global token in Component Token override should be respected

* test: add snapshot
pull/42536/head
MadCcc 2 years ago
committed by GitHub
parent
369b4cd169
commit
4f9c8e2af2
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 162 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 90
      components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
  2. 90
      components/message/__tests__/__snapshots__/demo.test.ts.snap
  3. 37
      components/message/demo/component-token.tsx
  4. 14
      components/theme/util/genComponentStyleHook.ts

90
components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1,40 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/message/demo/component-token.tsx extend context correctly 1`] = `
<div
class="ant-message-notice ant-message-notice-pure-panel"
>
Array [
<div
class="ant-message-notice-content"
class="ant-message-notice ant-message-notice-pure-panel"
>
<div
class="ant-message-custom-content ant-message-error"
class="ant-message-notice-content"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
<div
class="ant-message-custom-content ant-message-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
</div>
</div>
</div>
</div>
</div>,
<div
class="ant-message-notice ant-message-notice-pure-panel"
>
<div
class="ant-message-notice-content"
>
<div
class="ant-message-custom-content ant-message-error"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
</div>
</div>
</div>,
]
`;
exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = `

90
components/message/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1,40 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/message/demo/component-token.tsx correctly 1`] = `
<div
class="ant-message-notice ant-message-notice-pure-panel"
>
Array [
<div
class="ant-message-notice-content"
class="ant-message-notice ant-message-notice-pure-panel"
>
<div
class="ant-message-custom-content ant-message-error"
class="ant-message-notice-content"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
<div
class="ant-message-custom-content ant-message-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
</div>
</div>
</div>
</div>
</div>,
<div
class="ant-message-notice ant-message-notice-pure-panel"
>
<div
class="ant-message-notice-content"
>
<div
class="ant-message-custom-content ant-message-error"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
</div>
</div>
</div>,
]
`;
exports[`renders components/message/demo/custom-style.tsx correctly 1`] = `

37
components/message/demo/component-token.tsx
View File

@ -1,20 +1,33 @@
import React from 'react';
import { ConfigProvider, message } from 'antd';
import React from 'react';
/** Test usage. Do not use in your production. */
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;
export default () => (
<ConfigProvider
theme={{
components: {
Message: {
contentPadding: 40,
contentBg: '#e6f4ff',
<>
<ConfigProvider
theme={{
components: {
Message: {
contentPadding: 40,
contentBg: '#e6f4ff',
},
},
}}
>
<InternalPanel content="Hello World!" type="error" />
</ConfigProvider>
<ConfigProvider
theme={{
components: {
Message: {
colorBgElevated: '#e6f4ff',
},
},
},
}}
>
<InternalPanel content="Hello World!" type="error" />
</ConfigProvider>
}}
>
<InternalPanel content="Hello World!" type="error" />
</ConfigProvider>
</>
);

14
components/theme/util/genComponentStyleHook.ts
View File

@ -4,7 +4,7 @@ import { useStyleRegister } from '@ant-design/cssinjs';
import { useContext } from 'react';
import { ConfigContext } from '../../config-provider/context';
import { genCommonStyle, genLinkStyle } from '../../style';
import type { ComponentTokenMap, GlobalToken } from '../interface';
import type { ComponentTokenMap, GlobalToken, OverrideToken } from '../interface';
import type { UseComponentStyleResult } from '../internal';
import { mergeToken, statisticToken, useToken } from '../internal';
@ -13,6 +13,11 @@ export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
ComponentTokenMap[ComponentName];
type ComponentToken<ComponentName extends OverrideComponent> = Exclude<
OverrideToken[ComponentName],
undefined
>;
export interface StyleInfo<ComponentName extends OverrideComponent> {
hashId: string;
prefixCls: string;
@ -70,9 +75,12 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => {
const { token: proxyToken, flush } = statisticToken(token);
const customComponentToken = token[component] as ComponentToken<ComponentName>;
const defaultComponentToken =
typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
const mergedComponentToken = { ...defaultComponentToken, ...token[component] };
typeof getDefaultToken === 'function'
? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
: getDefaultToken;
const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
const componentCls = `.${prefixCls}`;
const mergedToken = mergeToken<

Write Preview
Loading…
Cancel
Save