@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 { getActiveButtonStyles, 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\n/**\n * Multiple buttons that form a toolbar. Each button can contain an icon, image and text. There are three variants of the ToolbarButton: default, primary and destructive.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-toolbarbutton--docs\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, &:focus': {\n      color: theme.colors.text.primary,\n      background: theme.colors.secondary.shade,\n      border: `1px solid ${theme.colors.border.medium}`,\n    },\n\n    '&:active': {\n      ...getActiveButtonStyles(theme.colors.secondary, 'solid'),\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-color', '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, &:focus': {\n        color: theme.colors.text.primary,\n        background: theme.colors.action.hover,\n      },\n\n      '&:active': {\n        ...getActiveButtonStyles(theme.colors.secondary, 'solid'),\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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"}