opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 16:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

DeleteButton: Button with icon only was not centered correctly. (#21432)

Browse Source 
* Refactoring to get the correct spacing between the first icon and button border.

* Should not be smaller then 8px to the left.

* Removed unused dependency.

* Updated snapshot for LinkButton.
This commit is contained in:
Marcus Andersson
2020-01-12 19:55:10 +01:00
committed by Torkel Ödegaard
parent 35679d4689
commit b0515f46cc
5 changed files with 76 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -2,7 +2,6 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, useContext } from 'r
import { ThemeContext } from '../../themes';
import { getButtonStyles } from './styles';
import { ButtonContent } from './ButtonContent';
import cx from 'classnames';
import { ButtonSize, ButtonStyles, ButtonVariant } from './types';
type CommonProps = {
@ -31,11 +30,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
theme,
size: size || 'md',
variant: variant || 'primary',
textAndIcon: !!(children && icon),
});
const buttonClassName = cx(styles.button, icon && styles.buttonWithIcon, icon && !children && styles.iconButton);
return (
<button className={buttonClassName} {...buttonProps} ref={ref}>
<button className={styles.button} {...buttonProps} ref={ref}>
<ButtonContent icon={icon}>{children}</ButtonContent>
</button>
);
@ -59,11 +58,11 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>((
theme,
size: size || 'md',
variant: variant || 'primary',
textAndIcon: !!(children && icon),
});
const buttonClassName = cx(styles.button, icon && styles.buttonWithIcon, icon && !children && styles.iconButton);
return (
<a className={buttonClassName} {...anchorProps} ref={ref}>
<a className={styles.button} {...anchorProps} ref={ref}>
<ButtonContent icon={icon}>{children}</ButtonContent>
</a>
);