UNPKG

@grafana/ui

Version:
1 lines 2.04 kB
{"version":3,"file":"FormLabel.mjs","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\n\ninterface Props {\n children: ReactNode;\n className?: string;\n htmlFor?: string;\n isFocused?: boolean;\n isInvalid?: boolean;\n tooltip?: PopoverContent;\n width?: number | 'auto';\n /** Make tooltip interactive */\n interactive?: boolean;\n}\n\nexport const FormLabel = ({\n children,\n isFocused,\n isInvalid,\n className,\n htmlFor,\n tooltip,\n width,\n interactive,\n ...rest\n}: Props) => {\n const classes = classNames(className, `gf-form-label width-${width ? width : '10'}`, {\n 'gf-form-label--is-focused': isFocused,\n 'gf-form-label--is-invalid': isInvalid,\n });\n\n return (\n <label className={classes} {...rest} htmlFor={htmlFor}>\n {children}\n {tooltip && (\n <Tooltip placement=\"top\" content={tooltip} theme={'info'} interactive={interactive}>\n <Icon name=\"info-circle\" size=\"sm\" style={{ marginLeft: '10px' }} />\n </Tooltip>\n )}\n </label>\n );\n};\n\nexport const InlineFormLabel = FormLabel;\n"],"names":[],"mappings":";;;;;;AAmBO,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,UAAU,UAAA,CAAW,SAAA,EAAW,uBAAuB,KAAA,GAAQ,KAAA,GAAQ,IAAI,CAAA,CAAA,EAAI;AAAA,IACnF,2BAAA,EAA6B,SAAA;AAAA,IAC7B,2BAAA,EAA6B;AAAA,GAC9B,CAAA;AAED,EAAA,4BACG,OAAA,EAAA,EAAM,SAAA,EAAW,OAAA,EAAU,GAAG,MAAM,OAAA,EAClC,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA,wBACE,OAAA,EAAA,EAAQ,SAAA,EAAU,OAAM,OAAA,EAAS,OAAA,EAAS,OAAO,MAAA,EAAQ,WAAA,EACxD,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,eAAc,IAAA,EAAK,IAAA,EAAK,OAAO,EAAE,UAAA,EAAY,MAAA,EAAO,EAAG,CAAA,EACpE;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,MAAM,eAAA,GAAkB;;;;"}