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.

Sign up for GitHub

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

Jump to bottom

[Theme] V4 Component Token Migration #41884

Closed
51 tasks done
MadCcc opened this issue Apr 19, 2023 · 35 comments · Fixed by #42774
Closed
51 tasks done

[Theme] V4 Component Token Migration #41884

MadCcc opened this issue Apr 19, 2023 · 35 comments · Fixed by #42774
Labels
5.x 💡 Feature Request 👷🏻‍♂️ Someone working on it

Comments

@MadCcc
Copy link
Member

MadCcc commented Apr 19, 2023 •
edited

Summary

Migrate component less variables in v4 to Component Token in v5.

v4 less variables

How to migrate?

In v5, each component has type ComponentToken in style/index.ts. v4 less variables should be transformed into one of ComponentToken and initialized with related Design Token in genComponentStyleHook. Then the usage of token in style should also be updated.

Currently many of them has been transformed into xxxToken in each component, and we need to put them into ComponentToken. If v4 less variable is not in xxxToken, we should check if it is suitable for v5.

Example PR

#42000

  1. Migrate Component Token
  2. List all less variables in "Migrate less variables to Component Token"

Table may like this:

Less variables Component Token Note
@modal-header-padding-vertical - Deprecated for style change
@modal-header-padding-horizontal - Deprecated for style change
@modal-body-padding - Deprecated for style change
@modal-header-bg modalHeaderBg -
@modal-header-padding - Deprecated for style change
@modal-header-border-width - Deprecated for style change
@modal-header-border-style - Deprecated for style change
@modal-header-title-line-height modalHeaderTitleLineHeight -
@modal-header-title-font-size modalHeaderTitleFontSize -
@modal-header-border-color-split - Deprecated for style change
@modal-header-close-size - Deprecated for style change
@modal-content-bg modalContentBg -
@modal-heading-color modalHeadingColor -
@modal-close-color modalCloseIconColor -
@modal-footer-bg modalFooterBg -
@modal-footer-border-color-split - Deprecated for style change
@modal-footer-border-style - Deprecated for style change
@modal-footer-padding-vertical - Deprecated for style change
@modal-footer-padding-horizontal - Deprecated for style change
@modal-footer-border-width - Deprecated for style change
@modal-mask-bg colorBgMask -
@modal-confirm-body-padding - Deprecated for style change
@modal-confirm-title-font-size modalHeaderTitleFontSize -
@modal-border-radius borderRadiusLG -

Tokens should be migrated

Tokens that should be migrated may meet any of the following conditions：

  1. It is still in use in v5, which mean you will find it in XXXToken.
  2. It is used in v4, and lost in v5. If CSS in v5 is the same as v4, we should add this ComponentToken and initialize it with current v5 token used. If CSS has been changed, we could mark it as deprecated.

Task list
@bencerf
Copy link

bencerf commented Apr 25, 2023

Hi @MadCcc,
Thanks for the list of V4 Component Token Migration. Do you have an estimate when all Component Tokens will be migrated ?

@bencerf bencerf mentioned this issue Apr 25, 2023
Open
@MadCcc
Copy link
Member Author

MadCcc commented Apr 25, 2023

Hi @MadCcc, Thanks for the list of V4 Component Token Migration. Do you have an estimate when all Component Tokens will be migrated ?

Yeah, these work would be done in May, and would be published with 5.6.0.

@bencerf
Copy link

bencerf commented Apr 25, 2023 •
edited

Thank you for the estimate, hope it will be good by then 🙂

@kiner-tang
Copy link
Member

mark

@Wxh16144
Copy link
Member

Wxh16144 commented Apr 26, 2023 •
edited

My pick task:

@heiyu4585
Copy link
Contributor

My pick task:

Tag
card

@linhf123
Copy link
Contributor

My pick task:

Alert

@yoyo837
Copy link
Contributor

yoyo837 commented Apr 26, 2023 •
edited

@heiyu4585 Update the Task list in the issue summary is great.

@kiner-tang
Copy link
Member

kiner-tang commented Apr 26, 2023 •
edited

Message,Result

@Yuiai01
Copy link
Contributor

Yuiai01 commented Apr 26, 2023

My pick task:

Radio
Switch

@yoyo837 yoyo837 pinned this issue Apr 26, 2023
@yoyo837 yoyo837 added the help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. label Apr 26, 2023
@ant-design ant-design deleted a comment from github-actions bot Apr 26, 2023
@hms181231
Copy link
Contributor

My pick task:

Empty
Divider

@jrr997
Copy link
Contributor

jrr997 commented Apr 26, 2023

My pick task:

Descriptions
List

@MuxinFeng
Copy link
Contributor

My pick task:
Rate Anchor

@poyiding
Copy link
Contributor

poyiding commented Apr 27, 2023 •
edited

My pick task:

Checkbox
Dropdown
TimePicker

@yoyo837 yoyo837 mentioned this issue Apr 27, 2023
Merged
20 tasks
@guan404ming
Copy link
Contributor

