Migrate from v2 to v3

[filiptammergard]

Breaking changes in v3 are mainly API changes where composition is used instead of props.

Select

• <DefaultDropdownSelect> and <LabelDropdownSelect> takes children instead of an option prop.

const options = [
  { value: "first-option", text: "First option" },
  { value: "second-option", text: "Second option" },
]

// v2
<DefaultDropdownSelect options={options} />

// v3
<DefaultDropdownSelect>
  {options.map((option) => (
    <option key={option.key} value={option.value}>{option.text}</option>
  ))}
</DefaultDropdownSelect>

The benefit from having full control over what and how to render the options out-weights the extra code needed.

Table

• <Table> is renamed to <ComposedTable> and a new <Table> is added, where the parts of the table are composed manually.

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

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

// v3
<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>

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

For simple tables, <ComposedTable> might be convenient. But in many cases, logic for row/column click is needed, which is way simpler to get right when you have control of the composition yourself.

Misc

• <Caption> is now rendering a plain <p> instead of a <small> inside a <p>.
• fullWidth prop is changed to isFullWidth wherever it exists.
• Default min-width on buttons is changed from 240px to 120px.
• font-weight for the heading components were 700, although the actual font weight was 450. This is fixed by publishing a new version on einride/fonts with corrected font weights, and updated font weight settings in the heading components in einride/ui. In other words, the font import path should be updated when upgrading to v3:

// v2
<link rel="stylesheet" href="https://fonts.einride.tech/SuisseIntl.css" />
<link rel="stylesheet" href="https://fonts.einride.tech/EinrideIcons.css" />

// v3
<link rel="stylesheet" href="https://fonts.einride.tech/v2/SuisseIntl.css" />
<link rel="stylesheet" href="https://fonts.einride.tech/v2/EinrideIcons.css" />