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

Grafana Components Library

{"version":3,"file":"IconButton.mjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2, colorManipulator, deprecationWarning } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { IconName, IconSize, IconType } from '../../types/icon';\nimport { ComponentSize } from '../../types/size';\nimport { IconRenderer } from '../Button/Button';\nimport { getSvgSize } from '../Icon/utils';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent, TooltipPlacement } from '../Tooltip/types';\n\nexport type IconButtonVariant = 'primary' | 'secondary' | 'destructive';\n\ntype LimitedIconSize = ComponentSize | 'xl';\n\ninterface BaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> {\n  /** Name of the icon **/\n  name: IconName;\n  /** Icon size - sizes xxl and xxxl are deprecated and when used being decreased to xl*/\n  size?: IconSize;\n  /** Type of the icon - mono or default */\n  iconType?: IconType;\n  /** Variant to change the color of the Icon */\n  variant?: IconButtonVariant;\n}\n\nexport interface BasePropsWithTooltip extends BaseProps {\n  /** Tooltip content to display on hover and as the aria-label */\n  tooltip: PopoverContent;\n  /** Position of the tooltip */\n  tooltipPlacement?: TooltipPlacement;\n}\n\ninterface BasePropsWithAriaLabel extends BaseProps {\n  /** @deprecated use aria-label instead*/\n  ariaLabel?: string;\n  /** Text available only for screen readers. No tooltip will be set in this case. */\n  ['aria-label']: string;\n}\n\nexport type Props = BasePropsWithTooltip | BasePropsWithAriaLabel;\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, Props>((props, ref) => {\n  const { size = 'md', variant = 'secondary' } = props;\n  let limitedIconSize: LimitedIconSize;\n\n  // very large icons (xl to xxxl) are unified to size xl\n  if (size === 'xxl' || size === 'xxxl') {\n    deprecationWarning('IconButton', 'size=\"xxl\" and size=\"xxxl\"', 'size=\"xl\"');\n    limitedIconSize = 'xl';\n  } else {\n    limitedIconSize = size;\n  }\n\n  const styles = useStyles2(getStyles, limitedIconSize, variant);\n\n  let ariaLabel: string | undefined;\n  let buttonRef: typeof ref | undefined;\n\n  if ('tooltip' in props) {\n    const { tooltip } = props;\n    ariaLabel = typeof tooltip === 'string' ? tooltip : undefined;\n  } else if ('ariaLabel' in props || 'aria-label' in props) {\n    const { ariaLabel: deprecatedAriaLabel, ['aria-label']: ariaLabelProp } = props;\n    ariaLabel = ariaLabelProp || deprecatedAriaLabel;\n    buttonRef = ref;\n  }\n\n  // When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632\n  if ('tooltip' in props) {\n    const { name, iconType, className, tooltip, tooltipPlacement, ...restProps } = props;\n    return (\n      <Tooltip ref={ref} content={tooltip} placement={tooltipPlacement}>\n        <button\n          {...restProps}\n          ref={buttonRef}\n          aria-label={ariaLabel}\n          className={cx(styles.button, className)}\n          type=\"button\"\n        >\n          <IconRenderer icon={name} size={limitedIconSize} className={styles.icon} iconType={iconType} />\n        </button>\n      </Tooltip>\n    );\n  } else {\n    const { name, iconType, className, ...restProps } = props;\n    return (\n      <button\n        {...restProps}\n        ref={buttonRef}\n        aria-label={ariaLabel}\n        className={cx(styles.button, className)}\n        type=\"button\"\n      >\n        <IconRenderer icon={name} size={limitedIconSize} className={styles.icon} iconType={iconType} />\n      </button>\n    );\n  }\n});\n\nIconButton.displayName = 'IconButton';\n\nconst getStyles = (theme: GrafanaTheme2, size: IconSize, variant: IconButtonVariant) => {\n  // overall size of the IconButton on hover\n  // theme.spacing.gridSize originates from 2*4px for padding and letting the IconSize generally decide on the hoverSize\n  const hoverSize = getSvgSize(size) + theme.spacing.gridSize;\n\n  let iconColor = theme.colors.text.primary;\n\n  if (variant === 'primary') {\n    iconColor = theme.colors.primary.text;\n  } else if (variant === 'destructive') {\n    iconColor = theme.colors.error.text;\n  }\n\n  return {\n    button: css({\n      zIndex: 0,\n      position: 'relative',\n      margin: `0 ${theme.spacing.x0_5} 0 0`,\n      boxShadow: 'none',\n      border: 'none',\n      display: 'inline-flex',\n      background: 'transparent',\n      justifyContent: 'center',\n      alignItems: 'center',\n      padding: 0,\n      color: iconColor,\n\n      '&[disabled], &:disabled': {\n        cursor: 'not-allowed',\n        color: theme.colors.action.disabledText,\n        opacity: 0.65,\n      },\n\n      '&:before': {\n        zIndex: -1,\n        position: 'absolute',\n        opacity: 0,\n        width: `${hoverSize}px`,\n        height: `${hoverSize}px`,\n        borderRadius: theme.shape.radius.default,\n        content: '\"\"',\n        [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n          transitionDuration: '0.2s',\n          transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\n          transitionProperty: 'opacity',\n        },\n      },\n\n      '&:focus, &:focus-visible': getFocusStyles(theme),\n\n      '&:focus:not(:focus-visible)': getMouseFocusStyles(theme),\n\n      '&:hover': {\n        '&:before': {\n          backgroundColor:\n            variant === 'secondary' ? theme.colors.action.hover : colorManipulator.alpha(iconColor, 0.12),\n          opacity: 1,\n        },\n      },\n    }),\n    icon: css({\n      verticalAlign: 'baseline',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}