@instructure/ui-form-field 10.4.2-snapshot-10 → 10.4.2-snapshot-11

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.4.2-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-10) (2024-11-06)
+## [10.4.2-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-11) (2024-11-06)
 
-**Note:** Version bump only for package @instructure/ui-form-field
+
+### Features
+
+* **many:** add new form field error msg style + add asterisk for required fields ([9b03683](https://github.com/instructure/instructure-ui/commit/9b03683dadeef4c5deae2c60bea10686f143ff5d))
 
 
 

package/es/FormFieldGroup/index.js

@@ -103,7 +103,8 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
       label: props.description,
       "aria-disabled": props.disabled ? 'true' : void 0,
       "aria-invalid": this.invalid ? 'true' : void 0,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      isGroup: true
     }), this.renderFields());
   }
 }, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.propTypes = propTypes, _FormFieldGroup.allowedProps = allowedProps, _FormFieldGroup.defaultProps = {

package/es/FormFieldLayout/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["makeStyles", "styles"];
+const _excluded = ["makeStyles", "styles", "messages", "isGroup"];
 var _dec, _dec2, _class, _FormFieldLayout;
 /*
  * The MIT License (MIT)
@@ -123,10 +123,13 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
     const _this$props3 = this.props,
       makeStyles = _this$props3.makeStyles,
       styles = _this$props3.styles,
+      messages = _this$props3.messages,
+      isGroup = _this$props3.isGroup,
       props = _objectWithoutProperties(_this$props3, _excluded);
     const width = props.width,
       layout = props.layout,
       children = props.children;
+    const hasNewErrorMsg = !!(messages !== null && messages !== void 0 && messages.find(m => m.type === 'newError')) && isGroup;
     return jsx(ElementType, Object.assign({}, omitProps(props, [...FormFieldLayout.allowedProps, ...Grid.allowedProps]), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
       style: {
@@ -141,7 +144,9 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
     }, pickProps(props, Grid.allowedProps)), jsx(Grid.Row, null, this.renderLabel(), jsx(Grid.Col, {
       width: this.inlineContainerAndLabel ? 'auto' : void 0,
       elementRef: this.handleInputContainerRef
-    }, children)), this.renderVisibleMessages()));
+    }, hasNewErrorMsg && jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.groupErrorMessage
+    }, this.renderVisibleMessages()), children)), !hasNewErrorMsg && this.renderVisibleMessages()));
   }
 }, _FormFieldLayout.displayName = "FormFieldLayout", _FormFieldLayout.componentId = 'FormFieldLayout', _FormFieldLayout.propTypes = propTypes, _FormFieldLayout.allowedProps = allowedProps, _FormFieldLayout.defaultProps = {
   inline: false,

package/es/FormFieldLayout/props.js

@@ -37,7 +37,8 @@ const propTypes = {
   vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
   width: PropTypes.string,
   inputContainerRef: PropTypes.func,
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  isGroup: PropTypes.bool
 };
 const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'
 

package/es/FormFieldLayout/styles.js

@@ -35,6 +35,9 @@
 const generateStyle = (_componentTheme, props) => {
   const inline = props.inline;
   return {
+    groupErrorMessage: {
+      margin: '0.5rem'
+    },
     formFieldLayout: {
       label: 'formFieldLayout',
       all: 'initial',

package/es/FormFieldMessage/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _FormFieldMessage;
+var _dec, _class, _FormFieldMessage, _IconWarningSolid;
 /*
  * The MIT License (MIT)
  *
@@ -26,6 +26,7 @@ var _dec, _class, _FormFieldMessage;
 /** @jsx jsx */
 import { Component } from 'react';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { IconWarningSolid } from '@instructure/ui-icons';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -66,9 +67,17 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
       children = _this$props3.children,
       styles = _this$props3.styles;
     return this.props.variant !== 'screenreader-only' ? jsx("span", {
+      css: {
+        display: 'flex'
+      }
+    }, this.props.variant === 'newError' && jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.errorIcon
+    }, _IconWarningSolid || (_IconWarningSolid = jsx(IconWarningSolid, {
+      color: "error"
+    }))), jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
       ref: this.handleRef
