@grafana/ui/dist/esm/components/ToolbarButton/ToolbarButton.mjs.map

Grafana Components Library

{"version":3,"file":"ToolbarButton.mjs","sources":["../../../../src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["import { cx, css } from '@emotion/css';\nimport { forwardRef, ButtonHTMLAttributes } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, IconName, isIconName } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles, mediaUp } from '../../themes/mixins';\nimport { IconSize } from '../../types/icon';\nimport { getPropertiesForVariant } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\ntype CommonProps = {\n  /** Icon name */\n  icon?: IconName | React.ReactNode;\n  /** Icon size */\n  iconSize?: IconSize;\n  /** Tooltip */\n  tooltip?: string;\n  /** For image icons */\n  imgSrc?: string;\n  /** Alt text for imgSrc */\n  imgAlt?: string;\n  /** if true or false will show angle-down/up */\n  isOpen?: boolean;\n  /** Controls flex-grow: 1 */\n  fullWidth?: boolean;\n  /** reduces padding to xs */\n  narrow?: boolean;\n  /** variant */\n  variant?: ToolbarButtonVariant;\n  /** Hide any children and only show icon */\n  iconOnly?: boolean;\n  /** Show highlight dot */\n  isHighlighted?: boolean;\n};\n\nexport type ToolbarButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active' | 'canvas';\n\nexport const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(\n  (\n    {\n      tooltip,\n      icon,\n      iconSize,\n      className,\n      children,\n      imgSrc,\n      imgAlt,\n      fullWidth,\n      isOpen,\n      narrow,\n      variant = 'default',\n      iconOnly,\n      'aria-label': ariaLabel,\n      isHighlighted,\n      ...rest\n    },\n    ref\n  ) => {\n    const styles = useStyles2(getStyles);\n\n    const buttonStyles = cx(\n      {\n        [styles.button]: true,\n        [styles.buttonFullWidth]: fullWidth,\n        [styles.narrow]: narrow,\n      },\n      styles[variant],\n      className\n    );\n\n    const contentStyles = cx({\n      [styles.content]: true,\n      [styles.contentWithIcon]: !!icon,\n      [styles.contentWithRightIcon]: isOpen !== undefined,\n    });\n\n    const body = (\n      <button\n        ref={ref}\n        className={buttonStyles}\n        aria-label={getButtonAriaLabel(ariaLabel, tooltip)}\n        aria-expanded={isOpen}\n        type=\"button\"\n        {...rest}\n      >\n        {renderIcon(icon, iconSize)}\n        {imgSrc && <img className={styles.img} src={imgSrc} alt={imgAlt ?? ''} />}\n        {children && !iconOnly && <div className={contentStyles}>{children}</div>}\n        {isOpen === false && <Icon name=\"angle-down\" />}\n        {isOpen === true && <Icon name=\"angle-up\" />}\n        {isHighlighted && <div className={styles.highlight} />}\n      </button>\n    );\n\n    return tooltip ? (\n      <Tooltip ref={ref} content={tooltip} placement=\"bottom\">\n        {body}\n      </Tooltip>\n    ) : (\n      body\n    );\n  }\n);\n\nToolbarButton.displayName = 'ToolbarButton';\n\nfunction getButtonAriaLabel(ariaLabel: string | undefined, tooltip: string | undefined) {\n  return ariaLabel ? ariaLabel : tooltip ? selectors.components.PageToolbar.item(tooltip) : undefined;\n}\n\nfunction renderIcon(icon: IconName | React.ReactNode, iconSize?: IconSize) {\n  if (!icon) {\n    return null;\n  }\n\n  if (isIconName(icon)) {\n    return <Icon name={icon} size={`${iconSize ? iconSize : 'lg'}`} />;\n  }\n\n  return icon;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  const primaryVariant = getPropertiesForVariant(theme, 'primary', 'solid');\n  const destructiveVariant = getPropertiesForVariant(theme, 'destructive', 'solid');\n\n  const defaultOld = css({\n    color: theme.colors.text.primary,\n    background: theme.colors.secondary.main,\n\n    '&:hover': {\n      color: theme.colors.text.primary,\n      background: theme.colors.secondary.shade,\n      border: `1px solid ${theme.colors.border.medium}`,\n    },\n  });\n\n  return {\n    button: css({\n      label: 'toolbar-button',\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      height: theme.spacing(theme.components.height.md),\n      padding: theme.spacing(0, 1),\n      borderRadius: theme.shape.radius.default,\n      lineHeight: `${theme.components.height.md * theme.spacing.gridSize - 2}px`,\n      fontWeight: theme.typography.fontWeightMedium,\n      border: `1px solid ${theme.colors.secondary.border}`,\n      whiteSpace: 'nowrap',\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: theme.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {\n          duration: theme.transitions.duration.short,\n        }),\n      },\n\n      [theme.breakpoints.down('md')]: {\n        width: 'auto !important',\n      },\n\n      '&:focus, &:focus-visible': {\n        ...getFocusStyles(theme),\n        zIndex: 1,\n      },\n\n      '&:focus:not(:focus-visible)': getMouseFocusStyles(theme),\n\n      '&[disabled], &:disabled': {\n        cursor: 'not-allowed',\n        opacity: theme.colors.action.disabledOpacity,\n        background: theme.colors.action.disabledBackground,\n        boxShadow: 'none',\n\n        '&:hover': {\n          color: theme.colors.text.disabled,\n          background: theme.colors.action.disabledBackground,\n          boxShadow: 'none',\n        },\n      },\n    }),\n    default: css({\n      color: theme.colors.text.secondary,\n      background: 'transparent',\n      border: `1px solid transparent`,\n\n      '&:hover': {\n        color: theme.colors.text.primary,\n        background: theme.colors.action.hover,\n      },\n    }),\n    canvas: defaultOld,\n    active: cx(\n      defaultOld,\n      css({\n        '&::before': {\n          display: 'block',\n          content: '\" \"',\n          position: 'absolute',\n          left: 0,\n          right: 0,\n          height: '2px',\n          bottom: 0,\n          borderRadius: theme.shape.radius.default,\n          backgroundImage: theme.colors.gradients.brandHorizontal,\n        },\n      })\n    ),\n    primary: css(primaryVariant),\n    destructive: css(destructiveVariant),\n    narrow: css({\n      padding: theme.spacing(0, 0.5),\n    }),\n    img: css({\n      width: '16px',\n      height: '16px',\n      marginRight: theme.spacing(1),\n    }),\n    buttonFullWidth: css({\n      flexGrow: 1,\n    }),\n    content: css({\n      display: 'flex',\n      flexGrow: 1,\n    }),\n    contentWithIcon: css({\n      display: 'none',\n      paddingLeft: theme.spacing(1),\n\n      [`@media ${mediaUp(theme.v1.breakpoints.md)}`]: {\n        display: 'block',\n      },\n    }),\n    contentWithRightIcon: css({\n      paddingRight: theme.spacing(0.5),\n    }),\n    highlight: css({\n      backgroundColor: theme.colors.success.main,\n      borderRadius: theme.shape.radius.circle,\n      width: '6px',\n      height: '6px',\n      position: 'absolute',\n      top: '-3px',\n      right: '-3px',\n      zIndex: 1,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}