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.

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] Use () when referencing functions #44184

Merged
merged 3 commits into from
Oct 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ A big thanks to the 11 contributors who made this release possible.

### `@mui/[email protected]`

- Fix `createTheme` with just color schemes (#43518) @siriwatknp
- Fix `createTheme()` with just color schemes (#43518) @siriwatknp
- [Menu,Popover] Fix Backdrop props descriptions (#43503) @Michael-Hutchinson
- [MenuList] Do not react to an event with modifier key pressed (#43505) @MateuszGroth

Expand Down Expand Up @@ -1100,7 +1100,7 @@ A big thanks to the 18 contributors who made this release possible.

### Docs

- Add `theme.applyStyles` and migrate docs (#42498) @siriwatknp
- Add `theme.applyStyles()` and migrate docs (#42498) @siriwatknp
- Fix dashboard template console error (#42594) @oliviertassinari
- Migrate system props to `sx` prop (#42475) @siriwatknp
- [material-ui]Fix duplicated sentence (#42521) @alexfauquette
Expand Down
12 changes: 6 additions & 6 deletions CHANGELOG.old.md
Original file line number Diff line number Diff line change
Expand Up @@ -918,7 +918,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements

- [zero-runtime] Use lodash instead of its subpackages (#40868) @michaldudak
- Add `applyStyles()` to theme (#40667) @siriwatknp
- [zero] Use `theme.applyStyles` in the demo app (#40787) @siriwatknp
- [zero] Use `theme.applyStyles()` in the demo app (#40787) @siriwatknp
- [zero] Add `useThemeProps` processor (#40648) @siriwatknp

### `@mui/[email protected]`
Expand Down Expand Up @@ -3301,7 +3301,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
- [docs] Add summary and improve `test_static` CI doc in CONTRIBUTING readme file (#36711) @kriskw1999
- [docs] Update theme customization TypeScript (#35551) @siriwatknp
- [docs] Add Joy Frames X web blocks template (#37203) @siriwatknp
- [docs] Change Base UI `alpha` to `beta` in README (#37228) @ZeeshanTamboli
- [docs] Change Base UI `alpha()` to `beta()` in README (#37228) @ZeeshanTamboli
- [docs] Improve Base UI overview page (#37227) @mnajdova
- [docs] Update Joy + Material guide (#36911) @cherniavskii

Expand Down Expand Up @@ -5909,7 +5909,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
- [docs] Fix en-US format in the Skeleton demo (#33699) @husseinsaad98
- [docs] Update module reference for `usePagination` (#33675) @fullstackzach
- [docs] Fix code examples in `styled` API vs `sx` prop docs (#33665) @ZeeshanTamboli
- [docs][system] Throw an informative error when `theme.vars` is used in `createTheme` and mention this in the theming docs (#33619) @hbjORbj
- [docs][system] Throw an informative error when `theme.vars` is used in `createTheme()` and mention this in the theming docs (#33619) @hbjORbj

### Core

Expand Down Expand Up @@ -10448,7 +10448,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
}
```

- [theme] Rename `createMuiTheme` to `createTheme` (#25992) @m4theushw
- [theme] Rename `createMuiTheme()` to `createTheme()` (#25992) @m4theushw

Developers only need one theme in their application. A prefix would suggest a second theme is needed. It's not the case. `createMuiTheme` will be removed in v6.

Expand Down Expand Up @@ -13019,7 +13019,7 @@ Here are some highlights ✨:
### `@material-ui/[email protected]`

- [TreeView] Fix bundle size link and refactor array spreads (#22992) @joshwooding
- [TreeView] Fix `alpha` color utility instead of deprecated `fade` (#22978) @joshwooding
- [TreeView] Fix `alpha()` color utility instead of deprecated `fade()` (#22978) @joshwooding
- [core] Ship modern bundle (#22814) @eps1lon

### `@material-ui/[email protected]`
Expand Down Expand Up @@ -14927,7 +14927,7 @@ You can expect similar releases like this one in the coming months.

#### Deprecations

- [theme] Deprecate `fade` color utility in favor of `alpha` (#22837) @mnajdova
- [theme] Deprecate `fade()` color utility in favor of `alpha()` (#22837) @mnajdova
- [theme] Deprecate theme.mixins.gutters (#22245) @joshwooding
- [Avatar] Add circular variant (#22090) @eps1lon
- [Badge] Add overlap circular and rectangular (#22076) @eps1lon
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ For SSR (server-side rendering) applications, Material UI can not detected user

To prevent the issue, you need to ensure that there is no usage of `theme.palette.mode === 'dark'` in your code base.

If you have such a condition, replace it with the [`theme.applyStyles`](#appling-dark-styles) function:
If you have such a condition, replace it with the [`theme.applyStyles()`](#appling-dark-styles) function:

```diff
import Card from '@mui/material/Card';
Expand Down Expand Up @@ -272,7 +272,7 @@ In the example below, all the components inside the `div` will always be dark:

## Disabling CSS color scheme

By default, `createTheme` attaches a [CSS `color-scheme` property](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) based on the palette mode.
By default, `createTheme()` attaches a [CSS `color-scheme` property](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) based on the palette mode.
You can disable this by setting `disableCssColorScheme` to `true`:

```js
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ If you want to be able to manually toggle modes, see the guide to [toggling dark

## Applying dark styles

To customize styles for dark mode, use `theme.applyStyles` function.
To customize styles for dark mode, use `theme.applyStyles()` function.
This utility function will return the right selector.

The example below shows how to customize the Card component for dark mode:
Expand Down
6 changes: 3 additions & 3 deletions docs/data/material/customization/dark-mode/dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

## Dark mode only

You can make your application use the dark theme as the default—regardless of the user's preference—by adding `mode: 'dark'` to the `createTheme` helper:
You can make your application use the dark theme as the default—regardless of the user's preference—by adding `mode: 'dark'` to the `createTheme()` helper:

```js
import { ThemeProvider, createTheme } from '@mui/material/styles';
Expand All @@ -26,7 +26,7 @@ export default function App() {
}
```

Adding `mode: 'dark'` to the `createTheme` helper modifies several palette values, as shown in the following demo:
Adding `mode: 'dark'` to the `createTheme()` helper modifies several palette values, as shown in the following demo:

{{"demo": "DarkTheme.js", "bg": "inline", "hideToolbar": true}}

Expand Down Expand Up @@ -156,7 +156,7 @@ If you are using the `InitColorSchemeScript` component to [prevent SSR flicker](

## Styling in dark mode

Use the `theme.applyStyles` utility to apply styles for a specific mode.
Use the `theme.applyStyles()` utility to apply styles for a specific mode.

We recommend using this function over checking `theme.palette.mode` to switch between styles as it has more benefits:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<p class="description">This tree view allows you to explore how the theme object looks like with the default values.</p>

If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.ts`](https://github.com/mui/material-ui/blob/-/packages/mui-material/src/styles/createTheme.ts),
and the related imports which `createTheme` uses.
and the related imports which `createTheme()` uses.

You can play with the documentation theme object in your browser console,
as the `theme` variable is exposed on all the documentation pages.
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/customization/palette/CustomColor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ declare module '@mui/material/styles' {
neutral: Palette['primary'];
}

// allow configuration using `createTheme`
// allow configuration using `createTheme()`
interface PaletteOptions {
neutral?: PaletteOptions['primary'];
}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/customization/palette/palette.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const theme = createTheme({
{{"demo": "ManuallyProvideCustomColor.js", "defaultCodeOpen": false}}

If you need to manipulate colors, `@mui/material/styles` provides [a set of utilities](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/index.d.ts#L52-L67) to help with this.
The following example uses the `alpha` and `getContrastRatio` utilities to define tokens using opacity:
The following example uses the `alpha()` and `getContrastRatio()` utilities to define tokens using opacity:

```jsx
import { createTheme, alpha, getContrastRatio } from '@mui/material/styles';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ You must apply the `dir` attribute directly to these components if it's not glob

### 2. Set the theme direction

Use the `createTheme` API to set the theme direction to `'rtl'`:
Use the `createTheme()` API to set the theme direction to `'rtl'`:

```js
import { createTheme } from '@mui/material/styles';
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/customization/theming/CustomStyles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ declare module '@mui/material/styles' {
danger: string;
};
}
// allow configuration using `createTheme`
// allow configuration using `createTheme()`
interface ThemeOptions {
status?: {
danger?: string;
Expand Down
6 changes: 3 additions & 3 deletions docs/data/material/customization/theming/theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ declare module '@mui/material/styles' {
danger: string;
};
}
// allow configuration using `createTheme`
// allow configuration using `createTheme()`
interface ThemeOptions {
status?: {
danger?: string;
Expand Down Expand Up @@ -159,8 +159,8 @@ Generate a theme base on the options received. Then, pass it as a prop to [`Them
2. `...args` (_object[]_): Deep merge the arguments with the about to be returned theme.

:::warning
Only the first argument (`options`) is processed by the `createTheme` function.
If you want to actually merge two themes' options and create a new one based on them, you may want to deep merge the two options and provide them as a first argument to the `createTheme` function.
Only the first argument (`options`) is processed by the `createTheme()` function.
If you want to actually merge two themes' options and create a new one based on them, you may want to deep merge the two options and provide them as a first argument to the `createTheme()` function.
:::

```js
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/customization/typography/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ declare module '@mui/material/styles' {
poster: React.CSSProperties;
}

// allow configuration using `createTheme`
// allow configuration using `createTheme()`
interface TypographyVariantsOptions {
poster?: React.CSSProperties;
}
Expand Down
6 changes: 3 additions & 3 deletions docs/data/material/migration/migration-v4/v5-style-changes.md
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ For a smoother transition, the `adaptV4Theme` helper allows you to iteratively u
```

:::warning
This adapter only handles the input arguments of `createTheme`.
This adapter only handles the input arguments of `createTheme()`.
If you modify the shape of the theme after its creation, you need to migrate the structure manually.
:::

Expand Down Expand Up @@ -511,7 +511,7 @@ Nested imports of more than one level are private. For example, you can no longe

### ✅ Rename fade to alpha

`fade` was renamed to `alpha` to better describe its functionality.
`fade()` was renamed to `alpha()` to better describe its functionality.

The previous name caused confusion when the input color already had an alpha value. The helper overrides the alpha value of the color.

Expand Down Expand Up @@ -548,7 +548,7 @@ To generate custom class names without using `@mui/styles`, check out [ClassName

### ✅ Rename createMuiTheme

The function `createMuiTheme` was renamed to `createTheme` to make it more intuitive to use with `ThemeProvider`.
The function `createMuiTheme` was renamed to `createTheme()` to make it more intuitive to use with `ThemeProvider`.

```diff
-import { createMuiTheme } from '@mui/material/styles';
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,7 @@ See [CSS theme variables](/material-ui/customization/css-theme-variables/overvie

### Color mode theme utility

Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles`, designed to replace `theme.palette.mode` when applying light or dark styles:
Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles()`, designed to replace `theme.palette.mode` when applying light or dark styles:

```diff
const MyComponent = styled('button')(({ theme }) => ({
Expand All @@ -464,7 +464,7 @@ Material UI v6 introduces a new utility for adding styles to specific color mod
}))
```

Use these codemods to migrate your project to `theme.applyStyles`:
Use these codemods to migrate your project to `theme.applyStyles()`:

```bash
npx @mui/codemod@latest v6.0.0/styled <path/to/folder-or-file>
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/blog/material-ui-v6-is-out.md
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ It also works with the `sx` prop:

### New method of applying styles

The new API `theme.applyStyles` has been added for creating specific mode styles.
The new API `theme.applyStyles()` has been added for creating specific mode styles.
It's designed to replace the `theme.palette.mode === 'dark'` condition to fix the SSR flickering issue when combined with the CSS theme variables feature.

<codeblock>
Expand Down
6 changes: 3 additions & 3 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2136,7 +2136,7 @@ The list includes these transformers

#### `adapter-v4`

Imports and inserts `adaptV4Theme` into `createTheme` (or `createMuiTheme`)
Imports and inserts `adaptV4Theme` into `createTheme()` (or `createMuiTheme`)

```diff
+import { adaptV4Theme } from '@material-ui/core/styles';
Expand Down Expand Up @@ -2422,7 +2422,7 @@ npx @mui/codemod@latest v5.0.0/core-styles-import <path>

#### `create-theme`

Renames the function `createMuiTheme` to `createTheme`
Renames the function `createMuiTheme()` to `createTheme()`

```diff
-import { createMuiTheme } from '@material-ui/core/styles';
Expand Down Expand Up @@ -2503,7 +2503,7 @@ You can find more details about this breaking change in [the migration guide](ht

#### `fade-rename-alpha`

Renames the `fade` style utility import and calls to `alpha`.
Renames the `fade` style utility import and calls to `alpha()`.

```diff
-import { fade, lighten } from '@material-ui/core/styles';
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/styles/ThemeProviderWithVars.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript = (par
* @deprecated
* The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
*
* You should use `ThemeProvider` and `createTheme` instead:
* You should use `ThemeProvider` and `createTheme()` instead:
*
* ```diff
* - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/styles/stringifyTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function isSerializable(val: any) {
}

/**
* `baseTheme` usually comes from `createTheme` or `extendTheme`.
* `baseTheme` usually comes from `createTheme()` or `extendTheme()`.
*
* This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
* For example, in a Next.js project:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ declare module '@mui/material/styles' {
poster: React.CSSProperties;
}

// allow configuration using `createTheme`
// allow configuration using `createTheme()`
interface TypographyVariantsOptions {
poster?: React.CSSProperties;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ declare module '@mui/material/styles' {
poster: React.CSSProperties;
}

// allow configuration using `createTheme`
// allow configuration using `createTheme()`
interface TypographyVariantsOptions {
poster?: React.CSSProperties;
}
Expand Down