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

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import * as React from 'react';
import { deprecationWarning } from '@grafana/data';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { getMouseFocusStyles, getFocusStyles } from '../../themes/mixins.mjs';
import { IconRenderer, getActiveButtonStyles } from '../Button/Button.mjs';
import { getSvgSize } from '../Icon/utils.mjs';
import { Tooltip } from '../Tooltip/Tooltip.mjs';

"use strict";
const IconButton = React.forwardRef((props, ref) => {
  const { size = "md", variant = "secondary" } = props;
  let limitedIconSize;
  if (size === "xxl" || size === "xxxl") {
    deprecationWarning("IconButton", 'size="xxl" and size="xxxl"', 'size="xl"');
    limitedIconSize = "xl";
  } else {
    limitedIconSize = size;
  }
  const styles = useStyles2(getStyles, limitedIconSize, variant);
  let ariaLabel;
  let buttonRef;
  if ("tooltip" in props) {
    const { tooltip } = props;
    ariaLabel = typeof tooltip === "string" ? tooltip : void 0;
  } else if ("ariaLabel" in props || "aria-label" in props) {
    const { ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLabelProp } = props;
    ariaLabel = ariaLabelProp || deprecatedAriaLabel;
    buttonRef = ref;
  }
  if ("tooltip" in props) {
    const { name, iconType, className, tooltip, tooltipPlacement, ...restProps } = props;
    return /* @__PURE__ */ jsx(Tooltip, { ref, content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(
      "button",
      {
        ...restProps,
        ref: buttonRef,
        "aria-label": ariaLabel,
        className: cx(styles.button, className),
        type: "button",
        children: /* @__PURE__ */ jsx(IconRenderer, { icon: name, size: limitedIconSize, className: styles.icon, iconType })
      }
    ) });
  } else {
    const { name, iconType, className, ...restProps } = props;
    return /* @__PURE__ */ jsx(
      "button",
      {
        ...restProps,
        ref: buttonRef,
        "aria-label": ariaLabel,
        className: cx(styles.button, className),
        type: "button",
        children: /* @__PURE__ */ jsx(IconRenderer, { icon: name, size: limitedIconSize, className: styles.icon, iconType })
      }
    );
  }
});
IconButton.displayName = "IconButton";
const getStyles = (theme, size, variant) => {
  const hoverSize = getSvgSize(size) + theme.spacing.gridSize;
  const activeButtonStyle = getActiveButtonStyles(theme.colors.secondary, "text");
  let iconColor = theme.colors.primary.text;
  let hoverColor = theme.colors.primary.transparent;
  if (variant === "secondary") {
    iconColor = theme.colors.secondary.text;
    hoverColor = theme.colors.secondary.transparent;
  } else if (variant === "destructive") {
    iconColor = theme.colors.error.text;
    hoverColor = theme.colors.error.transparent;
  }
  return {
    button: css({
      zIndex: 0,
      position: "relative",
      margin: `0 ${theme.spacing.x0_5} 0 0`,
      boxShadow: "none",
      border: "none",
      display: "inline-flex",
      background: "transparent",
      justifyContent: "center",
      alignItems: "center",
      padding: 0,
      color: iconColor,
      borderRadius: theme.shape.radius.default,
      "&:active": {
        "&:before, &:hover:before": {
          backgroundColor: activeButtonStyle.background
        }
      },
      "&[disabled], &:disabled": {
        cursor: "not-allowed",
        color: theme.colors.action.disabledText,
        opacity: 0.65,
        "&:hover:before": {
          backgroundColor: "transparent"
        }
      },
      "&:before": {
        zIndex: -1,
        position: "absolute",
        opacity: 0,
        width: `${hoverSize}px`,
        height: `${hoverSize}px`,
        borderRadius: theme.shape.radius.default,
        content: '""',
        [theme.transitions.handleMotion("no-preference", "reduce")]: {
          transitionDuration: "0.2s",
          transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
          transitionProperty: "opacity"
        }
      },
      "&:focus, &:focus-visible": getFocusStyles(theme),
      "&:focus:not(:focus-visible)": getMouseFocusStyles(theme),
      "&:hover:before": {
        backgroundColor: hoverColor,
        opacity: 1
      }
    }),
    icon: css({
      verticalAlign: "baseline"
    })
  };
};

export { IconButton };
//# sourceMappingURL=IconButton.mjs.map