From 0aecafcfb95fd81d87633c2f01b3fb1f440a2846 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 20 Nov 2024 13:09:37 +0700 Subject: [PATCH] [Button] Fix `CircularProgress` import (#44473) --- docs/data/material/components/buttons/buttons.md | 4 ++-- docs/translations/api-docs/button/button.json | 4 ++-- docs/translations/api-docs/icon-button/icon-button.json | 4 ++-- packages/mui-lab/src/LoadingButton/LoadingButton.js | 4 ++-- packages/mui-material/src/Button/Button.d.ts | 4 ++-- packages/mui-material/src/Button/Button.js | 6 +++--- packages/mui-material/src/IconButton/IconButton.d.ts | 4 ++-- packages/mui-material/src/IconButton/IconButton.js | 6 +++--- 8 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index b2f86853e8fd08..660f4233fa93aa 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -115,7 +115,7 @@ Use `color` prop to apply theme color palette to component. ### Loading -Use `loading` prop to set icon buttons in a loading state and disable interactions. +Starting from [`v6.2.0`](https://github.com/mui/material-ui/releases/tag/v6.2.0), use `loading` prop to set icon buttons in a loading state and disable interactions. {{"demo": "LoadingIconButton.js"}} @@ -133,7 +133,7 @@ To create a file upload button, turn the button into a label using `component="l ## Loading -Use the `loading` prop to set buttons in a loading state and disable interactions. +Starting from [`v6.2.0`](https://github.com/mui/material-ui/releases/tag/v6.2.0), use the `loading` prop to set buttons in a loading state and disable interactions. {{"demo": "LoadingButtons.js"}} diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index dac8f6e775b631..14a7ad2f58db52 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -25,10 +25,10 @@ "description": "The URL to link to when the button is clicked. If defined, an a element will be used as the root node." }, "loading": { - "description": "If true, the loading indicator is shown and the button becomes disabled." + "description": "If true, the loading indicator is visible and the button is disabled." }, "loadingIndicator": { - "description": "Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default we render a CircularProgress that is labelled by the button itself." + "description": "Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default, it renders a CircularProgress that is labeled by the button itself." }, "loadingPosition": { "description": "The loading indicator can be positioned on the start, end, or the center of the button." diff --git a/docs/translations/api-docs/icon-button/icon-button.json b/docs/translations/api-docs/icon-button/icon-button.json index 03aeb7ec720d0c..a54834e31d136a 100644 --- a/docs/translations/api-docs/icon-button/icon-button.json +++ b/docs/translations/api-docs/icon-button/icon-button.json @@ -17,10 +17,10 @@ "description": "If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape)." }, "loading": { - "description": "If true, the loading indicator is shown and the button becomes disabled." + "description": "If true, the loading indicator is visible and the button is disabled." }, "loadingIndicator": { - "description": "Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default we render a CircularProgress that is labelled by the button itself." + "description": "Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default, it renders a CircularProgress that is labeled by the button itself." }, "size": { "description": "The size of the component. small is equivalent to the dense button styling." diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js index 8c4529a715bf4b..091f9c9f388846 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/mui-lab/src/LoadingButton/LoadingButton.js @@ -10,8 +10,8 @@ const warn = () => { [ 'MUI: The LoadingButton component functionality is now part of the Button component from Material UI.', '', - "You should use `import { Button } from '@mui/material'`", - "or `import Button from '@mui/material/Button'`", + "You should use `import Button from '@mui/material/Button'`", + "or `import { Button } from '@mui/material'`", ].join('\n'), ); diff --git a/packages/mui-material/src/Button/Button.d.ts b/packages/mui-material/src/Button/Button.d.ts index ef7099aea29a1d..03df55d186736f 100644 --- a/packages/mui-material/src/Button/Button.d.ts +++ b/packages/mui-material/src/Button/Button.d.ts @@ -61,14 +61,14 @@ export interface ButtonOwnProps { */ href?: string; /** - * If `true`, the loading indicator is shown and the button becomes disabled. + * If `true`, the loading indicator is visible and the button is disabled. * @default false */ loading?: boolean; /** * Element placed before the children if the button is in loading state. * The node should contain an element with `role="progressbar"` with an accessible name. - * By default we render a `CircularProgress` that is labelled by the button itself. + * By default, it renders a `CircularProgress` that is labeled by the button itself. * @default */ loadingIndicator?: React.ReactNode; diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index aefb6001639a52..d418248451036d 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -6,12 +6,12 @@ import resolveProps from '@mui/utils/resolveProps'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { unstable_useId as useId } from '@mui/material/utils'; -import CircularProgress from '@mui/material/CircularProgress'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; +import CircularProgress from '../CircularProgress'; import capitalize from '../utils/capitalize'; import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; @@ -677,14 +677,14 @@ Button.propTypes /* remove-proptypes */ = { */ id: PropTypes.string, /** - * If `true`, the loading indicator is shown and the button becomes disabled. + * If `true`, the loading indicator is visible and the button is disabled. * @default false */ loading: PropTypes.bool, /** * Element placed before the children if the button is in loading state. * The node should contain an element with `role="progressbar"` with an accessible name. - * By default we render a `CircularProgress` that is labelled by the button itself. + * By default, it renders a `CircularProgress` that is labeled by the button itself. * @default */ loadingIndicator: PropTypes.node, diff --git a/packages/mui-material/src/IconButton/IconButton.d.ts b/packages/mui-material/src/IconButton/IconButton.d.ts index 8a0240b3706e5a..775df23cc68f8c 100644 --- a/packages/mui-material/src/IconButton/IconButton.d.ts +++ b/packages/mui-material/src/IconButton/IconButton.d.ts @@ -48,14 +48,14 @@ export interface IconButtonOwnProps { */ edge?: 'start' | 'end' | false; /** - * If `true`, the loading indicator is shown and the button becomes disabled. + * If `true`, the loading indicator is visible and the button is disabled. * @default false */ loading?: boolean; /** * Element placed before the children if the button is in loading state. * The node should contain an element with `role="progressbar"` with an accessible name. - * By default we render a `CircularProgress` that is labelled by the button itself. + * By default, it renders a `CircularProgress` that is labeled by the button itself. * @default */ loadingIndicator?: React.ReactNode; diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index 9057a9c68daaf6..ac2776275f0aa1 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -5,13 +5,13 @@ import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import { unstable_useId as useId } from '@mui/material/utils'; -import CircularProgress from '@mui/material/CircularProgress'; import { alpha } from '@mui/system/colorManipulator'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; +import CircularProgress from '../CircularProgress'; import capitalize from '../utils/capitalize'; import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses'; @@ -306,14 +306,14 @@ IconButton.propTypes /* remove-proptypes */ = { */ id: PropTypes.string, /** - * If `true`, the loading indicator is shown and the button becomes disabled. + * If `true`, the loading indicator is visible and the button is disabled. * @default false */ loading: PropTypes.bool, /** * Element placed before the children if the button is in loading state. * The node should contain an element with `role="progressbar"` with an accessible name. - * By default we render a `CircularProgress` that is labelled by the button itself. + * By default, it renders a `CircularProgress` that is labeled by the button itself. * @default */ loadingIndicator: PropTypes.node,