test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

feat: Breadcrumb support cssVar (#45899)

Browse Source 
* feat: Breadcrumb support cssVar

* fix: fix

* Update components/breadcrumb/style/index.ts

Co-authored-by: MadCcc <madccc@foxmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* Update components/breadcrumb/style/index.ts

Co-authored-by: MadCcc <madccc@foxmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <madccc@foxmail.com>
This commit is contained in:
lijianan 2023-11-16 16:18:43 +08:00 committed by GitHub
parent 4236abb28c
commit 4f028874a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/breadcrumb/Breadcrumb.tsx
View File

@ -12,6 +12,7 @@ import type { BreadcrumbItemProps } from './BreadcrumbItem';
import BreadcrumbItem, { InternalBreadcrumbItem } from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator';
import useStyle from './style';
import useCSSVar from './style/cssVar';
import useItemRender from './useItemRender';
import useItems from './useItems';
@ -93,8 +94,10 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
const { getPrefixCls, direction, breadcrumb } = React.useContext(ConfigContext);
let crumbs: React.ReactNode;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const mergedItems = useItems(items, legacyRoutes);
@ -216,7 +219,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
const mergedStyle: React.CSSProperties = { ...breadcrumb?.style, ...style };
return wrapSSR(
return wrapCSSVar(
<nav className={breadcrumbClassName} style={mergedStyle} {...restProps}>
<ol>{crumbs}</ol>
</nav>,

4
components/breadcrumb/style/cssVar.ts Normal file
View File

@ -0,0 +1,4 @@
import { prepareComponentToken } from '.';
import { genCSSVarRegister } from '../../theme/internal';
export default genCSSVarRegister<'Breadcrumb'>('Breadcrumb', prepareComponentToken);

43
components/breadcrumb/style/index.ts
View File

@ -1,6 +1,7 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { unit, type CSSObject } from '@ant-design/cssinjs';
import { genFocusStyle, resetComponent } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export interface ComponentToken {
@ -44,7 +45,7 @@ export interface ComponentToken {
interface BreadcrumbToken extends FullToken<'Breadcrumb'> {}
const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) => {
const { componentCls, iconCls } = token;
const { componentCls, iconCls, calc } = token;
return {
[componentCls]: {
@ -67,11 +68,11 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
a: {
color: token.linkColor,
transition: `color ${token.motionDurationMid}`,
padding: `0 ${token.paddingXXS}px`,
padding: `0 ${unit(token.paddingXXS)}`,
borderRadius: token.borderRadiusSM,
height: token.lineHeight * token.fontSize,
height: token.fontHeight,
display: 'inline-block',
marginInline: -token.marginXXS,
marginInline: calc(token.marginXXS).mul(-1).equal(),
'&:hover': {
color: token.linkHoverColor,
@ -101,10 +102,10 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
[`${componentCls}-overlay-link`]: {
borderRadius: token.borderRadiusSM,
height: token.lineHeight * token.fontSize,
height: token.fontHeight,
display: 'inline-block',
padding: `0 ${token.paddingXXS}px`,
marginInline: -token.marginXXS,
padding: `0 ${unit(token.paddingXXS)}`,
marginInline: calc(token.marginXXS).mul(-1).equal(),
[`> ${iconCls}`]: {
marginInlineStart: token.marginXXS,
@ -135,20 +136,22 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
};
};
export const prepareComponentToken: GetDefaultToken<'Breadcrumb'> = (token) => ({
itemColor: token.colorTextDescription,
lastItemColor: token.colorText,
iconFontSize: token.fontSize,
linkColor: token.colorTextDescription,
linkHoverColor: token.colorText,
separatorColor: token.colorTextDescription,
separatorMargin: token.marginXS,
});
// ============================== Export ==============================
export default genComponentStyleHook(
'Breadcrumb',
(token) => {
const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {});
return [genBreadcrumbStyle(BreadcrumbToken)];
const breadcrumbToken = mergeToken<BreadcrumbToken>(token, {});
return genBreadcrumbStyle(breadcrumbToken);
},
(token) => ({
itemColor: token.colorTextDescription,
lastItemColor: token.colorText,
iconFontSize: token.fontSize,
linkColor: token.colorTextDescription,
linkHoverColor: token.colorText,
separatorColor: token.colorTextDescription,
separatorMargin: token.marginXS,
}),
prepareComponentToken,
);

2
scripts/check-cssinjs.tsx
View File

@ -28,8 +28,6 @@ console.error = (msg: any) => {
async function checkCSSVar() {
const ignore = [
'anchor',
'breadcrumb',
'calendar',
'cascader',
'checkbox',