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

Grafana Components Library

{"version":3,"file":"FilterPill.mjs","sources":["../../../../src/components/FilterPill/FilterPill.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { type IconName } from '../../types/icon';\nimport { clearButtonStyles } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\nexport interface FilterPillProps {\n  selected: boolean;\n  label: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n  icon?: IconName;\n}\n\n/**\n * A component used for quick toggling on/off filters. Mostly used in inline form components and transformation/query editors.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filterpill--docs\n */\nexport const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterPillProps) => {\n  const styles = useStyles2(getStyles);\n  const clearButton = useStyles2(clearButtonStyles);\n  return (\n    <button\n      aria-pressed={selected}\n      type=\"button\"\n      className={cx(clearButton, styles.wrapper, selected && styles.selected)}\n      onClick={onClick}\n    >\n      <span>{label}</span>\n      {selected && <Icon name={icon} className={styles.icon} data-testid=\"filter-pill-icon\" />}\n    </button>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    wrapper: css({\n      background: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.pill,\n      padding: theme.spacing(0, 2),\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      lineHeight: theme.typography.bodySmall.lineHeight,\n      color: theme.colors.text.secondary,\n      display: 'flex',\n      alignItems: 'center',\n      height: '32px',\n      position: 'relative',\n      border: `1px solid ${theme.colors.background.secondary}`,\n      whiteSpace: 'nowrap',\n\n      '&:hover': {\n        background: theme.colors.action.hover,\n        color: theme.colors.text.primary,\n      },\n    }),\n    selected: css({\n      color: theme.colors.text.primary,\n      background: theme.colors.action.selected,\n      border: `1px solid ${theme.colors.action.selectedBorder}`,\n\n      '&:hover': {\n        background: theme.colors.action.focus,\n      },\n    }),\n    icon: css({\n      marginLeft: theme.spacing(0.5),\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,UAAA,GAAa,CAAC,EAAE,KAAA,EAAO,UAAU,OAAA,EAAS,IAAA,GAAO,SAAQ,KAAuB;AAC3F,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,WAAA,GAAc,WAAW,iBAAiB,CAAA;AAChD,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,QAAA;AAAA,MACd,IAAA,EAAK,QAAA;AAAA,MACL,WAAW,EAAA,CAAG,WAAA,EAAa,OAAO,OAAA,EAAS,QAAA,IAAY,OAAO,QAAQ,CAAA;AAAA,MACtE,OAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACZ,QAAA,wBAAa,IAAA,EAAA,EAAK,IAAA,EAAM,MAAM,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,aAAA,EAAY,kBAAA,EAAmB;AAAA;AAAA;AAAA,GACxF;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACpC,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,IAAA;AAAA,MACjC,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,QAAA;AAAA,MACrC,UAAA,EAAY,MAAM,UAAA,CAAW,gBAAA;AAAA,MAC7B,UAAA,EAAY,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,UAAA;AAAA,MACvC,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MACzB,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,MAAA,EAAQ,MAAA;AAAA,MACR,QAAA,EAAU,UAAA;AAAA,MACV,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,WAAW,SAAS,CAAA,CAAA;AAAA,MACtD,UAAA,EAAY,QAAA;AAAA,MAEZ,SAAA,EAAW;AAAA,QACT,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,KAAA;AAAA,QAChC,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK;AAAA;AAC3B,KACD,CAAA;AAAA,IACD,UAAU,GAAA,CAAI;AAAA,MACZ,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MACzB,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,QAAA;AAAA,MAChC,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,OAAO,cAAc,CAAA,CAAA;AAAA,MAEvD,SAAA,EAAW;AAAA,QACT,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO;AAAA;AAClC,KACD,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}