Themes: Unify secondary button and ToolbarButton (#68250)

* Themes: Unify secondary button and ToolbarButton

* Update

* Update light theme

* fix test

* fix toolbar button border

* fix disabled outline button style

* Use transparent color instead of dynamic computed color for hover bg for text/outline versions. this is what figma components do
This commit is contained in:
Torkel Ödegaard
2023-05-22 14:55:16 +02:00
committed by GitHub
parent 2f6d538044
commit d4df5e0519
4 changed files with 47 additions and 28 deletions

View File

@ -1,7 +1,7 @@
import { css, CSSObject, cx } from '@emotion/css';
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
import { colorManipulator, GrafanaTheme2, ThemeRichColor } from '@grafana/data';
import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
import { useTheme2 } from '../../themes';
import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
@ -216,18 +216,30 @@ export const getButtonStyles = (props: StyleProps) => {
};
function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fill: ButtonFill): CSSObject {
let outlineBorderColor = color.border;
let borderColor = 'transparent';
let hoverBorderColor = 'transparent';
// Secondary button has some special rules as we lack theem color token to
// specify border color for normal button vs border color for outline button
if (color.name === 'secondary') {
borderColor = color.border;
hoverBorderColor = theme.colors.emphasize(color.border, 0.25);
outlineBorderColor = theme.colors.border.strong;
}
if (fill === 'outline') {
return {
background: 'transparent',
color: color.text,
border: `1px solid ${color.border}`,
border: `1px solid ${outlineBorderColor}`,
transition: theme.transitions.create(['background-color', 'border-color', 'color'], {
duration: theme.transitions.duration.short,
}),
'&:hover': {
background: colorManipulator.alpha(color.main, theme.colors.action.hoverOpacity),
borderColor: theme.colors.emphasize(color.border, 0.25),
background: color.transparent,
borderColor: theme.colors.emphasize(outlineBorderColor, 0.25),
color: color.text,
},
};
@ -248,7 +260,7 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
},
'&:hover': {
background: colorManipulator.alpha(color.shade, theme.colors.action.hoverOpacity),
background: color.transparent,
textDecoration: 'none',
},
};
@ -257,7 +269,7 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
return {
background: color.main,
color: color.contrastText,
border: `1px solid transparent`,
border: `1px solid ${borderColor}`,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
duration: theme.transitions.duration.short,
}),
@ -266,6 +278,7 @@ function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fil
background: color.shade,
color: color.contrastText,
boxShadow: theme.shadows.z1,
borderColor: hoverBorderColor,
},
};
}
@ -290,7 +303,7 @@ function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant,
return {
...disabledStyles,
background: 'transparent',
border: `1px solid ${theme.colors.action.disabledText}`,
border: `1px solid ${theme.colors.border.weak}`,
};
}
@ -304,6 +317,7 @@ function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant,
export function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {
switch (variant) {
case 'secondary':
// The seconday button has some special handling as it's outline border is it's default color border
return getButtonVariantStyles(theme, theme.colors.secondary, fill);
case 'destructive':