feat: migrate @atlaskit components to latest compiled-css-in-js major versions #838
Conversation
Signed-off-by: Adam Setch <[email protected]>
Signed-off-by: Adam Setch <[email protected]>
✅ Deploy Preview for atlassify canceled.
|
|
setchy
changed the title
github-actions
bot
added
the
enhancement
| use: [ | ||
| { | ||
| // ↓↓ Atlaskit Components with Compiled CSS in JS - must be defined last ↓↓ | ||
| loader: '@compiled/webpack-loader', |
There was a problem hiding this comment.
hey @setchy was this the missing piece?
There was a problem hiding this comment.
Hey @danieldelcore - not quite. My handful of attempts at migrating had always had this webpack loader defined.
What I did differently this time is i didn't attempt to introduce babel. I mistakenly assumed from the screenshot on https://compiledcssinjs.com/docs/installation#webpack that babel was a requirement. Each time I tried to configure babel in the project, it caused other flow-on impacts. So this time I skipped that and it seems to have worked out ok...
Also, the issue's I were having with my jest unit tests was resolved by adding this to my setup file. without it, jest would fail tests due to not being able to understand the CSS imports
There was a problem hiding this comment.
I have noticed a few minor visual regression, with modal sizing and with Form field labels.
For now i'm chalking them down to changes in the component library itself and will monitor how they evolve over time
There was a problem hiding this comment.
I think the modal issue is actually a bug, my colleague has a PR up for that right now :) Not sure about form labels, could just be a recent visual change.
There was a problem hiding this comment.
I'll share an example of the forms label later today (before and after).
What I noticed is the label is using a normal font-weight instead of being slightly bolded.
There was a problem hiding this comment.
This is the form field labels which I was referring to.
| Before | After |
|---|---|
 |
 |
These used to be a heavier font-weight, similar to the example shown in https://atlassian.design/components/form/examples
There was a problem hiding this comment.
I think the modal issue is actually a bug, my colleague has a PR up for that right now :)
Happy to confirm this regression was fixed in @atlaskit/modal-dialog v14.1.3
closes #467