Migrate from v5 to v6

[filiptammergard]

Breaking changes when migrating from v5 to v6:

• Peer dependency requirement of React is updated to version >=18.0.0, due to introduction of some React 18 features such as useId.
• Deprecated breakpoint theme object is removed. Use breakpoints or mediaQueries instead!
• Deprecated <ElevatedSheets> and <PlainSheets> components are removed. Use <Sheets> instead! If you don't want the overlay, set withOverlay={false}.
• title prop in <Popover> is renamed to navigationTitle to make it clear what it is used for and also to align prop naming with <Sheets>.
• All select components are made full width by default. The default widths are rarely desired. All other input components are full width by default, so this change is made for API consistency and as well as design predictability. The isFullWidth prop is removed. If you want a specific width, wrap in a container with that width, or pass a custom width style to the component.

// v5
<Select isFullWidth>
  {/* options */}
</Select>

// v6
<Select>
  {/* options */}
</Select>

• <WithIconButton> is removed. All regular buttons have a rightIcon prop to add icons.

// v5
<WithIconButton icon={<Icon name="bolt" />}>This is v5</WithIconButton>

// v6
<PrimaryButton rightIcon={<Icon name="bolt" />}>This is v6</PrimaryButton>

// also v6, you can add icons to all button variants now!
<SecondaryButton rightIcon={<Icon name="bolt" />}>This is v6</SecondaryButton>
<TertiaryButton rightIcon={<Icon name="bolt" />}>This is v6</TertiaryButton>

• Primitives are removed from theme to prepare for a future where primitives can change in isolation from other changes. If primitives are needed, they can be imported directly from @einride/ui:

import { primitives } from "@einride/ui"

const StyledComponent = styled(Component)`
  // v5
  color: ${({ theme }) => theme.primitives.color.green.dark};

  // v6
  color: ${primitives.color.green.dark};
`

• Deprecated <LabelTextInput> and <LabelSelect> components are removed. Use <TextInput> and <Select> with label prop instead! Preferring many highly specific components with good names to components with many configuration options has served us well. However, creating separate input components for when label is used creates more maintenance work than it saves. From now on all affected input components will be supported with and without a label prop.

// v5
<LabelTextInput label="Label" />

// v6
<TextInput label="Label" />

• The isFilterable prop in <SearchSelect> defaults to true instead of false. It defaulted to false before just for backwards compatibility reasons. If you want the isFilterable={false} behavior, you need to set it explicitly now.
• The wrapperStyles prop in <SearchSelect> is removed in favor of wrapperProps. It lets you add any props to the wrapper element rather than just styles.

// v5
<SearchSelect wrapperStyles={{ marginLeft: "100px" }}>
  ...
<SearchSelect />

// v6
<SearchSelect
  wrapperProps={{
    style: { marginLeft: "100px" },
    onClick: () => console.log("I can do this in v6!"),
}}>
  ...
<SearchSelect />