Migration
Migration Q&A
What are the common dependencies which teams should use inside projects?
Regarding the Toolbox library you should install in your project:
- React
- @mercell/tailwind
- Tslib
- @carbon/icons-react
- Lodash
- Classnames
- React-router-dom
- Any component you need from Toolbox Design System e.g.
@mercell/input-react - Any typescript types regarding the list above e.g.
@types/carbon__icons-react
My project is still using @mercell/tailwind 2.0.0 version. What changed and how can I migrate to version 3 or 4 and above?
From version 3 we changed the way of handling the styling inside @mercell/tailwind package which has a huge impact on how would you use the Toolbox components and also how we are developing a new one under the Mercell/Core repository
What happened to styling inside @mercell/tailwind package?
We moved them from the package to the related components. You will no longer get unnecessary styling bundled in when you have the @mercell/tailwind package.
If I want to update the @mercell/tailwind in my project, will I need to update every component as well?
Yes! You will need to update every component as well since the styling has been moved. There are also multiple breaking changes in components which will need to be addressed when updating. We recommend to check the implementation of components here
I saw in Figma that there is a new Layout. How can I implement it?
@mercell/layout-react is the old and deprecated package which you have to uninstall and move to the @mercell/global-menu-react package. All necessary information you can find here
I saw in Figma new colors? What changed?
Here is a list of changes:
- main.DEFAULT —> [NEW NAME] valhalla
- main.hover —> [REPLACED] hover-grey
- main.80 —> [REMOVED]
- main.60 —> [REMOVED]
- main.40 —> [REMOVED]
- main.20 —> [REMOVED]
- contrast.DEFAULT —> [NEW NAME] cerulean.default
- contrast.80 —> [NEW NAME] cerulean.80
- contrast.60 —> [NEW NAME] cerulean.60
- contrast.40 —> [NEW NAME] cerulean.40
- contrast.20 —> [NEW NAME] cerulean.20
- brand.dark —> [NEW NAME] minsk
- brand.light —> [REPLACED] studio
- New colour —> [NEW COLOUR] snuff
- transparent —> [NO CHANGE]
- base.default —> [NEW NAME] white
- base.50 —> [NEW NAME] alto
- base.25 —> [NEW NAME] concrete
- base.0 —> [NEW NAME] mirage
- success.accent —> [REPLACED] tropical-rain-forest
- success.DEFAULT —> [REPLACED] frostee
- error.accent —> [REPLACED] well-read
- error.DEFAULT —> [REPLACED] pippin
- important.accent —> [REPLACED] cognac
- important.DEFAULT —> [REPLACED] colonial
- information.accent —> [REPLACED] matisse
- information.DEFAULT —> [REPLACED] foam
Other changes:
- Main call-to-action colour —> minsk
- Hover state —> hover-grey
- Pressed state —> mirage
- Disabled state —> alto
- Focused state —> cerulean.default