grafana/ui: fix button icon styles (#20084)

Fix spacing and margins in case you use icon only button.

packages/grafana-ui/src/components/Button/Button.tsx

@@ -24,8 +24,13 @@ export const Button: React.FunctionComponent<ButtonProps> = props => {
 
   // Default this to 'button', otherwise html defaults to 'submit' which then submits any form it is in.
   buttonProps.type = buttonProps.type || 'button';
-  const styles =
-    stylesProp || getButtonStyles({ theme, size: size || 'md', variant: variant || 'primary', withIcon: !!icon });
+  const styles: ButtonStyles =
+    stylesProp ||
+    getButtonStyles({
+      theme,
+      size: size || 'md',
+      variant: variant || 'primary',
+    });
 
   return (
     <button className={cx(styles.button, className)} {...buttonProps}>
@@ -46,8 +51,13 @@ type LinkButtonProps = CommonProps &
 export const LinkButton: React.FunctionComponent<LinkButtonProps> = props => {
   const theme = useContext(ThemeContext);
   const { size, variant, icon, children, className, styles: stylesProp, ...anchorProps } = props;
-  const styles =
-    stylesProp || getButtonStyles({ theme, size: size || 'md', variant: variant || 'primary', withIcon: !!icon });
+  const styles: ButtonStyles =
+    stylesProp ||
+    getButtonStyles({
+      theme,
+      size: size || 'md',
+      variant: variant || 'primary',
+    });
 
   return (
     <a className={cx(styles.button, className)} {...anchorProps}>

packages/grafana-ui/src/components/Button/ButtonContent.tsx

 import React from 'react';
 import cx from 'classnames';
+import { css } from 'emotion';
+import { stylesFactory } from '../../themes';
+
+const getStyles = stylesFactory(() => ({
+  content: css`
+    white-space: nowrap;
+  `,
+}));
 
 type Props = {
   icon?: string;
-  className: string;
-  iconClassName: string;
+  className?: string;
+  iconClassName?: string;
   children: React.ReactNode;
 };
 export function ButtonContent(props: Props) {
   const { icon, className, iconClassName, children } = props;
+  const styles = getStyles();
   return icon ? (
-    <span className={className}>
+    <span className={cx(styles.content, className)}>
       <i className={cx([icon, iconClassName])} />
+      &nbsp; &nbsp;
       <span>{children}</span>
     </span>
   ) : (
-    <>{children}</>
+    <span className={styles.content}>{children}</span>
   );
 }

packages/grafana-ui/src/components/Button/__snapshots__/Button.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button renders correct html 1`] = `"<button class=\\"css-pdywgc-button\\" type=\\"button\\"><span class=\\"css-1dxly9g-button-icon-wrap\\"><i class=\\"fa fa-plus css-iu6xgj-button-icon\\"></i><span>Click me</span></span></button>"`;
+exports[`Button renders correct html 1`] = `"<button class=\\"css-1ffx2x7-button\\" type=\\"button\\"><span class=\\"css-16tmax3 css-1dxly9g-button-icon-wrap\\"><i class=\\"fa fa-plus\\"></i>&nbsp; &nbsp;<span>Click me</span></span></button>"`;
 
-exports[`LinkButton renders correct html 1`] = `"<a class=\\"css-pdywgc-button\\"><span class=\\"css-1dxly9g-button-icon-wrap\\"><i class=\\"fa fa-plus css-iu6xgj-button-icon\\"></i><span>Click me</span></span></a>"`;
+exports[`LinkButton renders correct html 1`] = `"<a class=\\"css-1ffx2x7-button\\"><span class=\\"css-16tmax3 css-1dxly9g-button-icon-wrap\\"><i class=\\"fa fa-plus\\"></i>&nbsp; &nbsp;<span>Click me</span></span></a>"`;

packages/grafana-ui/src/components/Button/styles.ts

@@ -24,12 +24,11 @@ const buttonVariantStyles = (
   }
 `;
 
-export const getButtonStyles = stylesFactory(({ theme, size, variant, withIcon }: StyleDeps) => {
+export const getButtonStyles = stylesFactory(({ theme, size, variant }: StyleDeps) => {
   const borderRadius = theme.border.radius.sm;
   let padding,
     background,
     fontSize,
-    iconDistance,
     height,
     fontWeight = theme.typography.weight.semibold;
 
@@ -37,14 +36,12 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, withIcon }
     case 'sm':
       padding = `${theme.spacing.xs} ${theme.spacing.sm}`;
       fontSize = theme.typography.size.sm;
-      iconDistance = theme.spacing.xs;
       height = theme.height.sm;
       break;
 
     case 'md':
       padding = `${theme.spacing.sm} ${theme.spacing.md}`;
       fontSize = theme.typography.size.md;
-      iconDistance = theme.spacing.sm;
       height = theme.height.md;
       break;
 
@@ -52,13 +49,11 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, withIcon }
       padding = `${theme.spacing.md} ${theme.spacing.lg}`;
       fontSize = theme.typography.size.lg;
       fontWeight = theme.typography.weight.regular;
-      iconDistance = theme.spacing.sm;
       height = theme.height.lg;
       break;
 
     default:
       padding = `${theme.spacing.sm} ${theme.spacing.md}`;
-      iconDistance = theme.spacing.sm;
       fontSize = theme.typography.size.base;
       height = theme.height.md;
   }
@@ -111,7 +106,6 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, withIcon }
       font-family: ${theme.typography.fontFamily.sansSerif};
       line-height: ${theme.typography.lineHeight.xs};
       padding: ${padding};
-      text-align: ${withIcon ? 'left' : 'center'};
       vertical-align: middle;
       cursor: pointer;
       border: none;
@@ -131,10 +125,5 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, withIcon }
       display: flex;
       align-items: center;
     `,
-    icon: css`
-      label: button-icon;
-      margin-right: ${iconDistance};
-      filter: brightness(100);
-    `,
   };
 });

packages/grafana-ui/src/components/Button/types.ts

@@ -8,11 +8,10 @@ export interface StyleDeps {
   theme: GrafanaTheme;
   size: ButtonSize;
   variant: ButtonVariant;
-  withIcon: boolean;
 }
 
 export interface ButtonStyles {
   button: string;
   iconWrap: string;
-  icon: string;
+  icon?: string;
 }

packages/grafana-ui/src/components/Forms/Button.tsx

@@ -27,7 +27,6 @@ const getPropertiesForSize = (theme: GrafanaTheme, size: ButtonSize) => {
       return {
         padding: `0 ${theme.spacing.sm}`,
         fontSize: theme.typography.size.sm,
-        iconDistance: theme.spacing.xs,
         height: theme.height.sm,
       };
 
@@ -35,7 +34,6 @@ const getPropertiesForSize = (theme: GrafanaTheme, size: ButtonSize) => {
       return {
         padding: `0 ${theme.spacing.md}`,
         fontSize: theme.typography.size.md,
-        iconDistance: theme.spacing.sm,
         height: `${theme.spacing.formButtonHeight}px`,
       };
 
@@ -43,14 +41,12 @@ const getPropertiesForSize = (theme: GrafanaTheme, size: ButtonSize) => {
       return {
         padding: `0 ${theme.spacing.lg}`,
         fontSize: theme.typography.size.lg,
-        iconDistance: theme.spacing.sm,
         height: theme.height.lg,
       };
 
     default:
       return {
         padding: `0 ${theme.spacing.md}`,
-        iconDistance: theme.spacing.sm,
         fontSize: theme.typography.size.base,
         height: theme.height.md,
       };
@@ -98,8 +94,8 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
 
 // Need to do this because of mismatch between variants in standard buttons and here
 type StyleProps = Omit<StyleDeps, 'variant'> & { variant: ButtonVariant };
-export const getButtonStyles = stylesFactory(({ theme, size, variant, withIcon }: StyleProps) => {
-  const { padding, fontSize, iconDistance, height } = getPropertiesForSize(theme, size);
+export const getButtonStyles = stylesFactory(({ theme, size, variant }: StyleProps) => {
+  const { padding, fontSize, height } = getPropertiesForSize(theme, size);
   const { background, borderColor } = getPropertiesForVariant(theme, variant);
 
   return {
@@ -114,7 +110,6 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, withIcon }
         font-family: ${theme.typography.fontFamily.sansSerif};
         line-height: ${theme.typography.lineHeight.sm};
         padding: ${padding};
-        text-align: ${withIcon ? 'left' : 'center'};
         vertical-align: middle;
         cursor: pointer;
         border: 1px solid ${borderColor};
@@ -136,11 +131,6 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, withIcon }
       display: flex;
       align-items: center;
     `,
-    icon: css`
-      label: button-icon;
-      margin-right: ${iconDistance};
-      filter: brightness(100);
-    `,
   };
 });
 
@@ -163,7 +153,6 @@ export const Button = (props: ButtonProps) => {
     theme,
     size: props.size || 'md',
     variant: props.variant || 'primary',
-    withIcon: !!props.icon,
   });
   return <DefaultButton {...props} styles={styles} />;
 };
