@astral/ui 4.37.1 → 4.37.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/Button.js +2 -1
- package/components/Button/constants.d.ts +1 -0
- package/components/Button/constants.js +1 -0
- package/components/theme/components/MuiButton.js +23 -9
- package/node/components/Button/Button.js +2 -1
- package/node/components/Button/constants.d.ts +1 -0
- package/node/components/Button/constants.js +1 -0
- package/node/components/theme/components/MuiButton.js +23 -9
- package/package.json +1 -1
|
@@ -10,9 +10,10 @@ const UnwrappedButton = (props, ref) => {
|
|
|
10
10
|
const { variant = ButtonVariants.Contained, color = variant === ButtonVariants.Text
|
|
11
11
|
? ButtonColors.Grey
|
|
12
12
|
: ButtonColors.Primary, loading, disabled, children, className, selected, ...restProps } = props;
|
|
13
|
-
return (_jsxs(StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled, selected: selected, ...restProps, className: classNames(className, buttonClassnames.root, {
|
|
13
|
+
return (_jsxs(StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: classNames(className, buttonClassnames.root, {
|
|
14
14
|
[buttonClassnames.loading]: loading,
|
|
15
15
|
[buttonClassnames.selected]: selected,
|
|
16
|
+
[buttonClassnames.disabled]: disabled,
|
|
16
17
|
}), "aria-disabled": loading, children: [loading && (_jsx(StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
|
|
17
18
|
};
|
|
18
19
|
export const Button = forwardRefWithGeneric(UnwrappedButton);
|
|
@@ -441,6 +441,16 @@ export const MuiButton = {
|
|
|
441
441
|
selected,
|
|
442
442
|
disabled,
|
|
443
443
|
}),
|
|
444
|
+
[`&.${buttonClasses.disabled}`]: {
|
|
445
|
+
color: theme.palette.grey['500'],
|
|
446
|
+
backgroundColor: getButtonDisabledBackgroundColor({
|
|
447
|
+
theme,
|
|
448
|
+
variant,
|
|
449
|
+
}),
|
|
450
|
+
pointerEvents: 'none',
|
|
451
|
+
cursor: 'unset',
|
|
452
|
+
border: 'unset',
|
|
453
|
+
},
|
|
444
454
|
[`&.${buttonClassnames.loading}`]: {
|
|
445
455
|
color: 'transparent',
|
|
446
456
|
pointerEvents: 'none',
|
|
@@ -451,18 +461,22 @@ export const MuiButton = {
|
|
|
451
461
|
theme,
|
|
452
462
|
buttonState: ButtonStates.Default,
|
|
453
463
|
}),
|
|
454
|
-
|
|
455
|
-
[`&.${buttonClasses.disabled}`]: {
|
|
456
|
-
color: theme.palette.grey['500'],
|
|
457
|
-
backgroundColor: getButtonDisabledBackgroundColor({
|
|
464
|
+
border: getBorder({
|
|
458
465
|
theme,
|
|
459
466
|
variant,
|
|
467
|
+
color,
|
|
468
|
+
buttonState: ButtonStates.Default,
|
|
469
|
+
selected,
|
|
470
|
+
disabled: false,
|
|
460
471
|
}),
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
472
|
+
[`&.${buttonClassnames.disabled}`]: {
|
|
473
|
+
backgroundColor: getButtonDisabledBackgroundColor({
|
|
474
|
+
theme,
|
|
475
|
+
variant,
|
|
476
|
+
}),
|
|
477
|
+
pointerEvents: 'none',
|
|
478
|
+
cursor: 'unset',
|
|
479
|
+
border: 'unset',
|
|
466
480
|
},
|
|
467
481
|
},
|
|
468
482
|
gap: theme.spacing(2),
|
|
@@ -13,9 +13,10 @@ const UnwrappedButton = (props, ref) => {
|
|
|
13
13
|
const { variant = enums_1.ButtonVariants.Contained, color = variant === enums_1.ButtonVariants.Text
|
|
14
14
|
? enums_1.ButtonColors.Grey
|
|
15
15
|
: enums_1.ButtonColors.Primary, loading, disabled, children, className, selected, ...restProps } = props;
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled, selected: selected, ...restProps, className: (0, classNames_1.classNames)(className, constants_1.buttonClassnames.root, {
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: (0, classNames_1.classNames)(className, constants_1.buttonClassnames.root, {
|
|
17
17
|
[constants_1.buttonClassnames.loading]: loading,
|
|
18
18
|
[constants_1.buttonClassnames.selected]: selected,
|
|
19
|
+
[constants_1.buttonClassnames.disabled]: disabled,
|
|
19
20
|
}), "aria-disabled": loading, children: [loading && ((0, jsx_runtime_1.jsx)(styles_1.StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
|
|
20
21
|
};
|
|
21
22
|
exports.Button = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(UnwrappedButton);
|
|
@@ -8,4 +8,5 @@ exports.buttonClassnames = {
|
|
|
8
8
|
root: (0, createUIKitClassname_1.createUIKitClassname)('button'),
|
|
9
9
|
loading: (0, createUIKitClassname_1.createUIKitClassname)('button_loading'),
|
|
10
10
|
selected: (0, createUIKitClassname_1.createUIKitClassname)('button_selected'),
|
|
11
|
+
disabled: (0, createUIKitClassname_1.createUIKitClassname)('button_disabled'),
|
|
11
12
|
};
|
|
@@ -450,6 +450,16 @@ exports.MuiButton = {
|
|
|
450
450
|
selected,
|
|
451
451
|
disabled,
|
|
452
452
|
}),
|
|
453
|
+
[`&.${Button_1.buttonClasses.disabled}`]: {
|
|
454
|
+
color: theme.palette.grey['500'],
|
|
455
|
+
backgroundColor: (0, exports.getButtonDisabledBackgroundColor)({
|
|
456
|
+
theme,
|
|
457
|
+
variant,
|
|
458
|
+
}),
|
|
459
|
+
pointerEvents: 'none',
|
|
460
|
+
cursor: 'unset',
|
|
461
|
+
border: 'unset',
|
|
462
|
+
},
|
|
453
463
|
[`&.${Button_2.buttonClassnames.loading}`]: {
|
|
454
464
|
color: 'transparent',
|
|
455
465
|
pointerEvents: 'none',
|
|
@@ -460,18 +470,22 @@ exports.MuiButton = {
|
|
|
460
470
|
theme,
|
|
461
471
|
buttonState: Button_2.ButtonStates.Default,
|
|
462
472
|
}),
|
|
463
|
-
|
|
464
|
-
[`&.${Button_1.buttonClasses.disabled}`]: {
|
|
465
|
-
color: theme.palette.grey['500'],
|
|
466
|
-
backgroundColor: (0, exports.getButtonDisabledBackgroundColor)({
|
|
473
|
+
border: getBorder({
|
|
467
474
|
theme,
|
|
468
475
|
variant,
|
|
476
|
+
color,
|
|
477
|
+
buttonState: Button_2.ButtonStates.Default,
|
|
478
|
+
selected,
|
|
479
|
+
disabled: false,
|
|
469
480
|
}),
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
481
|
+
[`&.${Button_2.buttonClassnames.disabled}`]: {
|
|
482
|
+
backgroundColor: (0, exports.getButtonDisabledBackgroundColor)({
|
|
483
|
+
theme,
|
|
484
|
+
variant,
|
|
485
|
+
}),
|
|
486
|
+
pointerEvents: 'none',
|
|
487
|
+
cursor: 'unset',
|
|
488
|
+
border: 'unset',
|
|
475
489
|
},
|
|
476
490
|
},
|
|
477
491
|
gap: theme.spacing(2),
|