Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add createCartoTheme: look and feel & ui #78

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs: add createCartoTheme: look and feel & ui #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions app/content/react/guides/look-and-feel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,39 @@ There are lots of properties that you can adapt to your needs. Some of the main

- <code>[breakpoints](https://material-ui.com/customization/breakpoints/)</code>. Support for different screen sizes.

For instance, if you want to change the main color (used for the navigation bar background), you can edit the `App.js` file and add the following instruction before the theme creation:
We have two different ways to handle the theme creation. As an example, let's change the main color (used for the navigation bar background) and the font family for the application title (`subtitle-1`), using both cases. You can edit the `App.js` file and add the following instruction before the theme creation:

### Using `createCartoTheme` (recommended):

`cartoThemeOptions` needs to be overwritten before `createCartoTheme` is initialized.

#### Changing main color:

```javascript
...
import { cartoThemeOptions, createCartoTheme } from '@carto/react-ui';
...
cartoThemeOptions.palette.primary.main = "#800000";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AdriSolid don't we need to pass here the object to the new method as param?

const theme = createCartoTheme();
...
```

#### Changing the font family:

```javascript
...
import { cartoThemeOptions, createCartoTheme } from '@carto/react-ui';
...
cartoThemeOptions.typography.subtitle1.fontFamily = "'Times New Roman'";
const theme = createCartoTheme();
...
```

### Using `cartoThemeOptions`:

`cartoThemeOptions` needs to be overwritten before `createMuiTheme` is initialized.

#### Changing main color:

```javascript
...
Expand All @@ -25,7 +57,7 @@ let theme = createMuiTheme(cartoThemeOptions);
...
```

If you want to change the font family for the application title (`subtitle-1`), you can add the following instruction before the theme creation:
#### Changing the font family:

```javascript
...
Expand Down
24 changes: 23 additions & 1 deletion app/content/react/library-reference/ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

A set of UI elements to build CARTO for React applications.

The package includes 2 main elements: a set of values to use a Material UI theme with CARTO brand (`cartoThemeOptions`) + a group of widgets:
The package includes 2 main elements: a set of values to use a Material UI theme with CARTO brand (`createCartoTheme` and `cartoThemeOptions`) + a group of widgets:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As createCartoTheme is strictly a method, how about...

The package includes some utilities to create a Material UI theme with CARTO brand (createCartoTheme and cartoThemeOptions) + a group of widgets


- `WrapperWidgetUI`: a collapsible panel with a title, useful to wrap other UI elements.
- `CategoryWidgetUI`: to display with horizontal bars a magnitude for each selected category (eg. population sum per country).
Expand All @@ -18,6 +18,28 @@ The package includes 2 main elements: a set of values to use a Material UI theme

### Constants & enums

#### createCartoTheme

Builds the official CARTO Material UI theme. See official doc on theming at [Material UI theming](https://material-ui.com/customization/theming/)

- **Example**:

```js
import { ThemeProvider } from "@material-ui/core";
import { createCartoTheme } from "@carto/react-ui";

// Theme build
const theme = createCartoTheme();

// ... and its use in the main App component
return (
<ThemeProvider theme={theme}>
<CssBaseline />
// YOUR APP CONTENT
</ThemeProvider>
);
```

#### cartoThemeOptions

A tree of configuration elements (colors, font sizes, families...) to define a theme. See official doc on theming at [Material UI theming](https://material-ui.com/customization/theming/)
Expand Down