chakra-migration-guide.md

Chakra migration guide

This is a reference for migrating our current styled components from emotion to Chakra components.

This is part of our UI library implementation epic.

Replace styled components with Chakra components

All styled components need to be removed and replaced with the corresponded Chakra component. See the list of components.

Use as much native Chakra components as possible.

Wrappers or layout divs

Use the native layouts components

// before
const Wrapper = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`

// now
<Stack direction='row'>

Center things using the <Center /> component

// before
const Center = styled.div`
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
`

// now
<Center h="100px">

Group buttons using <ButtonGroup /> or <Wrap />

// before
const ButtonRow = styled.div`
  display: flex;
  align-items: center;
  flex-wrap: wrap;
`

// now
<ButtonGroup variant='outline' spacing={2}>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

// or
<Wrap spacing={2}>
  <WrapItem><Button variant="outline">Button 1</Button></WrapItem>
  <WrapItem><Button variant="outline">Button 2</Button></WrapItem>
</Wrap>

Override styles using style props

• You can see how to use the different style props here: https://chakra-ui.com/docs/styled-system/style-props
• Chakra default values are documented here: https://chakra-ui.com/docs/styled-system/theme

// before
const Paragraph = styled.p`
  font-size: 1rem;
  margin: 1rem;
`

// now
<Text fontSize="md" margin={4} />

Theme colors

All the previous colors defined in the old theme src/theme.ts were ported into the new theme as well. Use the same color variables.

// before
const Text = styled.p`
	color: ${({ theme }) => theme.colors.primary};
	background-color: ${({ theme }) => theme.colors.background};
`

// now
<Text color="primary" bg="background" />

💡 In the **next iteration** we will refactor all the colors with the correct color from the new Design System

Update dependencies

• [Deprecated] src/components/Icon - use the Chakra Icon instead.

import { Icon } from "@chakra-ui/react"
import { BsQuestionSquareFill } from "react-icons/bs"
;<Icon as={BsQuestionSquareFill} />

• [Deprecated]src/components/SharedStyledComponents - we are not using this anymore, use Chakra components instead.

Do you have any other question?

Ping us in Discord, in the #ui-library-migration channel, or leave a comment here or in your opened PR, and we can help you out 💪