Skip to content

Commit

Permalink
docs: update v15 migration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
DSil committed Apr 3, 2024
1 parent eed9644 commit 9c9aca6
Showing 1 changed file with 41 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,50 @@ redirect_from:
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.

## Breaking changes

### OrbitProvider changes

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`.

```jsx
import { ThemeProvider } from "styled-components";
import { OrbitProvider } from "@kiwicom/orbit-components";

const App = () => (
<ThemeProvider theme={theme}>
<OrbitProvider theme={theme}>
<App />
</OrbitProvider>
</ThemeProvider>
);
```

### mediaQueries util function removed

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.
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](/development/utilities/media-queries/) 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](https://github.com/kiwicom/orbit/blob/%40kiwicom/orbit-components%4014.0.0/packages/orbit-components/src/utils/mediaQuery/index.ts#L23).

If you are using tailwind, you can use the [tailwind capabilities for responsive design](https://tailwindcss.com/docs/responsive-design).
The breakpoint prefixes available in Orbit and their values are the ones defined on the [Tailwind classnames documentation page](/foundation/tailwind/classnames/), on the `Screens` filter.

### rtl utils removed

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](https://github.com/kiwicom/orbit/tree/@kiwicom/[email protected]/packages/orbit-components/src/utils/rtl).

If you are using tailwind, check the [Tailwind documentation](https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support) for instructions on how to achieve styles exclusively for RTL or LTR.

0 comments on commit 9c9aca6

Please sign in to comment.