@grafana/ui
Version:
Grafana Components Library
1 lines • 1.75 kB
Source Map (JSON)
{"version":3,"file":"Legend.mjs","sources":["../../../../src/components/Forms/Legend.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { ReactNode } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface LabelProps extends React.HTMLAttributes<HTMLLegendElement> {\n children: string | ReactNode;\n description?: string;\n}\n\nexport const getLegendStyles = (theme: GrafanaTheme2) => {\n return {\n legend: css({\n fontSize: theme.typography.h3.fontSize,\n fontWeight: theme.typography.fontWeightRegular,\n margin: theme.spacing(0, 0, 2, 0),\n }),\n };\n};\n\n/**\n * Legend should be used to add a caption to a group of related form elements that have been grouped toegheter into a `FieldSet`.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-legend--docs\n */\nexport const Legend = ({ children, className, ...legendProps }: LabelProps) => {\n const styles = useStyles2(getLegendStyles);\n\n return (\n <legend className={cx(styles.legend, className)} {...legendProps}>\n {children}\n </legend>\n );\n};\n"],"names":[],"mappings":";;;;;AAaO,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyB;AACvD,EAAA,OAAO;AAAA,IACL,QAAQ,GAAA,CAAI;AAAA,MACV,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,EAAA,CAAG,QAAA;AAAA,MAC9B,UAAA,EAAY,MAAM,UAAA,CAAW,iBAAA;AAAA,MAC7B,QAAQ,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC;AAAA,KACjC;AAAA,GACH;AACF;AAOO,MAAM,SAAS,CAAC,EAAE,UAAU,SAAA,EAAW,GAAG,aAAY,KAAkB;AAC7E,EAAA,MAAM,MAAA,GAAS,WAAW,eAAe,CAAA;AAEzC,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,QAAQ,SAAS,CAAA,EAAI,GAAG,WAAA,EAClD,QAAA,EACH,CAAA;AAEJ;;;;"}