@grafana/ui/dist/esm/components/Forms/InlineLabel.mjs.map

Grafana Components Library

{"version":3,"file":"InlineLabel.mjs","sources":["../../../../src/components/Forms/InlineLabel.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\n\nimport { LabelProps } from './Label';\n\nexport interface Props extends Omit<LabelProps, 'css' | 'description' | 'category'> {\n  /** Content for the labels tooltip. If provided, an info icon with the tooltip content\n   * will be displayed */\n  tooltip?: PopoverContent;\n  /** Custom width for the label */\n  width?: number | 'auto';\n  /** Make labels's background transparent */\n  transparent?: boolean;\n  /** Make tooltip interactive */\n  interactive?: boolean;\n  /** @beta */\n  /** Controls which element the InlineLabel should be rendered into */\n  as?: React.ElementType;\n}\n\n/**\n * A horizontal variant of Label, primarily used in query editors. Can be combined with form components that expect a label, eg. `Input`, `Checkbox`, `Combobox`.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinelabel--docs\n */\nexport const InlineLabel = ({\n  children,\n  className,\n  tooltip,\n  width,\n  transparent,\n  interactive,\n  as: Component = 'label',\n  ...rest\n}: Props) => {\n  const styles = useStyles2(getInlineLabelStyles, transparent, width);\n\n  return (\n    <Component className={cx(styles.label, className)} {...rest}>\n      {children}\n      {tooltip && (\n        <Tooltip interactive={interactive} placement=\"top\" content={tooltip} theme=\"info\">\n          <Icon tabIndex={0} name=\"info-circle\" size=\"sm\" className={styles.icon} />\n        </Tooltip>\n      )}\n    </Component>\n  );\n};\n\nexport const getInlineLabelStyles = (theme: GrafanaTheme2, transparent = false, width?: number | 'auto') => {\n  return {\n    label: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      flexShrink: 0,\n      padding: theme.spacing(0, 1),\n      fontWeight: theme.typography.fontWeightMedium,\n      fontSize: theme.typography.size.sm,\n      backgroundColor: transparent ? 'transparent' : theme.colors.background.secondary,\n      height: theme.spacing(theme.components.height.md),\n      lineHeight: theme.spacing(theme.components.height.md),\n      marginRight: theme.spacing(0.5),\n      borderRadius: theme.shape.radius.default,\n      border: 'none',\n      width: width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%',\n      color: theme.colors.text.primary,\n    }),\n    icon: css({\n      color: theme.colors.text.secondary,\n      marginLeft: '10px',\n\n      ':hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAI,SAAA,GAAY,OAAA;AAAA,EAChB,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,oBAAA,EAAsB,WAAA,EAAa,KAAK,CAAA;AAElE,EAAA,uBACE,IAAA,CAAC,aAAU,SAAA,EAAW,EAAA,CAAG,OAAO,KAAA,EAAO,SAAS,CAAA,EAAI,GAAG,IAAA,EACpD,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA,wBACE,OAAA,EAAA,EAAQ,WAAA,EAA0B,WAAU,KAAA,EAAM,OAAA,EAAS,SAAS,KAAA,EAAM,MAAA,EACzE,8BAAC,IAAA,EAAA,EAAK,QAAA,EAAU,GAAG,IAAA,EAAK,aAAA,EAAc,MAAK,IAAA,EAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,CAAA,EAC1E;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,MAAM,oBAAA,GAAuB,CAAC,KAAA,EAAsB,WAAA,GAAc,OAAO,KAAA,KAA4B;AAC1G,EAAA,OAAO;AAAA,IACL,OAAO,GAAA,CAAI;AAAA,MACT,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,eAAA;AAAA,MAChB,UAAA,EAAY,CAAA;AAAA,MACZ,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,UAAA,EAAY,MAAM,UAAA,CAAW,gBAAA;AAAA,MAC7B,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,IAAA,CAAK,EAAA;AAAA,MAChC,eAAA,EAAiB,WAAA,GAAc,aAAA,GAAgB,KAAA,CAAM,OAAO,UAAA,CAAW,SAAA;AAAA,MACvE,QAAQ,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,UAAA,CAAW,OAAO,EAAE,CAAA;AAAA,MAChD,YAAY,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,UAAA,CAAW,OAAO,EAAE,CAAA;AAAA,MACpD,WAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,MAC9B,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAA;AAAA,MACjC,MAAA,EAAQ,MAAA;AAAA,MACR,KAAA,EAAO,QAAS,KAAA,KAAU,MAAA,GAAS,GAAG,CAAA,GAAI,KAAK,OAAO,KAAA,GAAS,MAAA;AAAA,MAC/D,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK;AAAA,KAC1B,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MACzB,UAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,EAAU;AAAA,QACR,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK;AAAA;AAC3B,KACD;AAAA,GACH;AACF;;;;"}