-
Notifications
You must be signed in to change notification settings - Fork 471
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
Upgrade ant-design to v5.x #1907
Conversation
Signed-off-by: Ansh Goyal <[email protected]>
Signed-off-by: Ansh Goyal <[email protected]>
Signed-off-by: Ansh Goyal <[email protected]>
Signed-off-by: Ansh Goyal <[email protected]>
Codecov ReportAll modified and coverable lines are covered by tests ✅
📢 Thoughts on this report? Let us know!. |
@yurishkuro The size of this PR is quite big, but I wasn't able to distill it down to multiple PRs, because all the breaking changes were introduced in v5.0.0. v5.latest didn't bring any other breaking changes, except the styling changes, which we are already on v4. The size grew this big due to snapshot changes 📷 |
Signed-off-by: Ansh Goyal <[email protected]>
Signed-off-by: Ansh Goyal <[email protected]>
@@ -146,6 +146,7 @@ export function TopNavImpl(props: Props) { | |||
disabledOverflow | |||
selectedKeys={[pathname]} | |||
items={itemsGlobalRight} | |||
style={{ color: '#fff' }} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't this be in css somewhere?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, but, since the change was a one-liner, I thought of adding an inline style. Moving it to the CSS file.
@@ -64,33 +64,6 @@ export default defineConfig({ | |||
less: { | |||
math: 'always', | |||
javascriptEnabled: true, | |||
modifyVars: { | |||
// Supply appropriate overrides to the Ant Design System. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain what's happening here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here, we are basically removing the replacement variables.
Before v5, we had an option to replace less variables in ant-design's core files with the ones defined here.
This modifyVars
object was containing all such variables. But since v5, antd doesn't support less variables, so, this modification thing is of no use.
Instead, ant-design introduced seedTokens and aliasTokens which can be supplied to the theme directly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is there documentation about that? The names seedToken don't tell me much, especially why they would be a replacement for less variables.
On a high level, what is the approach now? My understanding was that less variables allowed us to reuse settings across different css files. Do we have to replicate those now in many places?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ant-design v4 to v5 migration guide explaining why they removed the support for less variables.
This document explains in deep how to migrate from less variables to tokens and what exactly is all that seedToken, and other such token thing.
Since we were replacing those variables via the modifyVars
object, the same can be (is achieved) using the design tokens supplied to the theme configuration of ant-design.
less variables for sure achieves the purpose of reusing them across files, but since the change is internal to ant-design library, we aren't affected in other areas, as we aren't using any antd's less file in our code.
Signed-off-by: Ansh Goyal <[email protected]>
🚀 🚀 🚀 |
Which problem is this PR solving?
Description of the changes
seedToken
andaliasToken
in place of less variables.compatible
package.close
andwarn
have been renameddestory
andwarning
respectively.screen-capture.5.webm
How was this change tested?
Checklist
jaeger
:make lint test
jaeger-ui
:yarn lint
andyarn test