@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\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":";;;;;;AA2BO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAI,SAAY,GAAA,OAAA;AAAA,EAChB,GAAG;AACL,CAAa,KAAA;AACX,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,oBAAsB,EAAA,WAAA,EAAa,KAAK,CAAA;AAElE,EACE,uBAAA,IAAA,CAAC,aAAU,SAAW,EAAA,EAAA,CAAG,OAAO,KAAO,EAAA,SAAS,CAAI,EAAA,GAAG,IACpD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA,wBACE,OAAQ,EAAA,EAAA,WAAA,EAA0B,WAAU,KAAM,EAAA,OAAA,EAAS,SAAS,KAAM,EAAA,MAAA,EACzE,8BAAC,IAAK,EAAA,EAAA,QAAA,EAAU,GAAG,IAAK,EAAA,aAAA,EAAc,MAAK,IAAK,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAM,CAC1E,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;AAEO,MAAM,oBAAuB,GAAA,CAAC,KAAsB,EAAA,WAAA,GAAc,OAAO,KAA4B,KAAA;AAC1G,EAAO,OAAA;AAAA,IACL,OAAO,GAAI,CAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,cAAgB,EAAA,eAAA;AAAA,MAChB,UAAY,EAAA,CAAA;AAAA,MACZ,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,IAAK,CAAA,EAAA;AAAA,MAChC,eAAiB,EAAA,WAAA,GAAc,aAAgB,GAAA,KAAA,CAAM,OAAO,UAAW,CAAA,SAAA;AAAA,MACvE,QAAQ,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA,UAAA,CAAW,OAAO,EAAE,CAAA;AAAA,MAChD,YAAY,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA,UAAA,CAAW,OAAO,EAAE,CAAA;AAAA,MACpD,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,MAC9B,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MACjC,MAAQ,EAAA,MAAA;AAAA,MACR,KAAA,EAAO,QAAS,KAAU,KAAA,MAAA,GAAS,GAAG,CAAI,GAAA,KAAK,OAAO,KAAS,GAAA,MAAA;AAAA,MAC/D,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA,KAC1B,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,UAAY,EAAA,MAAA;AAAA,MAEZ,QAAU,EAAA;AAAA,QACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF;;;;"}