Buttons: Refactor & use new theme (#32767)

* WIP button styles refactoring

* Starting to work

* Tweak form disabled color

* Emotion performance tests

* More benchmarks

* added classnames prop

* Button class names refactor test

* revert to old style generation

* Wrapping up

* Updates

* Updated tests
This commit is contained in:
Torkel Ödegaard
2021-04-08 13:00:58 +02:00
committed by GitHub
parent 33a4cfde51
commit 2f3ef69b30
20 changed files with 367 additions and 170 deletions

View File

@ -1,15 +1,15 @@
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
import { css, cx } from '@emotion/css';
import tinycolor from 'tinycolor2';
import { css, CSSObject, cx } from '@emotion/css';
import { useTheme } from '../../themes';
import { IconName } from '../../types/icon';
import { getPropertiesForButtonSize } from '../Forms/commonStyles';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme, GrafanaThemeV2, ThemePaletteColor } from '@grafana/data';
import { ComponentSize } from '../../types/size';
import { focusCss } from '../../themes/mixins';
import { getFocusStyles } from '../../themes/mixins';
import { Icon } from '../Icon/Icon';
export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link';
export const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive', 'link'];
type CommonProps = {
size?: ComponentSize;
@ -29,9 +29,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
theme,
size,
variant,
icon,
fullWidth,
children,
iconOnly: !children,
});
return (
@ -55,26 +54,13 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
fullWidth,
size,
variant,
icon,
children,
iconOnly: !children,
});
const linkButtonStyles =
disabled &&
cx(
disabledStyles,
css`
pointer-events: none;
`
);
const linkButtonStyles = cx(styles.button, { [styles.disabled]: disabled }, className);
return (
<a
className={cx(styles.button, linkButtonStyles, className)}
{...otherProps}
ref={ref}
tabIndex={disabled ? -1 : 0}
>
<a className={linkButtonStyles} {...otherProps} ref={ref} tabIndex={disabled ? -1 : 0}>
{icon && <Icon name={icon} size={size} className={styles.icon} />}
{children && <span className={styles.content}>{children}</span>}
</a>
@ -87,62 +73,63 @@ LinkButton.displayName = 'LinkButton';
export interface StyleProps {
size: ComponentSize;
variant: ButtonVariant;
children?: React.ReactNode;
icon?: IconName;
iconOnly?: boolean;
theme: GrafanaTheme;
fullWidth?: boolean;
narrow?: boolean;
}
const disabledStyles = css`
cursor: not-allowed;
opacity: 0.65;
box-shadow: none;
`;
export const getButtonStyles = (props: StyleProps) => {
const { theme, variant, size, children, fullWidth } = props;
const { padding, fontSize, height } = getPropertiesForButtonSize(size, theme);
const { borderColor, variantStyles } = getPropertiesForVariant(theme, variant);
const iconOnly = !children;
const { theme, variant, size, iconOnly, fullWidth } = props;
const { height, padding, fontSize } = getPropertiesForButtonSize(size, theme.v2);
const variantStyles = getPropertiesForVariant(theme.v2, variant);
const disabledStyles: CSSObject = {
cursor: 'not-allowed',
opacity: 0.65,
boxShadow: 'none',
background: theme.v2.palette.formComponent.disabledBackground,
border: `1px solid ${theme.v2.palette.formComponent.disabledBackground}`,
color: theme.v2.palette.text.disabled,
pointerEvents: 'none',
'&:hover': {
background: theme.v2.palette.formComponent.disabledBackground,
color: theme.v2.palette.text.disabled,
},
};
return {
button: css`
label: button;
display: inline-flex;
align-items: center;
font-weight: ${theme.typography.weight.semibold};
font-family: ${theme.typography.fontFamily.sansSerif};
font-size: ${fontSize};
padding: 0 ${padding}px;
height: ${height}px;
button: css({
label: 'button',
display: 'inline-flex',
alignItems: 'center',
fontSize: fontSize,
fontWeight: theme.v2.typography.fontWeightMedium,
fontFamily: theme.v2.typography.fontFamily,
padding: theme.v2.spacing(0, padding),
height: theme.v2.spacing(height),
// Deduct border from line-height for perfect vertical centering on windows and linux
line-height: ${height - 2}px;
vertical-align: middle;
cursor: pointer;
border: 1px solid ${borderColor};
border-radius: ${theme.border.radius.sm};
${fullWidth &&
`
flex-grow: 1;
justify-content: center;
`}
${variantStyles}
&[disabled],
&:disabled {
${disabledStyles};
}
`,
lineHeight: `${theme.v2.spacing.gridSize * height - 2}px`,
verticalAlign: 'middle',
cursor: 'pointer',
borderRadius: theme.v2.shape.borderRadius(1),
...(fullWidth && {
flexGrow: 1,
justifyContent: 'center',
}),
...variantStyles,
':disabled': disabledStyles,
'&[disabled]': disabledStyles,
}),
disabled: css(disabledStyles),
img: css`
width: 16px;
height: 16px;
margin-right: ${theme.spacing.sm};
margin-left: -${theme.spacing.xs};
margin: ${theme.v2.spacing(0, 1, 0, 0.5)};
`,
icon: css`
margin-left: -${padding / 2}px;
margin-right: ${(iconOnly ? -padding : padding) / 2}px;
margin: ${theme.v2.spacing(0, (iconOnly ? -padding : padding) / 2, 0, -(padding / 2))};
`,
content: css`
display: flex;
@ -154,73 +141,50 @@ export const getButtonStyles = (props: StyleProps) => {
};
};
function getButtonVariantStyles(from: string, to: string, textColor: string, theme: GrafanaTheme) {
return css`
background: linear-gradient(180deg, ${from} 0%, ${to} 100%);
color: ${textColor};
&:hover {
background: ${from};
color: ${textColor};
}
function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemePaletteColor): CSSObject {
return {
background: color.main,
color: color.contrastText,
boxShadow: theme.shadows.z1,
border: `1px solid transparent`,
&:focus {
background: ${from};
outline: none;
${focusCss(theme)};
}
`;
'&:hover': {
background: theme.palette.getHoverColor(color.main),
color: color.contrastText,
},
'&:focus': {
...getFocusStyles(theme),
},
};
}
export function getPropertiesForVariant(theme: GrafanaTheme, variant: ButtonVariant) {
export function getPropertiesForVariant(theme: GrafanaThemeV2, variant: ButtonVariant) {
switch (variant) {
case 'secondary':
const from = theme.isLight ? theme.palette.gray7 : theme.palette.gray15;
const to = theme.isLight ? tinycolor(from).darken(5).toString() : tinycolor(from).lighten(4).toString();
return {
borderColor: theme.isLight ? theme.palette.gray85 : theme.palette.gray25,
variantStyles: getButtonVariantStyles(
from,
to,
theme.isLight ? theme.palette.gray25 : theme.palette.gray4,
theme
),
};
return getButtonVariantStyles(theme, theme.palette.secondary);
case 'destructive':
return {
borderColor: theme.palette.redShade,
variantStyles: getButtonVariantStyles(
theme.palette.redBase,
theme.palette.redShade,
theme.palette.white,
theme
),
};
return getButtonVariantStyles(theme, theme.palette.error);
case 'link':
return {
borderColor: 'transparent',
variantStyles: css`
background: transparent;
color: ${theme.colors.linkExternal};
background: 'transparent',
color: theme.palette.text.link,
border: '1px solid transparent',
'&:focus': {
outline: 'none',
textDecoration: 'underline',
},
&:focus {
outline: none;
text-decoration: underline;
}
&:hover {
color: ${theme.colors.linkExternal};
text-decoration: underline;
}
`,
'&:hover': {
color: theme.palette.getHoverColor(theme.palette.text.link),
textDecoration: 'underline',
},
};
case 'primary':
default:
return {
borderColor: theme.colors.bgBlue1,
variantStyles: getButtonVariantStyles(theme.colors.bgBlue1, theme.colors.bgBlue2, theme.palette.white, theme),
};
return getButtonVariantStyles(theme, theme.palette.primary);
}
}