@grafana/ui/dist/cjs/components/Forms/FieldValidationMessage.cjs.map

Grafana Components Library

{"version":3,"file":"FieldValidationMessage.cjs","sources":["../../../../src/components/Forms/FieldValidationMessage.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nexport interface FieldValidationMessageProps {\n  /** Override component style */\n  className?: string;\n  horizontal?: boolean;\n  id?: string;\n}\n\n/**\n * Component for displaying a validation error message under an element.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldvalidationmessage--docs\n */\nexport const FieldValidationMessage = ({\n  children,\n  id,\n  horizontal,\n  className,\n}: React.PropsWithChildren<FieldValidationMessageProps>) => {\n  const styles = useStyles2(getFieldValidationMessageStyles);\n  const cssName = cx(horizontal ? styles.horizontal : styles.vertical, className);\n\n  return (\n    <div id={id} role=\"alert\" aria-live=\"polite\" className={cssName}>\n      <Icon className={styles.fieldValidationMessageIcon} name=\"exclamation-circle\" />\n      {children}\n    </div>\n  );\n};\n\nconst getFieldValidationMessageStyles = (theme: GrafanaTheme2) => {\n  const baseStyle = css({\n    fontSize: theme.typography.size.sm,\n    fontWeight: theme.typography.fontWeightMedium,\n    padding: theme.spacing(0.5, 1),\n    color: theme.colors.error.contrastText,\n    background: theme.colors.error.main,\n    borderRadius: theme.shape.radius.lg,\n    position: 'relative',\n    display: 'inline-block',\n    alignSelf: 'flex-start',\n\n    a: {\n      color: theme.colors.error.contrastText,\n      textDecoration: 'underline',\n\n      '&:hover': {\n        textDecoration: 'none',\n      },\n    },\n  });\n\n  return {\n    vertical: css(baseStyle, {\n      margin: theme.spacing(0.5, 0, 0, 0),\n\n      '&:before': {\n        content: '\"\"',\n        position: 'absolute',\n        left: '9px',\n        top: '-5px',\n        width: 0,\n        height: 0,\n        borderWidth: '0 4px 5px 4px',\n        borderColor: `transparent transparent ${theme.colors.error.main} transparent`,\n        borderStyle: 'solid',\n      },\n    }),\n    horizontal: css(baseStyle, {\n      marginLeft: '10px',\n\n      '&:before': {\n        content: '\"\"',\n        position: 'absolute',\n        left: '-5px',\n        top: '9px',\n        width: 0,\n        height: 0,\n        borderWidth: '4px 5px 4px 0',\n        borderColor: 'transparent #e02f44 transparent transparent',\n        borderStyle: 'solid',\n      },\n    }),\n    fieldValidationMessageIcon: css({\n      marginRight: theme.spacing(),\n    }),\n  };\n};\n"],"names":["useStyles2","cx","jsxs","jsx","Icon","css"],"mappings":";;;;;;;;;;AAoBO,MAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,EAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAA4D;AAC1D,EAAA,MAAM,MAAA,GAASA,wBAAW,+BAA+B,CAAA;AACzD,EAAA,MAAM,UAAUC,MAAA,CAAG,UAAA,GAAa,OAAO,UAAA,GAAa,MAAA,CAAO,UAAU,SAAS,CAAA;AAE9E,EAAA,uBACEC,eAAA,CAAC,SAAI,EAAA,EAAQ,IAAA,EAAK,SAAQ,WAAA,EAAU,QAAA,EAAS,WAAW,OAAA,EACtD,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,SAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,0BAAA,EAA4B,MAAK,oBAAA,EAAqB,CAAA;AAAA,IAC7E;AAAA,GAAA,EACH,CAAA;AAEJ;AAEA,MAAM,+BAAA,GAAkC,CAAC,KAAA,KAAyB;AAChE,EAAA,MAAM,YAAYC,OAAA,CAAI;AAAA,IACpB,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,IAAA,CAAK,EAAA;AAAA,IAChC,UAAA,EAAY,MAAM,UAAA,CAAW,gBAAA;AAAA,IAC7B,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,GAAA,EAAK,CAAC,CAAA;AAAA,IAC7B,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,KAAA,CAAM,YAAA;AAAA,IAC1B,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,KAAA,CAAM,IAAA;AAAA,IAC/B,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,EAAA;AAAA,IACjC,QAAA,EAAU,UAAA;AAAA,IACV,OAAA,EAAS,cAAA;AAAA,IACT,SAAA,EAAW,YAAA;AAAA,IAEX,CAAA,EAAG;AAAA,MACD,KAAA,EAAO,KAAA,CAAM,MAAA,CAAO,KAAA,CAAM,YAAA;AAAA,MAC1B,cAAA,EAAgB,WAAA;AAAA,MAEhB,SAAA,EAAW;AAAA,QACT,cAAA,EAAgB;AAAA;AAClB;AACF,GACD,CAAA;AAED,EAAA,OAAO;AAAA,IACL,QAAA,EAAUA,QAAI,SAAA,EAAW;AAAA,MACvB,QAAQ,KAAA,CAAM,OAAA,CAAQ,GAAA,EAAK,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MAElC,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,UAAA;AAAA,QACV,IAAA,EAAM,KAAA;AAAA,QACN,GAAA,EAAK,MAAA;AAAA,QACL,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ,CAAA;AAAA,QACR,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa,CAAA,wBAAA,EAA2B,KAAA,CAAM,MAAA,CAAO,MAAM,IAAI,CAAA,YAAA,CAAA;AAAA,QAC/D,WAAA,EAAa;AAAA;AACf,KACD,CAAA;AAAA,IACD,UAAA,EAAYA,QAAI,SAAA,EAAW;AAAA,MACzB,UAAA,EAAY,MAAA;AAAA,MAEZ,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,UAAA;AAAA,QACV,IAAA,EAAM,MAAA;AAAA,QACN,GAAA,EAAK,KAAA;AAAA,QACL,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ,CAAA;AAAA,QACR,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa,6CAAA;AAAA,QACb,WAAA,EAAa;AAAA;AACf,KACD,CAAA;AAAA,IACD,4BAA4BA,OAAA,CAAI;AAAA,MAC9B,WAAA,EAAa,MAAM,OAAA;AAAQ,KAC5B;AAAA,GACH;AACF,CAAA;;;;"}