Components: IconButton (#23510)

* IconButton: New component to share pointer, size & hover style for icon buttons * Progress * IconButton: new component * Think I am done * Updated snapshots * Do not like the black button reverting that, and not the plus-circle changed to plus * fixed test * fixed e2e test * Fixed ts issue
2020-04-11 16:07:18 +02:00
parent afec54d257
commit 6cb7d95916
35 changed files with 351 additions and 197 deletions
@@ -214,6 +214,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
    // TODO: move to background section
    bodyBg: string;
    pageBg: string;
+    pageHeaderBg: string;
    headingColor: string;

    pageHeaderBorder: string;
@@ -1,7 +1,7 @@
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, useContext } from 'react';
 import { css, cx } from 'emotion';
 import tinycolor from 'tinycolor2';
-import { selectThemeVariant, stylesFactory, ThemeContext } from '../../themes';
+import { stylesFactory, ThemeContext } from '../../themes';
 import { IconName } from '../../types/icon';
 import { getFocusStyle, getPropertiesForButtonSize } from '../Forms/commonStyles';
 import { GrafanaTheme } from '@grafana/data';
@@ -25,24 +25,17 @@ const buttonVariantStyles = (from: string, to: string, textColor: string) => css
 const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) => {
  switch (variant) {
    case 'secondary':
-      const from = selectThemeVariant({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type) as string;
-      const to = selectThemeVariant(
-        {
-          light: tinycolor(from)
+      const from = theme.isLight ? theme.colors.gray7 : theme.colors.gray15;
+      const to = theme.isLight
+        ? tinycolor(from)
            .darken(5)
-            .toString(),
-          dark: theme.colors.gray05,
-        },
-        theme.type
-      ) as string;
-
+            .toString()
+        : tinycolor(from)
+            .lighten(4)
+            .toString();
      return {
-        borderColor: selectThemeVariant({ light: theme.colors.gray85, dark: theme.colors.gray25 }, theme.type),
-        background: buttonVariantStyles(
-          from,
-          to,
-          selectThemeVariant({ light: theme.colors.gray25, dark: theme.colors.gray4 }, theme.type) as string
-        ),
+        borderColor: theme.isLight ? theme.colors.gray85 : theme.colors.gray25,
+        background: buttonVariantStyles(from, to, theme.isLight ? theme.colors.gray25 : theme.colors.gray4),
      };

    case 'destructive':
@@ -74,12 +67,13 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
 export interface StyleProps {
  theme: GrafanaTheme;
  size: ComponentSize;
+  icon?: IconName;
  variant: ButtonVariant;
  textAndIcon?: boolean;
 }

-export const getButtonStyles = stylesFactory(({ theme, size, variant }: StyleProps) => {
-  const { padding, fontSize, height } = getPropertiesForButtonSize(theme, size);
+export const getButtonStyles = stylesFactory(({ theme, size, variant, icon }: StyleProps) => {
+  const { padding, fontSize, height } = getPropertiesForButtonSize(theme, size, icon);
  const { background, borderColor, variantStyles } = getPropertiesForVariant(theme, variant);

  return {
@@ -146,6 +140,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
      theme,
      size: otherProps.size || 'md',
      variant: variant || 'primary',
+      icon,
    });

    return (
@@ -168,6 +163,7 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
      theme,
      size: otherProps.size || 'md',
      variant: variant || 'primary',
+      icon,
    });

    return (
@@ -12,7 +12,7 @@ CallToActionCardStories.add('default', () => {
  const ctaElements: { [key: string]: JSX.Element } = {
    custom: <h1>This is just H1 tag, you can any component as CTA element</h1>,
    button: (
-      <Button size="lg" icon="plus-circle" onClick={action('cta button clicked')}>
+      <Button size="lg" icon="plus" onClick={action('cta button clicked')}>
        Add datasource
      </Button>
    ),
@@ -73,7 +73,7 @@ export const DataLinksEditor: FC<DataLinksEditorProps> = React.memo(
        )}

        {(!value || (value && value.length < (maxLinks || Infinity))) && (
-          <Button variant="secondary" icon="plus-circle" onClick={() => onAdd()}>
+          <Button variant="secondary" icon="plus" onClick={() => onAdd()}>
            Add link
          </Button>
        )}
@@ -57,7 +57,7 @@ describe('Render', () => {
        },
      },
    });
-    const removeButton = wrapper.find('Button').find({ variant: 'destructive' });
+    const removeButton = wrapper.find('Button').at(1);
    removeButton.simulate('click', { preventDefault: () => {} });
    expect(wrapper.find('FormField').exists()).toBeFalsy();
    expect(wrapper.find('SecretFormField').exists()).toBeFalsy();
@@ -76,7 +76,7 @@ const CustomHeaderRow: React.FC<CustomHeaderRowProps> = ({ header, onBlur, onCha
        onChange={e => onChange({ ...header, value: e.target.value })}
        onBlur={onBlur}
      />
-      <Button variant="destructive" size="xs" onClick={_e => onRemove(header.id)}>
+      <Button variant="secondary" size="xs" onClick={_e => onRemove(header.id)}>
        <i className="fa fa-trash" />
      </Button>
    </div>
@@ -203,12 +203,12 @@ export class CustomHeadersSettings extends PureComponent<Props, State> {
        <div className="gf-form">
          <Button
            variant="secondary"
-            size="xs"
+            icon="plus"
            onClick={e => {
              this.onHeaderAdd();
            }}
          >
-            Add Header
+            Add header
          </Button>
        </div>
      </div>
@@ -1,6 +1,7 @@
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { ComponentSize } from '../../types/size';
+import { IconName } from '../../types';

 export const getFocusCss = (theme: GrafanaTheme) => `
  outline: 2px dotted transparent;
@@ -90,34 +91,29 @@ export const inputSizesPixels = (size: string) => {
  }
 };

-export const getPropertiesForButtonSize = (theme: GrafanaTheme, size: ComponentSize) => {
+export const getPropertiesForButtonSize = (theme: GrafanaTheme, size: ComponentSize, icon?: IconName) => {
+  const { spacing, typography, height } = theme;
+
  switch (size) {
    case 'sm':
      return {
-        padding: `0 ${theme.spacing.sm}`,
-        fontSize: theme.typography.size.sm,
-        height: theme.height.sm,
-      };
-
-    case 'md':
-      return {
-        padding: `0 ${theme.spacing.md}`,
-        fontSize: theme.typography.size.md,
-        height: `${theme.spacing.formButtonHeight}px`,
+        padding: `0 ${spacing.sm}`,
+        fontSize: typography.size.sm,
+        height: height.sm,
      };

    case 'lg':
      return {
-        padding: `0 ${theme.spacing.lg}`,
-        fontSize: theme.typography.size.lg,
-        height: theme.height.lg,
+        padding: `0 ${spacing.lg} 0 ${icon ? spacing.md : spacing.lg}`,
+        fontSize: typography.size.lg,
+        height: height.lg,
      };
-
+    case 'md':
    default:
      return {
-        padding: `0 ${theme.spacing.md}`,
-        fontSize: theme.typography.size.base,
-        height: theme.height.md,
+        padding: `0 ${spacing.md} 0 ${icon ? spacing.sm : spacing.md}`,
+        fontSize: typography.size.md,
+        height: height.md,
      };
  }
 };
@@ -4,7 +4,6 @@ import { GrafanaTheme, toPascalCase } from '@grafana/data';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { useTheme } from '../../themes/ThemeContext';
 import { IconName, IconType, IconSize } from '../../types/icon';
-import { ComponentSize } from '../../types/size';
 //@ts-ignore
 import * as DefaultIcon from '@iconscout/react-unicons';
 import * as MonoIcon from './assets';
@@ -36,7 +35,7 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
  ({ size = 'md', type = 'default', name, className, style, ...divElementProps }, ref) => {
    const theme = useTheme();
    const styles = getIconStyles(theme);
-    const svgSize = getSvgSize(size, theme);
+    const svgSize = getSvgSize(size);

    /* Temporary solution to display also font awesome icons */
    const isFontAwesome = name?.includes('fa-');
@@ -72,14 +71,21 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
 Icon.displayName = 'Icon';

 /* Transform string with px to number and add 2 pxs as path in svg is 2px smaller */
-const getSvgSize = (size: ComponentSize | 'xl' | 'xxl', theme: GrafanaTheme) => {
-  let svgSize;
-  if (size === 'xl') {
-    svgSize = Number(theme.typography.heading.h1.slice(0, -2));
-  } else if (size === 'xxl') {
-    svgSize = Number(theme.height.lg.slice(0, -2));
-  } else {
-    svgSize = Number(theme.typography.size[size].slice(0, -2)) + 2;
+export const getSvgSize = (size: IconSize) => {
+  switch (size) {
+    case 'xs':
+      return 12;
+    case 'sm':
+      return 14;
+    case 'md':
+      return 16;
+    case 'lg':
+      return 18;
+    case 'xl':
+      return 28;
+    case 'xxl':
+      return 36;
+    case 'xxxl':
+      return 48;
  }
-  return svgSize;
 };
@@ -0,0 +1,66 @@
+import React from 'react';
+import { css } from 'emotion';
+import { IconButton } from './IconButton';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { useTheme } from '../../themes/ThemeContext';
+import { GrafanaTheme } from '@grafana/data';
+import { IconSize, IconName } from '../../types';
+
+export default {
+  title: 'General/IconButton',
+  component: IconButton,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {},
+  },
+};
+
+export const simple = () => {
+  const theme = useTheme();
+
+  return (
+    <div>
+      {renderScenario('body', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])}
+      {renderScenario('panel', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])}
+      {renderScenario('header', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])}
+    </div>
+  );
+};
+
+function renderScenario(surface: string, theme: GrafanaTheme, sizes: IconSize[], icons: IconName[]) {
+  let bg: string = 'red';
+
+  switch (surface) {
+    case 'body':
+      bg = theme.colors.bodyBg;
+      break;
+    case 'panel':
+      bg = theme.colors.pageBg;
+      break;
+    case 'header': {
+      bg = theme.colors.pageHeaderBg;
+    }
+  }
+
+  return (
+    <div
+      className={css`
+        padding: 30px;
+        background: ${bg};
+        button {
+          margin-right: 8px;
+          margin-left: 8px;
+          margin-bottom: 8px;
+        }
+      `}
+    >
+      {icons.map(icon => {
+        return sizes.map(size => (
+          <span key={icon + size}>
+            <IconButton name={icon} size={size} surface={surface as any} />
+          </span>
+        ));
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,121 @@
+import React from 'react';
+import { Icon, getSvgSize } from '../Icon/Icon';
+import { IconName, IconSize, IconType } from '../../types/icon';
+import { stylesFactory } from '../../themes/stylesFactory';
+import { css, cx } from 'emotion';
+import { useTheme } from '../../themes/ThemeContext';
+import { GrafanaTheme } from '@grafana/data';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { TooltipPlacement } from '../Tooltip/PopoverController';
+
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  name: IconName;
+  size?: IconSize;
+  /** Need this to change hover effect based on what surface it is on */
+  surface?: SurfaceType;
+  iconType?: IconType;
+  tooltip?: string;
+  tooltipPlacement?: TooltipPlacement;
+}
+
+type SurfaceType = 'body' | 'panel' | 'header';
+
+export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ name, size = 'md', surface = 'panel', iconType, tooltip, tooltipPlacement, className, ...restProps }, ref) => {
+    const theme = useTheme();
+    const styles = getStyles(theme, surface, size);
+
+    const button = (
+      <button ref={ref} {...restProps} className={cx(styles.button, className)}>
+        <Icon name={name} size={size} className={styles.icon} type={iconType} />
+      </button>
+    );
+
+    if (tooltip) {
+      return (
+        <Tooltip content={tooltip} placement={tooltipPlacement}>
+          {button}
+        </Tooltip>
+      );
+    }
+
+    return button;
+  }
+);
+
+function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
+  switch (surface) {
+    case 'body':
+      return theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
+    case 'panel':
+      return theme.isLight ? theme.colors.gray6 : theme.colors.gray25;
+    case 'header':
+      return theme.isLight ? theme.colors.gray85 : theme.colors.gray25;
+  }
+}
+
+const getStyles = stylesFactory((theme: GrafanaTheme, surface: SurfaceType, size: IconSize) => {
+  const hoverColor = getHoverColor(theme, surface);
+  const pixelSize = getSvgSize(size);
+
+  return {
+    button: css`
+      width: ${pixelSize}px;
+      height: ${pixelSize}px;
+      background: transparent;
+      border: none;
+      padding: 0;
+      margin: 0;
+      outline: none;
+      box-shadow: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 0;
+      margin-right: ${theme.spacing.xs};
+
+      &[disabled],
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.65;
+        box-shadow: none;
+      }
+
+      &:before {
+        content: '';
+        display: block;
+        opacity: 1;
+        position: absolute;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: -1;
+        bottom: -8px;
+        left: -8px;
+        right: -8px;
+        top: -8px;
+        background: none;
+        border-radius: 50%;
+        box-sizing: border-box;
+        transform: scale(0);
+        transition-property: transform, opacity;
+      }
+
+      &:hover {
+        color: ${theme.colors.linkHover};
+
+        &:before {
+          background-color: ${hoverColor};
+          border: none;
+          box-shadow: none;
+          opacity: 1;
+          transform: scale(0.8);
+        }
+      }
+    `,
+    icon: css`
+      margin-bottom: 0;
+      display: flex;
+    `,
+  };
+});
@@ -6,7 +6,7 @@ import { IconName } from '../../types';
 import { Themeable } from '../../types';
 import { getModalStyles } from './getModalStyles';
 import { ModalHeader } from './ModalHeader';
-import { Icon } from '../Icon/Icon';
+import { IconButton } from '../IconButton/IconButton';

 interface Props extends Themeable {
  icon?: IconName;
@@ -50,9 +50,9 @@ export class UnthemedModal extends React.PureComponent<Props> {
        <div className={cx(styles.modal, className)}>
          <div className={styles.modalHeader}>
            {typeof title === 'string' ? this.renderDefaultHeader(title) : title}
-            <a className={styles.modalHeaderClose} onClick={this.onDismiss}>
-              <Icon name="times" />
-            </a>
+            <div className={styles.modalHeaderClose}>
+              <IconButton surface="header" name="times" size="lg" onClick={this.onDismiss} />
+            </div>
          </div>
          <div className={styles.modalContent}>{this.props.children}</div>
        </div>
@@ -37,10 +37,11 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
      opacity: 0.7;
    `,
    modalHeader: css`
-      background: ${theme.background.pageHeader};
+      background: ${theme.colors.pageHeaderBg};
      box-shadow: ${theme.shadow.pageHeader};
      border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
      display: flex;
+      height: 42px;
    `,
    modalHeaderTitle: css`
      font-size: ${theme.typography.heading.h3};
@@ -55,8 +56,12 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
      }
    `,
    modalHeaderClose: css`
-      margin-left: auto;
-      padding: 9px ${theme.spacing.d};
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      justify-content: flex-end;
+      padding-right: ${theme.spacing.sm};
    `,
    modalContent: css`
      padding: calc(${theme.spacing.d} * 2);
@@ -157,6 +157,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                  "orange": "#eb7b18",
                  "orangeDark": "#ff780a",
                  "pageBg": "#141619",
+                  "pageHeaderBg": "#202226",
                  "pageHeaderBorder": "#202226",
                  "panelBg": "#141619",
                  "panelBorder": "#202226",
@@ -472,6 +473,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                  "orange": "#eb7b18",
                  "orangeDark": "#ff780a",
                  "pageBg": "#141619",
+                  "pageHeaderBg": "#202226",
                  "pageHeaderBorder": "#202226",
                  "panelBg": "#141619",
                  "panelBorder": "#202226",
@@ -7,11 +7,28 @@ import { PopoverContent } from './Tooltip';

 export interface UsingPopperProps {
  show?: boolean;
-  placement?: PopperJS.Placement;
+  placement?: TooltipPlacement;
  content: PopoverContent;
  children: JSX.Element;
 }

+export type TooltipPlacement =
+  | 'auto-start'
+  | 'auto'
+  | 'auto-end'
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'left-end'
+  | 'left'
+  | 'left-start';
+
 type PopperControllerRenderProp = (
  showPopper: () => void,
  hidePopper: () => void,
@@ -31,7 +31,7 @@ export function ValuePicker<T>({
  const [isPicking, setIsPicking] = useState(false);

  const buttonEl = (
-    <Button size={size || 'sm'} icon={icon || 'plus-circle'} onClick={() => setIsPicking(true)} variant={variant}>
+    <Button size={size || 'sm'} icon={icon || 'plus'} onClick={() => setIsPicking(true)} variant={variant}>
      {label}
    </Button>
  );
@@ -1,4 +1,5 @@
 export { Icon } from './Icon/Icon';
+export { IconButton } from './IconButton/IconButton';
 export { ConfirmButton } from './ConfirmButton/ConfirmButton';
 export { DeleteButton } from './ConfirmButton/DeleteButton';
 export { Tooltip, PopoverContent } from './Tooltip/Tooltip';
@@ -126,9 +126,9 @@ $panel-header-hover-bg: ${theme.colors.gray15};
 $panel-corner: $panel-bg;

 // page header
-$page-header-bg: ${theme.colors.gray15};
+$page-header-bg: ${theme.colors.pageHeaderBg};
 $page-header-shadow: inset 0px -4px 14px $dark-3;
-$page-header-border-color: $dark-9;
+$page-header-border-color: ${theme.colors.pageHeaderBorder};

 $divider-border-color: $gray-1;

@@ -118,9 +118,9 @@ $panel-header-hover-bg: $gray-6;
 $panel-corner: $gray-4;

 // Page header
-$page-header-bg: linear-gradient(90deg, $white, ${theme.colors.gray95});
+$page-header-bg: ${theme.colors.pageHeaderBg};
 $page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: $gray-4;
+$page-header-border-color: ${theme.colors.pageHeaderBorder};

 $divider-border-color: $gray-2;

@@ -61,8 +61,7 @@ const darkTheme: GrafanaTheme = {
    online: basicColors.greenBase,
    warn: '#f79520',
    critical: basicColors.redBase,
-    bodyBg: basicColors.gray05,
-    pageBg: basicColors.gray10,
+
    body: basicColors.gray4,
    text: basicColors.gray85,
    textStrong: basicColors.white,
@@ -74,8 +73,15 @@ const darkTheme: GrafanaTheme = {
    linkHover: basicColors.white,
    linkExternal: basicColors.blue,
    headingColor: basicColors.gray4,
-    pageHeaderBorder: basicColors.gray15,
+
+    // Backgrounds
+    bodyBg: basicColors.gray05,
+    pageBg: basicColors.gray10,
+    pageHeaderBg: basicColors.gray15,
    panelBg: basicColors.gray10,
+
+    // Borders
+    pageHeaderBorder: basicColors.gray15,
    panelBorder: basicColors.gray15,

    // Next-gen forms functional colors
@@ -62,8 +62,12 @@ const lightTheme: GrafanaTheme = {
    online: basicColors.greenShade,
    warn: '#f79520',
    critical: basicColors.redShade,
+
+    // Backgrounds
    bodyBg: basicColors.gray7,
    pageBg: basicColors.white,
+    pageHeaderBg: basicColors.gray95,
+    panelBg: basicColors.white,

    // Text colors
    body: basicColors.gray1,
@@ -79,11 +83,10 @@ const lightTheme: GrafanaTheme = {
    linkHover: basicColors.dark1,
    linkExternal: basicColors.blueLight,
    headingColor: basicColors.gray1,
-    pageHeaderBorder: basicColors.gray4,

-    // panel
-    panelBg: basicColors.white,
+    // Borders
    panelBorder: basicColors.gray95,
+    pageHeaderBorder: basicColors.gray4,

    // Next-gen forms functional colors
    formLabel: basicColors.gray33,
@@ -1,6 +1,6 @@
 import { ComponentSize } from './size';
 export type IconType = 'mono' | 'default';
-export type IconSize = ComponentSize | 'xl' | 'xxl';
+export type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';

 export type IconName =
  | 'fa fa-fw fa-unlock'