Upgrade ant-design to v5.x #1907
Conversation
Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
anshgoyalevil
requested review from
joe-elliott
and removed request for
a team
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 <anshgoyal1704@gmail.com>
| @@ -146,6 +146,7 @@ export function TopNavImpl(props: Props) { | |||
| disabledOverflow | |||
| selectedKeys={[pathname]} | |||
| items={itemsGlobalRight} | |||
| style={{ color: '#fff' }} | |||
There was a problem hiding this comment.
Shouldn't this be in css somewhere?
There was a problem hiding this comment.
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.
Can you explain what's happening here?
There was a problem hiding this comment.
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.
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.
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 <anshgoyal1704@gmail.com>
yurishkuro
added
the
changelog:bugfix-or-minor-feature
|
🚀 🚀 🚀 |
Which problem is this PR solving?
Description of the changes
seedTokenandaliasTokenin place of less variables.compatiblepackage.closeandwarnhave been renameddestoryandwarningrespectively.screen-capture.5.webm
How was this change tested?
Checklist
jaeger:make lint testjaeger-ui:yarn lintandyarn test