From 4c2ecc8ab2fce166b4275f6808fcfd212b24076b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 19 May 2021 15:54:49 +0700 Subject: [PATCH 01/14] migrate to emotion --- docs/pages/api-docs/loading-button.json | 5 +- .../loading-button/loading-button.json | 3 +- .../src/LoadingButton/LoadingButton.d.ts | 6 + .../src/LoadingButton/LoadingButton.js | 156 +++++++++++------- .../src/LoadingButton/LoadingButton.test.js | 36 ++-- .../src/LoadingButton/index.d.ts | 3 + .../src/LoadingButton/index.js | 3 + .../src/LoadingButton/loadingButtonClasses.ts | 42 +++++ 8 files changed, 168 insertions(+), 86 deletions(-) create mode 100644 packages/material-ui-lab/src/LoadingButton/loadingButtonClasses.ts diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json index 4859f672368d9e..c2bd158a5e4b47 100644 --- a/docs/pages/api-docs/loading-button.json +++ b/docs/pages/api-docs/loading-button.json @@ -14,7 +14,8 @@ "description": "'start'
| 'end'
| 'center'" }, "default": "'center'" - } + }, + "sx": { "type": { "name": "object" } } }, "name": "LoadingButton", "styles": { @@ -37,6 +38,6 @@ "filename": "/packages/material-ui-lab/src/LoadingButton/LoadingButton.js", "inheritance": { "component": "Button", "pathname": "/api/button/" }, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index 8eef9bc0fc73fa..7fe90cdb83b4f9 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -6,7 +6,8 @@ "disabled": "If true, the component is disabled.", "loading": "If true, the loading indicator is shown.", "loadingIndicator": "Element placed before the children if the button is in loading state.", - "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button." + "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index 2ff980292a2aea..cad815738b2621 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -1,5 +1,7 @@ import { ExtendButton, ExtendButtonTypeMap } from '@material-ui/core/Button'; import { OverrideProps } from '@material-ui/core/OverridableComponent'; +import { Theme } from '@material-ui/core/styles'; +import { SxProps } from '@material-ui/system'; export type LoadingButtonTypeMap< P = {}, @@ -44,6 +46,10 @@ export type LoadingButtonTypeMap< * @default 'center' */ loadingPosition?: 'start' | 'end' | 'center'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; }; defaultComponent: D; }>; diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index be5f7b9c5877b8..980572e46e91f6 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -1,57 +1,101 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; import { chainPropTypes } from '@material-ui/utils'; import { capitalize } from '@material-ui/core/utils'; -import { withStyles } from '@material-ui/core/styles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { + experimentalStyled as styled, + unstable_useThemeProps as useThemeProps, +} from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import CircularProgress from '@material-ui/core/CircularProgress'; +import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses'; -export const styles = () => ({ - /* Styles applied to the root element. */ - root: {}, - /* Styles applied to the root element if `loading={true}`. */ - loading: {}, - /* Styles applied to the loadingIndicator element. */ - loadingIndicator: { - position: 'absolute', - visibility: 'visible', - display: 'flex', - }, - /* Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ - loadingIndicatorCenter: { - left: '50%', - transform: 'translate(-50%)', - }, - /* Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ - loadingIndicatorStart: { - left: 14, +const useUtilityClasses = (styleProps) => { + const { loading, loadingPosition, classes } = styleProps; + + const slots = { + root: ['root', loading && 'loading'], + startIcon: [`startIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], + endIcon: [`endIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], + label: [`label${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], + loadingIndicator: ['loadingIndicator', `loadingIndicator${capitalize(loadingPosition)}`], + }; + + return composeClasses(slots, getLoadingButtonUtilityClass, classes); +}; + +const buttonShouldForwardProp = (prop) => + prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as'; +const LoadingButtonRoot = styled( + Button, + { + shouldForwardProp: buttonShouldForwardProp, }, - /* Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ - loadingIndicatorEnd: { - right: 14, + { + name: 'MuiLoadingButton', + slot: 'Root', + overridesResolver: (props, styles) => ({ + ...styles.root, + ...(styles.startIconLoadingStart && { + [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart, + }), + ...(styles.endIconLoadingEnd && { + [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd, + }), + ...(styles.labelLoadingCenter && { + [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter, + }), + }), }, - /* Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ - endIconLoadingEnd: { +)({ + [`& .${loadingButtonClasses.startIconLoadingStart}`]: { visibility: 'hidden', }, - /* Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ - startIconLoadingStart: { + [`& .${loadingButtonClasses.endIconLoadingEnd}`]: { visibility: 'hidden', }, - /* Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */ - labelLoadingCenter: { + [`& .${loadingButtonClasses.labelLoadingCenter}`]: { visibility: 'hidden', }, }); +const LoadingButtonLoadingIndicator = styled( + 'div', + {}, + { + name: 'MuiLoadingButton', + slot: 'LoadingIndicator', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.loadingIndicator, + ...styles[`loadingIndicator${capitalize(styleProps.loadingPosition)}`], + }; + }, + }, +)(({ styleProps }) => ({ + position: 'absolute', + visibility: 'visible', + display: 'flex', + ...(styleProps.loadingPosition === 'start' && { + left: 14, + }), + ...(styleProps.loadingPosition === 'center' && { + left: '50%', + transform: 'translate(-50%)', + }), + ...(styleProps.loadingPosition === 'end' && { + right: 14, + }), +})); + const LoadingIndicator = ; -const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { +const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiLoadingButton' }); const { children, - classes, - className, disabled = false, loading = false, loadingIndicator = LoadingIndicator, @@ -59,37 +103,31 @@ const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { ...other } = props; + const styleProps = { + ...props, + disabled, + loading, + loadingIndicator, + loadingPosition, + }; + + const classes = useUtilityClasses(styleProps); return ( - + ); }); @@ -106,10 +144,6 @@ LoadingButton.propTypes /* remove-proptypes */ = { * Override or extend the styles applied to the component. */ classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, /** * If `true`, the component is disabled. * @default false @@ -142,6 +176,10 @@ LoadingButton.propTypes /* remove-proptypes */ = { } return null; }), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiLoadingButton' })(LoadingButton); +export default LoadingButton; diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js index e186b67da498ad..fe9d8111e06222 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js @@ -1,31 +1,21 @@ import * as React from 'react'; -import { - createClientRender, - getClasses, - createMount, - describeConformance, - screen, -} from 'test/utils'; +import { createClientRender, createMount, describeConformanceV5, screen } from 'test/utils'; import { expect } from 'chai'; import Button from '@material-ui/core/Button'; -import LoadingButton from './LoadingButton'; +import LoadingButton, { loadingButtonClasses as classes } from '@material-ui/lab/LoadingButton'; describe('', () => { const mount = createMount(); const render = createClientRender(); - let classes; - before(() => { - classes = getClasses(Hello World); - }); - - describeConformance(Conformance?, () => ({ + describeConformanceV5(Conformance?, () => ({ classes, inheritComponent: Button, render, mount, + muiName: 'MuiLoadingButton', refInstanceof: window.HTMLButtonElement, - skip: ['componentProp'], + skip: ['componentProp', 'componentsProp'], })); it('is in tab-order by default', () => { @@ -35,15 +25,13 @@ describe('', () => { }); it('can be outlined', () => { - expect(() => { - render( - , - ); - }).toErrorDev('The key `outlined` provided to the classes prop is not implemented'); + render( + , + ); const button = screen.getByTestId('root'); expect(button).to.have.class('MuiButton-outlined'); diff --git a/packages/material-ui-lab/src/LoadingButton/index.d.ts b/packages/material-ui-lab/src/LoadingButton/index.d.ts index 421603193deae6..f0fb5e154b2d5f 100644 --- a/packages/material-ui-lab/src/LoadingButton/index.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/index.d.ts @@ -1,2 +1,5 @@ export { default } from './LoadingButton'; export * from './LoadingButton'; + +export { default as loadingButtonClasses } from './loadingButtonClasses'; +export * from './loadingButtonClasses'; diff --git a/packages/material-ui-lab/src/LoadingButton/index.js b/packages/material-ui-lab/src/LoadingButton/index.js index b12be17a139ad5..c61aaee2562f05 100644 --- a/packages/material-ui-lab/src/LoadingButton/index.js +++ b/packages/material-ui-lab/src/LoadingButton/index.js @@ -1 +1,4 @@ export { default } from './LoadingButton'; + +export { default as loadingButtonClasses } from './loadingButtonClasses'; +export * from './loadingButtonClasses'; diff --git a/packages/material-ui-lab/src/LoadingButton/loadingButtonClasses.ts b/packages/material-ui-lab/src/LoadingButton/loadingButtonClasses.ts new file mode 100644 index 00000000000000..1fb6b72c7c7e26 --- /dev/null +++ b/packages/material-ui-lab/src/LoadingButton/loadingButtonClasses.ts @@ -0,0 +1,42 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export interface LoadingButtonClasses { + /** Styles applied to the root element. */ + root: 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; + /** Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */ + labelLoadingCenter: string; +} + +export type LoadingButtonClassKey = keyof LoadingButtonClasses; + +export function getLoadingButtonUtilityClass(slot: string): string { + return generateUtilityClass('MuiLoadingButton', slot); +} + +const loadingButtonClasses: LoadingButtonClasses = generateUtilityClasses('MuiLoadingButton', [ + 'root', + 'loading', + 'loadingIndicator', + 'loadingIndicatorCenter', + 'loadingIndicatorStart', + 'loadingIndicatorEnd', + 'endIconLoadingEnd', + 'startIconLoadingStart', + 'labelLoadingCenter', +]); + +export default loadingButtonClasses; From 8e52c5639844233d422a4d246a13fc1847b1fe24 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 19 May 2021 16:03:30 +0700 Subject: [PATCH 02/14] add testVariantProps --- packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js index fe9d8111e06222..18dbb1d0732ad8 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js @@ -14,6 +14,7 @@ describe('', () => { render, mount, muiName: 'MuiLoadingButton', + testVariantProps: { loading: true }, refInstanceof: window.HTMLButtonElement, skip: ['componentProp', 'componentsProp'], })); From dce2f6654fe903dccc18e617ae8c01020435ba11 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 19 May 2021 18:10:47 +0700 Subject: [PATCH 03/14] Update packages/material-ui-lab/src/LoadingButton/LoadingButton.js Co-authored-by: Marija Najdova --- packages/material-ui-lab/src/LoadingButton/LoadingButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 980572e46e91f6..c72560f128cc14 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -16,7 +16,7 @@ const useUtilityClasses = (styleProps) => { const slots = { root: ['root', loading && 'loading'], - startIcon: [`startIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], + startIcon: [loading && `startIconLoading${capitalize(loadingPosition)}`], endIcon: [`endIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], label: [`label${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], loadingIndicator: ['loadingIndicator', `loadingIndicator${capitalize(loadingPosition)}`], From 553a0326209c33e3b91d7ba70e942969690b507a Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 19 May 2021 18:10:53 +0700 Subject: [PATCH 04/14] Update packages/material-ui-lab/src/LoadingButton/LoadingButton.js Co-authored-by: Marija Najdova --- packages/material-ui-lab/src/LoadingButton/LoadingButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index c72560f128cc14..6b081f60bab53b 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -17,7 +17,7 @@ const useUtilityClasses = (styleProps) => { const slots = { root: ['root', loading && 'loading'], startIcon: [loading && `startIconLoading${capitalize(loadingPosition)}`], - endIcon: [`endIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], + endIcon: [loading && `endIconLoading${capitalize(loadingPosition)}`], label: [`label${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], loadingIndicator: ['loadingIndicator', `loadingIndicator${capitalize(loadingPosition)}`], }; From 4f33a80c908296d42c6af0333f1ef79eba144141 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 20 May 2021 09:44:09 +0700 Subject: [PATCH 05/14] support classes for MuiButton --- docs/pages/api-docs/loading-button.json | 37 +++- .../loading-button/loading-button.json | 174 ++++++++++++++++++ .../src/LoadingButton/LoadingButton.d.ts | 4 +- .../src/LoadingButton/LoadingButton.js | 51 +++-- .../src/LoadingButton/LoadingButton.test.js | 14 +- 5 files changed, 251 insertions(+), 29 deletions(-) diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json index c2bd158a5e4b47..33de989be05841 100644 --- a/docs/pages/api-docs/loading-button.json +++ b/docs/pages/api-docs/loading-button.json @@ -21,6 +21,41 @@ "styles": { "classes": [ "root", + "label", + "text", + "textInherit", + "textPrimary", + "textSecondary", + "outlined", + "outlinedInherit", + "outlinedPrimary", + "outlinedSecondary", + "contained", + "containedInherit", + "containedPrimary", + "containedSecondary", + "disableElevation", + "focusVisible", + "disabled", + "colorInherit", + "textSizeSmall", + "textSizeMedium", + "textSizeLarge", + "outlinedSizeSmall", + "outlinedSizeMedium", + "outlinedSizeLarge", + "containedSizeSmall", + "containedSizeMedium", + "containedSizeLarge", + "sizeSmall", + "sizeMedium", + "sizeLarge", + "fullWidth", + "startIcon", + "endIcon", + "iconSizeSmall", + "iconSizeMedium", + "iconSizeLarge", "loading", "loadingIndicator", "loadingIndicatorCenter", @@ -30,7 +65,7 @@ "startIconLoadingStart", "labelLoadingCenter" ], - "globalClasses": {}, + "globalClasses": { "focusVisible": "Mui-focusVisible", "disabled": "Mui-disabled" }, "name": "MuiLoadingButton" }, "spread": true, diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index 7fe90cdb83b4f9..3a903a09cd5806 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -11,6 +11,180 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, + "label": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the span element that wraps the children" + }, + "text": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\"" + }, + "textInherit": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"inherit\"" + }, + "textPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"primary\"" + }, + "textSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"secondary\"" + }, + "outlined": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\"" + }, + "outlinedInherit": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"inherit\"" + }, + "outlinedPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"primary\"" + }, + "outlinedSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"secondary\"" + }, + "contained": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\"" + }, + "containedInherit": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"inherit\"" + }, + "containedPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"primary\"" + }, + "containedSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"secondary\"" + }, + "disableElevation": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "disableElevation={true}" + }, + "focusVisible": { + "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the ButtonBase root element", + "conditions": "the button is keyboard focused" + }, + "disabled": { + "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "disabled={true}" + }, + "colorInherit": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"inherit\"" + }, + "textSizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\" and variant=\"text\"" + }, + "textSizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"medium\" and variant=\"text\"" + }, + "textSizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"large\" and variant=\"text\"" + }, + "outlinedSizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\" and variant=\"outlined\"" + }, + "outlinedSizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"medium\" and variant=\"outlined\"" + }, + "outlinedSizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"large\" and variant=\"outlined\"" + }, + "containedSizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\" and variant=\"contained\"" + }, + "containedSizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\" and variant=\"contained\"" + }, + "containedSizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"large\" and variant=\"contained\"" + }, + "sizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\"" + }, + "sizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"medium\"" + }, + "sizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"large\"" + }, + "fullWidth": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "fullWidth={true}" + }, + "startIcon": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the startIcon element", + "conditions": "supplied" + }, + "endIcon": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the endIcon element", + "conditions": "supplied" + }, + "iconSizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "supplied and size=\"small\"" + }, + "iconSizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "supplied and size=\"medium\"" + }, + "iconSizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "supplied and size=\"large\"" + }, "loading": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index cad815738b2621..9f272f978516ce 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -1,4 +1,4 @@ -import { ExtendButton, ExtendButtonTypeMap } from '@material-ui/core/Button'; +import { ExtendButton, ExtendButtonTypeMap, ButtonClasses } from '@material-ui/core/Button'; import { OverrideProps } from '@material-ui/core/OverridableComponent'; import { Theme } from '@material-ui/core/styles'; import { SxProps } from '@material-ui/system'; @@ -11,7 +11,7 @@ export type LoadingButtonTypeMap< /** * Override or extend the styles applied to the component. */ - classes?: { + classes?: Partial & { /** Styles applied to the root element. */ root?: string; /** Styles applied to the root element if `loading={true}`. */ diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 6b081f60bab53b..3563c8dc2a2e54 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -25,28 +25,44 @@ const useUtilityClasses = (styleProps) => { return composeClasses(slots, getLoadingButtonUtilityClass, classes); }; -const buttonShouldForwardProp = (prop) => - prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as'; +// TODO use `import { rootShouldForwardProp } from '../styles/experimentalStyled';` once move to core +const rootShouldForwardProp = (prop) => + prop !== 'styleProps' && + prop !== 'theme' && + prop !== 'isRtl' && + prop !== 'sx' && + prop !== 'as' && + prop !== 'classes'; const LoadingButtonRoot = styled( Button, { - shouldForwardProp: buttonShouldForwardProp, + shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes', }, { name: 'MuiLoadingButton', slot: 'Root', - overridesResolver: (props, styles) => ({ - ...styles.root, - ...(styles.startIconLoadingStart && { - [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart, - }), - ...(styles.endIconLoadingEnd && { - [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd, - }), - ...(styles.labelLoadingCenter && { - [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter, - }), - }), + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.root, + ...(styles.startIconLoadingStart && { + [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart, + }), + ...(styles.endIconLoadingEnd && { + [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd, + }), + ...(styles.labelLoadingCenter && { + [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter, + }), + ...styles[styleProps.variant], + ...styles[`${styleProps.variant}${capitalize(styleProps.color)}`], + ...styles[`size${capitalize(styleProps.size)}`], + ...styles[`${styleProps.variant}Size${capitalize(styleProps.size)}`], + ...(styleProps.color === 'inherit' && styles.colorInherit), + ...(styleProps.disableElevation && styles.disableElevation), + ...(styleProps.fullWidth && styles.fullWidth), + }; + }, }, )({ [`& .${loadingButtonClasses.startIconLoadingStart}`]: { @@ -117,7 +133,10 @@ const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) { disabled={disabled || loading} ref={ref} {...other} - classes={classes} + classes={{ + ...props.classes, + ...classes, + }} styleProps={styleProps} > {loading && ( diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js index 18dbb1d0732ad8..d094578277031a 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js @@ -25,18 +25,12 @@ describe('', () => { expect(screen.getByRole('button')).to.have.property('tabIndex', 0); }); - it('can be outlined', () => { - render( - , - ); - const button = screen.getByTestId('root'); + it('prop: classes can be appended to MuiButton', () => { + render(); + const button = screen.getByRole('button'); expect(button).to.have.class('MuiButton-outlined'); - expect(button).not.to.have.class('loading-button-outlined'); + expect(button).to.have.class('loading-button-outlined'); }); describe('prop: loading', () => { From 2e7e26184f41cc39692e65638706ffa86ca3b8c9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 20 May 2021 09:44:09 +0700 Subject: [PATCH 06/14] support classes for MuiButton --- docs/pages/api-docs/loading-button.json | 37 +++- .../loading-button/loading-button.json | 174 ++++++++++++++++++ .../src/LoadingButton/LoadingButton.d.ts | 4 +- .../src/LoadingButton/LoadingButton.js | 43 +++-- .../src/LoadingButton/LoadingButton.test.js | 14 +- 5 files changed, 243 insertions(+), 29 deletions(-) diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json index c2bd158a5e4b47..33de989be05841 100644 --- a/docs/pages/api-docs/loading-button.json +++ b/docs/pages/api-docs/loading-button.json @@ -21,6 +21,41 @@ "styles": { "classes": [ "root", + "label", + "text", + "textInherit", + "textPrimary", + "textSecondary", + "outlined", + "outlinedInherit", + "outlinedPrimary", + "outlinedSecondary", + "contained", + "containedInherit", + "containedPrimary", + "containedSecondary", + "disableElevation", + "focusVisible", + "disabled", + "colorInherit", + "textSizeSmall", + "textSizeMedium", + "textSizeLarge", + "outlinedSizeSmall", + "outlinedSizeMedium", + "outlinedSizeLarge", + "containedSizeSmall", + "containedSizeMedium", + "containedSizeLarge", + "sizeSmall", + "sizeMedium", + "sizeLarge", + "fullWidth", + "startIcon", + "endIcon", + "iconSizeSmall", + "iconSizeMedium", + "iconSizeLarge", "loading", "loadingIndicator", "loadingIndicatorCenter", @@ -30,7 +65,7 @@ "startIconLoadingStart", "labelLoadingCenter" ], - "globalClasses": {}, + "globalClasses": { "focusVisible": "Mui-focusVisible", "disabled": "Mui-disabled" }, "name": "MuiLoadingButton" }, "spread": true, diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index 7fe90cdb83b4f9..3a903a09cd5806 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -11,6 +11,180 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, + "label": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the span element that wraps the children" + }, + "text": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\"" + }, + "textInherit": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"inherit\"" + }, + "textPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"primary\"" + }, + "textSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"secondary\"" + }, + "outlined": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\"" + }, + "outlinedInherit": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"inherit\"" + }, + "outlinedPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"primary\"" + }, + "outlinedSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"secondary\"" + }, + "contained": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\"" + }, + "containedInherit": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"inherit\"" + }, + "containedPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"primary\"" + }, + "containedSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"secondary\"" + }, + "disableElevation": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "disableElevation={true}" + }, + "focusVisible": { + "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the ButtonBase root element", + "conditions": "the button is keyboard focused" + }, + "disabled": { + "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "disabled={true}" + }, + "colorInherit": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"inherit\"" + }, + "textSizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\" and variant=\"text\"" + }, + "textSizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"medium\" and variant=\"text\"" + }, + "textSizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"large\" and variant=\"text\"" + }, + "outlinedSizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\" and variant=\"outlined\"" + }, + "outlinedSizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"medium\" and variant=\"outlined\"" + }, + "outlinedSizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"large\" and variant=\"outlined\"" + }, + "containedSizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\" and variant=\"contained\"" + }, + "containedSizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\" and variant=\"contained\"" + }, + "containedSizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"large\" and variant=\"contained\"" + }, + "sizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"small\"" + }, + "sizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"medium\"" + }, + "sizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"large\"" + }, + "fullWidth": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "fullWidth={true}" + }, + "startIcon": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the startIcon element", + "conditions": "supplied" + }, + "endIcon": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the endIcon element", + "conditions": "supplied" + }, + "iconSizeSmall": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "supplied and size=\"small\"" + }, + "iconSizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "supplied and size=\"medium\"" + }, + "iconSizeLarge": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "supplied and size=\"large\"" + }, "loading": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index cad815738b2621..9f272f978516ce 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -1,4 +1,4 @@ -import { ExtendButton, ExtendButtonTypeMap } from '@material-ui/core/Button'; +import { ExtendButton, ExtendButtonTypeMap, ButtonClasses } from '@material-ui/core/Button'; import { OverrideProps } from '@material-ui/core/OverridableComponent'; import { Theme } from '@material-ui/core/styles'; import { SxProps } from '@material-ui/system'; @@ -11,7 +11,7 @@ export type LoadingButtonTypeMap< /** * Override or extend the styles applied to the component. */ - classes?: { + classes?: Partial & { /** Styles applied to the root element. */ root?: string; /** Styles applied to the root element if `loading={true}`. */ diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 6b081f60bab53b..42b0bb43f7b212 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -25,28 +25,36 @@ const useUtilityClasses = (styleProps) => { return composeClasses(slots, getLoadingButtonUtilityClass, classes); }; -const buttonShouldForwardProp = (prop) => - prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as'; +// TODO use `import { rootShouldForwardProp } from '../styles/experimentalStyled';` once move to core +const rootShouldForwardProp = (prop) => + prop !== 'styleProps' && + prop !== 'theme' && + prop !== 'isRtl' && + prop !== 'sx' && + prop !== 'as' && + prop !== 'classes'; const LoadingButtonRoot = styled( Button, { - shouldForwardProp: buttonShouldForwardProp, + shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes', }, { name: 'MuiLoadingButton', slot: 'Root', - overridesResolver: (props, styles) => ({ - ...styles.root, - ...(styles.startIconLoadingStart && { - [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart, - }), - ...(styles.endIconLoadingEnd && { - [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd, - }), - ...(styles.labelLoadingCenter && { - [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter, - }), - }), + overridesResolver: (props, styles) => { + return { + ...styles.root, + ...(styles.startIconLoadingStart && { + [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart, + }), + ...(styles.endIconLoadingEnd && { + [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd, + }), + ...(styles.labelLoadingCenter && { + [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter, + }), + }; + }, }, )({ [`& .${loadingButtonClasses.startIconLoadingStart}`]: { @@ -117,7 +125,10 @@ const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) { disabled={disabled || loading} ref={ref} {...other} - classes={classes} + classes={{ + ...props.classes, + ...classes, + }} styleProps={styleProps} > {loading && ( diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js index 18dbb1d0732ad8..d094578277031a 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js @@ -25,18 +25,12 @@ describe('', () => { expect(screen.getByRole('button')).to.have.property('tabIndex', 0); }); - it('can be outlined', () => { - render( - , - ); - const button = screen.getByTestId('root'); + it('prop: classes can be appended to MuiButton', () => { + render(); + const button = screen.getByRole('button'); expect(button).to.have.class('MuiButton-outlined'); - expect(button).not.to.have.class('loading-button-outlined'); + expect(button).to.have.class('loading-button-outlined'); }); describe('prop: loading', () => { From 664f090741a60b19ec8960eabaef450f5e4873a8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 20 May 2021 10:02:05 +0700 Subject: [PATCH 07/14] follow Button composedClasses --- .../src/LoadingButton/LoadingButton.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index daa4a4814f3f9f..5cba33ffa6964c 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -25,7 +25,12 @@ const useUtilityClasses = (styleProps) => { ], }; - return composeClasses(slots, getLoadingButtonUtilityClass, classes); + const composedClasse = composeClasses(slots, getLoadingButtonUtilityClass, classes); + + return { + ...classes, + ...composedClasse, + }; }; // TODO use `import { rootShouldForwardProp } from '../styles/experimentalStyled';` once move to core @@ -123,15 +128,13 @@ const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) { }; const classes = useUtilityClasses(styleProps); + return ( {loading && ( From adada9a5cb0584a17c772a40265fdcdb882b942b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 20 May 2021 10:08:58 +0700 Subject: [PATCH 08/14] add type test --- .../src/LoadingButton/LoadingButton.js | 2 +- .../src/LoadingButton/LoadingButton.spec.tsx | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 packages/material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 5cba33ffa6964c..9a03786050c962 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -28,7 +28,7 @@ const useUtilityClasses = (styleProps) => { const composedClasse = composeClasses(slots, getLoadingButtonUtilityClass, classes); return { - ...classes, + ...classes, // forward the outlined, color, etc. classes to Button ...composedClasse, }; }; diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx b/packages/material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx new file mode 100644 index 00000000000000..06f6a00bea4fbd --- /dev/null +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import LoadingButton from './LoadingButton'; + +function ClassesTest() { + return ( + + Button + + ); +} From cb57a4b566afb18f1d3690a10b177ca75104c531 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 20 May 2021 10:21:20 +0700 Subject: [PATCH 09/14] fix import to global --- .../material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx b/packages/material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx index 06f6a00bea4fbd..172b7e471a1fac 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import LoadingButton from './LoadingButton'; +import LoadingButton from '@material-ui/lab/LoadingButton'; function ClassesTest() { return ( From b4a1e8d1b87f7cc922589e90f8bbe87ff6edeea7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 20 May 2021 11:45:11 +0200 Subject: [PATCH 10/14] Update packages/material-ui-lab/src/LoadingButton/LoadingButton.js --- packages/material-ui-lab/src/LoadingButton/LoadingButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 9a03786050c962..f9e77800088a9c 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -25,7 +25,7 @@ const useUtilityClasses = (styleProps) => { ], }; - const composedClasse = composeClasses(slots, getLoadingButtonUtilityClass, classes); + const composedClasses = composeClasses(slots, getLoadingButtonUtilityClass, classes); return { ...classes, // forward the outlined, color, etc. classes to Button From 4086fc5fd9188ef0ae6b4566ec4158cd42b821ff Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 20 May 2021 11:45:16 +0200 Subject: [PATCH 11/14] Update packages/material-ui-lab/src/LoadingButton/LoadingButton.js --- packages/material-ui-lab/src/LoadingButton/LoadingButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index f9e77800088a9c..f08665d006a2fa 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -29,7 +29,7 @@ const useUtilityClasses = (styleProps) => { return { ...classes, // forward the outlined, color, etc. classes to Button - ...composedClasse, + ...composedClasses, }; }; From dbf63e2fe783cee41f0f8c08ec34c14242c5a261 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 20 May 2021 11:45:21 +0200 Subject: [PATCH 12/14] Update packages/material-ui-lab/src/LoadingButton/LoadingButton.js --- packages/material-ui-lab/src/LoadingButton/LoadingButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index f08665d006a2fa..028df5b0733225 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -41,6 +41,7 @@ const rootShouldForwardProp = (prop) => prop !== 'sx' && prop !== 'as' && prop !== 'classes'; + const LoadingButtonRoot = styled( Button, { From 575c75c223d08dec1ff55fc845dbc4359e930921 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 21 May 2021 10:39:51 +0700 Subject: [PATCH 13/14] update styled args --- .../src/LoadingButton/LoadingButton.js | 65 ++++++++----------- 1 file changed, 28 insertions(+), 37 deletions(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 9a03786050c962..66d9f8b0deb94c 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -41,30 +41,25 @@ const rootShouldForwardProp = (prop) => prop !== 'sx' && prop !== 'as' && prop !== 'classes'; -const LoadingButtonRoot = styled( - Button, - { - shouldForwardProp: (prop) => rootShouldForwardProp(prop) || 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, + }), + ...(styles.labelLoadingCenter && { + [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter, + }), + }; }, - { - name: 'MuiLoadingButton', - slot: 'Root', - overridesResolver: (props, styles) => { - return { - ...styles.root, - ...(styles.startIconLoadingStart && { - [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart, - }), - ...(styles.endIconLoadingEnd && { - [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd, - }), - ...(styles.labelLoadingCenter && { - [`& .${loadingButtonClasses.labelLoadingCenter}`]: styles.labelLoadingCenter, - }), - }; - }, - }, -)({ +})({ [`& .${loadingButtonClasses.startIconLoadingStart}`]: { visibility: 'hidden', }, @@ -76,21 +71,17 @@ const LoadingButtonRoot = styled( }, }); -const LoadingButtonLoadingIndicator = styled( - 'div', - {}, - { - name: 'MuiLoadingButton', - slot: 'LoadingIndicator', - overridesResolver: (props, styles) => { - const { styleProps } = props; - return { - ...styles.loadingIndicator, - ...styles[`loadingIndicator${capitalize(styleProps.loadingPosition)}`], - }; - }, +const LoadingButtonLoadingIndicator = styled('div', { + name: 'MuiLoadingButton', + slot: 'LoadingIndicator', + overridesResolver: (props, styles) => { + const { styleProps } = props; + return { + ...styles.loadingIndicator, + ...styles[`loadingIndicator${capitalize(styleProps.loadingPosition)}`], + }; }, -)(({ styleProps }) => ({ +})(({ styleProps }) => ({ position: 'absolute', visibility: 'visible', display: 'flex', From a8e961c436013d6a3f647a0e1c657e1a703fcf6e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 21 May 2021 14:40:51 +0700 Subject: [PATCH 14/14] run prettier --- .../src/LoadingButton/LoadingButton.d.ts | 98 +++++++++---------- 1 file changed, 48 insertions(+), 50 deletions(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index 9f272f978516ce..8119a438484ad0 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -3,56 +3,54 @@ import { OverrideProps } from '@material-ui/core/OverridableComponent'; import { Theme } from '@material-ui/core/styles'; import { SxProps } from '@material-ui/system'; -export type LoadingButtonTypeMap< - P = {}, - D extends React.ElementType = 'button' -> = ExtendButtonTypeMap<{ - props: P & { - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial & { - /** Styles applied to the root element. */ - root?: 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; - /** Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */ - labelLoadingCenter?: string; +export type LoadingButtonTypeMap

= + ExtendButtonTypeMap<{ + props: P & { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial & { + /** Styles applied to the root element. */ + root?: 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; + /** Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */ + labelLoadingCenter?: string; + }; + /** + * If `true`, the loading indicator is shown. + * @default false + */ + loading?: boolean; + /** + * Element placed before the children if the button is in loading state. + * @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'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; }; - /** - * If `true`, the loading indicator is shown. - * @default false - */ - loading?: boolean; - /** - * Element placed before the children if the button is in loading state. - * @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'; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: D; -}>; + defaultComponent: D; + }>; /** * @@ -69,7 +67,7 @@ declare const LoadingButton: ExtendButton; export type LoadingButtonProps< D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'], - P = {} + P = {}, > = OverrideProps, D>; export type LoadingButtonClassKey = keyof NonNullable;