Skip to content

Commit 944dc09

Browse files
siriwatknpsiriwatknp
authored
[Button] Migrate LoadingButton to emotion (#26370)
1 parent faadfef commit 944dc09

File tree

9 files changed

+403
-93
lines changed

9 files changed

+403
-93
lines changed

‎docs/pages/api-docs/loading-button.json

+39-3
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,48 @@
1414
"description": "'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'center'"
1515
},
1616
"default": "'center'"
17-
}
17+
},
18+
"sx": { "type": { "name": "object" } }
1819
},
1920
"name": "LoadingButton",
2021
"styles": {
2122
"classes": [
2223
"root",
24+
"label",
25+
"text",
26+
"textInherit",
27+
"textPrimary",
28+
"textSecondary",
29+
"outlined",
30+
"outlinedInherit",
31+
"outlinedPrimary",
32+
"outlinedSecondary",
33+
"contained",
34+
"containedInherit",
35+
"containedPrimary",
36+
"containedSecondary",
37+
"disableElevation",
38+
"focusVisible",
39+
"disabled",
40+
"colorInherit",
41+
"textSizeSmall",
42+
"textSizeMedium",
43+
"textSizeLarge",
44+
"outlinedSizeSmall",
45+
"outlinedSizeMedium",
46+
"outlinedSizeLarge",
47+
"containedSizeSmall",
48+
"containedSizeMedium",
49+
"containedSizeLarge",
50+
"sizeSmall",
51+
"sizeMedium",
52+
"sizeLarge",
53+
"fullWidth",
54+
"startIcon",
55+
"endIcon",
56+
"iconSizeSmall",
57+
"iconSizeMedium",
58+
"iconSizeLarge",
2359
"loading",
2460
"loadingIndicator",
2561
"loadingIndicatorCenter",
@@ -29,14 +65,14 @@
2965
"startIconLoadingStart",
3066
"labelLoadingCenter"
3167
],
32-
"globalClasses": {},
68+
"globalClasses": { "focusVisible": "Mui-focusVisible", "disabled": "Mui-disabled" },
3369
"name": "MuiLoadingButton"
3470
},
3571
"spread": true,
3672
"forwardsRefTo": "HTMLButtonElement",
3773
"filename": "/packages/material-ui-lab/src/LoadingButton/LoadingButton.js",
3874
"inheritance": { "component": "Button", "pathname": "/api/button/" },
3975
"demos": "<ul><li><a href=\"/components/buttons/\">Buttons</a></li></ul>",
40-
"styledComponent": false,
76+
"styledComponent": true,
4177
"cssComponent": false
4278
}

‎docs/translations/api-docs/loading-button/loading-button.json

