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

Grafana Components Library

{"version":3,"file":"Label.mjs","sources":["../../../../src/components/Forms/Label.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';\n\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  children: React.ReactNode;\n  description?: React.ReactNode;\n  category?: React.ReactNode[];\n}\n\n/**\n * The label component can be used to label form inputs with a heading/\"Option name\" and a description. To automatically have the right arrangement of this component with a form input, use the `Field` component.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-label--docs\n */\nexport const Label = ({ children, description, className, category, ...labelProps }: LabelProps) => {\n  const styles = useStyles2(getLabelStyles);\n  const categories = category?.map((c, i) => {\n    return (\n      <span className={styles.categories} key={`${c}/${i}`}>\n        <span>{c}</span>\n        <Icon name=\"angle-right\" className={styles.chevron} />\n      </span>\n    );\n  });\n\n  return (\n    <div className={cx(styles.label, className)}>\n      <label {...labelProps}>\n        <div className={styles.labelContent}>\n          {categories}\n          {children}\n        </div>\n        {description && <span className={styles.description}>{description}</span>}\n      </label>\n    </div>\n  );\n};\n\nexport const getLabelStyles = (theme: GrafanaTheme2) => ({\n  label: css({\n    label: 'Label',\n    fontSize: theme.typography.size.sm,\n    fontWeight: theme.typography.fontWeightMedium,\n    lineHeight: 1.25,\n    marginBottom: theme.spacing(0.5),\n    color: theme.colors.text.primary,\n    maxWidth: '480px',\n  }),\n  labelContent: css({\n    display: 'flex',\n    alignItems: 'center',\n  }),\n  description: css({\n    label: 'Label-description',\n    color: theme.colors.text.secondary,\n    fontSize: theme.typography.size.sm,\n    fontWeight: theme.typography.fontWeightRegular,\n    marginTop: theme.spacing(0.25),\n    display: 'block',\n  }),\n  categories: css({\n    label: 'Label-categories',\n    display: 'inline-flex',\n    alignItems: 'center',\n  }),\n  chevron: css({\n    margin: theme.spacing(0, 0.25),\n  }),\n});\n"],"names":[],"mappings":";;;;;;AAmBO,MAAM,KAAA,GAAQ,CAAC,EAAE,QAAA,EAAU,aAAa,SAAA,EAAW,QAAA,EAAU,GAAG,UAAA,EAAW,KAAkB;AAClG,EAAA,MAAM,MAAA,GAAS,WAAW,cAAc,CAAA;AACxC,EAAA,MAAM,UAAA,GAAa,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,GAAA,CAAI,CAAC,GAAG,CAAA,KAAM;AACzC,IAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,UAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,CAAA,EAAE,CAAA;AAAA,0BACR,IAAA,EAAA,EAAK,IAAA,EAAK,aAAA,EAAc,SAAA,EAAW,OAAO,OAAA,EAAS;AAAA,KAAA,EAAA,EAFb,CAAA,EAAG,CAAC,CAAA,CAAA,EAAI,CAAC,CAAA,CAGlD,CAAA;AAAA,EAEJ,CAAA,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,KAAA,EAAO,SAAS,CAAA,EACxC,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAO,GAAG,UAAA,EACT,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EACpB,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MACA;AAAA,KAAA,EACH,CAAA;AAAA,IACC,+BAAe,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,aAAc,QAAA,EAAA,WAAA,EAAY;AAAA,GAAA,EACpE,CAAA,EACF,CAAA;AAEJ;AAEO,MAAM,cAAA,GAAiB,CAAC,KAAA,MAA0B;AAAA,EACvD,OAAO,GAAA,CAAI;AAAA,IACT,KAAA,EAAO,OAAA;AAAA,IACP,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,IAAA,CAAK,EAAA;AAAA,IAChC,UAAA,EAAY,MAAM,UAAA,CAAW,gBAAA;AAAA,IAC7B,UAAA,EAAY,IAAA;AAAA,IACZ,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,IACzB,QAAA,EAAU;AAAA,GACX,CAAA;AAAA,EACD,cAAc,GAAA,CAAI;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,KAAA,EAAO,mBAAA;AAAA,IACP,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,IACzB,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,IAAA,CAAK,EAAA;AAAA,IAChC,UAAA,EAAY,MAAM,UAAA,CAAW,iBAAA;AAAA,IAC7B,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,IAC7B,OAAA,EAAS;AAAA,GACV,CAAA;AAAA,EACD,YAAY,GAAA,CAAI;AAAA,IACd,KAAA,EAAO,kBAAA;AAAA,IACP,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,SAAS,GAAA,CAAI;AAAA,IACX,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,IAAI;AAAA,GAC9B;AACH,CAAA;;;;"}