@@ -175,7 +164,6 @@ export const LinkButton = (props: ButtonLinkProps) => {
     theme,
     size: props.size || 'md',
     variant: props.variant || 'primary',
-    withIcon: !!props.icon,
   });
   return <DefaultLinkButton {...props} styles={styles} />;
 };

packages/grafana-ui/src/components/Forms/getFormStyles.ts

@@ -3,13 +3,20 @@ import { GrafanaTheme } from '@grafana/data';
 import { getLabelStyles } from './Label';
 import { getLegendStyles } from './Legend';
 import { getFieldValidationMessageStyles } from './FieldValidationMessage';
-import { getButtonStyles } from './Button';
+import { getButtonStyles, ButtonVariant } from './Button';
+import { ButtonSize } from '../Button/types';
 
-export const getFormStyles = stylesFactory((theme: GrafanaTheme, options?: any) => {
-  return {
-    ...getLabelStyles(theme),
-    ...getLegendStyles(theme),
-    ...getFieldValidationMessageStyles(theme),
-    ...getButtonStyles({ theme, variant: options.variant, size: options.size, withIcon: options.withIcon }),
-  };
-});
+export const getFormStyles = stylesFactory(
+  (theme: GrafanaTheme, options: { variant: ButtonVariant; size: ButtonSize }) => {
+    return {
+      ...getLabelStyles(theme),
+      ...getLegendStyles(theme),
+      ...getFieldValidationMessageStyles(theme),
+      ...getButtonStyles({
+        theme,
+        variant: options.variant,
+        size: options.size,
+      }),
+    };
+  }
+);