+176-1
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,185 @@
66
"disabled": "If <code>true</code>, the component is disabled.",
77
"loading": "If <code>true</code>, the loading indicator is shown.",
88
"loadingIndicator": "Element placed before the children if the button is in loading state.",
9-
"loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button."
9+
"loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button.",
10+
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
1011
},
1112
"classDescriptions": {
1213
"root": { "description": "Styles applied to the root element." },
14+
"label": {
15+
"description": "Styles applied to {{nodeName}}.",
16+
"nodeName": "the span element that wraps the children"
17+
},
18+
"text": {
19+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
20+
"nodeName": "the root element",
21+
"conditions": "<code>variant=\"text\"</code>"
22+
},
23+
"textInherit": {
24+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
25+
"nodeName": "the root element",
26+
"conditions": "<code>variant=\"text\"</code> and <code>color=\"inherit\"</code>"
27+
},
28+
"textPrimary": {
29+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
30+
"nodeName": "the root element",
31+
"conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>"
32+
},
33+
"textSecondary": {
34+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
35+
"nodeName": "the root element",
36+
"conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>"
37+
},
38+
"outlined": {
39+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
40+
"nodeName": "the root element",
41+
"conditions": "<code>variant=\"outlined\"</code>"
42+
},
43+
"outlinedInherit": {
44+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
45+
"nodeName": "the root element",
46+
"conditions": "<code>variant=\"outlined\"</code> and <code>color=\"inherit\"</code>"
47+
},
48+
"outlinedPrimary": {
49+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
50+
"nodeName": "the root element",
51+
"conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>"
52+
},
53+
"outlinedSecondary": {
54+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
55+
"nodeName": "the root element",
56+
"conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>"
57+
},
58+
"contained": {
59+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
60+
"nodeName": "the root element",
61+
"conditions": "<code>variant=\"contained\"</code>"
62+
},
63+
"containedInherit": {
64+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
65+
"nodeName": "the root element",
66+
"conditions": "<code>variant=\"contained\"</code> and <code>color=\"inherit\"</code>"
67+
},
68+
"containedPrimary": {
69+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
70+
"nodeName": "the root element",
71+
"conditions": "<code>variant=\"contained\"</code> and <code>color=\"primary\"</code>"
72+
},
73+
"containedSecondary": {
74+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
75+
"nodeName": "the root element",
76+
"conditions": "<code>variant=\"contained\"</code> and <code>color=\"secondary\"</code>"
77+
},
78+
"disableElevation": {
79+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
80+
"nodeName": "the root element",
81+
"conditions": "<code>disableElevation={true}</code>"
82+
},
83+
"focusVisible": {
84+
"description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.",
85+
"nodeName": "the ButtonBase root element",
86+
"conditions": "the button is keyboard focused"
87+
},
88+
"disabled": {
89+
"description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.",
90+
"nodeName": "the root element",
91+
"conditions": "<code>disabled={true}</code>"
92+
},
93+
"colorInherit": {
94+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
95+
"nodeName": "the root element",
96+
"conditions": "<code>color=\"inherit\"</code>"
97+
},
98+
"textSizeSmall": {
99+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
100+
"nodeName": "the root element",
101+
"conditions": "<code>size=\"small\"</code> and <code>variant=\"text\"</code>"
102+
},
103+
"textSizeMedium": {
104+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
105+
"nodeName": "the root element",
106+
"conditions": "<code>size=\"medium\"</code> and <code>variant=\"text\"</code>"
107+
},
108+
"textSizeLarge": {
109+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
110+
"nodeName": "the root element",
111+
"conditions": "<code>size=\"large\"</code> and <code>variant=\"text\"</code>"
112+
},
113+
"outlinedSizeSmall": {
114+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
115+
"nodeName": "the root element",
116+
"conditions": "<code>size=\"small\"</code> and <code>variant=\"outlined\"</code>"
117+
},
118+
"outlinedSizeMedium": {
119+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
120+
"nodeName": "the root element",
121+
"conditions": "<code>size=\"medium\"</code> and <code>variant=\"outlined\"</code>"
122+
},
123+
"outlinedSizeLarge": {
124+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
125+
"nodeName": "the root element",
126+
"conditions": "<code>size=\"large\"</code> and <code>variant=\"outlined\"</code>"
127+
},
128+
"containedSizeSmall": {
129+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
130+
"nodeName": "the root element",
131+
"conditions": "<code>size=\"small\"</code> and <code>variant=\"contained\"</code>"
132+
},
133+
"containedSizeMedium": {
134+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
135+
"nodeName": "the root element",
136+
"conditions": "<code>size=\"small\"</code> and <code>variant=\"contained\"</code>"
137+
},
138+
"containedSizeLarge": {
139+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
140+
"nodeName": "the root element",
141+
"conditions": "<code>size=\"large\"</code> and <code>variant=\"contained\"</code>"
142+
},
143+
"sizeSmall": {
144+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
145+
"nodeName": "the root element",
146+
"conditions": "<code>size=\"small\"</code>"
147+
},
148+
"sizeMedium": {
149+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
150+
"nodeName": "the root element",
151+
"conditions": "<code>size=\"medium\"</code>"
152+
},
153+
"sizeLarge": {
154+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
155+
"nodeName": "the root element",
156+
"conditions": "<code>size=\"large\"</code>"
157+
},
158+
"fullWidth": {
159+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
160+
"nodeName": "the root element",
161+
"conditions": "<code>fullWidth={true}</code>"
162+
},
163+
"startIcon": {
164+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
165+
"nodeName": "the startIcon element",
166+
"conditions": "supplied"
167+
},
168+
"endIcon": {
169+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
170+
"nodeName": "the endIcon element",
171+
"conditions": "supplied"
172+
},
173+
"iconSizeSmall": {
174+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
175+
"nodeName": "the icon element",
176+
"conditions": "supplied and <code>size=\"small\"</code>"
177+
},
178+
"iconSizeMedium": {
179+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
180+
"nodeName": "the icon element",
181+
"conditions": "supplied and <code>size=\"medium\"</code>"
182+
},
183+
"iconSizeLarge": {
184+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
185+
"nodeName": "the icon element",
186+
"conditions": "supplied and <code>size=\"large\"</code>"
187+
},
13188
"loading": {
14189
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
15190
"nodeName": "the root element",

‎packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import { ExtendButton, ExtendButtonTypeMap } from '@material-ui/core/Button';
1+
import { ExtendButton, ExtendButtonTypeMap, ButtonClasses } from '@material-ui/core/Button';
22
import { OverrideProps } from '@material-ui/core/OverridableComponent';
3+
import { Theme } from '@material-ui/core/styles';
4+
import { SxProps } from '@material-ui/system';
35

46
export type LoadingButtonTypeMap<P = {}, D extends React.ElementType = 'button'> =
57
ExtendButtonTypeMap<{
68
props: P & {
79
/**
810
* Override or extend the styles applied to the component.
911
*/
10-
classes?: {
12+
classes?: Partial<ButtonClasses> & {
1113
/** Styles applied to the root element. */
1214
root?: string;
1315
/** Styles applied to the root element if `loading={true}`. */
@@ -42,6 +44,10 @@ export type LoadingButtonTypeMap<P = {}, D extends React.ElementType = 'button'>
4244
* @default 'center'
4345
*/
4446
loadingPosition?: 'start' | 'end' | 'center';
47+
/**
48+
* The system prop that allows defining system overrides as well as additional CSS styles.
49+
*/
50+
sx?: SxProps<Theme>;
4551
};
4652
defaultComponent: D;
4753
}>;

0 commit comments

Comments
 (0)