Migrate from v4 to v5

[filiptammergard]

Breaking changes when migrating from v4 to v5:

• We're preparing for shipping components with animations in Einride UI. To make this happen, we need to add framer-motion as a peer dependency. Install it when upgrading to v5:

# npm
npm install framer-motion

# yarn
yarn add framer-motion

• We're trying to avoid the word "default" in component names and prop value names going forward. Defaults change over time and we're only putting extra work on ourselves by calling things "default". Additionally, we'll try to use simple semantic names for the components. For these reasons, we're changing <DefaultDropdownSelect> to <Select> and <LabelDropdownSelect> to <LabelSelect>:

- import { DefaultDropdownSelect, LabelDropdownSelect } from "@einride/ui"
+ import { Select, LabelSelect } from "@einride/ui"

• For the same reason, the variant "default" in <Label> is changed to "primary":

- <Label variant="default">Label</Label>
+ <Label variant="primary">Label</Label>

# This is the same as above
<Label>Label</Label>

• We also want to use semantic prop names that mirrors what it actually does. Therefore, we're changing the prop size in <VerticalLayout> to gap. The new name mirrors what the prop does better and it also enables setting gap="none", which makes no for size="none":

- <VerticalLayout size="md" />
+ <VerticalLayout gap="md" /> 

• We want to avoid size props names such as "small", "medium" and "large" going forward. Because what happens if we need to introduce a size larger than large? "extra large"? And a size larger than that? "extra extra large" or "mega large"? We have found it's better to use "sm", "md" and "lg". It makes adding additional sizes very easy: "xl", "2xl", "3xl", "xs", "2xs" etc. We're doing a change to the <Logo> API due to this:

- <Logo size="small" />
+ <Logo size="sm" />

- <Logo size="large" />
+ <Logo size="lg" />

• Turns out a generic table component is not easy to maintain, while it provides no real value. <ComposedTable> is only used in one place throughout the Einride org and it can be replaced with <Table> which gives a lot more control:

const rows = [
  { id: "title-1", title: "Title 1" },
  { id: "title-2", title: "Title 2" },
]

// v4
<ComposedTable 
  headers={[
    { key: "id", displayText: "ID" },
    { key: "title", displayText: "Title" },
  ]}
  rows={rows}
/>

// v5
<Table>
  <Thead>
    <Tr>
      <Th>ID</Td>
      <Th>Title</Th>
    </Tr>
  </Thead>
  <Tbody>
    {rows.map((row) => (
      <Tr key={row.id}>
        <Td>{row.id}</Td>
        <Td>{row.title}</Td>
      </Tr>
    ))}
  </Tbody>
</Table>

• breakpoint object in theme can still be used, but is deprecated and will be removed in the next major release. Currently, the breakpoint object looks like this:

breakpoint: {
  belowMedium: `@media (max-width: ${MEDIUM_BREAKPOINT_PIXELS - 1}px)`,
  medium: `@media (min-width: ${MEDIUM_BREAKPOINT_PIXELS}px)`,
  belowLarge: `@media (max-width: ${LARGE_BREAKPOINT_PIXELS - 1}px)`,
  large: `@media (min-width: ${LARGE_BREAKPOINT_PIXELS}px)`,
},

These values are actually not breakpoints, but rather full media queries. Instead, we're introducing a breakpoints object with actual breakpoints, like this:

breakpoints: {
  md: MEDIUM_BREAKPOINT_PIXELS,
  lg: LARGE_BREAKPOINT_PIXELS,
},

Additionally, we're adding a mediaQueries object, that can be used almost like the deprecated breakpoint object, but without the leading "@media":

mediaQueries: {
  belowMd: `(max-width: ${MEDIUM_BREAKPOINT_PIXELS - 1}px)`,
  md: `(min-width: ${MEDIUM_BREAKPOINT_PIXELS}px)`,
  belowLg: `(max-width: ${LARGE_BREAKPOINT_PIXELS - 1}px)`,
  large: `(min-width: ${LARGE_BREAKPOINT_PIXELS}px)`,
},

// v4
const Text = styled.p`
  ${({ theme }) => theme.breakpoint.medium} {
    color: hotpink;
  }
`

// v5
const Text = styled.p`
  @media ${({ theme }) => theme.mediaQueries.md} {
    color: hotpink;
  }
`

These updates are a way of making use of media queries more flexible. You can now do queries like this, which was not possible before:

const Text = styled.p`
  @media ${({ theme }) => `${theme.mediaQueries.md} and ${theme.mediaQueries.belowLg}`} {
    color: hotpink; // text is only pink when viewport is medium
  }
`

const Text = styled.p`
  @media (resolution: 150dpi) and ${({ theme }) => theme.mediaQueries.md} {
    color: hotpink; // text is only pink on a certain resolution when viewport is medium or more
  }
`

const Text = styled.p`
  @media (min-width: ${({ theme }) => theme.breakpoints.md + 100}px) {
    color: hotpink; // text is only pink when viewports is 100px larger than medium
  }
`