This migration guide focuses on the process of migrating from Orbit v14 to v15.0, as some breaking changes were introduced. With this guide, we aim to walk through all the breaking changes and how they can be addressed, allowing the migration to be smoother and effortlessly.

This version marks the removal of styled-components. The whole styling of Orbit components is now done using Tailwind exclusively. This also means that our support for styled-components related issues is now finished.

The OrbitProvider component has changed and no longer includes the ThemeProvider from styled-components.

This should not have any impact if you are not using styled-components in your project.

The useTheme hook is still available and can be used to access the theme values, as usual.

If you are still using styled-components in your project, you will need to wrap your application (and the OrbitProvider) with the ThemeProvider from styled-components and pass it the same theme you are passing to OrbitProvider.

import { ThemeProvider } from "styled-components";
import { OrbitProvider } from "@kiwicom/orbit-components";
const App = () => (
  <ThemeProvider theme={theme}>
    <OrbitProvider theme={theme}>
      <App />
    </OrbitProvider>
  </ThemeProvider>
);

The mediaQueries function is no longer available. This was a styled-components util function that is now no longer expected to be used, as we move away from StyledComponents. If needed, the tokens and breakpoint values are still accessible via the getBreakpointWidth function and the QUERIES and TOKEN constants. Check the documentation for more information on how to use these.

If you are still using styled-components in your custom components and you need this function we invite you to add the implementation to your project. The implementation can be seen here.

If you are using tailwind, you can use the tailwind capabilities for responsive design. The breakpoint prefixes available in Orbit and their values are the ones defined on the Tailwind classnames documentation page, on the Screens filter.

The rtl utility functions have been removed. They were used to handle RTL styles in the styled-components version of Orbit.

With the removal of styled-components, these functions are no longer available through orbit-components.

If you are still using styled-components in your project and need these functions, you can add the implementation to your project. The implementation and documentation can be seen here.

If you are using tailwind, check the Tailwind documentation for instructions on how to achieve styles exclusively for RTL or LTR.