-    }, children) : jsx(ScreenReaderContent, {
+    }, children)) : jsx(ScreenReaderContent, {
       elementRef: this.handleRef
     }, children);
   }

package/es/FormFieldMessage/styles.js

@@ -41,12 +41,20 @@ const generateStyle = (componentTheme, props) => {
     error: {
       color: componentTheme.colorError
     },
+    newError: {
+      color: componentTheme.colorError
+    },
     success: {
       color: componentTheme.colorSuccess
     },
     'screenreader-only': {}
   };
   return {
+    errorIcon: {
+      fontSize: componentTheme.fontSize,
+      marginRight: componentTheme.errorIconMarginRight,
+      lineHeight: 1.25
+    },
     formFieldMessage: {
       label: 'formFieldMessage',
       fontFamily: componentTheme.fontFamily,

package/es/FormFieldMessage/theme.js

@@ -31,7 +31,8 @@ const generateComponentTheme = theme => {
   var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
   const colors = theme.colors,
     typography = theme.typography,
-    themeName = theme.key;
+    themeName = theme.key,
+    spacing = theme.spacing;
   const themeSpecificStyle = {
     canvas: {
       colorHint: theme['ic-brand-font-color-dark']
@@ -44,7 +45,8 @@ const generateComponentTheme = theme => {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
+    errorIconMarginRight: spacing.xxSmall
   };
   return {
     ...componentVariables,

package/es/FormPropTypes.js

@@ -23,7 +23,7 @@
  */
 
 import PropTypes from 'prop-types';
-const formMessageTypePropType = PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only']);
+const formMessageTypePropType = PropTypes.oneOf(['error', 'newError', 'hint', 'success', 'screenreader-only']);
 const formMessageChildPropType = PropTypes.node;
 /**
  * ---

package/lib/FormFieldGroup/index.js

@@ -110,7 +110,8 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_s
       label: props.description,
       "aria-disabled": props.disabled ? 'true' : void 0,
       "aria-invalid": this.invalid ? 'true' : void 0,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      isGroup: true
     }), this.renderFields());
   }
 }, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.propTypes = _props.propTypes, _FormFieldGroup.allowedProps = _props.allowedProps, _FormFieldGroup.defaultProps = {

package/lib/FormFieldLayout/index.js

@@ -20,7 +20,7 @@ var _FormFieldLabel = require("../FormFieldLabel");
 var _FormFieldMessages = require("../FormFieldMessages");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
-const _excluded = ["makeStyles", "styles"];
+const _excluded = ["makeStyles", "styles", "messages", "isGroup"];
 var _dec, _dec2, _class, _FormFieldLayout;
 /*
  * The MIT License (MIT)
@@ -132,10 +132,13 @@ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId
     const _this$props3 = this.props,
       makeStyles = _this$props3.makeStyles,
       styles = _this$props3.styles,
+      messages = _this$props3.messages,
+      isGroup = _this$props3.isGroup,
       props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const width = props.width,
       layout = props.layout,
       children = props.children;
+    const hasNewErrorMsg = !!(messages !== null && messages !== void 0 && messages.find(m => m.type === 'newError')) && isGroup;
     return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _omitProps.omitProps)(props, [...FormFieldLayout.allowedProps, ..._Grid.Grid.allowedProps]), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
       style: {
@@ -150,7 +153,9 @@ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId
     }, (0, _pickProps.pickProps)(props, _Grid.Grid.allowedProps)), (0, _emotion.jsx)(_Grid.Grid.Row, null, this.renderLabel(), (0, _emotion.jsx)(_Grid.Grid.Col, {
       width: this.inlineContainerAndLabel ? 'auto' : void 0,
       elementRef: this.handleInputContainerRef
-    }, children)), this.renderVisibleMessages()));
+    }, hasNewErrorMsg && (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.groupErrorMessage
+    }, this.renderVisibleMessages()), children)), !hasNewErrorMsg && this.renderVisibleMessages()));
   }
 }, _FormFieldLayout.displayName = "FormFieldLayout", _FormFieldLayout.componentId = 'FormFieldLayout', _FormFieldLayout.propTypes = _props.propTypes, _FormFieldLayout.allowedProps = _props.allowedProps, _FormFieldLayout.defaultProps = {
   inline: false,

package/lib/FormFieldLayout/props.js

@@ -44,7 +44,8 @@ const propTypes = exports.propTypes = {
   vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
   width: _propTypes.default.string,
   inputContainerRef: _propTypes.default.func,
-  elementRef: _propTypes.default.func
+  elementRef: _propTypes.default.func,
+  isGroup: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'
 

package/lib/FormFieldLayout/styles.js

@@ -41,6 +41,9 @@ exports.default = void 0;
 const generateStyle = (_componentTheme, props) => {
   const inline = props.inline;
   return {
+    groupErrorMessage: {
+      margin: '0.5rem'
+    },
     formFieldLayout: {
       label: 'formFieldLayout',
       all: 'initial',

package/lib/FormFieldMessage/index.js

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.FormFieldMessage = void 0;
 var _react = require("react");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
+var _IconWarningSolid2 = require("@instructure/ui-icons/lib/IconWarningSolid.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _dec, _class, _FormFieldMessage;
+var _dec, _class, _FormFieldMessage, _IconWarningSolid;
 /*
  * The MIT License (MIT)
  *
@@ -72,9 +73,17 @@ let FormFieldMessage = exports.FormFieldMessage = (_dec = (0, _emotion.withStyle
       children = _this$props3.children,
       styles = _this$props3.styles;
     return this.props.variant !== 'screenreader-only' ? (0, _emotion.jsx)("span", {
+      css: {
+        display: 'flex'
+      }
+    }, this.props.variant === 'newError' && (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.errorIcon
+    }, _IconWarningSolid || (_IconWarningSolid = (0, _emotion.jsx)(_IconWarningSolid2.IconWarningSolid, {
+      color: "error"
+    }))), (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
       ref: this.handleRef
-    }, children) : (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, {
+    }, children)) : (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, {
       elementRef: this.handleRef
     }, children);
   }

package/lib/FormFieldMessage/styles.js

@@ -47,12 +47,20 @@ const generateStyle = (componentTheme, props) => {
     error: {
       color: componentTheme.colorError
     },
+    newError: {
+      color: componentTheme.colorError
+    },
     success: {
       color: componentTheme.colorSuccess
     },
     'screenreader-only': {}
   };
   return {
+    errorIcon: {
+      fontSize: componentTheme.fontSize,
+      marginRight: componentTheme.errorIconMarginRight,
+      lineHeight: 1.25
+    },
     formFieldMessage: {
       label: 'formFieldMessage',
       fontFamily: componentTheme.fontFamily,

package/lib/FormFieldMessage/theme.js

@@ -37,7 +37,8 @@ const generateComponentTheme = theme => {
   var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
   const colors = theme.colors,
     typography = theme.typography,
-    themeName = theme.key;
+    themeName = theme.key,
+    spacing = theme.spacing;
   const themeSpecificStyle = {
     canvas: {
       colorHint: theme['ic-brand-font-color-dark']
@@ -50,7 +51,8 @@ const generateComponentTheme = theme => {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
+    errorIconMarginRight: spacing.xxSmall
   };
   return {
     ...componentVariables,

package/lib/FormPropTypes.js

@@ -30,7 +30,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 
-const formMessageTypePropType = exports.formMessageTypePropType = _propTypes.default.oneOf(['error', 'hint', 'success', 'screenreader-only']);
+const formMessageTypePropType = exports.formMessageTypePropType = _propTypes.default.oneOf(['error', 'newError', 'hint', 'success', 'screenreader-only']);
 const formMessageChildPropType = exports.formMessageChildPropType = _propTypes.default.node;
 /**
  * ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "10.4.2-snapshot-10",
+  "version": "10.4.2-snapshot-11",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.4.2-snapshot-10",
-    "@instructure/ui-babel-preset": "10.4.2-snapshot-10",
-    "@instructure/ui-test-utils": "10.4.2-snapshot-10",
-    "@instructure/ui-themes": "10.4.2-snapshot-10",
+    "@instructure/ui-axe-check": "10.4.2-snapshot-11",
+    "@instructure/ui-babel-preset": "10.4.2-snapshot-11",
+    "@instructure/ui-test-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-themes": "10.4.2-snapshot-11",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/console": "10.4.2-snapshot-10",
-    "@instructure/emotion": "10.4.2-snapshot-10",
-    "@instructure/shared-types": "10.4.2-snapshot-10",
-    "@instructure/ui-a11y-content": "10.4.2-snapshot-10",
-    "@instructure/ui-a11y-utils": "10.4.2-snapshot-10",
-    "@instructure/ui-grid": "10.4.2-snapshot-10",
-    "@instructure/ui-icons": "10.4.2-snapshot-10",
-    "@instructure/ui-react-utils": "10.4.2-snapshot-10",
-    "@instructure/ui-utils": "10.4.2-snapshot-10",
-    "@instructure/uid": "10.4.2-snapshot-10",
+    "@instructure/console": "10.4.2-snapshot-11",
+    "@instructure/emotion": "10.4.2-snapshot-11",
+    "@instructure/shared-types": "10.4.2-snapshot-11",
+    "@instructure/ui-a11y-content": "10.4.2-snapshot-11",
+    "@instructure/ui-a11y-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-grid": "10.4.2-snapshot-11",
+    "@instructure/ui-icons": "10.4.2-snapshot-11",
+    "@instructure/ui-react-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-utils": "10.4.2-snapshot-11",
+    "@instructure/uid": "10.4.2-snapshot-11",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/FormFieldGroup/index.tsx

@@ -145,6 +145,7 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
         aria-disabled={props.disabled ? 'true' : undefined}
         aria-invalid={this.invalid ? 'true' : undefined}
         elementRef={this.handleRef}
+        isGroup
       >
         {this.renderFields()}
       </FormFieldLayout>

package/src/FormFieldLayout/index.tsx

@@ -179,9 +179,12 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
     // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
     const ElementType = this.elementType as any
 
-    const { makeStyles, styles, ...props } = this.props
+    const { makeStyles, styles, messages, isGroup, ...props } = this.props
 
     const { width, layout, children } = props
+
+    const hasNewErrorMsg =
+      !!messages?.find((m) => m.type === 'newError') && isGroup
     return (
       <ElementType
         {...omitProps(props, [
@@ -208,10 +211,13 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
               width={this.inlineContainerAndLabel ? 'auto' : undefined}
               elementRef={this.handleInputContainerRef}
             >
+              {hasNewErrorMsg && (
+                <div css={styles?.groupErrorMessage}>{this.renderVisibleMessages()}</div>
+              )}
               {children}
             </Grid.Col>
           </Grid.Row>
-          {this.renderVisibleMessages()}
+          {!hasNewErrorMsg && this.renderVisibleMessages()}
         </Grid>
       </ElementType>
     )

package/src/FormFieldLayout/props.ts

@@ -67,6 +67,7 @@ type FormFieldLayoutOwnProps = {
    * provides a reference to the underlying html root element
    */
   elementRef?: (element: Element | null) => void
+  isGroup?: boolean
 }
 
 type PropKeys = keyof FormFieldLayoutOwnProps
@@ -75,9 +76,10 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type FormFieldLayoutProps = FormFieldLayoutOwnProps &
   WithStyleProps<null, FormFieldLayoutStyle> &
-  OtherHTMLAttributes<FormFieldLayoutOwnProps> & WithDeterministicIdProps
+  OtherHTMLAttributes<FormFieldLayoutOwnProps> &
+  WithDeterministicIdProps
 
-type FormFieldLayoutStyle = ComponentStyle<'formFieldLayout'>
+type FormFieldLayoutStyle = ComponentStyle<'formFieldLayout' | 'groupErrorMessage'>
 
 const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,
@@ -92,7 +94,8 @@ const propTypes: PropValidators<PropKeys> = {
   vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
   width: PropTypes.string,
   inputContainerRef: PropTypes.func,
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  isGroup: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/FormFieldLayout/styles.ts

@@ -41,6 +41,9 @@ const generateStyle = (
   const { inline } = props
 
   return {
+    groupErrorMessage: {
+      margin: '0.5rem',
+    },
     formFieldLayout: {
       label: 'formFieldLayout',
       all: 'initial',

package/src/FormFieldMessage/index.tsx

@@ -27,6 +27,8 @@ import { Component } from 'react'
 
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
+import { IconWarningSolid } from '@instructure/ui-icons'
+
 import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
@@ -78,8 +80,15 @@ class FormFieldMessage extends Component<FormFieldMessageProps> {
     const { children, styles } = this.props
 
     return this.props.variant !== 'screenreader-only' ? (
-      <span css={styles?.formFieldMessage} ref={this.handleRef}>
-        {children}
+      <span css={{ display: 'flex' }}>
+        {this.props.variant === 'newError' && (
+          <span css={styles?.errorIcon}>
+            <IconWarningSolid color="error" />
+          </span>
+        )}
+        <span css={styles?.formFieldMessage} ref={this.handleRef}>
+          {children}
+        </span>
       </span>
     ) : (
       <ScreenReaderContent elementRef={this.handleRef}>

package/src/FormFieldMessage/props.ts

@@ -46,7 +46,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 type FormFieldMessageProps = FormFieldMessageOwnProps &
   WithStyleProps<FormFieldMessageTheme, FormFieldMessageStyle>
 
-type FormFieldMessageStyle = ComponentStyle<'formFieldMessage'>
+type FormFieldMessageStyle = ComponentStyle<'formFieldMessage' | 'errorIcon'>
 
 const propTypes: PropValidators<PropKeys> = {
   variant: formMessageTypePropType,

package/src/FormFieldMessage/styles.ts

@@ -45,11 +45,17 @@ const generateStyle = (
   const variants: Record<FormMessageType, { color?: string }> = {
     hint: { color: componentTheme.colorHint },
     error: { color: componentTheme.colorError },
+    newError: { color: componentTheme.colorError },
     success: { color: componentTheme.colorSuccess },
     'screenreader-only': {}
   }
 
   return {
+    errorIcon: {
+      fontSize: componentTheme.fontSize,
+      marginRight: componentTheme.errorIconMarginRight,
+      lineHeight: 1.25,
+    },
     formFieldMessage: {
       label: 'formFieldMessage',
       fontFamily: componentTheme.fontFamily,

package/src/FormFieldMessage/theme.ts

@@ -31,7 +31,7 @@ import { FormFieldMessageTheme } from '@instructure/shared-types'
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = (theme: Theme): FormFieldMessageTheme => {
-  const { colors, typography, key: themeName } = theme
+  const { colors, typography, key: themeName, spacing } = theme
 
   const themeSpecificStyle: ThemeSpecificStyle<FormFieldMessageTheme> = {
     canvas: {
@@ -47,7 +47,8 @@ const generateComponentTheme = (theme: Theme): FormFieldMessageTheme => {
     fontFamily: typography?.fontFamily,
     fontWeight: typography?.fontWeightNormal,
     fontSize: typography?.fontSizeSmall,
-    lineHeight: typography?.lineHeight
+    lineHeight: typography?.lineHeight,
+    errorIconMarginRight: spacing.xxSmall
   }
 
   return {

package/src/FormPropTypes.ts

@@ -27,13 +27,19 @@ import PropTypes from 'prop-types'
 
 const formMessageTypePropType = PropTypes.oneOf([
   'error',
+  'newError',
   'hint',
   'success',
   'screenreader-only'
 ])
 const formMessageChildPropType = PropTypes.node
 
-type FormMessageType = 'error' | 'hint' | 'success' | 'screenreader-only'
+type FormMessageType =
+  | 'newError'
+  | 'error'
+  | 'hint'
+  | 'success'
+  | 'screenreader-only'
 type FormMessageChild = React.ReactNode
 
 /**