mirror of
https://github.com/grafana/grafana.git
synced 2025-07-29 17:02:20 +08:00
ToolbarButton: New emotion based component to replace all navbar, DashNavButton and scss styles (#30333)
* ToolbarButton: New emotion based component to replace all navbar, DashNavButton and scss styles * Component ready for use * Dam dam dam * Starting big button design update * Tried to use main button component but failed * Minor fix * Updates * Updated * Update packages/grafana-ui/src/components/Button/Button.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Update packages/grafana-ui/src/components/Button/ButtonGroup.tsx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> * Updated to use spacing base * Button updates * Removd unused import * Remove unused import * Use correct theme variable for border-radius Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
This commit is contained in:
Torkel Ödegaard
@ -1,128 +1,13 @@
|
||||
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, useContext } from 'react';
|
||||
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
|
||||
import { css, cx } from 'emotion';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { stylesFactory, ThemeContext } from '../../themes';
|
||||
import { useTheme } from '../../themes';
|
||||
import { IconName } from '../../types/icon';
|
||||
import { getFocusStyle, getPropertiesForButtonSize } from '../Forms/commonStyles';
|
||||
import { getPropertiesForButtonSize } from '../Forms/commonStyles';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { ButtonContent } from './ButtonContent';
|
||||
import { ComponentSize } from '../../types/size';
|
||||
|
||||
const buttonVariantStyles = (from: string, to: string, textColor: string) => css`
|
||||
background: linear-gradient(180deg, ${from} 0%, ${to} 100%);
|
||||
color: ${textColor};
|
||||
&:hover {
|
||||
background: ${from};
|
||||
color: ${textColor};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: ${from};
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const getPropertiesForVariant = (theme: GrafanaTheme, 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,
|
||||
background: buttonVariantStyles(from, to, theme.isLight ? theme.palette.gray25 : theme.palette.gray4),
|
||||
};
|
||||
|
||||
case 'destructive':
|
||||
return {
|
||||
borderColor: theme.palette.redShade,
|
||||
background: buttonVariantStyles(theme.palette.redBase, theme.palette.redShade, theme.palette.white),
|
||||
};
|
||||
|
||||
case 'link':
|
||||
return {
|
||||
borderColor: 'transparent',
|
||||
background: buttonVariantStyles('transparent', 'transparent', theme.colors.linkExternal),
|
||||
variantStyles: css`
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
`,
|
||||
};
|
||||
case 'primary':
|
||||
default:
|
||||
return {
|
||||
borderColor: theme.colors.bgBlue1,
|
||||
background: buttonVariantStyles(theme.colors.bgBlue1, theme.colors.bgBlue2, theme.palette.white),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export interface StyleProps {
|
||||
theme: GrafanaTheme;
|
||||
size: ComponentSize;
|
||||
variant: ButtonVariant;
|
||||
hasIcon: boolean;
|
||||
hasText: boolean;
|
||||
}
|
||||
|
||||
const disabledStyles = css`
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65;
|
||||
box-shadow: none;
|
||||
`;
|
||||
|
||||
export const getButtonStyles = stylesFactory((props: StyleProps) => {
|
||||
const { theme, variant } = props;
|
||||
const { padding, fontSize, height } = getPropertiesForButtonSize(props);
|
||||
const { background, borderColor, variantStyles } = getPropertiesForVariant(theme, variant);
|
||||
|
||||
return {
|
||||
button: cx(
|
||||
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: ${padding};
|
||||
height: ${height}px;
|
||||
// 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};
|
||||
${background};
|
||||
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
${disabledStyles};
|
||||
}
|
||||
`,
|
||||
getFocusStyle(theme),
|
||||
css`
|
||||
${variantStyles}
|
||||
`
|
||||
),
|
||||
// used for buttons with icon only
|
||||
iconButton: css`
|
||||
padding-right: 0;
|
||||
`,
|
||||
iconWrap: css`
|
||||
label: button-icon-wrap;
|
||||
& + * {
|
||||
margin-left: ${theme.spacing.sm};
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
import { focusCss } from '../../themes/mixins';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
|
||||
export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link';
|
||||
|
||||
@ -131,26 +16,28 @@ type CommonProps = {
|
||||
variant?: ButtonVariant;
|
||||
icon?: IconName;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
fullWidth?: boolean;
|
||||
};
|
||||
|
||||
export type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
|
||||
|
||||
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ variant, icon, children, className, ...otherProps }, ref) => {
|
||||
const theme = useContext(ThemeContext);
|
||||
({ variant = 'primary', size = 'md', icon, fullWidth, children, className, ...otherProps }, ref) => {
|
||||
const theme = useTheme();
|
||||
const styles = getButtonStyles({
|
||||
theme,
|
||||
size: otherProps.size || 'md',
|
||||
variant: variant || 'primary',
|
||||
hasText: children !== undefined,
|
||||
hasIcon: icon !== undefined,
|
||||
size,
|
||||
variant,
|
||||
icon,
|
||||
fullWidth,
|
||||
children,
|
||||
});
|
||||
|
||||
return (
|
||||
<button className={cx(styles.button, className)} {...otherProps} ref={ref}>
|
||||
<ButtonContent icon={icon} size={otherProps.size}>
|
||||
{children}
|
||||
</ButtonContent>
|
||||
{icon && <Icon name={icon} size={size} className={styles.icon} />}
|
||||
{children && <span className={styles.content}>{children}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@ -159,15 +46,17 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
Button.displayName = 'Button';
|
||||
|
||||
type ButtonLinkProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>;
|
||||
|
||||
export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
|
||||
({ variant, icon, children, className, disabled, ...otherProps }, ref) => {
|
||||
const theme = useContext(ThemeContext);
|
||||
({ variant = 'primary', size = 'md', icon, fullWidth, children, className, disabled, ...otherProps }, ref) => {
|
||||
const theme = useTheme();
|
||||
const styles = getButtonStyles({
|
||||
theme,
|
||||
size: otherProps.size || 'md',
|
||||
variant: variant || 'primary',
|
||||
hasText: children !== undefined,
|
||||
hasIcon: icon !== undefined,
|
||||
fullWidth,
|
||||
size,
|
||||
variant,
|
||||
icon,
|
||||
children,
|
||||
});
|
||||
|
||||
const linkButtonStyles =
|
||||
@ -186,11 +75,153 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
|
||||
ref={ref}
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
>
|
||||
<ButtonContent icon={icon} size={otherProps.size}>
|
||||
{children}
|
||||
</ButtonContent>
|
||||
{icon && <Icon name={icon} size={size} className={styles.icon} />}
|
||||
{children && <span className={styles.content}>{children}</span>}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
LinkButton.displayName = 'LinkButton';
|
||||
|
||||
export interface StyleProps {
|
||||
size: ComponentSize;
|
||||
variant: ButtonVariant;
|
||||
children?: React.ReactNode;
|
||||
icon?: IconName;
|
||||
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;
|
||||
|
||||
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;
|
||||
// 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};
|
||||
}
|
||||
`,
|
||||
img: css`
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: ${theme.spacing.sm};
|
||||
margin-left: -${theme.spacing.xs};
|
||||
`,
|
||||
icon: css`
|
||||
margin-left: -${padding / 2}px;
|
||||
margin-right: ${(iconOnly ? -padding : padding) / 2}px;
|
||||
`,
|
||||
content: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
height: 100%;
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
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};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: ${from};
|
||||
outline: none;
|
||||
${focusCss(theme)};
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
function getPropertiesForVariant(theme: GrafanaTheme, 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
|
||||
),
|
||||
};
|
||||
|
||||
case 'destructive':
|
||||
return {
|
||||
borderColor: theme.palette.redShade,
|
||||
variantStyles: getButtonVariantStyles(
|
||||
theme.palette.redBase,
|
||||
theme.palette.redShade,
|
||||
theme.palette.white,
|
||||
theme
|
||||
),
|
||||
};
|
||||
|
||||
case 'link':
|
||||
return {
|
||||
borderColor: 'transparent',
|
||||
variantStyles: css`
|
||||
background: transparent;
|
||||
color: ${theme.colors.linkExternal};
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
case 'primary':
|
||||
default:
|
||||
return {
|
||||
borderColor: theme.colors.bgBlue1,
|
||||
variantStyles: getButtonVariantStyles(theme.colors.bgBlue1, theme.colors.bgBlue2, theme.palette.white, theme),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user