-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
41 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. |