Skip to content
Snippets Groups Projects
Unverified Commit dbfca6c6 authored by Alexander Polyankin's avatar Alexander Polyankin Committed by GitHub
Browse files

Use variants API (#33333)

parent 149f1992
No related branches found
No related tags found
No related merge requests found
import { getStylesRef, rem } from "@mantine/core";
import type {
ButtonStylesParams,
ContextStylesParams,
MantineTheme,
MantineThemeOverride,
} from "@mantine/core";
......@@ -14,112 +13,113 @@ export const getButtonOverrides = (): MantineThemeOverride["components"] => ({
color: "currentColor",
},
},
styles: (
theme: MantineTheme,
{ compact }: ButtonStylesParams,
{ variant }: ContextStylesParams,
) => {
const styles = getButtonVariantStyles(theme, variant);
styles: (theme: MantineTheme, { compact }: ButtonStylesParams) => {
return {
root: {
height: "auto",
padding: compact ? `${rem(3)} ${rem(7)}` : `${rem(11)} ${rem(15)}`,
fontSize: theme.fontSizes.md,
lineHeight: "1rem",
color: styles.color,
borderColor: styles.borderColor,
"&:disabled": {
color: styles.disabledColor,
borderColor: styles.disabledBorderColor,
backgroundColor: styles.disabledBackgroundColor,
},
"&[data-loading]": {
[`& .${getStylesRef("icon")}`]: {
color: styles.loaderColor,
},
},
"&:hover": {
color: styles.hoverColor,
borderColor: styles.hoverBorderColor,
backgroundColor: styles.hoverBackgroundColor,
},
[`&:has(.${getStylesRef("label")}:empty)`]: {
padding: compact ? `${rem(3)} ${rem(3)}` : `${rem(11)} ${rem(11)}`,
[`.${getStylesRef("icon")}`]: {
marginLeft: 0,
[`.${getStylesRef("leftIcon")}`]: {
marginRight: 0,
},
[`.${getStylesRef("rightIcon")}`]: {
marginLeft: 0,
},
},
},
label: {
ref: getStylesRef("label"),
},
icon: {
ref: getStylesRef("icon"),
},
leftIcon: {
ref: getStylesRef("leftIcon"),
marginRight: theme.spacing.sm,
},
rightIcon: {
ref: getStylesRef("rightIcon"),
marginLeft: theme.spacing.sm,
},
};
},
variants: {
default: theme => ({
root: {
color: theme.colors.text[2],
borderColor: theme.colors.border[0],
backgroundColor: theme.white,
"&:hover": {
color: theme.fn.primaryColor(),
backgroundColor: theme.colors.bg[0],
},
"&:disabled": {
color: theme.colors.text[0],
borderColor: theme.colors.border[0],
backgroundColor: theme.colors.bg[0],
},
"&[data-loading]": {
[`& .${getStylesRef("leftIcon")}`]: {
color: theme.fn.primaryColor(),
},
},
},
}),
filled: theme => ({
root: {
color: theme.white,
borderColor: theme.fn.primaryColor(),
backgroundColor: theme.fn.primaryColor(),
"&:hover": {
borderColor: getHoverColor(theme),
backgroundColor: getHoverColor(theme),
},
"&:disabled": {
color: theme.colors.text[0],
borderColor: theme.colors.border[0],
backgroundColor: theme.colors.bg[0],
},
"&[data-loading]": {
[`& .${getStylesRef("leftIcon")}`]: {
color: theme.colors.brand[1],
},
},
},
}),
outline: theme => ({
root: {
color: theme.fn.primaryColor(),
borderColor: theme.fn.primaryColor(),
"&:hover": {
color: getHoverColor(theme),
borderColor: getHoverColor(theme),
backgroundColor: theme.colors.brand[0],
},
"&:disabled": {
color: theme.colors.text[0],
borderColor: theme.colors.border[0],
backgroundColor: theme.colors.bg[0],
},
},
}),
subtle: theme => ({
root: {
color: theme.fn.primaryColor(),
"&:hover": {
color: getHoverColor(theme),
backgroundColor: "transparent",
},
"&:disabled": {
color: theme.colors.text[0],
borderColor: "transparent",
backgroundColor: "transparent",
},
},
}),
},
},
});
const getButtonVariantStyles = (theme: MantineTheme, variant?: string) => {
const hoverColor = theme.fn.rgba(theme.fn.primaryColor(), 0.88);
switch (variant) {
case "filled":
return {
color: theme.white,
borderColor: theme.fn.primaryColor(),
backgroundColor: theme.fn.primaryColor(),
loaderColor: theme.colors.brand[1],
hoverBorderColor: hoverColor,
hoverBackgroundColor: hoverColor,
disabledColor: theme.colors.text[0],
disabledBorderColor: theme.colors.border[0],
disabledBackgroundColor: theme.colors.bg[0],
};
case "outline":
return {
color: theme.fn.primaryColor(),
borderColor: theme.fn.primaryColor(),
loaderColor: theme.fn.primaryColor(),
hoverColor: hoverColor,
hoverBorderColor: hoverColor,
hoverBackgroundColor: theme.colors.brand[0],
disabledColor: theme.colors.text[0],
disabledBorderColor: theme.colors.border[0],
disabledBackgroundColor: theme.colors.bg[0],
};
case "subtle":
return {
color: theme.fn.primaryColor(),
loaderColor: theme.fn.primaryColor(),
hoverColor: hoverColor,
hoverBackgroundColor: "transparent",
disabledColor: theme.colors.text[0],
disabledBorderColor: "transparent",
disabledBackgroundColor: "transparent",
};
default:
return {
color: theme.colors.text[2],
borderColor: theme.colors.border[0],
backgroundColor: theme.white,
loaderColor: theme.fn.primaryColor(),
hoverColor: theme.fn.primaryColor(),
hoverBackgroundColor: theme.colors.bg[0],
disabledColor: theme.colors.text[0],
disabledBorderColor: theme.colors.border[0],
disabledBackgroundColor: theme.colors.bg[0],
};
}
const getHoverColor = (theme: MantineTheme) => {
return theme.fn.rgba(theme.fn.primaryColor(), 0.88);
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment