Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ feat: Breadcrumb Component Token #42342

Merged
merged 9 commits into from
May 18, 2023

Conversation

heiyu4585
Copy link
Contributor

@heiyu4585 heiyu4585 commented May 14, 2023

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

#41884

📝 Changelog

Language Changelog
🇺🇸 English Breadcrumb Component Token
🇨🇳 Chinese Breadcrumb Component Token

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

🚀 Summary

🤖 Generated by Copilot at ef1cb5e

This pull request adds the ComponentToken interface to the breadcrumb component, which allows the users to customize the component style through the ConfigProvider theme prop. It also updates the documentation and the migration guide to show how to use the ComponentToken interface and how to map the Less variables to the ComponentToken values.

🔍 Walkthrough

🤖 Generated by Copilot at ef1cb5e

  • Add a component token demo for the breadcrumb component that shows how to use the ConfigProvider theme prop to customize the token values (link, link, link, link)
  • Export the ComponentToken interface from the breadcrumb component style file and import it to the components interface file, so that the ConfigProvider theme prop can accept the ComponentToken values for the breadcrumb component (link, link, link)
  • Replace the redundant token properties in the genBreadcrumbStyle and the default export functions in the components/breadcrumb/style/index.ts file with the ComponentToken properties, to simplify the styling of the breadcrumb component (link, link, link, link, link, link)
  • Add the mapping table between the Less variables and the ComponentToken values for the breadcrumb component in the migration guides, to help the users to migrate from using Less variables to using ComponentToken values (link, link)

@cr-gpt
Copy link

cr-gpt bot commented May 14, 2023

Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information

@github-actions
Copy link
Contributor

github-actions bot commented May 14, 2023

@codecov
Copy link

codecov bot commented May 14, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (24dd535) 100.00% compared to head (36b5f1e) 100.00%.

Additional details and impacted files
@@            Coverage Diff             @@
##           feature    #42342    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          619       640    +21     
  Lines        11048     10844   -204     
  Branches      3081      2945   -136     
==========================================
- Hits         11048     10844   -204     
Impacted Files Coverage Δ
components/auto-complete/index.tsx 100.00% <ø> (ø)
components/config-provider/context.ts 100.00% <ø> (ø)
components/divider/style/index.ts 100.00% <ø> (ø)
components/input-number/style/index.ts 100.00% <ø> (ø)
components/input/style/index.ts 100.00% <ø> (ø)
components/locale/en_US.ts 100.00% <ø> (ø)
components/locale/index.tsx 100.00% <ø> (ø)
components/locale/zh_CN.ts 100.00% <ø> (ø)
components/menu/MenuItem.tsx 100.00% <ø> (ø)
components/menu/hooks/useItems.tsx 100.00% <ø> (ø)
... and 62 more

... and 19 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

<!-- prettier-ignore -->
| Less 变量 | Component Token | 备注 |
| --- | --- | --- |
| `@drawer-bg` | `popoverBg` | - |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `@drawer-bg` | `popoverBg` | - |

无关的 less 变量不用放进来

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

Comment on lines 113 to 124
baseColor: token.colorTextDescription,
lastItemColor: token.colorText,
iconFontSize: token.fontSize,
linkColor: token.colorTextDescription,
linkColorHover: token.colorText,
separatorColor: token.colorTextDescription,
separatorMargin: token.marginXS,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ComponentToken 要在 genComponentStyleHook 第三个参数初始化,不然会覆盖用户输入

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
现在 demo 上就是没有效果的

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

baseColor: string;
iconFontSize: number;
linkColor: string;
linkColorHover: string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
linkColorHover: string;
linkHoverColor: string;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

breadcrumbSeparatorMargin: number;
breadcrumbSeparatorColor: string;
export interface ComponentToken {
baseColor: string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
baseColor: string;
itemColor: string;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

]}
/>
</ConfigProvider>
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

最好能把所有 token 会改变的场景都列出来,现在 demo 里只能提现其中几个 token 的影响

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants