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

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');

"use strict";
const FieldValidationMessage = ({
  children,
  id,
  horizontal,
  className
}) => {
  const styles = ThemeContext.useStyles2(getFieldValidationMessageStyles);
  const cssName = css.cx(horizontal ? styles.horizontal : styles.vertical, className);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, role: "alert", "aria-live": "polite", className: cssName, children: [
    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: styles.fieldValidationMessageIcon, name: "exclamation-circle" }),
    children
  ] });
};
const getFieldValidationMessageStyles = (theme) => {
  const baseStyle = css.css({
    fontSize: theme.typography.size.sm,
    fontWeight: theme.typography.fontWeightMedium,
    padding: theme.spacing(0.5, 1),
    color: theme.colors.error.contrastText,
    background: theme.colors.error.main,
    borderRadius: theme.shape.radius.lg,
    position: "relative",
    display: "inline-block",
    alignSelf: "flex-start",
    a: {
      color: theme.colors.error.contrastText,
      textDecoration: "underline",
      "&:hover": {
        textDecoration: "none"
      }
    }
  });
  return {
    vertical: css.css(baseStyle, {
      margin: theme.spacing(0.5, 0, 0, 0),
      "&:before": {
        content: '""',
        position: "absolute",
        left: "9px",
        top: "-5px",
        width: 0,
        height: 0,
        borderWidth: "0 4px 5px 4px",
        borderColor: `transparent transparent ${theme.colors.error.main} transparent`,
        borderStyle: "solid"
      }
    }),
    horizontal: css.css(baseStyle, {
      marginLeft: "10px",
      "&:before": {
        content: '""',
        position: "absolute",
        left: "-5px",
        top: "9px",
        width: 0,
        height: 0,
        borderWidth: "4px 5px 4px 0",
        borderColor: "transparent #e02f44 transparent transparent",
        borderStyle: "solid"
      }
    }),
    fieldValidationMessageIcon: css.css({
      marginRight: theme.spacing()
    })
  };
};

exports.FieldValidationMessage = FieldValidationMessage;
//# sourceMappingURL=FieldValidationMessage.cjs.map