-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #177 from cca-io/version-3.0.0
Version 3.0.0
- Loading branch information
Showing
34 changed files
with
2,620 additions
and
1,935 deletions.
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
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
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
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
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
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
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 |
---|---|---|
@@ -0,0 +1,60 @@ | ||
--- | ||
title: 2.x -> 3.0.0 | ||
--- | ||
|
||
# Migration Guide for v2.x -> v3.0.0 | ||
|
||
## MaterialUi is now Mui | ||
|
||
We changed the namespace from `MaterialUi` to `Mui` in 3.0.0 for the following | ||
reasons: | ||
|
||
1. Nice and short 🙂 | ||
2. Material-UI [rebranded to MUI](https://mui.com/blog/material-ui-is-now-mui/) | ||
3. Now that we are using the `namespace` feature, it is not possible anymore to | ||
"alias" the `MaterialUi` module to `Mui` using `include MaterialUi`. This | ||
gives the following error: | ||
`Mui is compiled in script mode while its dependent is not`. | ||
4. 3.0.0 already has other breaking changes anyway. | ||
|
||
Furthermore, the lab bindings now have their own namespace under `MuiLab`. | ||
|
||
## Bindings changes | ||
|
||
These are mainly due to the stricter focus on zero-cost bindings. | ||
|
||
### Mangled names utilize the `\""`-syntax now | ||
|
||
e.g. `_InputProps` is now `\"InputProps"`, `_type="number"` is now | ||
`\"type"="number"`. | ||
|
||
### Polymorphic variants are now all lowercase | ||
|
||
e.g. `color=#Primary` is now `color=#primary`. | ||
|
||
### `any` and `anyUnpack` have been replaced | ||
|
||
These type helpers now reside under `Mui.Any`. Refer to | ||
[Any](../project-structure/any-type.md). | ||
|
||
### Children types are more specific | ||
|
||
Previously it was possible to put arbitrary types (such as strings) into | ||
children. Now the children type is `React.element`, which streamlines this | ||
library to the `rescript-react` bindings. | ||
|
||
Therefore, you now need to wrap strings with the `React.string` function, or | ||
pass arrays to `React.array`. | ||
|
||
## FAQ | ||
|
||
### Did we miss anything? | ||
|
||
If there are any problems with this new release, feel free to | ||
[open an issue](https://github.com/cca-io/rescript-material-ui/issues). | ||
|
||
### Will you upgrade to v5 as well? | ||
|
||
We are in no rush to do it, because we currently use v4 in most of our projects. | ||
If we ever feel the need to upgrade, we will upgrade this repository | ||
accordingly. |
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
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
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
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 |
---|---|---|
@@ -0,0 +1,31 @@ | ||
--- | ||
title: bs-css | ||
--- | ||
|
||
## Usage with bs-css or other CSS-in-ReScript libraries | ||
|
||
It is important to change the style precedence order with the help of the | ||
`StylesProvider` component, otherwise the internal MUI classes will overwrite | ||
your styles. | ||
|
||
### Example | ||
|
||
```rescript | ||
module Styles = { | ||
open CssJs | ||
let categoryButton = style(. [textTransform(#none), justifyContent(#flexStart)]) | ||
let icon = style(. [fontSize(px(24)), width(px(50))]) | ||
} | ||
@react.component | ||
let make = () => | ||
<Mui.StylesProvider injectFirst=true> | ||
<Mui.Button | ||
color=#primary | ||
classes={Mui.Button.Classes.make(~root=Styles.categoryButton, ())} | ||
onClick=ignore> | ||
{React.string("Hello, BS-CSS & MUI!")} | ||
</Mui.Button> | ||
</Mui.StylesProvider> | ||
``` |
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 |
---|---|---|
@@ -0,0 +1,24 @@ | ||
--- | ||
title: Plain CSS | ||
--- | ||
|
||
## Usage with plain CSS | ||
|
||
It is important to change the style precedence order with the help of the | ||
`StylesProvider` component, otherwise the internal MUI classes will overwrite | ||
your styles. | ||
|
||
### Example | ||
|
||
```rescript | ||
@react.component | ||
let make = () => | ||
<Mui.StylesProvider injectFirst=true> | ||
<Mui.Button | ||
color=#primary | ||
className="my-global-class-name" | ||
onClick=ignore> | ||
{React.string("Hello, plain CSS & MUI!")} | ||
</Mui.Button> | ||
</Mui.StylesProvider> | ||
``` |
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 |
---|---|---|
@@ -0,0 +1,12 @@ | ||
--- | ||
title: Introduction | ||
--- | ||
|
||
For styling `rescript-material-ui` components, you need to pass CSS class names | ||
to them. We have documented the following popular options: | ||
|
||
- [`useStyles` hook](use-styles) (new in 3.0.0) | ||
- [CSS](css) | ||
- [Tailwind CSS](tailwind) | ||
- [a CSS-in-ReScript library like `bs-css`](bs-css) | ||
- [`Styles PPX`](styles-ppx) (not recommended) |
Oops, something went wrong.