@grafana/ui/dist/cjs/components/FilterPill/FilterPill.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Button = require('../Button/Button.cjs');
var Icon = require('../Icon/Icon.cjs');

"use strict";
const FilterPill = ({ label, selected, onClick, icon = "check" }) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const clearButton = ThemeContext.useStyles2(Button.clearButtonStyles);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "button",
    {
      "aria-pressed": selected,
      type: "button",
      className: css.cx(clearButton, styles.wrapper, selected && styles.selected),
      onClick,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
        selected && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: styles.icon, "data-testid": "filter-pill-icon" })
      ]
    }
  );
};
const getStyles = (theme) => {
  return {
    wrapper: css.css({
      background: theme.colors.background.secondary,
      borderRadius: theme.shape.radius.pill,
      padding: theme.spacing(0, 2),
      fontSize: theme.typography.bodySmall.fontSize,
      fontWeight: theme.typography.fontWeightMedium,
      lineHeight: theme.typography.bodySmall.lineHeight,
      color: theme.colors.text.secondary,
      display: "flex",
      alignItems: "center",
      height: "32px",
      position: "relative",
      border: `1px solid ${theme.colors.background.secondary}`,
      whiteSpace: "nowrap",
      "&:hover": {
        background: theme.colors.action.hover,
        color: theme.colors.text.primary
      }
    }),
    selected: css.css({
      color: theme.colors.text.primary,
      background: theme.colors.action.selected,
      border: `1px solid ${theme.colors.action.selectedBorder}`,
      "&:hover": {
        background: theme.colors.action.focus
      }
    }),
    icon: css.css({
      marginLeft: theme.spacing(0.5)
    })
  };
};

exports.FilterPill = FilterPill;
//# sourceMappingURL=FilterPill.cjs.map