Migration - grid-emotion
grid-emotion has been deprecated for over a year now, the new project is reflexbox. In order to upgrade to the newest version of emotion we need to migrate off of grid-emotion.
To migrate, replace the imported <Flex> and <Box> components with a styled component using emotion.
components
Replace the components with below and then remove the necessary props and move to the styled component.
<Flex>
const Flex = styled('div')`
display: flex;
`;<Box>
const Box = styled('div')`
`;props
If you are modifying a component that is exported, be sure to grep through the codebase for the component to make sure that it is not being rendererd with additional props specific to grid-emotion. Examples are the <Panel> components.
margin and padding
Margin props begin with m and padding with p. The examples below will be using margin as an example
| old (grid-emotion) | new (css/emotion/styled) |
|---|---|
m={2} | margin: ${space(2); |
mx={2} | margin-left: ${space(2); margin-right: ${space(2)}; |
my={2} | margin-top: ${space(2); margin-bottom: ${space(2)}; |
ml={2} | margin-left: ${space(2); |
mr={2} | margin-right: ${space(2); |
mt={2} | margin-top: ${space(2); |
mb={2} | margin-bottom: ${space(2); |
flexbox
These are flexbox props
| old (grid-emotion) | new (css/emotion/styled) |
|---|---|
align="center" | align-items: center; |
justify="center" | justify-content: center; |
direction="column" | flex-direction: column; |
wrap="wrap" | flex-wrap: wrap; |
width (as an array)
TBD - for now just ignore the import statement of grid-emotion e.g. // eslint-disable-line no-restricted-imports