My pick task:
Tooltip Image

@jrr997 jrr997 mentioned this issue Apr 27, 2023
Merged
20 tasks
@jrr997
Copy link
Contributor

jrr997 commented Apr 27, 2023

My pick task:

Timeline
Typography
Upload

This was referenced Apr 27, 2023
Merged
Closed
This was referenced Apr 27, 2023
Merged
Merged
@heiyu4585 heiyu4585 mentioned this issue May 17, 2023
Merged
20 tasks
@MadCcc MadCcc mentioned this issue May 17, 2023
Closed
@jrr997 jrr997 mentioned this issue May 17, 2023
Merged
20 tasks
@MadCcc
Copy link
Member Author

MadCcc commented May 18, 2023

Hi there, Thank you for this initiative. It's currently blocking our migration.

I See Layout is checked however you still can't set layoutHeaderHeight for example despite it being defined internally. Can we please expose these and consider this component not complete? I believe there are other config values for this component also not exposed (at least on 5.4.7)

I will check it.

@jrr997 jrr997 mentioned this issue May 19, 2023
Merged
20 tasks
@poyiding poyiding mentioned this issue May 25, 2023
Merged
20 tasks
@hms181231 hms181231 mentioned this issue May 25, 2023
Merged
20 tasks
@heiyu4585 heiyu4585 mentioned this issue May 30, 2023
Merged
20 tasks
@hms181231 hms181231 mentioned this issue May 31, 2023
Merged
20 tasks
@poyiding poyiding mentioned this issue Jun 1, 2023
Merged
20 tasks
@Wxh16144 Wxh16144 mentioned this issue Jun 1, 2023
Merged
20 tasks
@Wxh16144 Wxh16144 mentioned this issue Jun 9, 2023
Merged
20 tasks
@david-cord
Copy link
Contributor

Hi there, Thank you for this initiative. It's currently blocking our migration.
I See Layout is checked however you still can't set layoutHeaderHeight for example despite it being defined internally. Can we please expose these and consider this component not complete? I believe there are other config values for this component also not exposed (at least on 5.4.7)

I will check it.

Any news here @MadCcc . I see Layout is still marked as complete when there are many internal tokes unexposed, i.e. layoutHeaderHeight

@SnowingFox
Copy link
Contributor

hi, @MadCcc, I see that there are many components that you are responsible for, but they are in a pending state now. May I ask if I need to share some of them? I want to participate in open source.

@MadCcc
Copy link
Member Author

MadCcc commented Aug 7, 2023

hi, @MadCcc, I see that there are many components that you are responsible for, but they are in a pending state now. May I ask if I need to share some of them? I want to participate in open source.

Thanks for your will to contributing! But it is a delayed work and I'm going to finish it this month.
And sry for everyone watching this issue, my bad to not finish all the work in time.
The rest components need careful migration, so I will do it myself :)

@MadCcc MadCcc added 👷🏻‍♂️ Someone working on it and removed help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. labels Aug 7, 2023
@MadCcc MadCcc mentioned this issue Aug 8, 2023
Closed
@yoyo837
Copy link
Contributor

yoyo837 commented Aug 11, 2023

@david-cord See #44174

@david-cord
Copy link
Contributor

@david-cord See #44174

Cc @daniel-encord

@yoyo837 yoyo837 mentioned this issue Aug 12, 2023
Closed
@yoyo837 yoyo837 linked a pull request Aug 22, 2023 that will close this issue
feat: migrate less to token for Form #42774
Merged
20 tasks
@MadCcc MadCcc closed this as completed Aug 22, 2023
@yoyo837 yoyo837 unpinned this issue Aug 22, 2023
@bencerf
Copy link

bencerf commented Aug 23, 2023

Thanks @MadCcc and other contributors for finishing the Component Token Migration 🙏

@dgomez-orangeloops
Copy link
Contributor

hi all, just to share with you, i'm trying use the Table/ComponentToken, but the interface ComponentToken still empty (v 5.8.4).

it's merged on feature branch, but not in master.

@MadCcc fyi

@abenhamdine
Copy link
Contributor

hi all, just to share with you, i'm trying use the Table/ComponentToken, but the interface ComponentToken still empty (v 5.8.4).

it's merged on feature branch, but not in master.

@MadCcc fyi

yes many design tokens are currently only in feature branch, I guess we have to wait for the next weekly release (tomorrow) or perhaps next week.

@yoyo837
Copy link
Contributor

yoyo837 commented Sep 8, 2023

https://github.com/ant-design/ant-design/releases/tag/5.9.0 it out.

@yoyo837 yoyo837 mentioned this issue Sep 9, 2023
Closed
@monolithed
Copy link

monolithed commented Mar 18, 2024 •
edited

padding, paddingLG, controlPaddingHorizontal, and paddingContentHorizontalLG are still not applied to the Buttoncomponent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
5.x 💡 Feature Request 👷🏻‍♂️ Someone working on it
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: migrate less to token for Form poyiding/ant-design