opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-30 07:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Buttons: Improves button styles to make them perfectly symmetrical (#40977)

Browse Source 
* Buttons: Improves button styles to make them perfectly symmetrical

* Fixed icon vertical centering
This commit is contained in:
Torkel Ödegaard
2021-10-28 09:31:45 +02:00
committed by GitHub
parent 963544ffe6
commit 6a2dc11545
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,8 +115,8 @@ export const getButtonStyles = (props: StyleProps) => {
const { height, padding, fontSize } = getPropertiesForButtonSize(size, theme); const { height, padding, fontSize } = getPropertiesForButtonSize(size, theme);
const variantStyles = getPropertiesForVariant(theme, variant, fill); const variantStyles = getPropertiesForVariant(theme, variant, fill);
const disabledStyles = getPropertiesForDisabled(theme, variant, fill); const disabledStyles = getPropertiesForDisabled(theme, variant, fill);
const focusStyle = getFocusStyles(theme); const focusStyle = getFocusStyles(theme);
const paddingMinusBorder = theme.spacing.gridSize * padding - 1;
return { return {
button: css({ button: css({
@ -126,7 +126,7 @@ export const getButtonStyles = (props: StyleProps) => {
fontSize: fontSize, fontSize: fontSize,
fontWeight: theme.typography.fontWeightMedium, fontWeight: theme.typography.fontWeightMedium,
fontFamily: theme.typography.fontFamily, fontFamily: theme.typography.fontFamily,
padding: theme.spacing(0, padding), padding: `0 ${paddingMinusBorder}px`,
height: theme.spacing(height), height: theme.spacing(height),
// Deduct border from line-height for perfect vertical centering on windows and linux // Deduct border from line-height for perfect vertical centering on windows and linux
lineHeight: `${theme.spacing.gridSize * height - 2}px`, lineHeight: `${theme.spacing.gridSize * height - 2}px`,
@ -150,10 +150,15 @@ export const getButtonStyles = (props: StyleProps) => {
height: 16px; height: 16px;
margin: ${theme.spacing(0, 1, 0, 0.5)}; margin: ${theme.spacing(0, 1, 0, 0.5)};
`, `,
icon: css` icon: iconOnly
margin-right: ${theme.spacing((iconOnly ? -padding : padding) / 2)}; ? css({
margin-left: ${theme.spacing(-padding / 2)}; // Important not to set margin bottom here as it would override internal icon bottom margin
`, marginRight: theme.spacing(-padding / 2),
marginLeft: theme.spacing(-padding / 2),
})
: css({
marginRight: theme.spacing(padding / 2),
}),
content: css` content: css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;