From 7f2f33ad7c12fd4a6ccd6b2cdcb92caec8d4900b Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Wed, 17 Jul 2024 21:27:33 -0400 Subject: [PATCH 01/59] Loading props added to button All functionality from loadingButton has been moved to Button in mui-material --- packages/mui-material/src/Button/Button.d.ts | 27 ++ packages/mui-material/src/Button/Button.js | 233 +++++++++++++++++- .../mui-material/src/Button/buttonClasses.ts | 21 ++ 3 files changed, 274 insertions(+), 7 deletions(-) diff --git a/packages/mui-material/src/Button/Button.d.ts b/packages/mui-material/src/Button/Button.d.ts index 1574944c43a559..22f019635d2c78 100644 --- a/packages/mui-material/src/Button/Button.d.ts +++ b/packages/mui-material/src/Button/Button.d.ts @@ -60,6 +60,33 @@ export interface ButtonOwnProps { * If defined, an `a` element will be used as the root node. */ href?: string; + /** + * If `true`, the loading indicator is shown and the button becomes 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. + * @default + */ + loadingIndicator?: React.ReactNode; + /** + * The loading indicator can be positioned on the start, end, or the center of the button. + * @default 'center' + */ + loadingPosition?: 'start' | 'end' | 'center'; + /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ + loadingIndicatorCenter?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ + loadingIndicatorStart?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ + loadingIndicatorEnd?: string; + /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ + endIconLoadingEnd?: string; + /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ + startIconLoadingStart?: string; /** * The size of the component. * `small` is equivalent to the dense button styling. diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index a61970c0e6ec66..90e62227b0f085 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -10,12 +10,16 @@ import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; +import { unstable_useId as useId } from '@mui/material/utils'; +import CircularProgress from '@mui/material/CircularProgress'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext'; +import { fontSize, fontWeight } from '@mui/system'; const useUtilityClasses = (ownerState) => { - const { color, disableElevation, fullWidth, size, variant, classes } = ownerState; + const { color, disableElevation, fullWidth, size, variant, loading, loadingPosition, classes } = + ownerState; const slots = { root: [ @@ -29,8 +33,22 @@ const useUtilityClasses = (ownerState) => { fullWidth && 'fullWidth', ], label: ['label'], - startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`], - endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`], + startIcon: [ + loading && 'icon', + 'startIcon', + `iconSize${capitalize(size)}`, + `startIconLoading${capitalize(loadingPosition)}`, + ], + endIcon: [ + loading && 'icon', + 'endIcon', + `iconSize${capitalize(size)}`, + `endIconLoading${capitalize(loadingPosition)}`, + ], + loadingIndicator: [ + 'loadingIndicator', + loading && `loadingIndicator${capitalize(loadingPosition)}`, + ], }; const composedClasses = composeClasses(slots, getButtonUtilityClass, classes); @@ -295,6 +313,27 @@ const ButtonRoot = styled(ButtonBase, { props: { fullWidth: true }, style: { width: '100%' }, }, + { + props: { + loadingPosition: 'center', + }, + style: { + transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], { + duration: theme.transitions.duration.short, + }), + }, + }, + { + props: { + loadingPosition: 'center', + loading: true, + }, + style: { + [`&.${buttonClasses.disabled}`]: { + color: 'transparent', + }, + }, + }, ], }; }); @@ -307,7 +346,7 @@ const ButtonStartIcon = styled('span', { return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]]; }, -})(() => ({ +})(({ theme }) => ({ display: 'inherit', marginRight: 8, marginLeft: -4, @@ -318,6 +357,15 @@ const ButtonStartIcon = styled('span', { marginLeft: -2, }, }, + { + props: { loadingPosition: 'start', loading: true }, + style: { + transition: theme.transitions.create(['opacity'], { + duration: theme.transitions.duration.short, + }), + opacity: 0, + }, + }, ...commonIconStyles, ], })); @@ -330,7 +378,7 @@ const ButtonEndIcon = styled('span', { return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]]; }, -})(() => ({ +})(({ theme }) => ({ display: 'inherit', marginRight: -4, marginLeft: 8, @@ -341,10 +389,111 @@ const ButtonEndIcon = styled('span', { marginRight: -2, }, }, + { + props: { loadingPosition: 'end', loading: true }, + style: { + transition: theme.transitions.create(['opacity'], { + duration: theme.transitions.duration.short, + }), + opacity: 0, + }, + }, ...commonIconStyles, ], })); +const LoadingButtonLoadingIndicator = styled('span', { + name: 'MuiLoadingButton', + slot: 'LoadingIndicator', + overridesResolver: (props, styles) => { + const { ownerState } = props; + return [ + styles.loadingIndicator, + styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`], + ]; + }, +})(({ theme }) => ({ + position: 'absolute', + visibility: 'visible', + display: 'flex', + variants: [ + { + props: { + loadingPosition: 'start', + size: 'small', + }, + style: { + left: 10, + }, + }, + { + props: ({ loadingPosition, ownerState }) => + loadingPosition === 'start' && ownerState.size !== 'small', + style: { + left: 14, + }, + }, + { + props: { + variant: 'text', + loadingPosition: 'start', + }, + style: { + left: 6, + }, + }, + { + props: { + loadingPosition: 'center', + }, + style: { + left: '50%', + transform: 'translate(-50%)', + color: (theme.vars || theme).palette.action.disabled, + }, + }, + { + props: { + loadingPosition: 'end', + size: 'small', + }, + style: { + right: 10, + }, + }, + { + props: ({ loadingPosition, ownerState }) => + loadingPosition === 'end' && ownerState.size !== 'small', + style: { + right: 14, + }, + }, + { + props: { + variant: 'text', + loadingPosition: 'end', + }, + style: { + right: 6, + }, + }, + { + props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth, + style: { + position: 'relative', + left: -10, + }, + }, + { + props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth, + style: { + position: 'relative', + right: -10, + }, + }, + ], +})); + const Button = React.forwardRef(function Button(inProps, ref) { // props priority: `inProps` > `contextProps` > `themeDefaultProps` const contextProps = React.useContext(ButtonGroupContext); @@ -362,6 +511,10 @@ const Button = React.forwardRef(function Button(inProps, ref) { endIcon: endIconProp, focusVisibleClassName, fullWidth = false, + id: idProp, + loading = false, + loadingIndicator: loadingIndicatorProp, + loadingPosition = 'center', size = 'medium', startIcon: startIconProp, type, @@ -369,6 +522,11 @@ const Button = React.forwardRef(function Button(inProps, ref) { ...other } = props; + const id = useId(idProp); + const loadingIndicator = loadingIndicatorProp ?? ( + + ); + const ownerState = { ...props, color, @@ -377,6 +535,9 @@ const Button = React.forwardRef(function Button(inProps, ref) { disableElevation, disableFocusRipple, fullWidth, + loading, + loadingIndicator, + loadingPosition, size, type, variant, @@ -384,6 +545,12 @@ const Button = React.forwardRef(function Button(inProps, ref) { const classes = useUtilityClasses(ownerState); + const loadingButtonLoadingIndicator = loading ? ( + + {loadingIndicator} + + ) : null; + const startIcon = startIconProp && ( {startIconProp} @@ -403,7 +570,8 @@ const Button = React.forwardRef(function Button(inProps, ref) { ownerState={ownerState} className={clsx(contextProps.className, classes.root, className, positionClassName)} component={component} - disabled={disabled} + disabled={disabled || loading} + loading={loading} focusRipple={!disableFocusRipple} focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)} ref={ref} @@ -412,7 +580,17 @@ const Button = React.forwardRef(function Button(inProps, ref) { classes={classes} > {startIcon} - {children} + {ownerState.loadingPosition === 'end' ? ( + {children} + ) : ( + loadingButtonLoadingIndicator + )} + + {ownerState.loadingPosition === 'end' ? ( + loadingButtonLoadingIndicator + ) : ( + {children} + )} {endIcon} ); @@ -477,6 +655,10 @@ Button.propTypes /* remove-proptypes */ = { * Element placed after the children. */ endIcon: PropTypes.node, + /** + * Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. + */ + endIconLoadingEnd: PropTypes.string, /** * @ignore */ @@ -491,6 +673,39 @@ Button.propTypes /* remove-proptypes */ = { * If defined, an `a` element will be used as the root node. */ href: PropTypes.string, + /** + * @ignore + */ + id: PropTypes.string, + /** + * If `true`, the loading indicator is shown and the button becomes 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. + * @default + */ + loadingIndicator: PropTypes.node, + /** + * Styles applied to the loadingIndicator element if `loadingPosition="center"`. + */ + loadingIndicatorCenter: PropTypes.string, + /** + * Styles applied to the loadingIndicator element if `loadingPosition="end"`. + */ + loadingIndicatorEnd: PropTypes.string, + /** + * Styles applied to the loadingIndicator element if `loadingPosition="start"`. + */ + loadingIndicatorStart: PropTypes.string, + /** + * The loading indicator can be positioned on the start, end, or the center of the button. + * @default 'center' + */ + loadingPosition: PropTypes.oneOf(['center', 'end', 'start']), /** * The size of the component. * `small` is equivalent to the dense button styling. @@ -504,6 +719,10 @@ Button.propTypes /* remove-proptypes */ = { * Element placed before the children. */ startIcon: PropTypes.node, + /** + * Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. + */ + startIconLoadingStart: PropTypes.string, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-material/src/Button/buttonClasses.ts b/packages/mui-material/src/Button/buttonClasses.ts index e6abe7643e4736..3dd6b4ea750fb1 100644 --- a/packages/mui-material/src/Button/buttonClasses.ts +++ b/packages/mui-material/src/Button/buttonClasses.ts @@ -176,6 +176,20 @@ export interface ButtonClasses { colorInfo: string; /** Styles applied to the root element if `color="warning"`. */ colorWarning: string; + /** Styles applied to the root element if `loading={true}`. */ + loading: string; + /** Styles applied to the loadingIndicator element. */ + loadingIndicator: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ + loadingIndicatorCenter: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ + loadingIndicatorStart: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ + loadingIndicatorEnd: string; + /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ + endIconLoadingEnd: string; + /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ + startIconLoadingStart: string; } export type ButtonClassKey = keyof ButtonClasses; @@ -239,6 +253,13 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', + 'loading', + 'loadingIndicator', + 'loadingIndicatorCenter', + 'loadingIndicatorStart', + 'loadingIndicatorEnd', + 'endIconLoadingEnd', + 'startIconLoadingStart', ]); export default buttonClasses; From aa09045f9794285a13aa4917b1bdd2ea9eba11f7 Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Wed, 17 Jul 2024 21:49:49 -0400 Subject: [PATCH 02/59] ran pnpm deduplicate --- pnpm-lock.yaml | 94 +++++++++++++++++++++++++------------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0783a88bff5ecf..70d5c3437daecb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -355,7 +355,7 @@ importers: version: link:../local-ui-lib next: specifier: latest - version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -365,7 +365,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.0.16(@types/react@18.3.3)(next@14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@types/node': specifier: ^18.19.39 version: 18.19.39 @@ -4125,8 +4125,8 @@ packages: '@next/env@13.5.1': resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - '@next/env@14.2.4': - resolution: {integrity: sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==} + '@next/env@14.2.5': + resolution: {integrity: sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==} '@next/eslint-plugin-next@14.2.4': resolution: {integrity: sha512-svSFxW9f3xDaZA3idQmlFw7SusOuWTpDTAeBlO3AEPDltrraV+lqs7mAc6A27YdnpQVVIA3sODqUAAHdWhVWsA==} @@ -4137,8 +4137,8 @@ packages: cpu: [arm64] os: [darwin] - '@next/swc-darwin-arm64@14.2.4': - resolution: {integrity: sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==} + '@next/swc-darwin-arm64@14.2.5': + resolution: {integrity: sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -4149,8 +4149,8 @@ packages: cpu: [x64] os: [darwin] - '@next/swc-darwin-x64@14.2.4': - resolution: {integrity: sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==} + '@next/swc-darwin-x64@14.2.5': + resolution: {integrity: sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -4161,8 +4161,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-gnu@14.2.4': - resolution: {integrity: sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==} + '@next/swc-linux-arm64-gnu@14.2.5': + resolution: {integrity: sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4173,8 +4173,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@14.2.4': - resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==} + '@next/swc-linux-arm64-musl@14.2.5': + resolution: {integrity: sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4185,8 +4185,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-gnu@14.2.4': - resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==} + '@next/swc-linux-x64-gnu@14.2.5': + resolution: {integrity: sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4197,8 +4197,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@14.2.4': - resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==} + '@next/swc-linux-x64-musl@14.2.5': + resolution: {integrity: sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4209,8 +4209,8 @@ packages: cpu: [arm64] os: [win32] - '@next/swc-win32-arm64-msvc@14.2.4': - resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==} + '@next/swc-win32-arm64-msvc@14.2.5': + resolution: {integrity: sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -4221,8 +4221,8 @@ packages: cpu: [ia32] os: [win32] - '@next/swc-win32-ia32-msvc@14.2.4': - resolution: {integrity: sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==} + '@next/swc-win32-ia32-msvc@14.2.5': + resolution: {integrity: sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -4233,8 +4233,8 @@ packages: cpu: [x64] os: [win32] - '@next/swc-win32-x64-msvc@14.2.4': - resolution: {integrity: sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==} + '@next/swc-win32-x64-msvc@14.2.5': + resolution: {integrity: sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -9313,8 +9313,8 @@ packages: sass: optional: true - next@14.2.4: - resolution: {integrity: sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==} + next@14.2.5: + resolution: {integrity: sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -14366,7 +14366,7 @@ snapshots: '@next/env@13.5.1': {} - '@next/env@14.2.4': {} + '@next/env@14.2.5': {} '@next/eslint-plugin-next@14.2.4': dependencies: @@ -14375,55 +14375,55 @@ snapshots: '@next/swc-darwin-arm64@13.5.1': optional: true - '@next/swc-darwin-arm64@14.2.4': + '@next/swc-darwin-arm64@14.2.5': optional: true '@next/swc-darwin-x64@13.5.1': optional: true - '@next/swc-darwin-x64@14.2.4': + '@next/swc-darwin-x64@14.2.5': optional: true '@next/swc-linux-arm64-gnu@13.5.1': optional: true - '@next/swc-linux-arm64-gnu@14.2.4': + '@next/swc-linux-arm64-gnu@14.2.5': optional: true '@next/swc-linux-arm64-musl@13.5.1': optional: true - '@next/swc-linux-arm64-musl@14.2.4': + '@next/swc-linux-arm64-musl@14.2.5': optional: true '@next/swc-linux-x64-gnu@13.5.1': optional: true - '@next/swc-linux-x64-gnu@14.2.4': + '@next/swc-linux-x64-gnu@14.2.5': optional: true '@next/swc-linux-x64-musl@13.5.1': optional: true - '@next/swc-linux-x64-musl@14.2.4': + '@next/swc-linux-x64-musl@14.2.5': optional: true '@next/swc-win32-arm64-msvc@13.5.1': optional: true - '@next/swc-win32-arm64-msvc@14.2.4': + '@next/swc-win32-arm64-msvc@14.2.5': optional: true '@next/swc-win32-ia32-msvc@13.5.1': optional: true - '@next/swc-win32-ia32-msvc@14.2.4': + '@next/swc-win32-ia32-msvc@14.2.5': optional: true '@next/swc-win32-x64-msvc@13.5.1': optional: true - '@next/swc-win32-x64-msvc@14.2.4': + '@next/swc-win32-x64-msvc@14.2.5': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -14860,10 +14860,10 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true - '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@pigment-css/unplugin': 0.0.16(@types/react@18.3.3)(react@18.3.1) - next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@types/react' - react @@ -20940,9 +20940,9 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@next/env': 14.2.4 + '@next/env': 14.2.5 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001599 @@ -20952,15 +20952,15 @@ snapshots: react-dom: 18.3.1(react@18.3.1) styled-jsx: 5.1.1(@babel/core@7.24.7)(babel-plugin-macros@3.1.0)(react@18.3.1) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.4 - '@next/swc-darwin-x64': 14.2.4 - '@next/swc-linux-arm64-gnu': 14.2.4 - '@next/swc-linux-arm64-musl': 14.2.4 - '@next/swc-linux-x64-gnu': 14.2.4 - '@next/swc-linux-x64-musl': 14.2.4 - '@next/swc-win32-arm64-msvc': 14.2.4 - '@next/swc-win32-ia32-msvc': 14.2.4 - '@next/swc-win32-x64-msvc': 14.2.4 + '@next/swc-darwin-arm64': 14.2.5 + '@next/swc-darwin-x64': 14.2.5 + '@next/swc-linux-arm64-gnu': 14.2.5 + '@next/swc-linux-arm64-musl': 14.2.5 + '@next/swc-linux-x64-gnu': 14.2.5 + '@next/swc-linux-x64-musl': 14.2.5 + '@next/swc-win32-arm64-msvc': 14.2.5 + '@next/swc-win32-ia32-msvc': 14.2.5 + '@next/swc-win32-x64-msvc': 14.2.5 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.45.1 transitivePeerDependencies: From 7369f214e7da6dbeae49ec8f8cf4fa94fb026ae3 Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Wed, 17 Jul 2024 23:18:13 -0400 Subject: [PATCH 03/59] Imports reformated and eslint failure fixed --- docs/pages/material-ui/api/button.json | 59 +++++++++++++++++++ docs/translations/api-docs/button/button.json | 58 ++++++++++++++++++ packages/mui-material/src/Button/Button.js | 7 +-- 3 files changed, 120 insertions(+), 4 deletions(-) diff --git a/docs/pages/material-ui/api/button.json b/docs/pages/material-ui/api/button.json index 04a03e76d983d5..56550ef72cc9cf 100644 --- a/docs/pages/material-ui/api/button.json +++ b/docs/pages/material-ui/api/button.json @@ -15,8 +15,24 @@ "disableFocusRipple": { "type": { "name": "bool" }, "default": "false" }, "disableRipple": { "type": { "name": "bool" }, "default": "false" }, "endIcon": { "type": { "name": "node" } }, + "endIconLoadingEnd": { "type": { "name": "string" } }, "fullWidth": { "type": { "name": "bool" }, "default": "false" }, "href": { "type": { "name": "string" } }, + "loading": { "type": { "name": "bool" }, "default": "false" }, + "loadingIndicator": { + "type": { "name": "node" }, + "default": "" + }, + "loadingIndicatorCenter": { "type": { "name": "string" } }, + "loadingIndicatorEnd": { "type": { "name": "string" } }, + "loadingIndicatorStart": { "type": { "name": "string" } }, + "loadingPosition": { + "type": { + "name": "enum", + "description": "'center'
| 'end'
| 'start'" + }, + "default": "'center'" + }, "size": { "type": { "name": "union", @@ -25,6 +41,7 @@ "default": "'medium'" }, "startIcon": { "type": { "name": "node" } }, + "startIconLoadingStart": { "type": { "name": "string" } }, "sx": { "type": { "name": "union", @@ -182,6 +199,12 @@ "description": "Styles applied to the endIcon element if supplied.", "isGlobal": false }, + { + "key": "endIconLoadingEnd", + "className": "MuiButton-endIconLoadingEnd", + "description": "Styles applied to the endIcon element if `loading={true}` and `loadingPosition=\"end\"`.", + "isGlobal": false + }, { "key": "focusVisible", "className": "Mui-focusVisible", @@ -221,6 +244,36 @@ "isGlobal": false, "isDeprecated": true }, + { + "key": "loading", + "className": "MuiButton-loading", + "description": "Styles applied to the root element if `loading={true}`.", + "isGlobal": false + }, + { + "key": "loadingIndicator", + "className": "MuiButton-loadingIndicator", + "description": "Styles applied to the loadingIndicator element.", + "isGlobal": false + }, + { + "key": "loadingIndicatorCenter", + "className": "MuiButton-loadingIndicatorCenter", + "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"center\"`.", + "isGlobal": false + }, + { + "key": "loadingIndicatorEnd", + "className": "MuiButton-loadingIndicatorEnd", + "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"end\"`.", + "isGlobal": false + }, + { + "key": "loadingIndicatorStart", + "className": "MuiButton-loadingIndicatorStart", + "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"start\"`.", + "isGlobal": false + }, { "key": "outlined", "className": "MuiButton-outlined", @@ -327,6 +380,12 @@ "description": "Styles applied to the startIcon element if supplied.", "isGlobal": false }, + { + "key": "startIconLoadingStart", + "className": "MuiButton-startIconLoadingStart", + "description": "Styles applied to the startIcon element if `loading={true}` and `loadingPosition=\"start\"`.", + "isGlobal": false + }, { "key": "text", "className": "MuiButton-text", diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index 1e9426f65ac3de..44bcff7729ba8f 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -18,16 +18,40 @@ "description": "If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class." }, "endIcon": { "description": "Element placed after the children." }, + "endIconLoadingEnd": { + "description": "Styles applied to the endIcon element if loading={true} and loadingPosition="end"." + }, "fullWidth": { "description": "If true, the button will take up the full width of its container." }, "href": { "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." + }, + "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." + }, + "loadingIndicatorCenter": { + "description": "Styles applied to the loadingIndicator element if loadingPosition="center"." + }, + "loadingIndicatorEnd": { + "description": "Styles applied to the loadingIndicator element if loadingPosition="end"." + }, + "loadingIndicatorStart": { + "description": "Styles applied to the loadingIndicator element if loadingPosition="start"." + }, + "loadingPosition": { + "description": "The loading indicator can be positioned on the start, end, or the center of the button." + }, "size": { "description": "The size of the component. small is equivalent to the dense button styling." }, "startIcon": { "description": "Element placed before the children." }, + "startIconLoadingStart": { + "description": "Styles applied to the startIcon element if loading={true} and loadingPosition="start"." + }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, @@ -149,6 +173,11 @@ "nodeName": "the endIcon element", "conditions": "supplied" }, + "endIconLoadingEnd": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the endIcon element", + "conditions": "loading={true} and loadingPosition=\"end\"" + }, "focusVisible": { "description": "State class applied to {{nodeName}} if {{conditions}}.", "nodeName": "the ButtonBase root element", @@ -178,6 +207,30 @@ "conditions": "supplied and size=\"small\"", "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details." }, + "loading": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "loading={true}" + }, + "loadingIndicator": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the loadingIndicator element" + }, + "loadingIndicatorCenter": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the loadingIndicator element", + "conditions": "loadingPosition=\"center\"" + }, + "loadingIndicatorEnd": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the loadingIndicator element", + "conditions": "loadingPosition=\"end\"" + }, + "loadingIndicatorStart": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the loadingIndicator element", + "conditions": "loadingPosition=\"start\"" + }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -264,6 +317,11 @@ "nodeName": "the startIcon element", "conditions": "supplied" }, + "startIconLoadingStart": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the startIcon element", + "conditions": "loading={true} and loadingPosition=\"start\"" + }, "text": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 90e62227b0f085..56ab81b7f2cad8 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -5,17 +5,16 @@ import clsx from 'clsx'; 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 { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -import { unstable_useId as useId } from '@mui/material/utils'; -import CircularProgress from '@mui/material/CircularProgress'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext'; -import { fontSize, fontWeight } from '@mui/system'; const useUtilityClasses = (ownerState) => { const { color, disableElevation, fullWidth, size, variant, loading, loadingPosition, classes } = @@ -571,7 +570,6 @@ const Button = React.forwardRef(function Button(inProps, ref) { className={clsx(contextProps.className, classes.root, className, positionClassName)} component={component} disabled={disabled || loading} - loading={loading} focusRipple={!disableFocusRipple} focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)} ref={ref} @@ -591,6 +589,7 @@ const Button = React.forwardRef(function Button(inProps, ref) { ) : ( {children} )} + {endIcon} ); From 4459f089b326899f438e9b3a638e5737ea51abe8 Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Wed, 17 Jul 2024 23:20:48 -0400 Subject: [PATCH 04/59] missing files added --- test/test-results/.last-run.json | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 test/test-results/.last-run.json diff --git a/test/test-results/.last-run.json b/test/test-results/.last-run.json new file mode 100644 index 00000000000000..16301b6aeab55e --- /dev/null +++ b/test/test-results/.last-run.json @@ -0,0 +1,28 @@ +{ + "status": "failed", + "failedTests": [ + "8367bdf124bba973c54d-4f6e597bcdbcfcc50f62", + "8367bdf124bba973c54d-d8a8bdc7c32d3f3df6dc", + "f9480828a957d3452f52-93a8b99621cb9ecc6ee1", + "6283035b31e42251d455-c88625344856b559aefc", + "6283035b31e42251d455-9283df53e8cc3d90c215", + "6283035b31e42251d455-0402e970f3707fb500be", + "6283035b31e42251d455-b5f09cea4d41c4765df3", + "6283035b31e42251d455-3034dd77b9df0b6403b2", + "6283035b31e42251d455-508781812d5c9428b7ef", + "6283035b31e42251d455-b6ee8baf064ff912c0d6", + "6283035b31e42251d455-c50cd20248f5f0a73f02", + "6283035b31e42251d455-718da94fe6b654a23719", + "6283035b31e42251d455-f8c895bd05dc8322d384", + "6283035b31e42251d455-b0615182bc4cd974ebc0", + "6283035b31e42251d455-17c5d8f2d8b116c8138f", + "6283035b31e42251d455-1400ab3deb7ead7c7e3c", + "6283035b31e42251d455-1f87858e90782b40f233", + "6283035b31e42251d455-f6c6ccd9b9bb28cc6bd4", + "6283035b31e42251d455-d1c532f535ef861c69e5", + "6283035b31e42251d455-39ec1e7ae8d277961a06", + "5aac8c1c791afa71d5e1-2771f1f147203c23e335", + "f079f73a444d13d8d4bb-dea81daf0a4fe0916838", + "46546bc65f207d06f2fa-d74a0049653fb4b29800" + ] +} \ No newline at end of file From 451a3a1ab1c6f96a697441a216d551d298e435bf Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Thu, 18 Jul 2024 12:14:28 -0400 Subject: [PATCH 05/59] More ci/circle issues resolved added Icon class to start and end icons, ran prettier, updated loadingButton tests to test Button. LoadingButton tests not to be merged --- .../src/LoadingButton/LoadingButton.test.js | 24 +++++++++---------- packages/mui-material/src/Button/Button.js | 6 ++--- test/test-results/.last-run.json | 2 +- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.test.js b/packages/mui-lab/src/LoadingButton/LoadingButton.test.js index 837ef793bcebcc..9677230eb55c20 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.test.js +++ b/packages/mui-lab/src/LoadingButton/LoadingButton.test.js @@ -20,13 +20,13 @@ describe('', () => { })); it('is in tab-order by default', () => { - render(); + render(); const button = screen.getByRole('button'); const progressbar = within(button).getByRole('progressbar'); @@ -59,16 +59,16 @@ describe('', () => { describe('prop: loadingIndicator', () => { it('is not rendered by default', () => { - render(Test); + render(); expect(screen.getByRole('button')).to.have.text('Test'); }); it('is rendered before the children when `loading`', () => { render( - + , ); expect(screen.getByRole('button')).to.have.text('loading…Test'); @@ -79,7 +79,7 @@ describe('', () => { it('correctly passes props to children', () => { const { getByRole } = render( - + + + , ); diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 56ab81b7f2cad8..842c2cb7b0f5d4 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -33,13 +33,13 @@ const useUtilityClasses = (ownerState) => { ], label: ['label'], startIcon: [ - loading && 'icon', + 'icon', 'startIcon', `iconSize${capitalize(size)}`, `startIconLoading${capitalize(loadingPosition)}`, ], endIcon: [ - loading && 'icon', + 'icon', 'endIcon', `iconSize${capitalize(size)}`, `endIconLoading${capitalize(loadingPosition)}`, @@ -523,7 +523,7 @@ const Button = React.forwardRef(function Button(inProps, ref) { const id = useId(idProp); const loadingIndicator = loadingIndicatorProp ?? ( - + ); const ownerState = { diff --git a/test/test-results/.last-run.json b/test/test-results/.last-run.json index 16301b6aeab55e..cbc399ccaf76a1 100644 --- a/test/test-results/.last-run.json +++ b/test/test-results/.last-run.json @@ -25,4 +25,4 @@ "f079f73a444d13d8d4bb-dea81daf0a4fe0916838", "46546bc65f207d06f2fa-d74a0049653fb4b29800" ] -} \ No newline at end of file +} From 4ddca3fe4912e9194f24cd380920d8a16cbd394a Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Thu, 22 Aug 2024 16:56:02 -0400 Subject: [PATCH 06/59] Review suggestions implemented Button.js variable names changed, extra classes deleted, loading button tests moved to button.test.js, pnpm-lock restored, last-run.json removed (hopefully) --- packages/mui-material/src/Button/Button.js | 55 ++------- .../mui-material/src/Button/Button.test.js | 82 ++++++++++++++ pnpm-lock.yaml | 107 +++++++++--------- test/test-results/.last-run.json | 28 ----- 4 files changed, 141 insertions(+), 131 deletions(-) delete mode 100644 test/test-results/.last-run.json diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 842c2cb7b0f5d4..e0c3270b529645 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -401,7 +401,7 @@ const ButtonEndIcon = styled('span', { ], })); -const LoadingButtonLoadingIndicator = styled('span', { +const ButtonLoadingIndicator = styled('span', { name: 'MuiLoadingButton', slot: 'LoadingIndicator', overridesResolver: (props, styles) => { @@ -523,7 +523,7 @@ const Button = React.forwardRef(function Button(inProps, ref) { const id = useId(idProp); const loadingIndicator = loadingIndicatorProp ?? ( - + ); const ownerState = { @@ -544,10 +544,10 @@ const Button = React.forwardRef(function Button(inProps, ref) { const classes = useUtilityClasses(ownerState); - const loadingButtonLoadingIndicator = loading ? ( - + const buttonLoadingIndicator = loading ? ( + {loadingIndicator} - + ) : null; const startIcon = startIconProp && ( @@ -581,11 +581,11 @@ const Button = React.forwardRef(function Button(inProps, ref) { {ownerState.loadingPosition === 'end' ? ( {children} ) : ( - loadingButtonLoadingIndicator + buttonLoadingIndicator )} {ownerState.loadingPosition === 'end' ? ( - loadingButtonLoadingIndicator + buttonLoadingIndicator ) : ( {children} )} @@ -654,10 +654,6 @@ Button.propTypes /* remove-proptypes */ = { * Element placed after the children. */ endIcon: PropTypes.node, - /** - * Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. - */ - endIconLoadingEnd: PropTypes.string, /** * @ignore */ @@ -672,39 +668,6 @@ Button.propTypes /* remove-proptypes */ = { * If defined, an `a` element will be used as the root node. */ href: PropTypes.string, - /** - * @ignore - */ - id: PropTypes.string, - /** - * If `true`, the loading indicator is shown and the button becomes 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. - * @default - */ - loadingIndicator: PropTypes.node, - /** - * Styles applied to the loadingIndicator element if `loadingPosition="center"`. - */ - loadingIndicatorCenter: PropTypes.string, - /** - * Styles applied to the loadingIndicator element if `loadingPosition="end"`. - */ - loadingIndicatorEnd: PropTypes.string, - /** - * Styles applied to the loadingIndicator element if `loadingPosition="start"`. - */ - loadingIndicatorStart: PropTypes.string, - /** - * The loading indicator can be positioned on the start, end, or the center of the button. - * @default 'center' - */ - loadingPosition: PropTypes.oneOf(['center', 'end', 'start']), /** * The size of the component. * `small` is equivalent to the dense button styling. @@ -718,10 +681,6 @@ Button.propTypes /* remove-proptypes */ = { * Element placed before the children. */ startIcon: PropTypes.node, - /** - * Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. - */ - startIconLoadingStart: PropTypes.string, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js index 5d57fa23d002a0..c341ecdafc17dd 100644 --- a/packages/mui-material/src/Button/Button.test.js +++ b/packages/mui-material/src/Button/Button.test.js @@ -753,4 +753,86 @@ describe('); + + const button = screen.getByRole('button'); + const progressbar = within(button).getByRole('progressbar'); + expect(progressbar).toHaveAccessibleName('Submit'); + }); + }); + + describe('prop: loadingIndicator', () => { + it('is not rendered by default', () => { + render(); + + expect(screen.getByRole('button')).to.have.text('Test'); + }); + + it('is rendered before the children when `loading`', () => { + render( + , + ); + + expect(screen.getByRole('button')).to.have.text('loading…Test'); + }); + }); + + describe('ButtonGroup works with LoadingButton', () => { + it('correctly passes props to children', () => { + const { getByRole } = render( + + + + + , + ); + + const firstButton = screen.getAllByRole('button')[0]; + const middleButton = screen.getAllByRole('button')[1]; + const lastButton = screen.getAllByRole('button')[2]; + + expect(firstButton).to.have.class(buttonGroupClasses.firstButton); + expect(firstButton).not.to.have.class(buttonGroupClasses.middleButton); + expect(firstButton).not.to.have.class(buttonGroupClasses.lastButton); + + expect(middleButton).to.have.class(buttonGroupClasses.middleButton); + expect(middleButton).not.to.have.class(buttonGroupClasses.firstButton); + expect(middleButton).not.to.have.class(buttonGroupClasses.lastButton); + + expect(lastButton).to.have.class(buttonGroupClasses.lastButton); + expect(lastButton).not.to.have.class(buttonGroupClasses.middleButton); + expect(lastButton).not.to.have.class(buttonGroupClasses.firstButton); + }); + }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 70d5c3437daecb..e07385e01535ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -355,7 +355,7 @@ importers: version: link:../local-ui-lib next: specifier: latest - version: 14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -365,7 +365,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(next@14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@types/node': specifier: ^18.19.39 version: 18.19.39 @@ -999,9 +999,6 @@ importers: '@testing-library/react': specifier: ^16.0.0 version: 16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@testing-library/user-event': - specifier: ^14.5.2 - version: 14.5.2(@testing-library/dom@10.3.1) chai: specifier: ^4.4.1 version: 4.4.1 @@ -1216,7 +1213,7 @@ importers: optionalDependencies: aws-sdk: specifier: ^2.1655.0 - version: 2.1656.0 + version: 2.1655.0 devDependencies: claudia: specifier: ^5.14.1 @@ -4125,8 +4122,8 @@ packages: '@next/env@13.5.1': resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - '@next/env@14.2.5': - resolution: {integrity: sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==} + '@next/env@14.2.4': + resolution: {integrity: sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==} '@next/eslint-plugin-next@14.2.4': resolution: {integrity: sha512-svSFxW9f3xDaZA3idQmlFw7SusOuWTpDTAeBlO3AEPDltrraV+lqs7mAc6A27YdnpQVVIA3sODqUAAHdWhVWsA==} @@ -4137,8 +4134,8 @@ packages: cpu: [arm64] os: [darwin] - '@next/swc-darwin-arm64@14.2.5': - resolution: {integrity: sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==} + '@next/swc-darwin-arm64@14.2.4': + resolution: {integrity: sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -4149,8 +4146,8 @@ packages: cpu: [x64] os: [darwin] - '@next/swc-darwin-x64@14.2.5': - resolution: {integrity: sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==} + '@next/swc-darwin-x64@14.2.4': + resolution: {integrity: sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -4161,8 +4158,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-gnu@14.2.5': - resolution: {integrity: sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==} + '@next/swc-linux-arm64-gnu@14.2.4': + resolution: {integrity: sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4173,8 +4170,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@14.2.5': - resolution: {integrity: sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==} + '@next/swc-linux-arm64-musl@14.2.4': + resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4185,8 +4182,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-gnu@14.2.5': - resolution: {integrity: sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==} + '@next/swc-linux-x64-gnu@14.2.4': + resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4197,8 +4194,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@14.2.5': - resolution: {integrity: sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==} + '@next/swc-linux-x64-musl@14.2.4': + resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4209,8 +4206,8 @@ packages: cpu: [arm64] os: [win32] - '@next/swc-win32-arm64-msvc@14.2.5': - resolution: {integrity: sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==} + '@next/swc-win32-arm64-msvc@14.2.4': + resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -4221,8 +4218,8 @@ packages: cpu: [ia32] os: [win32] - '@next/swc-win32-ia32-msvc@14.2.5': - resolution: {integrity: sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==} + '@next/swc-win32-ia32-msvc@14.2.4': + resolution: {integrity: sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -4233,8 +4230,8 @@ packages: cpu: [x64] os: [win32] - '@next/swc-win32-x64-msvc@14.2.5': - resolution: {integrity: sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==} + '@next/swc-win32-x64-msvc@14.2.4': + resolution: {integrity: sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -5764,8 +5761,8 @@ packages: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} - aws-sdk@2.1656.0: - resolution: {integrity: sha512-KhMRUSeIJNDMuL5PEwyQ5JPF477qDNCb3gHHTqb49IVTtpIYZnPdJgOrDb4nbFHEeoW1x9hKrkRJ4ZL1KTEmJA==} + aws-sdk@2.1655.0: + resolution: {integrity: sha512-Tec0/ZHK8ES6NvAEJhgEm3znyoPb4QUuyQZ2RdvbNTbpJDbeeDuu4BaCAR5HbEVXREVk1/8OBDMsWW1B5lkcww==} engines: {node: '>= 10.0.0'} axe-core@4.7.2: @@ -9313,8 +9310,8 @@ packages: sass: optional: true - next@14.2.5: - resolution: {integrity: sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==} + next@14.2.4: + resolution: {integrity: sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -14366,7 +14363,7 @@ snapshots: '@next/env@13.5.1': {} - '@next/env@14.2.5': {} + '@next/env@14.2.4': {} '@next/eslint-plugin-next@14.2.4': dependencies: @@ -14375,55 +14372,55 @@ snapshots: '@next/swc-darwin-arm64@13.5.1': optional: true - '@next/swc-darwin-arm64@14.2.5': + '@next/swc-darwin-arm64@14.2.4': optional: true '@next/swc-darwin-x64@13.5.1': optional: true - '@next/swc-darwin-x64@14.2.5': + '@next/swc-darwin-x64@14.2.4': optional: true '@next/swc-linux-arm64-gnu@13.5.1': optional: true - '@next/swc-linux-arm64-gnu@14.2.5': + '@next/swc-linux-arm64-gnu@14.2.4': optional: true '@next/swc-linux-arm64-musl@13.5.1': optional: true - '@next/swc-linux-arm64-musl@14.2.5': + '@next/swc-linux-arm64-musl@14.2.4': optional: true '@next/swc-linux-x64-gnu@13.5.1': optional: true - '@next/swc-linux-x64-gnu@14.2.5': + '@next/swc-linux-x64-gnu@14.2.4': optional: true '@next/swc-linux-x64-musl@13.5.1': optional: true - '@next/swc-linux-x64-musl@14.2.5': + '@next/swc-linux-x64-musl@14.2.4': optional: true '@next/swc-win32-arm64-msvc@13.5.1': optional: true - '@next/swc-win32-arm64-msvc@14.2.5': + '@next/swc-win32-arm64-msvc@14.2.4': optional: true '@next/swc-win32-ia32-msvc@13.5.1': optional: true - '@next/swc-win32-ia32-msvc@14.2.5': + '@next/swc-win32-ia32-msvc@14.2.4': optional: true '@next/swc-win32-x64-msvc@13.5.1': optional: true - '@next/swc-win32-x64-msvc@14.2.5': + '@next/swc-win32-x64-msvc@14.2.4': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -14860,10 +14857,10 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true - '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@pigment-css/unplugin': 0.0.16(@types/react@18.3.3)(react@18.3.1) - next: 14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@types/react' - react @@ -16510,7 +16507,7 @@ snapshots: dependencies: possible-typed-array-names: 1.0.0 - aws-sdk@2.1656.0: + aws-sdk@2.1655.0: dependencies: buffer: 4.9.2 events: 1.1.1 @@ -16985,7 +16982,7 @@ snapshots: claudia@5.14.1: dependencies: archiver: 3.1.1 - aws-sdk: 2.1656.0 + aws-sdk: 2.1655.0 fs-extra: 6.0.1 glob: 7.2.3 gunzip-maybe: 1.4.2 @@ -20940,9 +20937,9 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@14.2.5(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@next/env': 14.2.5 + '@next/env': 14.2.4 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001599 @@ -20952,15 +20949,15 @@ snapshots: react-dom: 18.3.1(react@18.3.1) styled-jsx: 5.1.1(@babel/core@7.24.7)(babel-plugin-macros@3.1.0)(react@18.3.1) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.5 - '@next/swc-darwin-x64': 14.2.5 - '@next/swc-linux-arm64-gnu': 14.2.5 - '@next/swc-linux-arm64-musl': 14.2.5 - '@next/swc-linux-x64-gnu': 14.2.5 - '@next/swc-linux-x64-musl': 14.2.5 - '@next/swc-win32-arm64-msvc': 14.2.5 - '@next/swc-win32-ia32-msvc': 14.2.5 - '@next/swc-win32-x64-msvc': 14.2.5 + '@next/swc-darwin-arm64': 14.2.4 + '@next/swc-darwin-x64': 14.2.4 + '@next/swc-linux-arm64-gnu': 14.2.4 + '@next/swc-linux-arm64-musl': 14.2.4 + '@next/swc-linux-x64-gnu': 14.2.4 + '@next/swc-linux-x64-musl': 14.2.4 + '@next/swc-win32-arm64-msvc': 14.2.4 + '@next/swc-win32-ia32-msvc': 14.2.4 + '@next/swc-win32-x64-msvc': 14.2.4 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.45.1 transitivePeerDependencies: diff --git a/test/test-results/.last-run.json b/test/test-results/.last-run.json deleted file mode 100644 index cbc399ccaf76a1..00000000000000 --- a/test/test-results/.last-run.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "status": "failed", - "failedTests": [ - "8367bdf124bba973c54d-4f6e597bcdbcfcc50f62", - "8367bdf124bba973c54d-d8a8bdc7c32d3f3df6dc", - "f9480828a957d3452f52-93a8b99621cb9ecc6ee1", - "6283035b31e42251d455-c88625344856b559aefc", - "6283035b31e42251d455-9283df53e8cc3d90c215", - "6283035b31e42251d455-0402e970f3707fb500be", - "6283035b31e42251d455-b5f09cea4d41c4765df3", - "6283035b31e42251d455-3034dd77b9df0b6403b2", - "6283035b31e42251d455-508781812d5c9428b7ef", - "6283035b31e42251d455-b6ee8baf064ff912c0d6", - "6283035b31e42251d455-c50cd20248f5f0a73f02", - "6283035b31e42251d455-718da94fe6b654a23719", - "6283035b31e42251d455-f8c895bd05dc8322d384", - "6283035b31e42251d455-b0615182bc4cd974ebc0", - "6283035b31e42251d455-17c5d8f2d8b116c8138f", - "6283035b31e42251d455-1400ab3deb7ead7c7e3c", - "6283035b31e42251d455-1f87858e90782b40f233", - "6283035b31e42251d455-f6c6ccd9b9bb28cc6bd4", - "6283035b31e42251d455-d1c532f535ef861c69e5", - "6283035b31e42251d455-39ec1e7ae8d277961a06", - "5aac8c1c791afa71d5e1-2771f1f147203c23e335", - "f079f73a444d13d8d4bb-dea81daf0a4fe0916838", - "46546bc65f207d06f2fa-d74a0049653fb4b29800" - ] -} From a9cac91a07d3fa109d1c9f64108cef8da8511e17 Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Thu, 22 Aug 2024 19:13:38 -0400 Subject: [PATCH 07/59] Docs updated and loading button depreciated --- .../components/buttons/LoadingButtons.js | 14 +- .../components/buttons/LoadingButtons.tsx | 14 +- .../buttons/LoadingButtons.tsx.preview | 12 +- .../buttons/LoadingButtonsTransition.js | 34 +- .../buttons/LoadingButtonsTransition.tsx | 34 +- .../material/components/buttons/buttons.md | 22 +- .../src/LoadingButton/LoadingButton.js | 343 ++---------------- .../mui-material/src/Button/Button.test.js | 9 +- 8 files changed, 91 insertions(+), 391 deletions(-) diff --git a/docs/data/material/components/buttons/LoadingButtons.js b/docs/data/material/components/buttons/LoadingButtons.js index f2d71b178ab98d..276c7a29a548ca 100644 --- a/docs/data/material/components/buttons/LoadingButtons.js +++ b/docs/data/material/components/buttons/LoadingButtons.js @@ -1,25 +1,25 @@ import * as React from 'react'; -import LoadingButton from '@mui/lab/LoadingButton'; +import Button from '@mui/material/Button'; import SaveIcon from '@mui/icons-material/Save'; import Stack from '@mui/material/Stack'; export default function LoadingButtons() { return ( - + + ); } diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx b/docs/data/material/components/buttons/LoadingButtons.tsx index f2d71b178ab98d..276c7a29a548ca 100644 --- a/docs/data/material/components/buttons/LoadingButtons.tsx +++ b/docs/data/material/components/buttons/LoadingButtons.tsx @@ -1,25 +1,25 @@ import * as React from 'react'; -import LoadingButton from '@mui/lab/LoadingButton'; +import Button from '@mui/material/Button'; import SaveIcon from '@mui/icons-material/Save'; import Stack from '@mui/material/Stack'; export default function LoadingButtons() { return ( - + + ); } diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx.preview b/docs/data/material/components/buttons/LoadingButtons.tsx.preview index 9578d91a245686..a8b542b9da72ef 100644 --- a/docs/data/material/components/buttons/LoadingButtons.tsx.preview +++ b/docs/data/material/components/buttons/LoadingButtons.tsx.preview @@ -1,14 +1,14 @@ - + + \ No newline at end of file diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.js b/docs/data/material/components/buttons/LoadingButtonsTransition.js index 21b0f2bd331d26..bc257aade2d310 100644 --- a/docs/data/material/components/buttons/LoadingButtonsTransition.js +++ b/docs/data/material/components/buttons/LoadingButtonsTransition.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import LoadingButton from '@mui/lab/LoadingButton'; +import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; @@ -27,7 +27,7 @@ export default function LoadingButtonsTransition() { label="Loading" /> button': { m: 1 } }}> - Disabled - - + button': { m: 1 } }}> - Disabled - - + ); diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx b/docs/data/material/components/buttons/LoadingButtonsTransition.tsx index 21b0f2bd331d26..bc257aade2d310 100644 --- a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx +++ b/docs/data/material/components/buttons/LoadingButtonsTransition.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import LoadingButton from '@mui/lab/LoadingButton'; +import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; @@ -27,7 +27,7 @@ export default function LoadingButtonsTransition() { label="Loading" /> button': { m: 1 } }}> - Disabled - - + button': { m: 1 } }}> - Disabled - - + ); diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 3b531ea2fa9318..cc52a5aa9c817d 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -118,6 +118,16 @@ To create a file upload button, turn the button into a label using `component="l {{"demo": "InputFileUpload.js"}} +### Loading button + +Use the `loading` prop to give buttons a loading state and disable interactions + +{{"demo": "LoadingButtons.js"}} + +Toggle the loading switch to see the transition between the different states. + +{{"demo": "LoadingButtonsTransition.js"}} + ## Customization Here are some examples of customizing the component. @@ -173,15 +183,3 @@ However: ``` This has the advantage of supporting any element, for instance, a link `` element. - -## Experimental APIs - -### Loading button - -[`@mui/lab`](/material-ui/about-the-lab/) offers loading buttons that can show loading state and disable interactions. - -{{"demo": "LoadingButtons.js"}} - -Toggle the loading switch to see the transition between the different states. - -{{"demo": "LoadingButtonsTransition.js"}} diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js index 13d5a9aec21df1..4cdad602114997 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/mui-lab/src/LoadingButton/LoadingButton.js @@ -1,328 +1,29 @@ 'use client'; import * as React from 'react'; -import PropTypes from 'prop-types'; -import { chainPropTypes } from '@mui/utils'; -import { capitalize, unstable_useId as useId } from '@mui/material/utils'; -import { unstable_composeClasses as composeClasses } from '@mui/base'; -import { useDefaultProps } from '@mui/material/DefaultPropsProvider'; import Button from '@mui/material/Button'; -import { ButtonGroupContext } from '@mui/material/ButtonGroup'; -import CircularProgress from '@mui/material/CircularProgress'; -import resolveProps from '@mui/utils/resolveProps'; -import { styled } from '../zero-styled'; -import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses'; -const useUtilityClasses = (ownerState) => { - const { loading, loadingPosition, classes } = ownerState; - - const slots = { - root: ['root', loading && 'loading'], - startIcon: [loading && `startIconLoading${capitalize(loadingPosition)}`], - endIcon: [loading && `endIconLoading${capitalize(loadingPosition)}`], - loadingIndicator: [ - 'loadingIndicator', - loading && `loadingIndicator${capitalize(loadingPosition)}`, - ], - }; - - const composedClasses = composeClasses(slots, getLoadingButtonUtilityClass, classes); - - return { - ...classes, // forward the outlined, color, etc. classes to Button - ...composedClasses, - }; +let warnedOnce = false; + +const warn = () => { + if (!warnedOnce) { + console.warn( + [ + 'MUI: The Button component was moved from the lab to the core.', + '', + "You should use `import { Button } from '@mui/material'`", + "or `import Button from '@mui/material/Button'`", + ].join('\n'), + ); + + warnedOnce = true; + } }; -// TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core -const rootShouldForwardProp = (prop) => - prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes'; -const LoadingButtonRoot = styled(Button, { - shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes', - name: 'MuiLoadingButton', - slot: 'Root', - overridesResolver: (props, styles) => { - return [ - styles.root, - styles.startIconLoadingStart && { - [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart, - }, - styles.endIconLoadingEnd && { - [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd, - }, - ]; - }, -})(({ theme }) => ({ - [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: - { - transition: theme.transitions.create(['opacity'], { - duration: theme.transitions.duration.short, - }), - opacity: 0, - }, - variants: [ - { - props: { - loadingPosition: 'center', - }, - style: { - transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], { - duration: theme.transitions.duration.short, - }), - [`&.${loadingButtonClasses.loading}`]: { - color: 'transparent', - }, - }, - }, - { - props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth, - style: { - [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: - { - transition: theme.transitions.create(['opacity'], { - duration: theme.transitions.duration.short, - }), - opacity: 0, - marginRight: -8, - }, - }, - }, - { - props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth, - style: { - [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: - { - transition: theme.transitions.create(['opacity'], { - duration: theme.transitions.duration.short, - }), - opacity: 0, - marginLeft: -8, - }, - }, - }, - ], -})); - -const LoadingButtonLoadingIndicator = styled('span', { - name: 'MuiLoadingButton', - slot: 'LoadingIndicator', - overridesResolver: (props, styles) => { - const { ownerState } = props; - return [ - styles.loadingIndicator, - styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`], - ]; - }, -})(({ theme }) => ({ - position: 'absolute', - visibility: 'visible', - display: 'flex', - variants: [ - { - props: { - loadingPosition: 'start', - size: 'small', - }, - style: { - left: 10, - }, - }, - { - props: ({ loadingPosition, ownerState }) => - loadingPosition === 'start' && ownerState.size !== 'small', - style: { - left: 14, - }, - }, - { - props: { - variant: 'text', - loadingPosition: 'start', - }, - style: { - left: 6, - }, - }, - { - props: { - loadingPosition: 'center', - }, - style: { - left: '50%', - transform: 'translate(-50%)', - color: (theme.vars || theme).palette.action.disabled, - }, - }, - { - props: { - loadingPosition: 'end', - size: 'small', - }, - style: { - right: 10, - }, - }, - { - props: ({ loadingPosition, ownerState }) => - loadingPosition === 'end' && ownerState.size !== 'small', - style: { - right: 14, - }, - }, - { - props: { - variant: 'text', - loadingPosition: 'end', - }, - style: { - right: 6, - }, - }, - { - props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth, - style: { - position: 'relative', - left: -10, - }, - }, - { - props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth, - style: { - position: 'relative', - right: -10, - }, - }, - ], -})); - -const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) { - const contextProps = React.useContext(ButtonGroupContext); - const resolvedProps = resolveProps(contextProps, inProps); - const props = useDefaultProps({ props: resolvedProps, name: 'MuiLoadingButton' }); - const { - children, - disabled = false, - id: idProp, - loading = false, - loadingIndicator: loadingIndicatorProp, - loadingPosition = 'center', - variant = 'text', - ...other - } = props; - - const id = useId(idProp); - const loadingIndicator = loadingIndicatorProp ?? ( - - ); - - const ownerState = { - ...props, - disabled, - loading, - loadingIndicator, - loadingPosition, - variant, - }; - - const classes = useUtilityClasses(ownerState); - - const loadingButtonLoadingIndicator = loading ? ( - - {loadingIndicator} - - ) : null; - - return ( - - {ownerState.loadingPosition === 'end' ? ( - {children} - ) : ( - loadingButtonLoadingIndicator - )} - - {ownerState.loadingPosition === 'end' ? ( - loadingButtonLoadingIndicator - ) : ( - {children} - )} - - ); -}); - -LoadingButton.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * If `true`, the component is disabled. - * @default false - */ - disabled: PropTypes.bool, - /** - * @ignore - */ - id: PropTypes.string, - /** - * If `true`, the loading indicator is shown and the button becomes 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. - * @default - */ - loadingIndicator: PropTypes.node, - /** - * The loading indicator can be positioned on the start, end, or the center of the button. - * @default 'center' - */ - loadingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => { - if (props.loadingPosition === 'start' && !props.startIcon) { - return new Error( - `MUI: The loadingPosition="start" should be used in combination with startIcon.`, - ); - } - if (props.loadingPosition === 'end' && !props.endIcon) { - return new Error( - `MUI: The loadingPosition="end" should be used in combination with endIcon.`, - ); - } - return null; - }), - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - /** - * The variant to use. - * @default 'text' - */ - variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['contained', 'outlined', 'text']), - PropTypes.string, - ]), -}; +/** + * @ignore - do not document. + */ +export default React.forwardRef(function DeprecatedAlert(props, ref) { + warn(); -export default LoadingButton; + return button': { m: 1 } }}> - ); } diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.test.js b/packages/mui-lab/src/LoadingButton/LoadingButton.test.js deleted file mode 100644 index 9677230eb55c20..00000000000000 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.test.js +++ /dev/null @@ -1,117 +0,0 @@ -import * as React from 'react'; -import { createRenderer, screen, within } from '@mui/internal-test-utils'; -import { expect } from 'chai'; -import Button, { buttonClasses } from '@mui/material/Button'; -import LoadingButton, { loadingButtonClasses as classes } from '@mui/lab/LoadingButton'; -import ButtonGroup, { buttonGroupClasses } from '@mui/material/ButtonGroup'; -import describeConformance from '../../test/describeConformance'; - -describe('', () => { - const { render } = createRenderer(); - - describeConformance(Conformance?, () => ({ - classes, - inheritComponent: Button, - render, - muiName: 'MuiLoadingButton', - testVariantProps: { loading: true }, - refInstanceof: window.HTMLButtonElement, - skip: ['componentProp', 'componentsProp'], - })); - - it('is in tab-order by default', () => { - render(); - - const button = screen.getByRole('button'); - const progressbar = within(button).getByRole('progressbar'); - expect(progressbar).toHaveAccessibleName('Submit'); - }); - }); - - describe('prop: loadingIndicator', () => { - it('is not rendered by default', () => { - render(); - - expect(screen.getByRole('button')).to.have.text('Test'); - }); - - it('is rendered before the children when `loading`', () => { - render( - , - ); - - expect(screen.getByRole('button')).to.have.text('loading…Test'); - }); - }); - - describe('ButtonGroup works with LoadingButton', () => { - it('correctly passes props to children', () => { - const { getByRole } = render( - - - - - , - ); - - const firstButton = screen.getAllByRole('button')[0]; - const middleButton = screen.getAllByRole('button')[1]; - const lastButton = screen.getAllByRole('button')[2]; - - expect(firstButton).to.have.class(buttonGroupClasses.firstButton); - expect(firstButton).not.to.have.class(buttonGroupClasses.middleButton); - expect(firstButton).not.to.have.class(buttonGroupClasses.lastButton); - - expect(middleButton).to.have.class(buttonGroupClasses.middleButton); - expect(middleButton).not.to.have.class(buttonGroupClasses.firstButton); - expect(middleButton).not.to.have.class(buttonGroupClasses.lastButton); - - expect(lastButton).to.have.class(buttonGroupClasses.lastButton); - expect(lastButton).not.to.have.class(buttonGroupClasses.middleButton); - expect(lastButton).not.to.have.class(buttonGroupClasses.firstButton); - }); - }); -}); diff --git a/packages/mui-material/src/Button/Button.d.ts b/packages/mui-material/src/Button/Button.d.ts index 22f019635d2c78..67ef9b76420102 100644 --- a/packages/mui-material/src/Button/Button.d.ts +++ b/packages/mui-material/src/Button/Button.d.ts @@ -77,16 +77,6 @@ export interface ButtonOwnProps { * @default 'center' */ loadingPosition?: 'start' | 'end' | 'center'; - /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ - loadingIndicatorCenter?: string; - /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ - loadingIndicatorStart?: string; - /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ - loadingIndicatorEnd?: string; - /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ - endIconLoadingEnd?: string; - /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ - startIconLoadingStart?: string; /** * The size of the component. * `small` is equivalent to the dense button styling. diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index e0c3270b529645..9147f2eb71274e 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -578,17 +578,9 @@ const Button = React.forwardRef(function Button(inProps, ref) { classes={classes} > {startIcon} - {ownerState.loadingPosition === 'end' ? ( - {children} - ) : ( - buttonLoadingIndicator - )} + {ownerState.loadingPosition === 'end' ? {children} : buttonLoadingIndicator} - {ownerState.loadingPosition === 'end' ? ( - buttonLoadingIndicator - ) : ( - {children} - )} + {ownerState.loadingPosition === 'end' ? buttonLoadingIndicator : {children}} {endIcon} @@ -668,6 +660,27 @@ Button.propTypes /* remove-proptypes */ = { * If defined, an `a` element will be used as the root node. */ href: PropTypes.string, + /** + * @ignore + */ + id: PropTypes.string, + /** + * If `true`, the loading indicator is shown and the button becomes 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. + * @default + */ + loadingIndicator: PropTypes.node, + /** + * The loading indicator can be positioned on the start, end, or the center of the button. + * @default 'center' + */ + loadingPosition: PropTypes.oneOf(['center', 'end', 'start']), /** * The size of the component. * `small` is equivalent to the dense button styling. From e77cc6fa03b06a147576bf775551b5b6923c2e7e Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Fri, 23 Aug 2024 11:10:39 -0400 Subject: [PATCH 09/59] Resolving dependency issues --- pnpm-lock.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e07385e01535ec..82d4a2985e42fe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -999,6 +999,9 @@ importers: '@testing-library/react': specifier: ^16.0.0 version: 16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@testing-library/user-event': + specifier: ^14.5.2 + version: 14.5.2(@testing-library/dom@10.3.1) chai: specifier: ^4.4.1 version: 4.4.1 From 6379283b8f8ef8041848c1afb1f28b0674cff450 Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Fri, 23 Aug 2024 11:15:22 -0400 Subject: [PATCH 10/59] Resolving dependency issues again --- pnpm-lock.yaml | 148 ++++++++++++++++++++++++++++--------------------- 1 file changed, 84 insertions(+), 64 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82d4a2985e42fe..6a9970a0475787 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -325,7 +325,7 @@ importers: dependencies: '@emotion/cache': specifier: latest - version: 11.11.0 + version: 11.13.1 '@mui/base': specifier: workspace:^ version: link:../../packages/mui-base/build @@ -355,7 +355,7 @@ importers: version: link:../local-ui-lib next: specifier: latest - version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -365,7 +365,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.0.16(@types/react@18.3.3)(next@14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@types/node': specifier: ^18.19.39 version: 18.19.39 @@ -558,7 +558,7 @@ importers: version: 3.6.0(@algolia/client-search@4.23.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.13.0) '@emotion/cache': specifier: ^11.11.0 - version: 11.11.0 + version: 11.13.1 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -989,7 +989,7 @@ importers: version: 7.24.7 '@emotion/cache': specifier: ^11.11.0 - version: 11.11.0 + version: 11.13.1 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -1812,7 +1812,7 @@ importers: devDependencies: '@emotion/cache': specifier: ^11.11.0 - version: 11.11.0 + version: 11.13.1 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -1869,7 +1869,7 @@ importers: version: 7.24.7 '@emotion/cache': specifier: ^11.11.0 - version: 11.11.0 + version: 11.13.1 csstype: specifier: ^3.1.3 version: 3.1.3 @@ -2214,7 +2214,7 @@ importers: version: 7.24.7 '@emotion/cache': specifier: ^11.11.0 - version: 11.11.0 + version: 11.13.1 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -3301,8 +3301,8 @@ packages: '@emotion/babel-plugin@11.11.0': resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} - '@emotion/cache@11.11.0': - resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==} + '@emotion/cache@11.13.1': + resolution: {integrity: sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==} '@emotion/css@11.11.2': resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==} @@ -3331,6 +3331,9 @@ packages: '@emotion/memoize@0.8.1': resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + '@emotion/memoize@0.9.0': + resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} + '@emotion/react@11.11.4': resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==} peerDependencies: @@ -3354,6 +3357,9 @@ packages: '@emotion/sheet@1.2.2': resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==} + '@emotion/sheet@1.4.0': + resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==} + '@emotion/styled@11.11.5': resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==} peerDependencies: @@ -3375,9 +3381,15 @@ packages: '@emotion/utils@1.2.1': resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==} + '@emotion/utils@1.4.0': + resolution: {integrity: sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==} + '@emotion/weak-memoize@0.3.1': resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==} + '@emotion/weak-memoize@0.4.0': + resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==} + '@esbuild/aix-ppc64@0.21.5': resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} engines: {node: '>=12'} @@ -4125,8 +4137,8 @@ packages: '@next/env@13.5.1': resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - '@next/env@14.2.4': - resolution: {integrity: sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==} + '@next/env@14.2.6': + resolution: {integrity: sha512-bs5DFKV+08EjWrl8EB+KKqev1ZTNONH1vFCaHh911aaB362NnP32UDTbE9VQhyiAgbFqJsfDkSxFERNDDb3j0g==} '@next/eslint-plugin-next@14.2.4': resolution: {integrity: sha512-svSFxW9f3xDaZA3idQmlFw7SusOuWTpDTAeBlO3AEPDltrraV+lqs7mAc6A27YdnpQVVIA3sODqUAAHdWhVWsA==} @@ -4137,8 +4149,8 @@ packages: cpu: [arm64] os: [darwin] - '@next/swc-darwin-arm64@14.2.4': - resolution: {integrity: sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==} + '@next/swc-darwin-arm64@14.2.6': + resolution: {integrity: sha512-BtJZb+hYXGaVJJivpnDoi3JFVn80SHKCiiRUW3kk1SY6UCUy5dWFFSbh+tGi5lHAughzeduMyxbLt3pspvXNSg==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -4149,8 +4161,8 @@ packages: cpu: [x64] os: [darwin] - '@next/swc-darwin-x64@14.2.4': - resolution: {integrity: sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==} + '@next/swc-darwin-x64@14.2.6': + resolution: {integrity: sha512-ZHRbGpH6KHarzm6qEeXKSElSXh8dS2DtDPjQt3IMwY8QVk7GbdDYjvV4NgSnDA9huGpGgnyy3tH8i5yHCqVkiQ==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -4161,8 +4173,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-gnu@14.2.4': - resolution: {integrity: sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==} + '@next/swc-linux-arm64-gnu@14.2.6': + resolution: {integrity: sha512-O4HqUEe3ZvKshXHcDUXn1OybN4cSZg7ZdwHJMGCXSUEVUqGTJVsOh17smqilIjooP/sIJksgl+1kcf2IWMZWHg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4173,8 +4185,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@14.2.4': - resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==} + '@next/swc-linux-arm64-musl@14.2.6': + resolution: {integrity: sha512-xUcdhr2hfalG8RDDGSFxQ75yOG894UlmFS4K2M0jLrUhauRBGOtUOxoDVwiIIuZQwZ3Y5hDsazNjdYGB0cQ9yQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4185,8 +4197,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-gnu@14.2.4': - resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==} + '@next/swc-linux-x64-gnu@14.2.6': + resolution: {integrity: sha512-InosKxw8UMcA/wEib5n2QttwHSKHZHNSbGcMepBM0CTcNwpxWzX32KETmwbhKod3zrS8n1vJ+DuJKbL9ZAB0Ag==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4197,8 +4209,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@14.2.4': - resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==} + '@next/swc-linux-x64-musl@14.2.6': + resolution: {integrity: sha512-d4QXfJmt5pGJ7cG8qwxKSBnO5AXuKAFYxV7qyDRHnUNvY/dgDh+oX292gATpB2AAHgjdHd5ks1wXxIEj6muLUQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4209,8 +4221,8 @@ packages: cpu: [arm64] os: [win32] - '@next/swc-win32-arm64-msvc@14.2.4': - resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==} + '@next/swc-win32-arm64-msvc@14.2.6': + resolution: {integrity: sha512-AlgIhk4/G+PzOG1qdF1b05uKTMsuRatFlFzAi5G8RZ9h67CVSSuZSbqGHbJDlcV1tZPxq/d4G0q6qcHDKWf4aQ==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -4221,8 +4233,8 @@ packages: cpu: [ia32] os: [win32] - '@next/swc-win32-ia32-msvc@14.2.4': - resolution: {integrity: sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==} + '@next/swc-win32-ia32-msvc@14.2.6': + resolution: {integrity: sha512-hNukAxq7hu4o5/UjPp5jqoBEtrpCbOmnUqZSKNJG8GrUVzfq0ucdhQFVrHcLRMvQcwqqDh1a5AJN9ORnNDpgBQ==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -4233,8 +4245,8 @@ packages: cpu: [x64] os: [win32] - '@next/swc-win32-x64-msvc@14.2.4': - resolution: {integrity: sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==} + '@next/swc-win32-x64-msvc@14.2.6': + resolution: {integrity: sha512-NANtw+ead1rSDK1jxmzq3TYkl03UNK2KHqUYf1nIhNci6NkeqBD4s1njSzYGIlSHxCK+wSaL8RXZm4v+NF/pMw==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -9313,8 +9325,8 @@ packages: sass: optional: true - next@14.2.4: - resolution: {integrity: sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==} + next@14.2.6: + resolution: {integrity: sha512-57Su7RqXs5CBKKKOagt8gPhMM3CpjgbeQhrtei2KLAA1vTNm7jfKS+uDARkSW8ZETUflDCBIsUKGSyQdRs4U4g==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -13467,18 +13479,18 @@ snapshots: transitivePeerDependencies: - supports-color - '@emotion/cache@11.11.0': + '@emotion/cache@11.13.1': dependencies: - '@emotion/memoize': 0.8.1 - '@emotion/sheet': 1.2.2 - '@emotion/utils': 1.2.1 - '@emotion/weak-memoize': 0.3.1 + '@emotion/memoize': 0.9.0 + '@emotion/sheet': 1.4.0 + '@emotion/utils': 1.4.0 + '@emotion/weak-memoize': 0.4.0 stylis: 4.2.0 '@emotion/css@11.11.2': dependencies: '@emotion/babel-plugin': 11.11.0 - '@emotion/cache': 11.11.0 + '@emotion/cache': 11.13.1 '@emotion/serialize': 1.1.4 '@emotion/sheet': 1.2.2 '@emotion/utils': 1.2.1 @@ -13507,11 +13519,13 @@ snapshots: '@emotion/memoize@0.8.1': {} + '@emotion/memoize@0.9.0': {} + '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@emotion/babel-plugin': 11.11.0 - '@emotion/cache': 11.11.0 + '@emotion/cache': 11.13.1 '@emotion/serialize': 1.1.4 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1) '@emotion/utils': 1.2.1 @@ -13542,6 +13556,8 @@ snapshots: '@emotion/sheet@1.2.2': {} + '@emotion/sheet@1.4.0': {} + '@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 @@ -13565,8 +13581,12 @@ snapshots: '@emotion/utils@1.2.1': {} + '@emotion/utils@1.4.0': {} + '@emotion/weak-memoize@0.3.1': {} + '@emotion/weak-memoize@0.4.0': {} + '@esbuild/aix-ppc64@0.21.5': optional: true @@ -14099,7 +14119,7 @@ snapshots: '@mui/styled-engine@5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@emotion/cache': 11.11.0 + '@emotion/cache': 11.13.1 csstype: 3.1.3 prop-types: 15.8.1 react: 18.3.1 @@ -14110,7 +14130,7 @@ snapshots: '@mui/styled-engine@6.0.0-alpha.3(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@emotion/cache': 11.11.0 + '@emotion/cache': 11.13.1 csstype: 3.1.3 prop-types: 15.8.1 react: 18.3.1 @@ -14366,7 +14386,7 @@ snapshots: '@next/env@13.5.1': {} - '@next/env@14.2.4': {} + '@next/env@14.2.6': {} '@next/eslint-plugin-next@14.2.4': dependencies: @@ -14375,55 +14395,55 @@ snapshots: '@next/swc-darwin-arm64@13.5.1': optional: true - '@next/swc-darwin-arm64@14.2.4': + '@next/swc-darwin-arm64@14.2.6': optional: true '@next/swc-darwin-x64@13.5.1': optional: true - '@next/swc-darwin-x64@14.2.4': + '@next/swc-darwin-x64@14.2.6': optional: true '@next/swc-linux-arm64-gnu@13.5.1': optional: true - '@next/swc-linux-arm64-gnu@14.2.4': + '@next/swc-linux-arm64-gnu@14.2.6': optional: true '@next/swc-linux-arm64-musl@13.5.1': optional: true - '@next/swc-linux-arm64-musl@14.2.4': + '@next/swc-linux-arm64-musl@14.2.6': optional: true '@next/swc-linux-x64-gnu@13.5.1': optional: true - '@next/swc-linux-x64-gnu@14.2.4': + '@next/swc-linux-x64-gnu@14.2.6': optional: true '@next/swc-linux-x64-musl@13.5.1': optional: true - '@next/swc-linux-x64-musl@14.2.4': + '@next/swc-linux-x64-musl@14.2.6': optional: true '@next/swc-win32-arm64-msvc@13.5.1': optional: true - '@next/swc-win32-arm64-msvc@14.2.4': + '@next/swc-win32-arm64-msvc@14.2.6': optional: true '@next/swc-win32-ia32-msvc@13.5.1': optional: true - '@next/swc-win32-ia32-msvc@14.2.4': + '@next/swc-win32-ia32-msvc@14.2.6': optional: true '@next/swc-win32-x64-msvc@13.5.1': optional: true - '@next/swc-win32-x64-msvc@14.2.4': + '@next/swc-win32-x64-msvc@14.2.6': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -14860,10 +14880,10 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true - '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@pigment-css/unplugin': 0.0.16(@types/react@18.3.3)(react@18.3.1) - next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@types/react' - react @@ -20940,9 +20960,9 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@next/env': 14.2.4 + '@next/env': 14.2.6 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001599 @@ -20952,15 +20972,15 @@ snapshots: react-dom: 18.3.1(react@18.3.1) styled-jsx: 5.1.1(@babel/core@7.24.7)(babel-plugin-macros@3.1.0)(react@18.3.1) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.4 - '@next/swc-darwin-x64': 14.2.4 - '@next/swc-linux-arm64-gnu': 14.2.4 - '@next/swc-linux-arm64-musl': 14.2.4 - '@next/swc-linux-x64-gnu': 14.2.4 - '@next/swc-linux-x64-musl': 14.2.4 - '@next/swc-win32-arm64-msvc': 14.2.4 - '@next/swc-win32-ia32-msvc': 14.2.4 - '@next/swc-win32-x64-msvc': 14.2.4 + '@next/swc-darwin-arm64': 14.2.6 + '@next/swc-darwin-x64': 14.2.6 + '@next/swc-linux-arm64-gnu': 14.2.6 + '@next/swc-linux-arm64-musl': 14.2.6 + '@next/swc-linux-x64-gnu': 14.2.6 + '@next/swc-linux-x64-musl': 14.2.6 + '@next/swc-win32-arm64-msvc': 14.2.6 + '@next/swc-win32-ia32-msvc': 14.2.6 + '@next/swc-win32-x64-msvc': 14.2.6 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.45.1 transitivePeerDependencies: From 6402d77b767e3abc8a3c73b1dc0b7c79f0a5588f Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Fri, 23 Aug 2024 11:19:32 -0400 Subject: [PATCH 11/59] Deduplicating pnpm-lock file --- pnpm-lock.yaml | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6a9970a0475787..ce86aa4e842f29 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3354,9 +3354,6 @@ packages: '@emotion/css': optional: true - '@emotion/sheet@1.2.2': - resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==} - '@emotion/sheet@1.4.0': resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==} @@ -3378,9 +3375,6 @@ packages: peerDependencies: react: '>=16.8.0' - '@emotion/utils@1.2.1': - resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==} - '@emotion/utils@1.4.0': resolution: {integrity: sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==} @@ -13492,8 +13486,8 @@ snapshots: '@emotion/babel-plugin': 11.11.0 '@emotion/cache': 11.13.1 '@emotion/serialize': 1.1.4 - '@emotion/sheet': 1.2.2 - '@emotion/utils': 1.2.1 + '@emotion/sheet': 1.4.0 + '@emotion/utils': 1.4.0 transitivePeerDependencies: - supports-color @@ -13528,7 +13522,7 @@ snapshots: '@emotion/cache': 11.13.1 '@emotion/serialize': 1.1.4 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1) - '@emotion/utils': 1.2.1 + '@emotion/utils': 1.4.0 '@emotion/weak-memoize': 0.3.1 hoist-non-react-statics: 3.3.2 react: 18.3.1 @@ -13542,20 +13536,18 @@ snapshots: '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 '@emotion/unitless': 0.8.1 - '@emotion/utils': 1.2.1 + '@emotion/utils': 1.4.0 csstype: 3.1.3 '@emotion/server@11.11.0(@emotion/css@11.11.2)': dependencies: - '@emotion/utils': 1.2.1 + '@emotion/utils': 1.4.0 html-tokenize: 2.0.1 multipipe: 1.0.2 through: 2.3.8 optionalDependencies: '@emotion/css': 11.11.2 - '@emotion/sheet@1.2.2': {} - '@emotion/sheet@1.4.0': {} '@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': @@ -13566,7 +13558,7 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/serialize': 1.1.4 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1) - '@emotion/utils': 1.2.1 + '@emotion/utils': 1.4.0 react: 18.3.1 optionalDependencies: '@types/react': 18.3.3 @@ -13579,8 +13571,6 @@ snapshots: dependencies: react: 18.3.1 - '@emotion/utils@1.2.1': {} - '@emotion/utils@1.4.0': {} '@emotion/weak-memoize@0.3.1': {} From 56449f481140e7329ede9a0f29b4414e50f75175 Mon Sep 17 00:00:00 2001 From: Gavin McGuinness Date: Fri, 23 Aug 2024 11:29:42 -0400 Subject: [PATCH 12/59] Restoring old pnpm-lock file --- pnpm-lock.yaml | 165 +++++++++++++++++++++++-------------------------- 1 file changed, 76 insertions(+), 89 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ce86aa4e842f29..e07385e01535ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -325,7 +325,7 @@ importers: dependencies: '@emotion/cache': specifier: latest - version: 11.13.1 + version: 11.11.0 '@mui/base': specifier: workspace:^ version: link:../../packages/mui-base/build @@ -355,7 +355,7 @@ importers: version: link:../local-ui-lib next: specifier: latest - version: 14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -365,7 +365,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(next@14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@types/node': specifier: ^18.19.39 version: 18.19.39 @@ -558,7 +558,7 @@ importers: version: 3.6.0(@algolia/client-search@4.23.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.13.0) '@emotion/cache': specifier: ^11.11.0 - version: 11.13.1 + version: 11.11.0 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -989,7 +989,7 @@ importers: version: 7.24.7 '@emotion/cache': specifier: ^11.11.0 - version: 11.13.1 + version: 11.11.0 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -999,9 +999,6 @@ importers: '@testing-library/react': specifier: ^16.0.0 version: 16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@testing-library/user-event': - specifier: ^14.5.2 - version: 14.5.2(@testing-library/dom@10.3.1) chai: specifier: ^4.4.1 version: 4.4.1 @@ -1812,7 +1809,7 @@ importers: devDependencies: '@emotion/cache': specifier: ^11.11.0 - version: 11.13.1 + version: 11.11.0 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -1869,7 +1866,7 @@ importers: version: 7.24.7 '@emotion/cache': specifier: ^11.11.0 - version: 11.13.1 + version: 11.11.0 csstype: specifier: ^3.1.3 version: 3.1.3 @@ -2214,7 +2211,7 @@ importers: version: 7.24.7 '@emotion/cache': specifier: ^11.11.0 - version: 11.13.1 + version: 11.11.0 '@emotion/react': specifier: ^11.11.4 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -3301,8 +3298,8 @@ packages: '@emotion/babel-plugin@11.11.0': resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} - '@emotion/cache@11.13.1': - resolution: {integrity: sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==} + '@emotion/cache@11.11.0': + resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==} '@emotion/css@11.11.2': resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==} @@ -3331,9 +3328,6 @@ packages: '@emotion/memoize@0.8.1': resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} - '@emotion/memoize@0.9.0': - resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} - '@emotion/react@11.11.4': resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==} peerDependencies: @@ -3354,8 +3348,8 @@ packages: '@emotion/css': optional: true - '@emotion/sheet@1.4.0': - resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==} + '@emotion/sheet@1.2.2': + resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==} '@emotion/styled@11.11.5': resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==} @@ -3375,15 +3369,12 @@ packages: peerDependencies: react: '>=16.8.0' - '@emotion/utils@1.4.0': - resolution: {integrity: sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==} + '@emotion/utils@1.2.1': + resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==} '@emotion/weak-memoize@0.3.1': resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==} - '@emotion/weak-memoize@0.4.0': - resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==} - '@esbuild/aix-ppc64@0.21.5': resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} engines: {node: '>=12'} @@ -4131,8 +4122,8 @@ packages: '@next/env@13.5.1': resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - '@next/env@14.2.6': - resolution: {integrity: sha512-bs5DFKV+08EjWrl8EB+KKqev1ZTNONH1vFCaHh911aaB362NnP32UDTbE9VQhyiAgbFqJsfDkSxFERNDDb3j0g==} + '@next/env@14.2.4': + resolution: {integrity: sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==} '@next/eslint-plugin-next@14.2.4': resolution: {integrity: sha512-svSFxW9f3xDaZA3idQmlFw7SusOuWTpDTAeBlO3AEPDltrraV+lqs7mAc6A27YdnpQVVIA3sODqUAAHdWhVWsA==} @@ -4143,8 +4134,8 @@ packages: cpu: [arm64] os: [darwin] - '@next/swc-darwin-arm64@14.2.6': - resolution: {integrity: sha512-BtJZb+hYXGaVJJivpnDoi3JFVn80SHKCiiRUW3kk1SY6UCUy5dWFFSbh+tGi5lHAughzeduMyxbLt3pspvXNSg==} + '@next/swc-darwin-arm64@14.2.4': + resolution: {integrity: sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -4155,8 +4146,8 @@ packages: cpu: [x64] os: [darwin] - '@next/swc-darwin-x64@14.2.6': - resolution: {integrity: sha512-ZHRbGpH6KHarzm6qEeXKSElSXh8dS2DtDPjQt3IMwY8QVk7GbdDYjvV4NgSnDA9huGpGgnyy3tH8i5yHCqVkiQ==} + '@next/swc-darwin-x64@14.2.4': + resolution: {integrity: sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -4167,8 +4158,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-gnu@14.2.6': - resolution: {integrity: sha512-O4HqUEe3ZvKshXHcDUXn1OybN4cSZg7ZdwHJMGCXSUEVUqGTJVsOh17smqilIjooP/sIJksgl+1kcf2IWMZWHg==} + '@next/swc-linux-arm64-gnu@14.2.4': + resolution: {integrity: sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4179,8 +4170,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@14.2.6': - resolution: {integrity: sha512-xUcdhr2hfalG8RDDGSFxQ75yOG894UlmFS4K2M0jLrUhauRBGOtUOxoDVwiIIuZQwZ3Y5hDsazNjdYGB0cQ9yQ==} + '@next/swc-linux-arm64-musl@14.2.4': + resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4191,8 +4182,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-gnu@14.2.6': - resolution: {integrity: sha512-InosKxw8UMcA/wEib5n2QttwHSKHZHNSbGcMepBM0CTcNwpxWzX32KETmwbhKod3zrS8n1vJ+DuJKbL9ZAB0Ag==} + '@next/swc-linux-x64-gnu@14.2.4': + resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4203,8 +4194,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@14.2.6': - resolution: {integrity: sha512-d4QXfJmt5pGJ7cG8qwxKSBnO5AXuKAFYxV7qyDRHnUNvY/dgDh+oX292gATpB2AAHgjdHd5ks1wXxIEj6muLUQ==} + '@next/swc-linux-x64-musl@14.2.4': + resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4215,8 +4206,8 @@ packages: cpu: [arm64] os: [win32] - '@next/swc-win32-arm64-msvc@14.2.6': - resolution: {integrity: sha512-AlgIhk4/G+PzOG1qdF1b05uKTMsuRatFlFzAi5G8RZ9h67CVSSuZSbqGHbJDlcV1tZPxq/d4G0q6qcHDKWf4aQ==} + '@next/swc-win32-arm64-msvc@14.2.4': + resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -4227,8 +4218,8 @@ packages: cpu: [ia32] os: [win32] - '@next/swc-win32-ia32-msvc@14.2.6': - resolution: {integrity: sha512-hNukAxq7hu4o5/UjPp5jqoBEtrpCbOmnUqZSKNJG8GrUVzfq0ucdhQFVrHcLRMvQcwqqDh1a5AJN9ORnNDpgBQ==} + '@next/swc-win32-ia32-msvc@14.2.4': + resolution: {integrity: sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -4239,8 +4230,8 @@ packages: cpu: [x64] os: [win32] - '@next/swc-win32-x64-msvc@14.2.6': - resolution: {integrity: sha512-NANtw+ead1rSDK1jxmzq3TYkl03UNK2KHqUYf1nIhNci6NkeqBD4s1njSzYGIlSHxCK+wSaL8RXZm4v+NF/pMw==} + '@next/swc-win32-x64-msvc@14.2.4': + resolution: {integrity: sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -9319,8 +9310,8 @@ packages: sass: optional: true - next@14.2.6: - resolution: {integrity: sha512-57Su7RqXs5CBKKKOagt8gPhMM3CpjgbeQhrtei2KLAA1vTNm7jfKS+uDARkSW8ZETUflDCBIsUKGSyQdRs4U4g==} + next@14.2.4: + resolution: {integrity: sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -13473,21 +13464,21 @@ snapshots: transitivePeerDependencies: - supports-color - '@emotion/cache@11.13.1': + '@emotion/cache@11.11.0': dependencies: - '@emotion/memoize': 0.9.0 - '@emotion/sheet': 1.4.0 - '@emotion/utils': 1.4.0 - '@emotion/weak-memoize': 0.4.0 + '@emotion/memoize': 0.8.1 + '@emotion/sheet': 1.2.2 + '@emotion/utils': 1.2.1 + '@emotion/weak-memoize': 0.3.1 stylis: 4.2.0 '@emotion/css@11.11.2': dependencies: '@emotion/babel-plugin': 11.11.0 - '@emotion/cache': 11.13.1 + '@emotion/cache': 11.11.0 '@emotion/serialize': 1.1.4 - '@emotion/sheet': 1.4.0 - '@emotion/utils': 1.4.0 + '@emotion/sheet': 1.2.2 + '@emotion/utils': 1.2.1 transitivePeerDependencies: - supports-color @@ -13513,16 +13504,14 @@ snapshots: '@emotion/memoize@0.8.1': {} - '@emotion/memoize@0.9.0': {} - '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 '@emotion/babel-plugin': 11.11.0 - '@emotion/cache': 11.13.1 + '@emotion/cache': 11.11.0 '@emotion/serialize': 1.1.4 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1) - '@emotion/utils': 1.4.0 + '@emotion/utils': 1.2.1 '@emotion/weak-memoize': 0.3.1 hoist-non-react-statics: 3.3.2 react: 18.3.1 @@ -13536,19 +13525,19 @@ snapshots: '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 '@emotion/unitless': 0.8.1 - '@emotion/utils': 1.4.0 + '@emotion/utils': 1.2.1 csstype: 3.1.3 '@emotion/server@11.11.0(@emotion/css@11.11.2)': dependencies: - '@emotion/utils': 1.4.0 + '@emotion/utils': 1.2.1 html-tokenize: 2.0.1 multipipe: 1.0.2 through: 2.3.8 optionalDependencies: '@emotion/css': 11.11.2 - '@emotion/sheet@1.4.0': {} + '@emotion/sheet@1.2.2': {} '@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': dependencies: @@ -13558,7 +13547,7 @@ snapshots: '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1) '@emotion/serialize': 1.1.4 '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1) - '@emotion/utils': 1.4.0 + '@emotion/utils': 1.2.1 react: 18.3.1 optionalDependencies: '@types/react': 18.3.3 @@ -13571,12 +13560,10 @@ snapshots: dependencies: react: 18.3.1 - '@emotion/utils@1.4.0': {} + '@emotion/utils@1.2.1': {} '@emotion/weak-memoize@0.3.1': {} - '@emotion/weak-memoize@0.4.0': {} - '@esbuild/aix-ppc64@0.21.5': optional: true @@ -14109,7 +14096,7 @@ snapshots: '@mui/styled-engine@5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@emotion/cache': 11.13.1 + '@emotion/cache': 11.11.0 csstype: 3.1.3 prop-types: 15.8.1 react: 18.3.1 @@ -14120,7 +14107,7 @@ snapshots: '@mui/styled-engine@6.0.0-alpha.3(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - '@emotion/cache': 11.13.1 + '@emotion/cache': 11.11.0 csstype: 3.1.3 prop-types: 15.8.1 react: 18.3.1 @@ -14376,7 +14363,7 @@ snapshots: '@next/env@13.5.1': {} - '@next/env@14.2.6': {} + '@next/env@14.2.4': {} '@next/eslint-plugin-next@14.2.4': dependencies: @@ -14385,55 +14372,55 @@ snapshots: '@next/swc-darwin-arm64@13.5.1': optional: true - '@next/swc-darwin-arm64@14.2.6': + '@next/swc-darwin-arm64@14.2.4': optional: true '@next/swc-darwin-x64@13.5.1': optional: true - '@next/swc-darwin-x64@14.2.6': + '@next/swc-darwin-x64@14.2.4': optional: true '@next/swc-linux-arm64-gnu@13.5.1': optional: true - '@next/swc-linux-arm64-gnu@14.2.6': + '@next/swc-linux-arm64-gnu@14.2.4': optional: true '@next/swc-linux-arm64-musl@13.5.1': optional: true - '@next/swc-linux-arm64-musl@14.2.6': + '@next/swc-linux-arm64-musl@14.2.4': optional: true '@next/swc-linux-x64-gnu@13.5.1': optional: true - '@next/swc-linux-x64-gnu@14.2.6': + '@next/swc-linux-x64-gnu@14.2.4': optional: true '@next/swc-linux-x64-musl@13.5.1': optional: true - '@next/swc-linux-x64-musl@14.2.6': + '@next/swc-linux-x64-musl@14.2.4': optional: true '@next/swc-win32-arm64-msvc@13.5.1': optional: true - '@next/swc-win32-arm64-msvc@14.2.6': + '@next/swc-win32-arm64-msvc@14.2.4': optional: true '@next/swc-win32-ia32-msvc@13.5.1': optional: true - '@next/swc-win32-ia32-msvc@14.2.6': + '@next/swc-win32-ia32-msvc@14.2.4': optional: true '@next/swc-win32-x64-msvc@13.5.1': optional: true - '@next/swc-win32-x64-msvc@14.2.6': + '@next/swc-win32-x64-msvc@14.2.4': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -14870,10 +14857,10 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true - '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@pigment-css/unplugin': 0.0.16(@types/react@18.3.3)(react@18.3.1) - next: 14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@types/react' - react @@ -20950,9 +20937,9 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@14.2.6(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@next/env': 14.2.6 + '@next/env': 14.2.4 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001599 @@ -20962,15 +20949,15 @@ snapshots: react-dom: 18.3.1(react@18.3.1) styled-jsx: 5.1.1(@babel/core@7.24.7)(babel-plugin-macros@3.1.0)(react@18.3.1) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.6 - '@next/swc-darwin-x64': 14.2.6 - '@next/swc-linux-arm64-gnu': 14.2.6 - '@next/swc-linux-arm64-musl': 14.2.6 - '@next/swc-linux-x64-gnu': 14.2.6 - '@next/swc-linux-x64-musl': 14.2.6 - '@next/swc-win32-arm64-msvc': 14.2.6 - '@next/swc-win32-ia32-msvc': 14.2.6 - '@next/swc-win32-x64-msvc': 14.2.6 + '@next/swc-darwin-arm64': 14.2.4 + '@next/swc-darwin-x64': 14.2.4 + '@next/swc-linux-arm64-gnu': 14.2.4 + '@next/swc-linux-arm64-musl': 14.2.4 + '@next/swc-linux-x64-gnu': 14.2.4 + '@next/swc-linux-x64-musl': 14.2.4 + '@next/swc-win32-arm64-msvc': 14.2.4 + '@next/swc-win32-ia32-msvc': 14.2.4 + '@next/swc-win32-x64-msvc': 14.2.4 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.45.1 transitivePeerDependencies: From 5186aa954902eb107b19670d8fc4718a73d022e6 Mon Sep 17 00:00:00 2001 From: Gavin-10 <81329254+Gavin-10@users.noreply.github.com> Date: Sun, 25 Aug 2024 16:14:06 -0400 Subject: [PATCH 13/59] Resolving dependency issues --- pnpm-lock.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e07385e01535ec..82d4a2985e42fe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -999,6 +999,9 @@ importers: '@testing-library/react': specifier: ^16.0.0 version: 16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@testing-library/user-event': + specifier: ^14.5.2 + version: 14.5.2(@testing-library/dom@10.3.1) chai: specifier: ^4.4.1 version: 4.4.1 From 293ecdc3a943b185a5901482427e1e92f22f22cb Mon Sep 17 00:00:00 2001 From: Gavin-10 <81329254+Gavin-10@users.noreply.github.com> Date: Sun, 25 Aug 2024 16:19:44 -0400 Subject: [PATCH 14/59] Manually changed pnpm-lock.yaml file --- pnpm-lock.yaml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82d4a2985e42fe..0783a88bff5ecf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1216,7 +1216,7 @@ importers: optionalDependencies: aws-sdk: specifier: ^2.1655.0 - version: 2.1655.0 + version: 2.1656.0 devDependencies: claudia: specifier: ^5.14.1 @@ -5764,8 +5764,8 @@ packages: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} - aws-sdk@2.1655.0: - resolution: {integrity: sha512-Tec0/ZHK8ES6NvAEJhgEm3znyoPb4QUuyQZ2RdvbNTbpJDbeeDuu4BaCAR5HbEVXREVk1/8OBDMsWW1B5lkcww==} + aws-sdk@2.1656.0: + resolution: {integrity: sha512-KhMRUSeIJNDMuL5PEwyQ5JPF477qDNCb3gHHTqb49IVTtpIYZnPdJgOrDb4nbFHEeoW1x9hKrkRJ4ZL1KTEmJA==} engines: {node: '>= 10.0.0'} axe-core@4.7.2: @@ -16510,7 +16510,7 @@ snapshots: dependencies: possible-typed-array-names: 1.0.0 - aws-sdk@2.1655.0: + aws-sdk@2.1656.0: dependencies: buffer: 4.9.2 events: 1.1.1 @@ -16985,7 +16985,7 @@ snapshots: claudia@5.14.1: dependencies: archiver: 3.1.1 - aws-sdk: 2.1655.0 + aws-sdk: 2.1656.0 fs-extra: 6.0.1 glob: 7.2.3 gunzip-maybe: 1.4.2 From a3f279cb1dfc338a396bbfb9992726d1ea743cc3 Mon Sep 17 00:00:00 2001 From: Gavin-10 <81329254+Gavin-10@users.noreply.github.com> Date: Tue, 27 Aug 2024 21:58:43 -0400 Subject: [PATCH 15/59] Button Group Docs Updated --- .../components/button-group/LoadingButtonGroup.js | 7 +++---- .../components/button-group/LoadingButtonGroup.tsx | 7 +++---- .../button-group/LoadingButtonGroup.tsx.preview | 6 +++--- .../data/material/components/button-group/button-group.md | 8 +++----- 4 files changed, 12 insertions(+), 16 deletions(-) diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/docs/data/material/components/button-group/LoadingButtonGroup.js index 989f028daf7a56..fd146a90620d10 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.js +++ b/docs/data/material/components/button-group/LoadingButtonGroup.js @@ -1,17 +1,16 @@ import * as React from 'react'; import ButtonGroup from '@mui/material/ButtonGroup'; import Button from '@mui/material/Button'; -import LoadingButton from '@mui/lab/LoadingButton'; import SaveIcon from '@mui/icons-material/Save'; export default function LoadingButtonGroup() { return ( - Fetch data - }> + + ); } diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/docs/data/material/components/button-group/LoadingButtonGroup.tsx index 989f028daf7a56..fd146a90620d10 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx +++ b/docs/data/material/components/button-group/LoadingButtonGroup.tsx @@ -1,17 +1,16 @@ import * as React from 'react'; import ButtonGroup from '@mui/material/ButtonGroup'; import Button from '@mui/material/Button'; -import LoadingButton from '@mui/lab/LoadingButton'; import SaveIcon from '@mui/icons-material/Save'; export default function LoadingButtonGroup() { return ( - Fetch data - }> + + ); } diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview index 51360c91557385..a69903f1fca35c 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview +++ b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview @@ -1,7 +1,7 @@ - Fetch data - }> + + \ No newline at end of file diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md index c5a1732e01635c..4288df34761a9a 100644 --- a/docs/data/material/components/button-group/button-group.md +++ b/docs/data/material/components/button-group/button-group.md @@ -1,7 +1,7 @@ --- productId: material-ui title: React Button Group component -components: Button, ButtonGroup, LoadingButton +components: Button, ButtonGroup githubLabel: 'component: ButtonGroup' --- @@ -48,10 +48,8 @@ You can remove the elevation with the `disableElevation` prop. {{"demo": "DisableElevation.js"}} -## Experimental APIs +## Loading button -### Loading button - -You can use the [``](/material-ui/react-button/#loading-button) from [`@mui/lab`](/material-ui/about-the-lab/) in the button group. +You can use the `loading` prop to create loading buttons in button groups {{"demo": "LoadingButtonGroup.js"}} From 5b429c6ceff87006cb1db7813ff114d87c3963f7 Mon Sep 17 00:00:00 2001 From: Gavin-10 <81329254+Gavin-10@users.noreply.github.com> Date: Tue, 27 Aug 2024 22:38:26 -0400 Subject: [PATCH 16/59] Child alignment issues fixed --- packages/mui-material/src/Button/Button.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 9147f2eb71274e..c9a767896f008f 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -578,9 +578,9 @@ const Button = React.forwardRef(function Button(inProps, ref) { classes={classes} > {startIcon} - {ownerState.loadingPosition === 'end' ? {children} : buttonLoadingIndicator} + {ownerState.loadingPosition === 'end' ? children : buttonLoadingIndicator} - {ownerState.loadingPosition === 'end' ? buttonLoadingIndicator : {children}} + {ownerState.loadingPosition === 'end' ? buttonLoadingIndicator : children} {endIcon} From 8b968cfd72e162873edb96584f553b4d9ea049ba Mon Sep 17 00:00:00 2001 From: Gavin-10 <81329254+Gavin-10@users.noreply.github.com> Date: Wed, 2 Oct 2024 00:04:03 -0400 Subject: [PATCH 17/59] Added suggestions from review --- .../material/components/button-group/LoadingButtonGroup.tsx | 1 - docs/data/material/components/button-group/button-group.md | 2 +- docs/data/material/components/buttons/buttons.md | 4 ++-- packages/mui-lab/src/LoadingButton/LoadingButton.js | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/docs/data/material/components/button-group/LoadingButtonGroup.tsx index fd146a90620d10..c0e02f5bf0ca53 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx +++ b/docs/data/material/components/button-group/LoadingButtonGroup.tsx @@ -7,7 +7,6 @@ export default function LoadingButtonGroup() { return ( - diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md index 4288df34761a9a..a09b45c76cd840 100644 --- a/docs/data/material/components/button-group/button-group.md +++ b/docs/data/material/components/button-group/button-group.md @@ -50,6 +50,6 @@ You can remove the elevation with the `disableElevation` prop. ## Loading button -You can use the `loading` prop to create loading buttons in button groups +You can use the `loading` prop from `Button` to create loading buttons in button groups. {{"demo": "LoadingButtonGroup.js"}} diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index e382cfa9e418f5..8dbcccd8f81107 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -118,9 +118,9 @@ To create a file upload button, turn the button into a label using `component="l {{"demo": "InputFileUpload.js"}} -### Loading button +## Loading button -Use the `loading` prop to give buttons a loading state and disable interactions +Use the `loading` prop to set buttons in a loading state and disable interactions. {{"demo": "LoadingButtons.js"}} diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js index 0f43c3d441daad..1e160b41340cff 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/mui-lab/src/LoadingButton/LoadingButton.js @@ -8,7 +8,7 @@ const warn = () => { if (!warnedOnce) { console.warn( [ - 'MUI: The Button component was moved from the lab to the core.', + 'MUI: The LoadingButton component functionality is now part of the Button component from core.', '', "You should use `import { Button } from '@mui/material'`", "or `import Button from '@mui/material/Button'`", From 0de62aea1c6bb2126a4f8c99e73231623972fa57 Mon Sep 17 00:00:00 2001 From: Gavin-10 <81329254+Gavin-10@users.noreply.github.com> Date: Wed, 2 Oct 2024 21:59:42 -0400 Subject: [PATCH 18/59] Formatted demos --- docs/data/material/components/button-group/LoadingButtonGroup.js | 1 - .../components/button-group/LoadingButtonGroup.tsx.preview | 1 - 2 files changed, 2 deletions(-) diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/docs/data/material/components/button-group/LoadingButtonGroup.js index fd146a90620d10..c0e02f5bf0ca53 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.js +++ b/docs/data/material/components/button-group/LoadingButtonGroup.js @@ -7,7 +7,6 @@ export default function LoadingButtonGroup() { return ( - diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview index a69903f1fca35c..dafcd77c93bc60 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview +++ b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview @@ -1,6 +1,5 @@ - From 1d6b23fb85cd5fc3645932f79c928a6dabab1712 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Wed, 30 Oct 2024 19:07:26 +0530 Subject: [PATCH 19/59] pnpm dedupe --- pnpm-lock.yaml | 152 +++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 142 insertions(+), 10 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6af5fa6c348fa2..a0de80470c8b87 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -652,7 +652,7 @@ importers: version: 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@toolpad/core': specifier: ^0.8.1 - version: 0.8.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.16(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.10(@types/node@20.17.1)(terser@5.29.2)) + version: 0.8.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.16(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.10(@types/node@20.17.1)(terser@5.29.2)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.47) @@ -1402,7 +1402,7 @@ importers: version: 7.26.0 '@mui/base': specifier: '*' - version: 5.0.0-beta.60(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 5.0.0-beta.61(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/internal-markdown': specifier: workspace:^ version: link:../markdown @@ -3932,8 +3932,8 @@ packages: '@types/react': optional: true - '@mui/base@5.0.0-beta.60': - resolution: {integrity: sha512-w8twR3qCUI+uJHO5xDOuc1yB5l46KFbvNsTwIvEW9tQkKxVaiEFf2GAXHuvFJiHfZLqjzett6drZjghy8D1Z1A==} + '@mui/base@5.0.0-beta.61': + resolution: {integrity: sha512-YaMOTXS3ecDNGsPKa6UdlJ8loFLvcL9+VbpCK3hfk71OaNauZRp4Yf7KeXDYr7Ms3M/XBD3SaiR6JMr6vYtfDg==} engines: {node: '>=14.0.0'} peerDependencies: '@types/react': ^18.3.12 @@ -3984,6 +3984,10 @@ packages: '@types/react': optional: true + '@mui/material-pigment-css@6.1.6': + resolution: {integrity: sha512-NMw6CD/RzLvpM5KVlq01+Zs4IsW0/h4mlxwQB4FNxv+sIHiEFr4vezBfcpL2lkC+UhCcvY2gZWOnkPlPcCqb1w==} + engines: {node: '>=14.0.0'} + '@mui/material@5.15.4': resolution: {integrity: sha512-T/LGRAC+M0c+D3+y67eHwIN5bSje0TxbcJCWR0esNvU11T0QwrX3jedXItPNBwMupF2F5VWCDHBVLlFnN3+ABA==} engines: {node: '>=12.0.0'} @@ -4021,6 +4025,16 @@ packages: '@types/react': optional: true + '@mui/private-theming@6.1.6': + resolution: {integrity: sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^18.3.12 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@mui/styled-engine@5.16.4': resolution: {integrity: sha512-0+mnkf+UiAmTVB8PZFqOhqf729Yh0Cxq29/5cA3VAyDVTRIUUQ8FXQhiAhUIbijFmM72rY80ahFPXIm4WDbzcA==} engines: {node: '>=12.0.0'} @@ -4047,6 +4061,19 @@ packages: '@emotion/styled': optional: true + '@mui/styled-engine@6.1.6': + resolution: {integrity: sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@mui/system@5.16.5': resolution: {integrity: sha512-uzIUGdrWddUx1HPxW4+B2o4vpgKyRxGe/8BxbfXVDPNPHX75c782TseoCnR/VyfnZJfqX87GcxDmnZEE1c031g==} engines: {node: '>=12.0.0'} @@ -4079,6 +4106,22 @@ packages: '@types/react': optional: true + '@mui/system@6.1.6': + resolution: {integrity: sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@types/react': ^18.3.12 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@types/react': + optional: true + '@mui/types@7.2.18': resolution: {integrity: sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==} peerDependencies: @@ -4087,6 +4130,14 @@ packages: '@types/react': optional: true + '@mui/types@7.2.19': + resolution: {integrity: sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==} + peerDependencies: + '@types/react': ^18.3.12 + peerDependenciesMeta: + '@types/react': + optional: true + '@mui/utils@5.16.6': resolution: {integrity: sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==} engines: {node: '>=12.0.0'} @@ -4117,6 +4168,16 @@ packages: '@types/react': optional: true + '@mui/utils@6.1.6': + resolution: {integrity: sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^18.3.12 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@mui/x-charts-vendor@7.20.0': resolution: {integrity: sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==} @@ -14694,12 +14755,12 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 - '@mui/base@5.0.0-beta.60(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/base@5.0.0-beta.61(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/types': 7.2.19(@types/react@18.3.12) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.1 prop-types: 15.8.1 @@ -14727,7 +14788,7 @@ snapshots: '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 - '@mui/lab@6.0.0-beta.12(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/lab@6.0.0-beta.12(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 '@mui/base': 5.0.0-beta.59(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -14742,8 +14803,22 @@ snapshots: optionalDependencies: '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@mui/material-pigment-css': 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 + '@mui/material-pigment-css@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@mui/system': 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@pigment-css/react': 0.0.25(@types/react@18.3.12)(react@18.3.1) + transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' + - '@types/react' + - react + - supports-color + optional: true + '@mui/material@5.15.4(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -14783,6 +14858,16 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 + '@mui/private-theming@6.1.6(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.12 + optional: true + '@mui/styled-engine@5.16.4(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -14807,6 +14892,20 @@ snapshots: '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@mui/styled-engine@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@emotion/cache': 11.13.1 + '@emotion/serialize': 1.3.2 + '@emotion/sheet': 1.4.0 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) + '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + optional: true + '@mui/system@5.16.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -14839,10 +14938,31 @@ snapshots: '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 + '@mui/system@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@mui/private-theming': 6.1.6(@types/react@18.3.12)(react@18.3.1) + '@mui/styled-engine': 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1) + '@mui/types': 7.2.19(@types/react@18.3.12) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) + clsx: 2.1.1 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.1 + optionalDependencies: + '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) + '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@types/react': 18.3.12 + optional: true + '@mui/types@7.2.18(@types/react@18.3.12)': optionalDependencies: '@types/react': 18.3.12 + '@mui/types@7.2.19(@types/react@18.3.12)': + optionalDependencies: + '@types/react': 18.3.12 + '@mui/utils@5.16.6(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -14879,6 +14999,18 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 + '@mui/utils@6.1.6(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@mui/types': 7.2.19(@types/react@18.3.12) + '@types/prop-types': 15.7.13 + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-is: 18.3.1 + optionalDependencies: + '@types/react': 18.3.12 + '@mui/x-charts-vendor@7.20.0': dependencies: '@babel/runtime': 7.26.0 @@ -16442,11 +16574,11 @@ snapshots: '@theme-ui/css': 0.17.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1)) react: 18.3.1 - '@toolpad/core@0.8.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.16(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.10(@types/node@20.17.1)(terser@5.29.2))': + '@toolpad/core@0.8.1(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.16(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.10(@types/node@20.17.1)(terser@5.29.2))': dependencies: '@babel/runtime': 7.26.0 '@mui/icons-material': link:packages/mui-icons-material/build - '@mui/lab': 6.0.0-beta.12(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/lab': 6.0.0-beta.12(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': link:packages/mui-material/build '@mui/utils': 6.1.4(@types/react@18.3.12)(react@18.3.1) '@toolpad/utils': 0.8.1(react@18.3.1) From 9c1394d96ae8c300b18efc120a8a26fd6e4f3421 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Wed, 30 Oct 2024 19:12:37 +0530 Subject: [PATCH 20/59] pnpm docs:api --- .../pages/material-ui/api/loading-button.json | 453 ------------------ .../loading-button/loading-button.json | 356 -------------- 2 files changed, 809 deletions(-) delete mode 100644 docs/pages/material-ui/api/loading-button.json delete mode 100644 docs/translations/api-docs/loading-button/loading-button.json diff --git a/docs/pages/material-ui/api/loading-button.json b/docs/pages/material-ui/api/loading-button.json deleted file mode 100644 index 8155927a65f266..00000000000000 --- a/docs/pages/material-ui/api/loading-button.json +++ /dev/null @@ -1,453 +0,0 @@ -{ - "props": { - "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "disabled": { "type": { "name": "bool" }, "default": "false" }, - "loading": { "type": { "name": "bool" }, "default": "false" }, - "loadingIndicator": { - "type": { "name": "node" }, - "default": "" - }, - "loadingPosition": { - "type": { - "name": "custom", - "description": "'start'
| 'end'
| 'center'" - }, - "default": "'center'" - }, - "sx": { - "type": { - "name": "union", - "description": "Array<func
| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } - }, - "variant": { - "type": { - "name": "union", - "description": "'contained'
| 'outlined'
| 'text'
| string" - }, - "default": "'text'" - } - }, - "name": "LoadingButton", - "imports": [ - "import LoadingButton from '@mui/lab/LoadingButton';", - "import { LoadingButton } from '@mui/lab';" - ], - "classes": [ - { - "key": "colorError", - "className": "MuiLoadingButton-colorError", - "description": "Styles applied to the root element if `color=\"error\"`.", - "isGlobal": false - }, - { - "key": "colorInfo", - "className": "MuiLoadingButton-colorInfo", - "description": "Styles applied to the root element if `color=\"info\"`.", - "isGlobal": false - }, - { - "key": "colorInherit", - "className": "MuiLoadingButton-colorInherit", - "description": "Styles applied to the root element if `color=\"inherit\"`.", - "isGlobal": false - }, - { - "key": "colorPrimary", - "className": "MuiLoadingButton-colorPrimary", - "description": "Styles applied to the root element if `color=\"primary\"`.", - "isGlobal": false - }, - { - "key": "colorSecondary", - "className": "MuiLoadingButton-colorSecondary", - "description": "Styles applied to the root element if `color=\"secondary\"`.", - "isGlobal": false - }, - { - "key": "colorSuccess", - "className": "MuiLoadingButton-colorSuccess", - "description": "Styles applied to the root element if `color=\"success\"`.", - "isGlobal": false - }, - { - "key": "colorWarning", - "className": "MuiLoadingButton-colorWarning", - "description": "Styles applied to the root element if `color=\"warning\"`.", - "isGlobal": false - }, - { - "key": "contained", - "className": "MuiLoadingButton-contained", - "description": "Styles applied to the root element if `variant=\"contained\"`.", - "isGlobal": false - }, - { - "key": "containedError", - "className": "MuiLoadingButton-containedError", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"error\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedInfo", - "className": "MuiLoadingButton-containedInfo", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"info\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedInherit", - "className": "MuiLoadingButton-containedInherit", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"inherit\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedPrimary", - "className": "MuiLoadingButton-containedPrimary", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"primary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSecondary", - "className": "MuiLoadingButton-containedSecondary", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"secondary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSizeLarge", - "className": "MuiLoadingButton-containedSizeLarge", - "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"contained\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSizeMedium", - "className": "MuiLoadingButton-containedSizeMedium", - "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"contained\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSizeSmall", - "className": "MuiLoadingButton-containedSizeSmall", - "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"contained\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSuccess", - "className": "MuiLoadingButton-containedSuccess", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"success\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedWarning", - "className": "MuiLoadingButton-containedWarning", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"warning\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "disabled", - "className": "Mui-disabled", - "description": "State class applied to the root element if `disabled={true}`.", - "isGlobal": true - }, - { - "key": "disableElevation", - "className": "MuiLoadingButton-disableElevation", - "description": "Styles applied to the root element if `disableElevation={true}`.", - "isGlobal": false - }, - { - "key": "endIcon", - "className": "MuiLoadingButton-endIcon", - "description": "Styles applied to the endIcon element if supplied.", - "isGlobal": false - }, - { - "key": "endIconLoadingEnd", - "className": "MuiLoadingButton-endIconLoadingEnd", - "description": "Styles applied to the endIcon element if `loading={true}` and `loadingPosition=\"end\"`.", - "isGlobal": false - }, - { - "key": "focusVisible", - "className": "Mui-focusVisible", - "description": "State class applied to the ButtonBase root element if the button is keyboard focused.", - "isGlobal": true - }, - { - "key": "fullWidth", - "className": "MuiLoadingButton-fullWidth", - "description": "Styles applied to the root element if `fullWidth={true}`.", - "isGlobal": false - }, - { - "key": "icon", - "className": "MuiLoadingButton-icon", - "description": "Styles applied to the icon element if supplied", - "isGlobal": false - }, - { - "key": "iconSizeLarge", - "className": "MuiLoadingButton-iconSizeLarge", - "description": "Styles applied to the icon element if supplied and `size=\"large\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "iconSizeMedium", - "className": "MuiLoadingButton-iconSizeMedium", - "description": "Styles applied to the icon element if supplied and `size=\"medium\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "iconSizeSmall", - "className": "MuiLoadingButton-iconSizeSmall", - "description": "Styles applied to the icon element if supplied and `size=\"small\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "label", - "className": "MuiLoadingButton-label", - "description": "Styles applied to the span element that wraps the children.", - "isGlobal": false - }, - { - "key": "loading", - "className": "MuiLoadingButton-loading", - "description": "Styles applied to the root element if `loading={true}`.", - "isGlobal": false - }, - { - "key": "loadingIndicator", - "className": "MuiLoadingButton-loadingIndicator", - "description": "Styles applied to the loadingIndicator element.", - "isGlobal": false - }, - { - "key": "loadingIndicatorCenter", - "className": "MuiLoadingButton-loadingIndicatorCenter", - "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"center\"`.", - "isGlobal": false - }, - { - "key": "loadingIndicatorEnd", - "className": "MuiLoadingButton-loadingIndicatorEnd", - "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"end\"`.", - "isGlobal": false - }, - { - "key": "loadingIndicatorStart", - "className": "MuiLoadingButton-loadingIndicatorStart", - "description": "Styles applied to the loadingIndicator element if `loadingPosition=\"start\"`.", - "isGlobal": false - }, - { - "key": "outlined", - "className": "MuiLoadingButton-outlined", - "description": "Styles applied to the root element if `variant=\"outlined\"`.", - "isGlobal": false - }, - { - "key": "outlinedError", - "className": "MuiLoadingButton-outlinedError", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedInfo", - "className": "MuiLoadingButton-outlinedInfo", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedInherit", - "className": "MuiLoadingButton-outlinedInherit", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"inherit\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedPrimary", - "className": "MuiLoadingButton-outlinedPrimary", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSecondary", - "className": "MuiLoadingButton-outlinedSecondary", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSizeLarge", - "className": "MuiLoadingButton-outlinedSizeLarge", - "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"outlined\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSizeMedium", - "className": "MuiLoadingButton-outlinedSizeMedium", - "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"outlined\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSizeSmall", - "className": "MuiLoadingButton-outlinedSizeSmall", - "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"outlined\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSuccess", - "className": "MuiLoadingButton-outlinedSuccess", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedWarning", - "className": "MuiLoadingButton-outlinedWarning", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "root", - "className": "MuiLoadingButton-root", - "description": "Styles applied to the root element.", - "isGlobal": false - }, - { - "key": "sizeLarge", - "className": "MuiLoadingButton-sizeLarge", - "description": "Styles applied to the root element if `size=\"large\"`.", - "isGlobal": false - }, - { - "key": "sizeMedium", - "className": "MuiLoadingButton-sizeMedium", - "description": "Styles applied to the root element if `size=\"medium\"`.", - "isGlobal": false - }, - { - "key": "sizeSmall", - "className": "MuiLoadingButton-sizeSmall", - "description": "Styles applied to the root element if `size=\"small\"`.", - "isGlobal": false - }, - { - "key": "startIcon", - "className": "MuiLoadingButton-startIcon", - "description": "Styles applied to the startIcon element if supplied.", - "isGlobal": false - }, - { - "key": "startIconLoadingStart", - "className": "MuiLoadingButton-startIconLoadingStart", - "description": "Styles applied to the startIcon element if `loading={true}` and `loadingPosition=\"start\"`.", - "isGlobal": false - }, - { - "key": "text", - "className": "MuiLoadingButton-text", - "description": "Styles applied to the root element if `variant=\"text\"`.", - "isGlobal": false - }, - { - "key": "textError", - "className": "MuiLoadingButton-textError", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"error\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textInfo", - "className": "MuiLoadingButton-textInfo", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"info\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textInherit", - "className": "MuiLoadingButton-textInherit", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"inherit\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textPrimary", - "className": "MuiLoadingButton-textPrimary", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSecondary", - "className": "MuiLoadingButton-textSecondary", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSizeLarge", - "className": "MuiLoadingButton-textSizeLarge", - "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"text\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSizeMedium", - "className": "MuiLoadingButton-textSizeMedium", - "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"text\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSizeSmall", - "className": "MuiLoadingButton-textSizeSmall", - "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"text\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSuccess", - "className": "MuiLoadingButton-textSuccess", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"success\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textWarning", - "className": "MuiLoadingButton-textWarning", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"warning\"`.", - "isGlobal": false, - "isDeprecated": true - } - ], - "spread": true, - "themeDefaultProps": true, - "muiName": "MuiLoadingButton", - "forwardsRefTo": "HTMLButtonElement", - "filename": "/packages/mui-lab/src/LoadingButton/LoadingButton.js", - "inheritance": { "component": "Button", "pathname": "/material-ui/api/button/" }, - "demos": "", - "cssComponent": false -} diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json deleted file mode 100644 index 9babb1623d14c9..00000000000000 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ /dev/null @@ -1,356 +0,0 @@ -{ - "componentDescription": "", - "propDescriptions": { - "children": { "description": "The content of the component." }, - "classes": { "description": "Override or extend the styles applied to the component." }, - "disabled": { "description": "If true, the component is disabled." }, - "loading": { - "description": "If true, the loading indicator is shown and the button becomes 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." - }, - "loadingPosition": { - "description": "The loading indicator can be positioned on the start, end, or the center of the button." - }, - "sx": { - "description": "The system prop that allows defining system overrides as well as additional CSS styles." - }, - "variant": { "description": "The variant to use." } - }, - "classDescriptions": { - "colorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"error\"" - }, - "colorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"info\"" - }, - "colorInherit": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"inherit\"" - }, - "colorPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"primary\"" - }, - "colorSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"secondary\"" - }, - "colorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"success\"" - }, - "colorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"warning\"" - }, - "contained": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\"" - }, - "containedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"error\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details." - }, - "containedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"info\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details." - }, - "containedInherit": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"inherit\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details." - }, - "containedPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"contained\"", - "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"contained\"", - "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"contained\"", - "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"success\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details." - }, - "containedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"warning\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details." - }, - "disabled": { - "description": "State class applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "disabled={true}" - }, - "disableElevation": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "disableElevation={true}" - }, - "endIcon": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the endIcon element", - "conditions": "supplied" - }, - "endIconLoadingEnd": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the endIcon element", - "conditions": "loading={true} and loadingPosition=\"end\"" - }, - "focusVisible": { - "description": "State class applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the ButtonBase root element", - "conditions": "the button is keyboard focused" - }, - "fullWidth": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "fullWidth={true}" - }, - "icon": { "description": "Styles applied to the icon element if supplied" }, - "iconSizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "supplied and size=\"large\"", - "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. See Migrating from deprecated APIs for more details." - }, - "iconSizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "supplied and size=\"medium\"", - "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. See Migrating from deprecated APIs for more details." - }, - "iconSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "supplied and size=\"small\"", - "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details." - }, - "label": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the span element that wraps the children" - }, - "loading": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "loading={true}" - }, - "loadingIndicator": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the loadingIndicator element" - }, - "loadingIndicatorCenter": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the loadingIndicator element", - "conditions": "loadingPosition=\"center\"" - }, - "loadingIndicatorEnd": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the loadingIndicator element", - "conditions": "loadingPosition=\"end\"" - }, - "loadingIndicatorStart": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the loadingIndicator element", - "conditions": "loadingPosition=\"start\"" - }, - "outlined": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\"" - }, - "outlinedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedInherit": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"inherit\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"outlined\"", - "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"outlined\"", - "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"outlined\"", - "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details." - }, - "root": { "description": "Styles applied to the root element." }, - "sizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"large\"" - }, - "sizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"medium\"" - }, - "sizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"small\"" - }, - "startIcon": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the startIcon element", - "conditions": "supplied" - }, - "startIconLoadingStart": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the startIcon element", - "conditions": "loading={true} and loadingPosition=\"start\"" - }, - "text": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\"" - }, - "textError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"error\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details." - }, - "textInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"info\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details." - }, - "textInherit": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"inherit\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details." - }, - "textPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details." - }, - "textSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details." - }, - "textSizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"text\"", - "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details." - }, - "textSizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"text\"", - "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details." - }, - "textSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"text\"", - "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details." - }, - "textSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"success\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details." - }, - "textWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"warning\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details." - } - } -} From 54acce4fa0cbdc8e89da25043d2f122d751513ec Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Wed, 30 Oct 2024 19:22:42 +0530 Subject: [PATCH 21/59] pnpm dedupe --- pnpm-lock.yaml | 162 ++++++++----------------------------------------- 1 file changed, 24 insertions(+), 138 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a0de80470c8b87..fb8b02aeb0abc7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1408,7 +1408,7 @@ importers: version: link:../markdown '@mui/system': specifier: ^5.0.0 || ^6.0.0 - version: 6.1.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + version: 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) chai: specifier: ^4.4.1 version: 4.5.0 @@ -4015,16 +4015,6 @@ packages: '@types/react': optional: true - '@mui/private-theming@6.1.5': - resolution: {integrity: sha512-FJqweqEXk0KdtTho9C2h6JEKXsOT7MAVH2Uj3N5oIqs6YKxnwBn2/zL2QuYYEtj5OJ87rEUnCfFic6ldClvzJw==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@types/react': ^18.3.12 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@mui/private-theming@6.1.6': resolution: {integrity: sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==} engines: {node: '>=14.0.0'} @@ -4048,19 +4038,6 @@ packages: '@emotion/styled': optional: true - '@mui/styled-engine@6.1.5': - resolution: {integrity: sha512-tiyWzMkHeWlOoE6AqomWvYvdml8Nv5k5T+LDwOiwHEawx8P9Lyja6ZwWPU6xljwPXYYPT2KBp1XvMly7dsK46A==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@emotion/react': ^11.4.1 - '@emotion/styled': ^11.3.0 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@mui/styled-engine@6.1.6': resolution: {integrity: sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==} engines: {node: '>=14.0.0'} @@ -4090,22 +4067,6 @@ packages: '@types/react': optional: true - '@mui/system@6.1.5': - resolution: {integrity: sha512-vPM9ocQ8qquRDByTG3XF/wfYTL7IWL/20EiiKqByLDps8wOmbrDG9rVznSE3ZbcjFCFfMRMhtxvN92bwe/63SA==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@types/react': ^18.3.12 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@types/react': - optional: true - '@mui/system@6.1.6': resolution: {integrity: sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==} engines: {node: '>=14.0.0'} @@ -4122,14 +4083,6 @@ packages: '@types/react': optional: true - '@mui/types@7.2.18': - resolution: {integrity: sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==} - peerDependencies: - '@types/react': ^18.3.12 - peerDependenciesMeta: - '@types/react': - optional: true - '@mui/types@7.2.19': resolution: {integrity: sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==} peerDependencies: @@ -4158,16 +4111,6 @@ packages: '@types/react': optional: true - '@mui/utils@6.1.5': - resolution: {integrity: sha512-vp2WfNDY+IbKUIGg+eqX1Ry4t/BilMjzp6p9xO1rfqpYjH1mj8coQxxDfKxcQLzBQkmBJjymjoGOak5VUYwXug==} - engines: {node: '>=14.0.0'} - peerDependencies: - '@types/react': ^18.3.12 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@mui/utils@6.1.6': resolution: {integrity: sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==} engines: {node: '>=14.0.0'} @@ -14717,7 +14660,7 @@ snapshots: dependencies: '@babel/runtime': 7.26.0 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) + '@mui/types': 7.2.19(@types/react@18.3.12) '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.1 @@ -14731,7 +14674,7 @@ snapshots: dependencies: '@babel/runtime': 7.26.0 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) + '@mui/types': 7.2.19(@types/react@18.3.12) '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.1 @@ -14745,8 +14688,8 @@ snapshots: dependencies: '@babel/runtime': 7.26.0 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/types': 7.2.19(@types/react@18.3.12) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.1 prop-types: 15.8.1 @@ -14777,7 +14720,7 @@ snapshots: '@mui/base': 5.0.0-beta.31(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 5.15.14 '@mui/system': 5.16.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) + '@mui/types': 7.2.19(@types/react@18.3.12) '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 @@ -14793,9 +14736,9 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/base': 5.0.0-beta.59(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': link:packages/mui-material/build - '@mui/system': 6.1.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/system': 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@mui/types': 7.2.19(@types/react@18.3.12) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 react: 18.3.1 @@ -14825,7 +14768,7 @@ snapshots: '@mui/base': 5.0.0-beta.31(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/core-downloads-tracker': 5.15.14 '@mui/system': 5.16.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) + '@mui/types': 7.2.19(@types/react@18.3.12) '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1) '@types/react-transition-group': 4.4.11 clsx: 2.1.1 @@ -14849,15 +14792,6 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 - '@mui/private-theming@6.1.5(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.0 - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) - prop-types: 15.8.1 - react: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - '@mui/private-theming@6.1.6(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -14866,7 +14800,6 @@ snapshots: react: 18.3.1 optionalDependencies: '@types/react': 18.3.12 - optional: true '@mui/styled-engine@5.16.4(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)': dependencies: @@ -14879,19 +14812,6 @@ snapshots: '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/styled-engine@6.1.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.0 - '@emotion/cache': 11.13.1 - '@emotion/serialize': 1.3.2 - '@emotion/sheet': 1.4.0 - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.3.1 - optionalDependencies: - '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) - '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/styled-engine@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -14904,14 +14824,13 @@ snapshots: optionalDependencies: '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - optional: true '@mui/system@5.16.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 '@mui/private-theming': 5.16.5(@types/react@18.3.12)(react@18.3.1) '@mui/styled-engine': 5.16.4(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) + '@mui/types': 7.2.19(@types/react@18.3.12) '@mui/utils': 5.16.6(@types/react@18.3.12)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 @@ -14922,22 +14841,6 @@ snapshots: '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 - '@mui/system@6.1.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.0 - '@mui/private-theming': 6.1.5(@types/react@18.3.12)(react@18.3.1) - '@mui/styled-engine': 6.1.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1) - '@mui/types': 7.2.18(@types/react@18.3.12) - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) - clsx: 2.1.1 - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.3.1 - optionalDependencies: - '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) - '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@types/react': 18.3.12 - '@mui/system@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -14953,11 +14856,6 @@ snapshots: '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 - optional: true - - '@mui/types@7.2.18(@types/react@18.3.12)': - optionalDependencies: - '@types/react': 18.3.12 '@mui/types@7.2.19(@types/react@18.3.12)': optionalDependencies: @@ -14966,7 +14864,7 @@ snapshots: '@mui/utils@5.16.6(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 - '@mui/types': 7.2.18(@types/react@18.3.12) + '@mui/types': 7.2.19(@types/react@18.3.12) '@types/prop-types': 15.7.13 clsx: 2.1.1 prop-types: 15.8.1 @@ -14978,19 +14876,7 @@ snapshots: '@mui/utils@6.1.4(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 - '@mui/types': 7.2.18(@types/react@18.3.12) - '@types/prop-types': 15.7.13 - clsx: 2.1.1 - prop-types: 15.8.1 - react: 18.3.1 - react-is: 18.3.1 - optionalDependencies: - '@types/react': 18.3.12 - - '@mui/utils@6.1.5(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.0 - '@mui/types': 7.2.18(@types/react@18.3.12) + '@mui/types': 7.2.19(@types/react@18.3.12) '@types/prop-types': 15.7.13 clsx: 2.1.1 prop-types: 15.8.1 @@ -15034,7 +14920,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@mui/x-charts-vendor': 7.20.0 '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@react-spring/rafz': 9.7.5 @@ -15072,7 +14958,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@mui/x-data-grid': 7.22.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-data-grid-pro': 7.22.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) @@ -15095,7 +14981,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@mui/x-data-grid': 7.22.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@mui/x-license': 7.21.0(@types/react@18.3.12)(react@18.3.1) @@ -15116,7 +15002,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 @@ -15134,7 +15020,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@mui/x-date-pickers': 7.22.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(date-fns@2.30.0)(dayjs@1.11.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@mui/x-license': 7.21.0(@types/react@18.3.12)(react@18.3.1) @@ -15156,7 +15042,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@types/react-transition-group': 4.4.11 clsx: 2.1.1 @@ -15175,7 +15061,7 @@ snapshots: '@mui/x-internals@7.21.0(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) react: 18.3.1 transitivePeerDependencies: - '@types/react' @@ -15183,7 +15069,7 @@ snapshots: '@mui/x-license@7.21.0(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) react: 18.3.1 transitivePeerDependencies: - '@types/react' @@ -15193,7 +15079,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@types/react-transition-group': 4.4.11 clsx: 2.1.1 @@ -15804,8 +15690,8 @@ snapshots: '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1) '@emotion/serialize': 1.3.2 '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/system': 6.1.5(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/utils': 6.1.5(@types/react@18.3.12)(react@18.3.1) + '@mui/system': 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.6(@types/react@18.3.12)(react@18.3.1) '@wyw-in-js/processor-utils': 0.5.4 '@wyw-in-js/shared': 0.5.4 '@wyw-in-js/transform': 0.5.4 From 840c0a85eb1bc416d1c1331ad97485f25f45004d Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Wed, 30 Oct 2024 19:31:23 +0530 Subject: [PATCH 22/59] Remove LodingButton spec file and move the test to Button spec --- .../src/LoadingButton/LoadingButton.spec.tsx | 16 ---------------- packages/mui-material/src/Button/Button.spec.tsx | 14 ++++++++++++++ 2 files changed, 14 insertions(+), 16 deletions(-) delete mode 100644 packages/mui-lab/src/LoadingButton/LoadingButton.spec.tsx diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.spec.tsx b/packages/mui-lab/src/LoadingButton/LoadingButton.spec.tsx deleted file mode 100644 index 6ba3e54803023d..00000000000000 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.spec.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; - -function ClassesTest() { - return ( - - ); -} diff --git a/packages/mui-material/src/Button/Button.spec.tsx b/packages/mui-material/src/Button/Button.spec.tsx index 832d79dd0599cf..78851774aa5572 100644 --- a/packages/mui-material/src/Button/Button.spec.tsx +++ b/packages/mui-material/src/Button/Button.spec.tsx @@ -145,3 +145,17 @@ const ReactRouterLinkTest = () => { ); }; + +function ClassesTest() { + return ( + + ); +} From 64f6e6f0050355f96fe241c85498529ab8631d22 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Wed, 30 Oct 2024 19:46:44 +0530 Subject: [PATCH 23/59] rename --- packages/mui-lab/src/LoadingButton/LoadingButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js index 1e160b41340cff..410ab98df83206 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/mui-lab/src/LoadingButton/LoadingButton.js @@ -22,7 +22,7 @@ const warn = () => { /** * @ignore - do not document. */ -export default React.forwardRef(function DeprecatedAlert(props, ref) { +export default React.forwardRef(function DeprecatedLoadingButton(props, ref) { warn(); return ); } From eea36606c08388c178e8b8b68a9ab26461d5540c Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 31 Oct 2024 11:39:20 +0530 Subject: [PATCH 26/59] remove loading button classes --- packages/mui-lab/src/LoadingButton/index.d.ts | 3 -- packages/mui-lab/src/LoadingButton/index.js | 3 -- .../src/LoadingButton/loadingButtonClasses.ts | 43 ------------------- 3 files changed, 49 deletions(-) delete mode 100644 packages/mui-lab/src/LoadingButton/loadingButtonClasses.ts diff --git a/packages/mui-lab/src/LoadingButton/index.d.ts b/packages/mui-lab/src/LoadingButton/index.d.ts index f0fb5e154b2d5f..421603193deae6 100644 --- a/packages/mui-lab/src/LoadingButton/index.d.ts +++ b/packages/mui-lab/src/LoadingButton/index.d.ts @@ -1,5 +1,2 @@ export { default } from './LoadingButton'; export * from './LoadingButton'; - -export { default as loadingButtonClasses } from './loadingButtonClasses'; -export * from './loadingButtonClasses'; diff --git a/packages/mui-lab/src/LoadingButton/index.js b/packages/mui-lab/src/LoadingButton/index.js index c61aaee2562f05..b12be17a139ad5 100644 --- a/packages/mui-lab/src/LoadingButton/index.js +++ b/packages/mui-lab/src/LoadingButton/index.js @@ -1,4 +1 @@ export { default } from './LoadingButton'; - -export { default as loadingButtonClasses } from './loadingButtonClasses'; -export * from './loadingButtonClasses'; diff --git a/packages/mui-lab/src/LoadingButton/loadingButtonClasses.ts b/packages/mui-lab/src/LoadingButton/loadingButtonClasses.ts deleted file mode 100644 index d6543a1fa86cab..00000000000000 --- a/packages/mui-lab/src/LoadingButton/loadingButtonClasses.ts +++ /dev/null @@ -1,43 +0,0 @@ -import generateUtilityClass from '@mui/utils/generateUtilityClass'; -import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; - -export interface LoadingButtonClasses { - /** Styles applied to the root element. */ - root: string; - /** Styles applied to the span element that wraps the children. */ - label: string; - /** Styles applied to the root element if `loading={true}`. */ - loading: string; - /** Styles applied to the loadingIndicator element. */ - loadingIndicator: string; - /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ - loadingIndicatorCenter: string; - /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ - loadingIndicatorStart: string; - /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ - loadingIndicatorEnd: string; - /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ - endIconLoadingEnd: string; - /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ - startIconLoadingStart: string; -} - -export type LoadingButtonClassKey = keyof LoadingButtonClasses; - -export function getLoadingButtonUtilityClass(slot: string): string { - return generateUtilityClass('MuiLoadingButton', slot); -} - -const loadingButtonClasses: LoadingButtonClasses = generateUtilityClasses('MuiLoadingButton', [ - 'root', - 'label', - 'loading', - 'loadingIndicator', - 'loadingIndicatorCenter', - 'loadingIndicatorStart', - 'loadingIndicatorEnd', - 'endIconLoadingEnd', - 'startIconLoadingStart', -]); - -export default loadingButtonClasses; From c983657321d2a422bc1315b2c0e41356ef9dc62d Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 31 Oct 2024 13:07:37 +0530 Subject: [PATCH 27/59] update demo --- .../material/components/dialogs/ToolpadDialogsNoSnap.js | 9 ++------- .../material/components/dialogs/ToolpadDialogsNoSnap.tsx | 9 ++------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js index c51820532be8de..45c5878821cf2a 100644 --- a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js +++ b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs'; import Button from '@mui/material/Button'; -import LoadingButton from '@mui/lab/LoadingButton'; import Dialog from '@mui/material/Dialog'; import Alert from '@mui/material/Alert'; import DialogTitle from '@mui/material/DialogTitle'; @@ -99,13 +98,9 @@ function DemoContent() { return (
- +
); diff --git a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx index 1fd85d043d9c2f..1d6aa7dacc434f 100644 --- a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx +++ b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { DialogsProvider, useDialogs, DialogProps } from '@toolpad/core/useDialogs'; import Button from '@mui/material/Button'; -import LoadingButton from '@mui/lab/LoadingButton'; import Dialog from '@mui/material/Dialog'; import Alert from '@mui/material/Alert'; import DialogTitle from '@mui/material/DialogTitle'; @@ -80,13 +79,9 @@ function DemoContent() { return (
- +
); From 1793b939dc3ae3fb2f51b24af971072b4d696bdc Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 31 Oct 2024 14:45:21 +0530 Subject: [PATCH 28/59] remove loading-button links --- docs/src/modules/utils/replaceMarkdownLinks.test.js | 4 ---- docs/src/modules/utils/replaceMarkdownLinks.ts | 2 +- docs/src/pagesApi.js | 1 - packages/api-docs-builder/utils/replaceUrl.test.js | 4 ---- packages/api-docs-builder/utils/replaceUrl.ts | 2 +- 5 files changed, 2 insertions(+), 11 deletions(-) diff --git a/docs/src/modules/utils/replaceMarkdownLinks.test.js b/docs/src/modules/utils/replaceMarkdownLinks.test.js index 1f274957be630e..44d1d4863c97cc 100644 --- a/docs/src/modules/utils/replaceMarkdownLinks.test.js +++ b/docs/src/modules/utils/replaceMarkdownLinks.test.js @@ -200,7 +200,6 @@ describe('replaceMarkdownLinks', () => { [FocusTrap](/api/focus-trap) [ClickAwayListener](/api/click-away-listener) [IconButton](/api/icon-button) - [LoadingButton](/api/loading-button) [DataGrid](/api/data-grid/data-grid) [DataGridPro](/api/data-grid/data-grid-pro) [System](/system/basics) @@ -219,7 +218,6 @@ describe('replaceMarkdownLinks', () => { [FocusTrap](/base-ui/api/focus-trap) [ClickAwayListener](/base-ui/api/click-away-listener) [IconButton](/material-ui/api/icon-button) - [LoadingButton](/material-ui/api/loading-button) [DataGrid](/x/api/data-grid/data-grid) [DataGridPro](/x/api/data-grid/data-grid-pro) [System](/system/basics) @@ -233,7 +231,6 @@ describe('replaceMarkdownLinks', () => { [ButtonBase](/material-ui/api/button-base) [ButtonUnstyled](/base-ui/api/button) [IconButton](/material-ui/api/icon-button) - [LoadingButton](/material-ui/api/loading-button) [DataGrid](/x/api/data-grid/data-grid) [DataGridPro](/x/api/data-grid/data-grid-pro) [System](/system/basics) @@ -243,7 +240,6 @@ describe('replaceMarkdownLinks', () => { [ButtonBase](/material-ui/api/button-base) [ButtonUnstyled](/base-ui/api/button) [IconButton](/material-ui/api/icon-button) - [LoadingButton](/material-ui/api/loading-button) [DataGrid](/x/api/data-grid/data-grid) [DataGridPro](/x/api/data-grid/data-grid-pro) [System](/system/basics) diff --git a/docs/src/modules/utils/replaceMarkdownLinks.ts b/docs/src/modules/utils/replaceMarkdownLinks.ts index 31e9352bec63a7..39776b1f5a1b0a 100644 --- a/docs/src/modules/utils/replaceMarkdownLinks.ts +++ b/docs/src/modules/utils/replaceMarkdownLinks.ts @@ -39,7 +39,7 @@ export const replaceAPILinks = (markdown: string) => { '(/base-ui/api/$1$2)', ) .replace( - /\(\/api\/(loading-button|tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)([^)]*)\)/gm, + /\(\/api\/(tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)([^)]*)\)/gm, '(/material-ui/api/$1$2)', ) .replace(/\(\/api\/([^)]*)\)/gm, '(/material-ui/api/$1)'); diff --git a/docs/src/pagesApi.js b/docs/src/pagesApi.js index c9829209aec475..8c040f448a4d23 100644 --- a/docs/src/pagesApi.js +++ b/docs/src/pagesApi.js @@ -67,7 +67,6 @@ module.exports = [ { pathname: '/api-docs/list-item-secondary-action' }, { pathname: '/api-docs/list-item-text' }, { pathname: '/api-docs/list-subheader' }, - { pathname: '/api-docs/loading-button' }, { pathname: '/api-docs/masonry' }, { pathname: '/api-docs/menu' }, { pathname: '/api-docs/menu-item' }, diff --git a/packages/api-docs-builder/utils/replaceUrl.test.js b/packages/api-docs-builder/utils/replaceUrl.test.js index bf193c4c103914..0e7078426ea6e8 100644 --- a/packages/api-docs-builder/utils/replaceUrl.test.js +++ b/packages/api-docs-builder/utils/replaceUrl.test.js @@ -216,7 +216,6 @@ describe('replaceUrl', () => { expect(replaceAPILinks(`/api/portal/`)).to.equal(`/base-ui/api/portal/`); expect(replaceAPILinks(`/api/textarea-autosize/`)).to.equal(`/base-ui/api/textarea-autosize/`); expect(replaceAPILinks(`/api/button-unstyled/`)).to.equal(`/base-ui/api/button-unstyled/`); - expect(replaceAPILinks(`/api/loading-button/`)).to.equal(`/material-ui/api/loading-button/`); expect(replaceAPILinks(`/api/tab-list/`)).to.equal(`/material-ui/api/tab-list/`); expect(replaceAPILinks(`/api/tab-panel/`)).to.equal(`/material-ui/api/tab-panel/`); expect(replaceAPILinks(`/api/tab-panel-unstyled/`)).to.equal( @@ -248,9 +247,6 @@ describe('replaceUrl', () => { expect(replaceAPILinks(`/base-ui/api/button-unstyled/`)).to.equal( `/base-ui/api/button-unstyled/`, ); - expect(replaceAPILinks(`/material-ui/api/loading-button/`)).to.equal( - `/material-ui/api/loading-button/`, - ); expect(replaceAPILinks(`/x/api/data-grid/`)).to.equal(`/x/api/data-grid/`); }); diff --git a/packages/api-docs-builder/utils/replaceUrl.ts b/packages/api-docs-builder/utils/replaceUrl.ts index 82766db705a6fe..40811f398f7ac6 100644 --- a/packages/api-docs-builder/utils/replaceUrl.ts +++ b/packages/api-docs-builder/utils/replaceUrl.ts @@ -71,7 +71,7 @@ export const replaceAPILinks = (url: string) => { } url = url.replace( - /\/api\/(loading-button|tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)(.*)/, + /\/api\/(tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)(.*)/, '/material-ui/api/$1$2', ); From cf13fb0d13f668d8b17aa08819a726b441b85288 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 31 Oct 2024 15:53:37 +0530 Subject: [PATCH 29/59] add label --- docs/pages/material-ui/api/button.json | 6 +++++ docs/translations/api-docs/button/button.json | 5 ++++ packages/mui-material/src/Button/Button.js | 26 ++++++++++++++++--- .../mui-material/src/Button/buttonClasses.ts | 3 +++ 4 files changed, 37 insertions(+), 3 deletions(-) diff --git a/docs/pages/material-ui/api/button.json b/docs/pages/material-ui/api/button.json index 996ab60f6e6a63..313a406d28c370 100644 --- a/docs/pages/material-ui/api/button.json +++ b/docs/pages/material-ui/api/button.json @@ -239,6 +239,12 @@ "isGlobal": false, "isDeprecated": true }, + { + "key": "label", + "className": "MuiButton-label", + "description": "Styles applied to the span element that wraps the children when `loading={true}`.", + "isGlobal": false + }, { "key": "loading", "className": "MuiButton-loading", diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index dac8f6e775b631..381f4000dd5349 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -192,6 +192,11 @@ "conditions": "supplied and size=\"small\"", "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details." }, + "label": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the span element that wraps the children", + "conditions": "loading={true}" + }, "loading": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 4ef4d0caa313bb..1b8cfbc48f30a1 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -407,7 +407,7 @@ const ButtonEndIcon = styled('span', { })); const ButtonLoadingIndicator = styled('span', { - name: 'MuiLoadingButton', + name: 'MuiButton', slot: 'LoadingIndicator', overridesResolver: (props, styles) => { const { ownerState } = props; @@ -498,6 +498,18 @@ const ButtonLoadingIndicator = styled('span', { ], })); +const ButtonLoadingLabel = styled('span', { + name: 'MuiButton', + slot: 'Label', + overridesResolver: (props, styles) => { + return [styles.label]; + }, +})({ + display: 'inherit', + alignItems: 'inherit', + justifyContent: 'inherit', +}); + const Button = React.forwardRef(function Button(inProps, ref) { // props priority: `inProps` > `contextProps` > `themeDefaultProps` const contextProps = React.useContext(ButtonGroupContext); @@ -584,9 +596,17 @@ const Button = React.forwardRef(function Button(inProps, ref) { classes={classes} > {startIcon} - {ownerState.loadingPosition === 'end' ? children : buttonLoadingIndicator} + {loading && ownerState.loadingPosition === 'end' ? ( + {children} + ) : ( + buttonLoadingIndicator + )} - {ownerState.loadingPosition === 'end' ? buttonLoadingIndicator : children} + {loading && ownerState.loadingPosition === 'end' ? ( + buttonLoadingIndicator + ) : ( + {children} + )} {endIcon} diff --git a/packages/mui-material/src/Button/buttonClasses.ts b/packages/mui-material/src/Button/buttonClasses.ts index 3dd6b4ea750fb1..b5edc38d68d440 100644 --- a/packages/mui-material/src/Button/buttonClasses.ts +++ b/packages/mui-material/src/Button/buttonClasses.ts @@ -176,6 +176,8 @@ export interface ButtonClasses { colorInfo: string; /** Styles applied to the root element if `color="warning"`. */ colorWarning: string; + /** Styles applied to the span element that wraps the children when `loading={true}`. */ + label: string; /** Styles applied to the root element if `loading={true}`. */ loading: string; /** Styles applied to the loadingIndicator element. */ @@ -253,6 +255,7 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', + 'label', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', From 0a368a4e368d7de65e36ed54ee7027011856f269 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 31 Oct 2024 19:21:02 +0530 Subject: [PATCH 30/59] add missing styles --- packages/mui-material/src/Button/Button.js | 47 ++++++++++++++++------ 1 file changed, 34 insertions(+), 13 deletions(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 1b8cfbc48f30a1..26fb3a5b98e014 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -25,6 +25,7 @@ const useUtilityClasses = (ownerState) => { const slots = { root: [ 'root', + loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, @@ -38,13 +39,13 @@ const useUtilityClasses = (ownerState) => { 'icon', 'startIcon', `iconSize${capitalize(size)}`, - `startIconLoading${capitalize(loadingPosition)}`, + loading && `startIconLoading${capitalize(loadingPosition)}`, ], endIcon: [ 'icon', 'endIcon', `iconSize${capitalize(size)}`, - `endIconLoading${capitalize(loadingPosition)}`, + loading && `endIconLoading${capitalize(loadingPosition)}`, ], loadingIndicator: [ 'loadingIndicator', @@ -324,15 +325,7 @@ const ButtonRoot = styled(ButtonBase, { duration: theme.transitions.duration.short, }, ), - }, - }, - { - props: { - loadingPosition: 'center', - loading: true, - }, - style: { - [`&.${buttonClasses.disabled}`]: { + [`&.${buttonClasses.loading}`]: { color: 'transparent', }, }, @@ -348,7 +341,11 @@ const ButtonStartIcon = styled('span', { overridesResolver: (props, styles) => { const { ownerState } = props; - return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]]; + return [ + styles.startIcon, + ownerState.loading && styles.startIconLoadingStart, + styles[`iconSize${capitalize(ownerState.size)}`], + ]; }, })(({ theme }) => ({ display: 'inherit', @@ -370,6 +367,16 @@ const ButtonStartIcon = styled('span', { opacity: 0, }, }, + { + props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth, + style: { + transition: theme.transitions.create(['opacity'], { + duration: theme.transitions.duration.short, + }), + opacity: 0, + marginRight: -8, + }, + }, ...commonIconStyles, ], })); @@ -380,7 +387,11 @@ const ButtonEndIcon = styled('span', { overridesResolver: (props, styles) => { const { ownerState } = props; - return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]]; + return [ + styles.endIcon, + ownerState.loading && styles.endIconLoadingEnd, + styles[`iconSize${capitalize(ownerState.size)}`], + ]; }, })(({ theme }) => ({ display: 'inherit', @@ -402,6 +413,16 @@ const ButtonEndIcon = styled('span', { opacity: 0, }, }, + { + props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth, + style: { + transition: theme.transitions.create(['opacity'], { + duration: theme.transitions.duration.short, + }), + opacity: 0, + marginLeft: -8, + }, + }, ...commonIconStyles, ], })); From 110316c9dafac18dd84e10adc0fea1fa77f675d3 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 31 Oct 2024 19:47:24 +0530 Subject: [PATCH 31/59] remove redundant tests --- .../mui-material/src/Button/Button.test.js | 40 ------------------- 1 file changed, 40 deletions(-) diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js index 3ae28ab0e17498..741e1193845001 100644 --- a/packages/mui-material/src/Button/Button.test.js +++ b/packages/mui-material/src/Button/Button.test.js @@ -796,44 +796,4 @@ describe(' - - - , - ); - - const firstButton = screen.getAllByRole('button')[0]; - const middleButton = screen.getAllByRole('button')[1]; - const lastButton = screen.getAllByRole('button')[2]; - - expect(firstButton).to.have.class(buttonGroupClasses.firstButton); - expect(firstButton).not.to.have.class(buttonGroupClasses.middleButton); - expect(firstButton).not.to.have.class(buttonGroupClasses.lastButton); - - expect(middleButton).to.have.class(buttonGroupClasses.middleButton); - expect(middleButton).not.to.have.class(buttonGroupClasses.firstButton); - expect(middleButton).not.to.have.class(buttonGroupClasses.lastButton); - - expect(lastButton).to.have.class(buttonGroupClasses.lastButton); - expect(lastButton).not.to.have.class(buttonGroupClasses.middleButton); - expect(lastButton).not.to.have.class(buttonGroupClasses.firstButton); - }); - }); }); From a3821e0fe34d4211d0c50c0d407aa5d3251a440c Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 31 Oct 2024 19:47:54 +0530 Subject: [PATCH 32/59] remove redundant tests --- packages/mui-material/src/Button/Button.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js index 741e1193845001..7d3c1033a2f376 100644 --- a/packages/mui-material/src/Button/Button.test.js +++ b/packages/mui-material/src/Button/Button.test.js @@ -5,7 +5,6 @@ import { ClassNames } from '@emotion/react'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import Button, { buttonClasses as classes } from '@mui/material/Button'; import ButtonBase, { touchRippleClasses } from '@mui/material/ButtonBase'; -import ButtonGroup, { buttonGroupClasses } from '@mui/material/ButtonGroup'; import describeConformance from '../../test/describeConformance'; import * as ripple from '../../test/ripple'; From f09c72941c464159233f83ddb0d28ae6b3337e95 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Fri, 1 Nov 2024 10:33:08 +0530 Subject: [PATCH 33/59] add missing ownerState --- packages/mui-material/src/Button/Button.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 26fb3a5b98e014..4ce1f6ff02e459 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -618,7 +618,9 @@ const Button = React.forwardRef(function Button(inProps, ref) { > {startIcon} {loading && ownerState.loadingPosition === 'end' ? ( - {children} + + {children} + ) : ( buttonLoadingIndicator )} @@ -626,7 +628,9 @@ const Button = React.forwardRef(function Button(inProps, ref) { {loading && ownerState.loadingPosition === 'end' ? ( buttonLoadingIndicator ) : ( - {children} + + {children} + )} {endIcon} From 4099c08c1f4c6e3b4aa61121ab4f6ed14c23f12a Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 2 Nov 2024 12:05:01 +0530 Subject: [PATCH 34/59] update docs code review --- docs/data/material/components/button-group/button-group.md | 4 ++-- docs/data/material/components/buttons/buttons.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md index 0af678ea1bc56a..5bceb0b6ab282b 100644 --- a/docs/data/material/components/button-group/button-group.md +++ b/docs/data/material/components/button-group/button-group.md @@ -49,8 +49,8 @@ You can remove the elevation with the `disableElevation` prop. {{"demo": "DisableElevation.js"}} -## Loading button +## Loading -You can use the `loading` prop from `Button` to create loading buttons in button groups. +Use the `loading` prop from `Button` to set buttons in a loading state and disable interactions. {{"demo": "LoadingButtonGroup.js"}} diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 10d6953d7ba1e9..72548bf7cba009 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -119,7 +119,7 @@ To create a file upload button, turn the button into a label using `component="l {{"demo": "InputFileUpload.js"}} -## Loading button +## Loading Use the `loading` prop to set buttons in a loading state and disable interactions. From 91c8f5089adbdf6fcf2dfbc9750c1a4e16441656 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 2 Nov 2024 12:11:10 +0530 Subject: [PATCH 35/59] update rendering logic --- packages/mui-material/src/Button/Button.js | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 4ce1f6ff02e459..ac6ed107c5175b 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -582,11 +582,11 @@ const Button = React.forwardRef(function Button(inProps, ref) { const classes = useUtilityClasses(ownerState); - const buttonLoadingIndicator = loading ? ( + const buttonLoadingIndicator = ( {loadingIndicator} - ) : null; + ); const startIcon = startIconProp && ( @@ -617,22 +617,18 @@ const Button = React.forwardRef(function Button(inProps, ref) { classes={classes} > {startIcon} - {loading && ownerState.loadingPosition === 'end' ? ( + {loading && + (ownerState.loadingPosition === 'start' || ownerState.loadingPosition === 'center') + ? buttonLoadingIndicator + : null} + {loading ? ( {children} ) : ( - buttonLoadingIndicator - )} - - {loading && ownerState.loadingPosition === 'end' ? ( - buttonLoadingIndicator - ) : ( - - {children} - + children )} - + {loading && ownerState.loadingPosition === 'end' ? buttonLoadingIndicator : null} {endIcon} ); From 1563d5351baaaa0bca7ed4118aca6f3e81416a14 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 2 Nov 2024 12:34:41 +0530 Subject: [PATCH 36/59] pnpm docs:link-check --- docs/.link-check-errors.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index 0b8d083f4a0077..d3c153b017e4d7 100644 --- a/docs/.link-check-errors.txt +++ b/docs/.link-check-errors.txt @@ -1,2 +1,3 @@ Broken links found by `pnpm docs:link-check` that exist: +- https://mui.com/material-ui/react-button/#loading-button From 6b0ce5d046a8e513132605af02eee14d26293da2 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 4 Nov 2024 19:41:38 +0530 Subject: [PATCH 37/59] update loading-button links --- docs/pages/blog/2020-q2-update.md | 2 +- docs/pages/blog/2020.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md index 6d34a639194694..29f38b8eee2ea2 100644 --- a/docs/pages/blog/2020-q2-update.md +++ b/docs/pages/blog/2020-q2-update.md @@ -27,7 +27,7 @@ Here are the most significant improvements since March 2020: Adobe XD and Framer support are also up for consideration if they attract a significant audience, but not until we've polished the Sketch and Figma assets. -- 🔄 `LoadingButton` – [a new component in the lab](https://mui.com/material-ui/react-button/#loading-button). This work is influenced by the [concurrent UI patterns](https://17.reactjs.org/docs/concurrent-mode-patterns.html) presented by the React team. +- 🔄 `LoadingButton` – [a new component in the lab](https://v5.mui.com/material-ui/react-button/#loading-button). This work is influenced by the [concurrent UI patterns](https://17.reactjs.org/docs/concurrent-mode-patterns.html) presented by the React team. loading diff --git a/docs/pages/blog/2020.md b/docs/pages/blog/2020.md index 3e3f6e28e3a157..544338862f9a8b 100644 --- a/docs/pages/blog/2020.md +++ b/docs/pages/blog/2020.md @@ -46,7 +46,7 @@ We have achieved most of what we could have hoped for. - [Alert](https://v4.mui.com/components/alert/) - [DataGrid](https://v4.mui.com/components/data-grid/) - [DatePicker](https://v4.mui.com/components/pickers/) - - [LoadingButton](https://mui.com/material-ui/react-button/#loading-button) + - [LoadingButton](https://v5.mui.com/material-ui/react-button/#loading-button) - [Timeline](https://v4.mui.com/components/timeline/) - [FocusTrap](https://mui.com/base-ui/react-focus-trap/) - We have fixed most of the issues with the [Autocomplete](https://v4.mui.com/components/autocomplete/). We have received an overwhelming interest in the component. It was impressive to see. From 18ef354ae6a3cac0900c182c60c0f827df5bd750 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 6 Nov 2024 12:08:24 +0700 Subject: [PATCH 38/59] remove label slot and simplify code --- packages/mui-material/src/Button/Button.js | 47 +++++----------------- 1 file changed, 10 insertions(+), 37 deletions(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index ac6ed107c5175b..fd978a8f5326d0 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -430,13 +430,7 @@ const ButtonEndIcon = styled('span', { const ButtonLoadingIndicator = styled('span', { name: 'MuiButton', slot: 'LoadingIndicator', - overridesResolver: (props, styles) => { - const { ownerState } = props; - return [ - styles.loadingIndicator, - styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`], - ]; - }, + overridesResolver: (props, styles) => styles.loadingIndicator, })(({ theme }) => ({ position: 'absolute', visibility: 'visible', @@ -519,18 +513,6 @@ const ButtonLoadingIndicator = styled('span', { ], })); -const ButtonLoadingLabel = styled('span', { - name: 'MuiButton', - slot: 'Label', - overridesResolver: (props, styles) => { - return [styles.label]; - }, -})({ - display: 'inherit', - alignItems: 'inherit', - justifyContent: 'inherit', -}); - const Button = React.forwardRef(function Button(inProps, ref) { // props priority: `inProps` > `contextProps` > `themeDefaultProps` const contextProps = React.useContext(ButtonGroupContext); @@ -582,12 +564,6 @@ const Button = React.forwardRef(function Button(inProps, ref) { const classes = useUtilityClasses(ownerState); - const buttonLoadingIndicator = ( - - {loadingIndicator} - - ); - const startIcon = startIconProp && ( {startIconProp} @@ -600,6 +576,11 @@ const Button = React.forwardRef(function Button(inProps, ref) { ); + const loader = ( + + {loadingIndicator} + + ); const positionClassName = buttonGroupButtonContextPositionClassName || ''; return ( @@ -617,18 +598,10 @@ const Button = React.forwardRef(function Button(inProps, ref) { classes={classes} > {startIcon} - {loading && - (ownerState.loadingPosition === 'start' || ownerState.loadingPosition === 'center') - ? buttonLoadingIndicator - : null} - {loading ? ( - - {children} - - ) : ( - children - )} - {loading && ownerState.loadingPosition === 'end' ? buttonLoadingIndicator : null} + {loading && loadingPosition === 'start' && loader} + {children} + {loading && loadingPosition === 'center' && loader} + {loading && loadingPosition === 'end' && loader} {endIcon} ); From 839d9c7241314b556fe35e704b18d3909714a24e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 6 Nov 2024 13:41:41 +0700 Subject: [PATCH 39/59] restore unwanted change --- docs/.link-check-errors.txt | 1 - docs/pages/blog/2020-q2-update.md | 2 +- docs/pages/blog/2020.md | 2 +- docs/src/modules/utils/replaceMarkdownLinks.test.js | 4 ++++ docs/src/modules/utils/replaceMarkdownLinks.ts | 2 +- packages/api-docs-builder/utils/replaceUrl.test.js | 4 ++++ packages/api-docs-builder/utils/replaceUrl.ts | 2 +- 7 files changed, 12 insertions(+), 5 deletions(-) diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index d3c153b017e4d7..0b8d083f4a0077 100644 --- a/docs/.link-check-errors.txt +++ b/docs/.link-check-errors.txt @@ -1,3 +1,2 @@ Broken links found by `pnpm docs:link-check` that exist: -- https://mui.com/material-ui/react-button/#loading-button diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md index 29f38b8eee2ea2..6d34a639194694 100644 --- a/docs/pages/blog/2020-q2-update.md +++ b/docs/pages/blog/2020-q2-update.md @@ -27,7 +27,7 @@ Here are the most significant improvements since March 2020: Adobe XD and Framer support are also up for consideration if they attract a significant audience, but not until we've polished the Sketch and Figma assets. -- 🔄 `LoadingButton` – [a new component in the lab](https://v5.mui.com/material-ui/react-button/#loading-button). This work is influenced by the [concurrent UI patterns](https://17.reactjs.org/docs/concurrent-mode-patterns.html) presented by the React team. +- 🔄 `LoadingButton` – [a new component in the lab](https://mui.com/material-ui/react-button/#loading-button). This work is influenced by the [concurrent UI patterns](https://17.reactjs.org/docs/concurrent-mode-patterns.html) presented by the React team. loading diff --git a/docs/pages/blog/2020.md b/docs/pages/blog/2020.md index 544338862f9a8b..3e3f6e28e3a157 100644 --- a/docs/pages/blog/2020.md +++ b/docs/pages/blog/2020.md @@ -46,7 +46,7 @@ We have achieved most of what we could have hoped for. - [Alert](https://v4.mui.com/components/alert/) - [DataGrid](https://v4.mui.com/components/data-grid/) - [DatePicker](https://v4.mui.com/components/pickers/) - - [LoadingButton](https://v5.mui.com/material-ui/react-button/#loading-button) + - [LoadingButton](https://mui.com/material-ui/react-button/#loading-button) - [Timeline](https://v4.mui.com/components/timeline/) - [FocusTrap](https://mui.com/base-ui/react-focus-trap/) - We have fixed most of the issues with the [Autocomplete](https://v4.mui.com/components/autocomplete/). We have received an overwhelming interest in the component. It was impressive to see. diff --git a/docs/src/modules/utils/replaceMarkdownLinks.test.js b/docs/src/modules/utils/replaceMarkdownLinks.test.js index 44d1d4863c97cc..1f274957be630e 100644 --- a/docs/src/modules/utils/replaceMarkdownLinks.test.js +++ b/docs/src/modules/utils/replaceMarkdownLinks.test.js @@ -200,6 +200,7 @@ describe('replaceMarkdownLinks', () => { [FocusTrap](/api/focus-trap) [ClickAwayListener](/api/click-away-listener) [IconButton](/api/icon-button) + [LoadingButton](/api/loading-button) [DataGrid](/api/data-grid/data-grid) [DataGridPro](/api/data-grid/data-grid-pro) [System](/system/basics) @@ -218,6 +219,7 @@ describe('replaceMarkdownLinks', () => { [FocusTrap](/base-ui/api/focus-trap) [ClickAwayListener](/base-ui/api/click-away-listener) [IconButton](/material-ui/api/icon-button) + [LoadingButton](/material-ui/api/loading-button) [DataGrid](/x/api/data-grid/data-grid) [DataGridPro](/x/api/data-grid/data-grid-pro) [System](/system/basics) @@ -231,6 +233,7 @@ describe('replaceMarkdownLinks', () => { [ButtonBase](/material-ui/api/button-base) [ButtonUnstyled](/base-ui/api/button) [IconButton](/material-ui/api/icon-button) + [LoadingButton](/material-ui/api/loading-button) [DataGrid](/x/api/data-grid/data-grid) [DataGridPro](/x/api/data-grid/data-grid-pro) [System](/system/basics) @@ -240,6 +243,7 @@ describe('replaceMarkdownLinks', () => { [ButtonBase](/material-ui/api/button-base) [ButtonUnstyled](/base-ui/api/button) [IconButton](/material-ui/api/icon-button) + [LoadingButton](/material-ui/api/loading-button) [DataGrid](/x/api/data-grid/data-grid) [DataGridPro](/x/api/data-grid/data-grid-pro) [System](/system/basics) diff --git a/docs/src/modules/utils/replaceMarkdownLinks.ts b/docs/src/modules/utils/replaceMarkdownLinks.ts index 39776b1f5a1b0a..31e9352bec63a7 100644 --- a/docs/src/modules/utils/replaceMarkdownLinks.ts +++ b/docs/src/modules/utils/replaceMarkdownLinks.ts @@ -39,7 +39,7 @@ export const replaceAPILinks = (markdown: string) => { '(/base-ui/api/$1$2)', ) .replace( - /\(\/api\/(tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)([^)]*)\)/gm, + /\(\/api\/(loading-button|tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)([^)]*)\)/gm, '(/material-ui/api/$1$2)', ) .replace(/\(\/api\/([^)]*)\)/gm, '(/material-ui/api/$1)'); diff --git a/packages/api-docs-builder/utils/replaceUrl.test.js b/packages/api-docs-builder/utils/replaceUrl.test.js index 0e7078426ea6e8..bf193c4c103914 100644 --- a/packages/api-docs-builder/utils/replaceUrl.test.js +++ b/packages/api-docs-builder/utils/replaceUrl.test.js @@ -216,6 +216,7 @@ describe('replaceUrl', () => { expect(replaceAPILinks(`/api/portal/`)).to.equal(`/base-ui/api/portal/`); expect(replaceAPILinks(`/api/textarea-autosize/`)).to.equal(`/base-ui/api/textarea-autosize/`); expect(replaceAPILinks(`/api/button-unstyled/`)).to.equal(`/base-ui/api/button-unstyled/`); + expect(replaceAPILinks(`/api/loading-button/`)).to.equal(`/material-ui/api/loading-button/`); expect(replaceAPILinks(`/api/tab-list/`)).to.equal(`/material-ui/api/tab-list/`); expect(replaceAPILinks(`/api/tab-panel/`)).to.equal(`/material-ui/api/tab-panel/`); expect(replaceAPILinks(`/api/tab-panel-unstyled/`)).to.equal( @@ -247,6 +248,9 @@ describe('replaceUrl', () => { expect(replaceAPILinks(`/base-ui/api/button-unstyled/`)).to.equal( `/base-ui/api/button-unstyled/`, ); + expect(replaceAPILinks(`/material-ui/api/loading-button/`)).to.equal( + `/material-ui/api/loading-button/`, + ); expect(replaceAPILinks(`/x/api/data-grid/`)).to.equal(`/x/api/data-grid/`); }); diff --git a/packages/api-docs-builder/utils/replaceUrl.ts b/packages/api-docs-builder/utils/replaceUrl.ts index 40811f398f7ac6..82766db705a6fe 100644 --- a/packages/api-docs-builder/utils/replaceUrl.ts +++ b/packages/api-docs-builder/utils/replaceUrl.ts @@ -71,7 +71,7 @@ export const replaceAPILinks = (url: string) => { } url = url.replace( - /\/api\/(tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)(.*)/, + /\/api\/(loading-button|tab-list|tab-panel|date-picker|date-time-picker|time-picker|calendar-picker|calendar-picker-skeleton|desktop-picker|mobile-date-picker|month-picker|pickers-day|static-date-picker|year-picker|masonry|timeline|timeline-connector|timeline-content|timeline-dot|timeline-item|timeline-opposite-content|timeline-separator|unstable-trap-focus|tree-item|tree-view)(.*)/, '/material-ui/api/$1$2', ); From b52d66366179071af783a22477b11b1e268c65b9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 6 Nov 2024 13:46:36 +0700 Subject: [PATCH 40/59] fix link --- docs/pages/blog/2020-q2-update.md | 2 +- docs/pages/blog/mui-core-v5.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md index 6d34a639194694..29f38b8eee2ea2 100644 --- a/docs/pages/blog/2020-q2-update.md +++ b/docs/pages/blog/2020-q2-update.md @@ -27,7 +27,7 @@ Here are the most significant improvements since March 2020: Adobe XD and Framer support are also up for consideration if they attract a significant audience, but not until we've polished the Sketch and Figma assets. -- 🔄 `LoadingButton` – [a new component in the lab](https://mui.com/material-ui/react-button/#loading-button). This work is influenced by the [concurrent UI patterns](https://17.reactjs.org/docs/concurrent-mode-patterns.html) presented by the React team. +- 🔄 `LoadingButton` – [a new component in the lab](https://v5.mui.com/material-ui/react-button/#loading-button). This work is influenced by the [concurrent UI patterns](https://17.reactjs.org/docs/concurrent-mode-patterns.html) presented by the React team. loading diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index af5d150e800f9d..feac0c503f86c1 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -594,7 +594,7 @@ Having a separate lab package allows us to release breaking changes when necessa The following components are now available in the lab: -- [LoadingButton](/material-ui/react-button/#loading-button). It does what you would expect. It renders the `Button` with a configurable loading/pending state. +- [LoadingButton](https://v5.mui.com/material-ui/react-button/#loading-button). It does what you would expect. It renders the `Button` with a configurable loading/pending state. - [FocusTrap](/base-ui/react-focus-trap/). This component traps the keyboard focus within a DOM node. For example, it's used by the Modal to prevent tabbing out of the component for accessibility reasons. - [Masonry](/material-ui/react-masonry/). One great use case for this component is when using the `Grid` component leads to wasted space. It's frequently used in dashboards. From 65f25fdef7825658f7c367d2140afd040077c204 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 6 Nov 2024 14:06:03 +0700 Subject: [PATCH 41/59] preserve the same demo --- docs/data/material/components/button-group/LoadingButtonGroup.js | 1 + .../data/material/components/button-group/LoadingButtonGroup.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/docs/data/material/components/button-group/LoadingButtonGroup.js index c0e02f5bf0ca53..fd146a90620d10 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.js +++ b/docs/data/material/components/button-group/LoadingButtonGroup.js @@ -7,6 +7,7 @@ export default function LoadingButtonGroup() { return ( + diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/docs/data/material/components/button-group/LoadingButtonGroup.tsx index c0e02f5bf0ca53..fd146a90620d10 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx +++ b/docs/data/material/components/button-group/LoadingButtonGroup.tsx @@ -7,6 +7,7 @@ export default function LoadingButtonGroup() { return ( + From b2dc46ebf1a354f8bc479b3104450acd744240c7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 6 Nov 2024 14:07:58 +0700 Subject: [PATCH 42/59] fix test --- packages/mui-material/src/Button/Button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index fd978a8f5326d0..bd1c4f9e9c2809 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -599,8 +599,8 @@ const Button = React.forwardRef(function Button(inProps, ref) { > {startIcon} {loading && loadingPosition === 'start' && loader} - {children} {loading && loadingPosition === 'center' && loader} + {children} {loading && loadingPosition === 'end' && loader} {endIcon} From 2864248a39b062ffb799bfee9be88c889d62a7ba Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 6 Nov 2024 14:08:52 +0700 Subject: [PATCH 43/59] run proptypes --- packages/mui-material/src/Button/Button.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index bd1c4f9e9c2809..008c5b02fa88f1 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -581,6 +581,7 @@ const Button = React.forwardRef(function Button(inProps, ref) { {loadingIndicator} ); + const positionClassName = buttonGroupButtonContextPositionClassName || ''; return ( From 75f35f940ecafc3412ed074ff5ebf096f95c6e9b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 6 Nov 2024 14:46:43 +0700 Subject: [PATCH 44/59] run docs:ts:format --- .../components/button-group/LoadingButtonGroup.tsx.preview | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview index dafcd77c93bc60..a69903f1fca35c 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview +++ b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview @@ -1,5 +1,6 @@ + From 23d8200ce840347698c6ccd31dcafe620bb3a304 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 7 Nov 2024 10:49:14 +0700 Subject: [PATCH 45/59] test fix gg translate --- .../components/buttons/LoadingButtons.js | 36 ++++++++++++++----- .../components/buttons/LoadingButtons.tsx | 36 ++++++++++++++----- .../buttons/LoadingButtons.tsx.preview | 14 -------- packages/mui-material/src/Button/Button.js | 11 +++--- 4 files changed, 63 insertions(+), 34 deletions(-) delete mode 100644 docs/data/material/components/buttons/LoadingButtons.tsx.preview diff --git a/docs/data/material/components/buttons/LoadingButtons.js b/docs/data/material/components/buttons/LoadingButtons.js index 276c7a29a548ca..09d568b124c92d 100644 --- a/docs/data/material/components/buttons/LoadingButtons.js +++ b/docs/data/material/components/buttons/LoadingButtons.js @@ -5,20 +5,40 @@ import Stack from '@mui/material/Stack'; export default function LoadingButtons() { return ( - - - + + + + + + + ); diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx b/docs/data/material/components/buttons/LoadingButtons.tsx index 276c7a29a548ca..09d568b124c92d 100644 --- a/docs/data/material/components/buttons/LoadingButtons.tsx +++ b/docs/data/material/components/buttons/LoadingButtons.tsx @@ -5,20 +5,40 @@ import Stack from '@mui/material/Stack'; export default function LoadingButtons() { return ( - - - + + + + + + + ); diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx.preview b/docs/data/material/components/buttons/LoadingButtons.tsx.preview deleted file mode 100644 index a8b542b9da72ef..00000000000000 --- a/docs/data/material/components/buttons/LoadingButtons.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 008c5b02fa88f1..62597787f7944b 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -314,6 +314,10 @@ const ButtonRoot = styled(ButtonBase, { props: { fullWidth: true }, style: { width: '100%' }, }, + { + props: { fullWidth: true, loading: true, loadingPosition: 'start' }, + style: { flexDirection: 'row-reverse' }, + }, { props: { loadingPosition: 'center', @@ -432,10 +436,11 @@ const ButtonLoadingIndicator = styled('span', { slot: 'LoadingIndicator', overridesResolver: (props, styles) => styles.loadingIndicator, })(({ theme }) => ({ + display: 'none', position: 'absolute', visibility: 'visible', - display: 'flex', variants: [ + { props: { loading: true }, style: { display: 'flex' } }, { props: { loadingPosition: 'start', @@ -599,10 +604,8 @@ const Button = React.forwardRef(function Button(inProps, ref) { classes={classes} > {startIcon} - {loading && loadingPosition === 'start' && loader} - {loading && loadingPosition === 'center' && loader} {children} - {loading && loadingPosition === 'end' && loader} + {loader} {endIcon} ); From ae62a4d5c91e74a19c72193d2c11506096a14e03 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 7 Nov 2024 11:24:08 +0700 Subject: [PATCH 46/59] render indicator only when loading --- packages/mui-material/src/Button/Button.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 62597787f7944b..60ff88a833d96a 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -315,7 +315,7 @@ const ButtonRoot = styled(ButtonBase, { style: { width: '100%' }, }, { - props: { fullWidth: true, loading: true, loadingPosition: 'start' }, + props: { fullWidth: true, loading: true, loadingPosition: 'end' }, style: { flexDirection: 'row-reverse' }, }, { @@ -583,7 +583,7 @@ const Button = React.forwardRef(function Button(inProps, ref) { const loader = ( - {loadingIndicator} + {loading && loadingIndicator} ); @@ -604,8 +604,8 @@ const Button = React.forwardRef(function Button(inProps, ref) { classes={classes} > {startIcon} - {children} {loader} + {children} {endIcon} ); From d0f92dd6b8da37dba462b044899fe315e26b95ac Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 7 Nov 2024 12:57:33 +0700 Subject: [PATCH 47/59] use order and simplify styles --- packages/mui-material/src/Button/Button.js | 28 +++++++--------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 60ff88a833d96a..067351c34e5835 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -314,10 +314,6 @@ const ButtonRoot = styled(ButtonBase, { props: { fullWidth: true }, style: { width: '100%' }, }, - { - props: { fullWidth: true, loading: true, loadingPosition: 'end' }, - style: { flexDirection: 'row-reverse' }, - }, { props: { loadingPosition: 'center', @@ -372,12 +368,8 @@ const ButtonStartIcon = styled('span', { }, }, { - props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth, + props: { loadingPosition: 'start', loading: true, fullWidth: true }, style: { - transition: theme.transitions.create(['opacity'], { - duration: theme.transitions.duration.short, - }), - opacity: 0, marginRight: -8, }, }, @@ -418,13 +410,10 @@ const ButtonEndIcon = styled('span', { }, }, { - props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth, + props: { loadingPosition: 'end', loading: true, fullWidth: true }, style: { - transition: theme.transitions.create(['opacity'], { - duration: theme.transitions.duration.short, - }), - opacity: 0, marginLeft: -8, + order: 2, }, }, ...commonIconStyles, @@ -451,8 +440,7 @@ const ButtonLoadingIndicator = styled('span', { }, }, { - props: ({ loadingPosition, ownerState }) => - loadingPosition === 'start' && ownerState.size !== 'small', + props: ({ loadingPosition, size }) => loadingPosition === 'start' && size !== 'small', style: { left: 14, }, @@ -486,8 +474,7 @@ const ButtonLoadingIndicator = styled('span', { }, }, { - props: ({ loadingPosition, ownerState }) => - loadingPosition === 'end' && ownerState.size !== 'small', + props: ({ loadingPosition, size }) => loadingPosition === 'end' && size !== 'small', style: { right: 14, }, @@ -502,17 +489,18 @@ const ButtonLoadingIndicator = styled('span', { }, }, { - props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth, + props: { loadingPosition: 'start', fullWidth: true }, style: { position: 'relative', left: -10, }, }, { - props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth, + props: { loadingPosition: 'end', fullWidth: true }, style: { position: 'relative', right: -10, + order: 1, }, }, ], From a354fd511c8b33ab549d99f4eefd4dc5f84b784a Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 9 Nov 2024 13:08:44 +0530 Subject: [PATCH 48/59] remove Button label slot --- docs/pages/material-ui/api/button.json | 6 ------ docs/translations/api-docs/button/button.json | 5 ----- packages/mui-material/src/Button/Button.js | 1 - packages/mui-material/src/Button/buttonClasses.ts | 3 --- 4 files changed, 15 deletions(-) diff --git a/docs/pages/material-ui/api/button.json b/docs/pages/material-ui/api/button.json index 313a406d28c370..996ab60f6e6a63 100644 --- a/docs/pages/material-ui/api/button.json +++ b/docs/pages/material-ui/api/button.json @@ -239,12 +239,6 @@ "isGlobal": false, "isDeprecated": true }, - { - "key": "label", - "className": "MuiButton-label", - "description": "Styles applied to the span element that wraps the children when `loading={true}`.", - "isGlobal": false - }, { "key": "loading", "className": "MuiButton-loading", diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index 381f4000dd5349..dac8f6e775b631 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -192,11 +192,6 @@ "conditions": "supplied and size=\"small\"", "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details." }, - "label": { - "description": "Styles applied to {{nodeName}} when {{conditions}}.", - "nodeName": "the span element that wraps the children", - "conditions": "loading={true}" - }, "loading": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 067351c34e5835..761979e4d43409 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -34,7 +34,6 @@ const useUtilityClasses = (ownerState) => { disableElevation && 'disableElevation', fullWidth && 'fullWidth', ], - label: ['label'], startIcon: [ 'icon', 'startIcon', diff --git a/packages/mui-material/src/Button/buttonClasses.ts b/packages/mui-material/src/Button/buttonClasses.ts index b5edc38d68d440..3dd6b4ea750fb1 100644 --- a/packages/mui-material/src/Button/buttonClasses.ts +++ b/packages/mui-material/src/Button/buttonClasses.ts @@ -176,8 +176,6 @@ export interface ButtonClasses { colorInfo: string; /** Styles applied to the root element if `color="warning"`. */ colorWarning: string; - /** Styles applied to the span element that wraps the children when `loading={true}`. */ - label: string; /** Styles applied to the root element if `loading={true}`. */ loading: string; /** Styles applied to the loadingIndicator element. */ @@ -255,7 +253,6 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', - 'label', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', From c24da44e758fb821487b0fed76eae6826e898549 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 9 Nov 2024 13:12:43 +0530 Subject: [PATCH 49/59] update warning text --- packages/mui-lab/src/LoadingButton/LoadingButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js index 410ab98df83206..8c4529a715bf4b 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/mui-lab/src/LoadingButton/LoadingButton.js @@ -8,7 +8,7 @@ const warn = () => { if (!warnedOnce) { console.warn( [ - 'MUI: The LoadingButton component functionality is now part of the Button component from core.', + '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'`", From d160f4cf7cfb9ab0c59956c43a5ceef718feaa90 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 9 Nov 2024 15:34:38 +0530 Subject: [PATCH 50/59] update migration guide on Button with loading state --- .../migration/upgrade-to-v6/upgrade-to-v6.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md index 00559f268f5d28..3fcd3f1c2215be 100644 --- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md +++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md @@ -356,9 +356,21 @@ As the `ListItem` no longer supports these props, the class names related to the +listItemButtonClasses.selected ``` -### Loading Button +### Button with Loading State -In v6, the `children` prop passed to the Loading Button component is now wrapped in a `` tag to avoid [issues](https://github.com/mui/material-ui/issues/27853) when using tools to translate websites. +As of `@mui/material` **v6.2.0**, the `LoadingButton` from MUI Lab has been removed. Loading functionality is now part of the standard `Button` component. Update your import as follows: + +```diff +-import { LoadingButton } from '@mui/lab'; ++import { Button } from '@mui/material'; +``` + +```diff +-import LoadingButton from '@mui/lab/LoadingButton'; ++import Button from '@mui/material/Button'; +``` + +For more details, see the [Loading section](/material-ui/react-button/#loading) in the [Material UI `Button` documentation](/material-ui/react-button/). ### Typography From 10c8fd8a1da8febce0cc18f221797a0f649919e6 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 9 Nov 2024 15:43:34 +0530 Subject: [PATCH 51/59] use non-breaking space for Material UI --- docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md index 3fcd3f1c2215be..3cb7feeb920753 100644 --- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md +++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md @@ -370,7 +370,7 @@ As of `@mui/material` **v6.2.0**, the `LoadingButton` from MUI Lab has been remo +import Button from '@mui/material/Button'; ``` -For more details, see the [Loading section](/material-ui/react-button/#loading) in the [Material UI `Button` documentation](/material-ui/react-button/). +For more details, see the [Loading section](/material-ui/react-button/#loading) in the [Material UI `Button` documentation](/material-ui/react-button/). ### Typography From d7b67b574fdf1323ee97ad9fc90253f2661c7d7a Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 9 Nov 2024 15:59:40 +0530 Subject: [PATCH 52/59] fix vale --- docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md index 3cb7feeb920753..08ec00cbe975d0 100644 --- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md +++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md @@ -358,7 +358,7 @@ As the `ListItem` no longer supports these props, the class names related to the ### Button with Loading State -As of `@mui/material` **v6.2.0**, the `LoadingButton` from MUI Lab has been removed. Loading functionality is now part of the standard `Button` component. Update your import as follows: +As of `@mui/material` **v6.2.0**, the `LoadingButton` from Lab has been removed. Loading functionality is now part of the standard `Button` component. Update your import as follows: ```diff -import { LoadingButton } from '@mui/lab'; From d0ce7f3a50c51817ad924f94f3edee22424bbea1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 13 Nov 2024 17:19:08 +0700 Subject: [PATCH 53/59] add loading to IconButton --- .../components/buttons/LoadingWithBadge.js | 30 ++++++++++++++ .../components/buttons/LoadingWithBadge.tsx | 30 ++++++++++++++ .../material/components/buttons/buttons.md | 6 +++ .../src/IconButton/IconButton.d.ts | 12 ++++++ .../mui-material/src/IconButton/IconButton.js | 39 ++++++++++++++++++- .../src/IconButton/iconButtonClasses.ts | 6 +++ 6 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 docs/data/material/components/buttons/LoadingWithBadge.js create mode 100644 docs/data/material/components/buttons/LoadingWithBadge.tsx diff --git a/docs/data/material/components/buttons/LoadingWithBadge.js b/docs/data/material/components/buttons/LoadingWithBadge.js new file mode 100644 index 00000000000000..e9853d0a88aa7a --- /dev/null +++ b/docs/data/material/components/buttons/LoadingWithBadge.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; +import Badge, { badgeClasses } from '@mui/material/Badge'; +import Stack from '@mui/material/Stack'; +import SaveIcon from '@mui/icons-material/Save'; +import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined'; + +const AppBarCartBadge = styled(Badge)` + .${badgeClasses.badge} { + top: -12px; + right: -6px; + } +`; + +export default function LoadingWithBadge() { + return ( + + + + + + + + + + + + ); +} diff --git a/docs/data/material/components/buttons/LoadingWithBadge.tsx b/docs/data/material/components/buttons/LoadingWithBadge.tsx new file mode 100644 index 00000000000000..e9853d0a88aa7a --- /dev/null +++ b/docs/data/material/components/buttons/LoadingWithBadge.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; +import Badge, { badgeClasses } from '@mui/material/Badge'; +import Stack from '@mui/material/Stack'; +import SaveIcon from '@mui/icons-material/Save'; +import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined'; + +const AppBarCartBadge = styled(Badge)` + .${badgeClasses.badge} { + top: -12px; + right: -6px; + } +`; + +export default function LoadingWithBadge() { + return ( + + + + + + + + + + + + ); +} diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 72548bf7cba009..72a9818501b15d 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -113,6 +113,12 @@ Use `color` prop to apply theme color palette to component. {{"demo": "IconButtonColors.js"}} +### Loading with badge + +Use `loading` prop to set icon buttons in a loading state and disable interactions. + +{{"demo": "LoadingWithBadge.js"}} + ## File upload To create a file upload button, turn the button into a label using `component="label"` and then create a visually-hidden input with type `file`. diff --git a/packages/mui-material/src/IconButton/IconButton.d.ts b/packages/mui-material/src/IconButton/IconButton.d.ts index 108d72d09ac0c3..8a0240b3706e5a 100644 --- a/packages/mui-material/src/IconButton/IconButton.d.ts +++ b/packages/mui-material/src/IconButton/IconButton.d.ts @@ -47,6 +47,18 @@ export interface IconButtonOwnProps { * @default false */ edge?: 'start' | 'end' | false; + /** + * If `true`, the loading indicator is shown and the button becomes 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. + * @default + */ + loadingIndicator?: React.ReactNode; /** * The size of the component. * `small` is equivalent to the dense button styling. diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index 780a3ff72d3d19..a1ceaea852d83b 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; 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'; @@ -14,16 +16,18 @@ import capitalize from '../utils/capitalize'; import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses'; const useUtilityClasses = (ownerState) => { - const { classes, disabled, color, edge, size } = ownerState; + const { classes, disabled, color, edge, size, loading } = ownerState; const slots = { root: [ 'root', + loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`, ], + loadingIndicator: ['loadingIndicator'], }; return composeClasses(slots, getIconButtonUtilityClass, classes); @@ -140,9 +144,27 @@ const IconButtonRoot = styled(ButtonBase, { backgroundColor: 'transparent', color: (theme.vars || theme).palette.action.disabled, }, + [`&.${iconButtonClasses.loading}`]: { + color: 'transparent', + }, })), ); +const IconButtonLoadingIndicator = styled('span', { + name: 'MuiIconButton', + slot: 'LoadingIndicator', + overridesResolver: (props, styles) => styles.loadingIndicator, +})(({ theme }) => ({ + display: 'none', + position: 'absolute', + visibility: 'visible', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + color: (theme.vars || theme).palette.action.disabled, + variants: [{ props: { loading: true }, style: { display: 'flex' } }], +})); + /** * Refer to the [Icons](/material-ui/icons/) section of the documentation * regarding the available icon options. @@ -157,15 +179,25 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) { disabled = false, disableFocusRipple = false, size = 'medium', + id: idProp, + loading = false, + loadingIndicator: loadingIndicatorProp, ...other } = props; + const id = useId(idProp); + const loadingIndicator = loadingIndicatorProp ?? ( + + ); + const ownerState = { ...props, edge, color, disabled, disableFocusRipple, + loading, + loadingIndicator, size, }; @@ -176,12 +208,15 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) { className={clsx(classes.root, className)} centerRipple focusRipple={!disableFocusRipple} - disabled={disabled} + disabled={disabled || loading} ref={ref} {...other} ownerState={ownerState} > {children} + + {loading && loadingIndicator} + ); }); diff --git a/packages/mui-material/src/IconButton/iconButtonClasses.ts b/packages/mui-material/src/IconButton/iconButtonClasses.ts index 72eb0e109c497f..b65ac3b0d85264 100644 --- a/packages/mui-material/src/IconButton/iconButtonClasses.ts +++ b/packages/mui-material/src/IconButton/iconButtonClasses.ts @@ -30,6 +30,10 @@ export interface IconButtonClasses { sizeMedium: string; /** Styles applied to the root element if `size="large"`. */ sizeLarge: string; + /** Styles applied to the root element if `loading={true}`. */ + loading: string; + /** Styles applied to the loadingIndicator element. */ + loadingIndicator: string; } export type IconButtonClassKey = keyof IconButtonClasses; @@ -53,6 +57,8 @@ const iconButtonClasses: IconButtonClasses = generateUtilityClasses('MuiIconButt 'sizeSmall', 'sizeMedium', 'sizeLarge', + 'loading', + 'loadingIndicator', ]); export default iconButtonClasses; From ad5e9c71e2180d0ddf63a770b70c1adb2da5450a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 13 Nov 2024 17:20:19 +0700 Subject: [PATCH 54/59] run proptypes --- docs/pages/material-ui/api/icon-button.json | 17 +++++++++++++++++ .../api-docs/icon-button/icon-button.json | 15 +++++++++++++++ .../mui-material/src/IconButton/IconButton.js | 16 ++++++++++++++++ 3 files changed, 48 insertions(+) diff --git a/docs/pages/material-ui/api/icon-button.json b/docs/pages/material-ui/api/icon-button.json index 752030e32dcce9..09cb6b9e7dc49e 100644 --- a/docs/pages/material-ui/api/icon-button.json +++ b/docs/pages/material-ui/api/icon-button.json @@ -19,6 +19,11 @@ }, "default": "false" }, + "loading": { "type": { "name": "bool" }, "default": "false" }, + "loadingIndicator": { + "type": { "name": "node" }, + "default": "" + }, "size": { "type": { "name": "union", @@ -100,6 +105,18 @@ "description": "Styles applied to the root element if `edge=\"start\"`.", "isGlobal": false }, + { + "key": "loading", + "className": "MuiIconButton-loading", + "description": "Styles applied to the root element if `loading={true}`.", + "isGlobal": false + }, + { + "key": "loadingIndicator", + "className": "MuiIconButton-loadingIndicator", + "description": "Styles applied to the loadingIndicator element.", + "isGlobal": false + }, { "key": "root", "className": "MuiIconButton-root", diff --git a/docs/translations/api-docs/icon-button/icon-button.json b/docs/translations/api-docs/icon-button/icon-button.json index 76558bfba72680..03aeb7ec720d0c 100644 --- a/docs/translations/api-docs/icon-button/icon-button.json +++ b/docs/translations/api-docs/icon-button/icon-button.json @@ -16,6 +16,12 @@ "edge": { "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." + }, + "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." + }, "size": { "description": "The size of the component. small is equivalent to the dense button styling." }, @@ -74,6 +80,15 @@ "nodeName": "the root element", "conditions": "edge=\"start\"" }, + "loading": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "loading={true}" + }, + "loadingIndicator": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the loadingIndicator element" + }, "root": { "description": "Styles applied to the root element." }, "sizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index a1ceaea852d83b..89f448ae647fd9 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -299,6 +299,22 @@ IconButton.propTypes /* remove-proptypes */ = { * @default false */ edge: PropTypes.oneOf(['end', 'start', false]), + /** + * @ignore + */ + id: PropTypes.string, + /** + * If `true`, the loading indicator is shown and the button becomes 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. + * @default + */ + loadingIndicator: PropTypes.node, /** * The size of the component. * `small` is equivalent to the dense button styling. From 739299b08a4fc4c50f49b670bd28e85351311b0e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 13 Nov 2024 19:07:57 +0700 Subject: [PATCH 55/59] run docs:ts:format --- .../components/buttons/LoadingWithBadge.tsx.preview | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 docs/data/material/components/buttons/LoadingWithBadge.tsx.preview diff --git a/docs/data/material/components/buttons/LoadingWithBadge.tsx.preview b/docs/data/material/components/buttons/LoadingWithBadge.tsx.preview new file mode 100644 index 00000000000000..1c875940f04703 --- /dev/null +++ b/docs/data/material/components/buttons/LoadingWithBadge.tsx.preview @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file From e6ad5c185eb1eb961b90c82a23e2b9a8f3cdbc5c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Nov 2024 14:09:38 +0700 Subject: [PATCH 56/59] separate badge from loading demo --- ...ingWithBadge.js => IconButtonWithBadge.js} | 15 +++++++++---- ...gWithBadge.tsx => IconButtonWithBadge.tsx} | 15 +++++++++---- ...review => IconButtonWithBadge.tsx.preview} | 4 ++-- .../components/buttons/LoadingIconButton.js | 21 +++++++++++++++++++ .../components/buttons/LoadingIconButton.tsx | 21 +++++++++++++++++++ .../buttons/LoadingIconButton.tsx.preview | 5 +++++ .../material/components/buttons/buttons.md | 10 +++++++-- 7 files changed, 79 insertions(+), 12 deletions(-) rename docs/data/material/components/buttons/{LoadingWithBadge.js => IconButtonWithBadge.js} (62%) rename docs/data/material/components/buttons/{LoadingWithBadge.tsx => IconButtonWithBadge.tsx} (62%) rename docs/data/material/components/buttons/{LoadingWithBadge.tsx.preview => IconButtonWithBadge.tsx.preview} (54%) create mode 100644 docs/data/material/components/buttons/LoadingIconButton.js create mode 100644 docs/data/material/components/buttons/LoadingIconButton.tsx create mode 100644 docs/data/material/components/buttons/LoadingIconButton.tsx.preview diff --git a/docs/data/material/components/buttons/LoadingWithBadge.js b/docs/data/material/components/buttons/IconButtonWithBadge.js similarity index 62% rename from docs/data/material/components/buttons/LoadingWithBadge.js rename to docs/data/material/components/buttons/IconButtonWithBadge.js index e9853d0a88aa7a..6a00cbd44b6180 100644 --- a/docs/data/material/components/buttons/LoadingWithBadge.js +++ b/docs/data/material/components/buttons/IconButtonWithBadge.js @@ -6,14 +6,21 @@ import Stack from '@mui/material/Stack'; import SaveIcon from '@mui/icons-material/Save'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined'; -const AppBarCartBadge = styled(Badge)` +const CartBadge = styled(Badge)` .${badgeClasses.badge} { top: -12px; right: -6px; } `; -export default function LoadingWithBadge() { +export default function IconButtonWithBadge() { + const [loading, setLoading] = React.useState(false); + React.useEffect(() => { + const timeout = setTimeout(() => { + setLoading(false); + }, 2000); + return () => clearTimeout(timeout); + }); return ( @@ -21,9 +28,9 @@ export default function LoadingWithBadge() { - + setLoading(true)}> - + ); diff --git a/docs/data/material/components/buttons/LoadingWithBadge.tsx b/docs/data/material/components/buttons/IconButtonWithBadge.tsx similarity index 62% rename from docs/data/material/components/buttons/LoadingWithBadge.tsx rename to docs/data/material/components/buttons/IconButtonWithBadge.tsx index e9853d0a88aa7a..6a00cbd44b6180 100644 --- a/docs/data/material/components/buttons/LoadingWithBadge.tsx +++ b/docs/data/material/components/buttons/IconButtonWithBadge.tsx @@ -6,14 +6,21 @@ import Stack from '@mui/material/Stack'; import SaveIcon from '@mui/icons-material/Save'; import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined'; -const AppBarCartBadge = styled(Badge)` +const CartBadge = styled(Badge)` .${badgeClasses.badge} { top: -12px; right: -6px; } `; -export default function LoadingWithBadge() { +export default function IconButtonWithBadge() { + const [loading, setLoading] = React.useState(false); + React.useEffect(() => { + const timeout = setTimeout(() => { + setLoading(false); + }, 2000); + return () => clearTimeout(timeout); + }); return ( @@ -21,9 +28,9 @@ export default function LoadingWithBadge() { - + setLoading(true)}> - + ); diff --git a/docs/data/material/components/buttons/LoadingWithBadge.tsx.preview b/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview similarity index 54% rename from docs/data/material/components/buttons/LoadingWithBadge.tsx.preview rename to docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview index 1c875940f04703..cfe404e63cb83d 100644 --- a/docs/data/material/components/buttons/LoadingWithBadge.tsx.preview +++ b/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview @@ -3,7 +3,7 @@ - + setLoading(true)}> - + \ No newline at end of file diff --git a/docs/data/material/components/buttons/LoadingIconButton.js b/docs/data/material/components/buttons/LoadingIconButton.js new file mode 100644 index 00000000000000..6778d7281d47d7 --- /dev/null +++ b/docs/data/material/components/buttons/LoadingIconButton.js @@ -0,0 +1,21 @@ +import * as React from 'react'; +import Tooltip from '@mui/material/Tooltip'; +import IconButton from '@mui/material/IconButton'; +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; + +export default function LoadingIconButton() { + const [loading, setLoading] = React.useState(false); + React.useEffect(() => { + const timeout = setTimeout(() => { + setLoading(false); + }, 2000); + return () => clearTimeout(timeout); + }); + return ( + + setLoading(true)} loading={loading}> + + + + ); +} diff --git a/docs/data/material/components/buttons/LoadingIconButton.tsx b/docs/data/material/components/buttons/LoadingIconButton.tsx new file mode 100644 index 00000000000000..6778d7281d47d7 --- /dev/null +++ b/docs/data/material/components/buttons/LoadingIconButton.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import Tooltip from '@mui/material/Tooltip'; +import IconButton from '@mui/material/IconButton'; +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; + +export default function LoadingIconButton() { + const [loading, setLoading] = React.useState(false); + React.useEffect(() => { + const timeout = setTimeout(() => { + setLoading(false); + }, 2000); + return () => clearTimeout(timeout); + }); + return ( + + setLoading(true)} loading={loading}> + + + + ); +} diff --git a/docs/data/material/components/buttons/LoadingIconButton.tsx.preview b/docs/data/material/components/buttons/LoadingIconButton.tsx.preview new file mode 100644 index 00000000000000..9c9a8b0cbf868a --- /dev/null +++ b/docs/data/material/components/buttons/LoadingIconButton.tsx.preview @@ -0,0 +1,5 @@ + + setLoading(true)} loading={loading}> + + + \ No newline at end of file diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 72a9818501b15d..b2f86853e8fd08 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -113,11 +113,17 @@ Use `color` prop to apply theme color palette to component. {{"demo": "IconButtonColors.js"}} -### Loading with badge +### Loading Use `loading` prop to set icon buttons in a loading state and disable interactions. -{{"demo": "LoadingWithBadge.js"}} +{{"demo": "LoadingIconButton.js"}} + +### Badge + +You can use the [`Badge`](/material-ui/react-badge/) component to add a badge to an `IconButton`. + +{{"demo": "IconButtonWithBadge.js"}} ## File upload From 723d36d37670ab0f2ef1a8fdee851ab7ddae5732 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Nov 2024 14:19:57 +0700 Subject: [PATCH 57/59] add tests for IconButton loading --- .../mui-material/src/IconButton/IconButton.js | 3 +- .../src/IconButton/IconButton.test.js | 44 ++++++++++++++++++- 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index 89f448ae647fd9..61a29532cc62e0 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -205,6 +205,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) { return ( - {children} {loading && loadingIndicator} + {children} ); }); diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js index 827d2c91fb560d..e72515a6b0b309 100644 --- a/packages/mui-material/src/IconButton/IconButton.test.js +++ b/packages/mui-material/src/IconButton/IconButton.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import PropTypes from 'prop-types'; -import { createRenderer, reactMajor } from '@mui/internal-test-utils'; +import { createRenderer, reactMajor, screen, within } from '@mui/internal-test-utils'; import capitalize from '@mui/utils/capitalize'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton'; @@ -161,4 +161,46 @@ describe('', () => { await ripple.startTouch(getByRole('button')); expect(container.querySelector('.touch-ripple')).to.equal(null); }); + + describe('prop: loading', () => { + it('disables the button', () => { + render(); + + const button = screen.getByRole('button'); + expect(button).to.have.property('tabIndex', -1); + expect(button).to.have.property('disabled', true); + }); + + it('cannot be enabled while `loading`', () => { + render(); + + expect(screen.getByRole('button')).to.have.property('disabled', true); + }); + + it('renders a progressbar that is labelled by the button', () => { + render(Submit); + + const button = screen.getByRole('button'); + const progressbar = within(button).getByRole('progressbar'); + expect(progressbar).toHaveAccessibleName('Submit'); + }); + }); + + describe('prop: loadingIndicator', () => { + it('is not rendered by default', () => { + render(Test); + + expect(screen.getByRole('button')).to.have.text('Test'); + }); + + it('is rendered before the children when `loading`', () => { + render( + + Test + , + ); + + expect(screen.getByRole('button')).to.have.text('loading…Test'); + }); + }); }); From 0de27c4a0444db9fc493e15ff20c55d2811b3c1e Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 14 Nov 2024 14:08:28 +0530 Subject: [PATCH 58/59] fix link --- docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md index 08ec00cbe975d0..c4fcc9af9dd1e4 100644 --- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md +++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md @@ -370,7 +370,7 @@ As of `@mui/material` **v6.2.0**, the `LoadingButton` from Lab has been removed. +import Button from '@mui/material/Button'; ``` -For more details, see the [Loading section](/material-ui/react-button/#loading) in the [Material UI `Button` documentation](/material-ui/react-button/). +For more details, see the [Loading section](/material-ui/react-button/#loading-2) in the [Material UI `Button` documentation](/material-ui/react-button/). ### Typography From b472bb9f0c0812fc021f97e0cd174b4723bfe962 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 14 Nov 2024 14:18:00 +0530 Subject: [PATCH 59/59] add loading style for styleOverrides --- packages/mui-material/src/Button/Button.js | 1 + packages/mui-material/src/IconButton/IconButton.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 761979e4d43409..aefb6001639a52 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -103,6 +103,7 @@ const ButtonRoot = styled(ButtonBase, { ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, + ownerState.loading && styles.loading, ]; }, })( diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index 61a29532cc62e0..9057a9c68daaf6 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -41,6 +41,7 @@ const IconButtonRoot = styled(ButtonBase, { return [ styles.root, + ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`],