Migrate from v3 to v4

[filiptammergard]

Breaking changes when migrating from v3 to v4:

• <Icon> name "arrowRightwards" changes name to "arrowRight" and icon name "arrowLeftwards" changes name to "arrowLeft":

- <Icon name="arrowRightwards" />
+ <Icon name="arrowRight" /> 

- <Icon name="arrowLeftwards" />
+ <Icon name="arrowLeft" /> 

• <VerticalSpacing> sizes change and prop names are shortened, here's the new API:

<VerticalSpacing /> // 16px (same as before)
<VerticalSpacing size="xs" /> // 8px (didn't exist before)
<VerticalSpacing size="sm" /> // 16px (same as small was before)
<VerticalSpacing size="md" /> // 24px (same as medium was before)
<VerticalSpacing size="lg" /> // 48px (large was 72px before)
<VerticalSpacing size="xl" /> // 64px (extraLarge was 120px before)

• Same goes for <VerticalLayout>:

<VerticalLayout /> // 16px
<VerticalLayout size="xs" /> // 8px
<VerticalLayout size="sm" /> // 16px
<VerticalLayout size="md" /> // 24px
<VerticalLayout size="lg" /> // 48px
<VerticalLayout size="xl" /> // 64px

• Primitive colors are restructured for API consistency:

// old primitive color object slice
color = {
  black: "#121212",
  white: "#ffffff",
  greyscale: {
    grey20: "#F5F5F5",
    grey40: "#EBEBEB",
    grey50: "#DADADA",
    grey80: "#7A7A7A",
    grey100: "#1E1E1F",
  },
}

// new structure
color = {
  greyscale: {
    white: "#ffffff",
    grey20: "#F5F5F5",
    grey40: "#EBEBEB",
    grey50: "#DADADA",
    grey80: "#7A7A7A",
    grey100: "#1E1E1F",
    black: "#121212",
  },
}

I.e., the diff for using black and from the theme object looks like this:

- ${({ theme }) => theme.primitives.color.black};
+ ${({ theme }) => theme.primitives.color.greyscale.black};

• <IconButton> changes to using Icon names as props instead of using the unicode icon. Also, a required aria-label prop is introduced for accessibility:

- <IconButton icon="↑" />
+ <IconButton icon="arrowUp" aria-label="Move this item upwards in the list" />

This makes it safe to change the unicode value without breaking the icon in the button.

• Having checkboxes without labels is not accessible. Therefore, <DefaultCheckbox> is removed and <LabelCheckbox> is renamed to <Checkbox>. Also, children is used instead of label prop:

- <LabelCheckbox label="This is the label" />
+ <Checkbox>This is the label</Checkbox>

• A required label is introduced for <Radio> that uses children instead of label prop:

- <Radio label="This is the label" />
+ <Radio>This is the label</Radio>

• Accent colors are removed from theme as they should not be used according to our brand guidelines.
• aria-label is required for <SearchInput> and <TextInput> for accessibility, as they are missing regular labels.
• A required scope prop is introduced for <Th>, to define the cells that the header element relates to, for accessibility:

<Table>
  <Thead>
    <Tr>
-     <Th>Country</Th>
-     <Th>Capital</Th>
+     <Th scope="col">Country</Th>
+     <Th scope="col">Capital</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
-     <Th>Sweden</Th>
+     <Th scope="row">Sweden</Th>
      <Td>Stockholm</Td>
    </Tr>
    <Tr>
-     <Th>Germany</Th>
+     <Th scope="row">Germany</Th>
      <Td>Berlin</Td>
    </Tr>
  </Tbody>
</Table>

• A required aria-label is introduced for DefaultDropdownSelect since it is missing a regular label, for accessibility:

-<DefaultDropdownSelect>
+<DefaultDropdownSelect aria-label="Which is your favorite option?">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</DefaultDropdownSelect>