@instructure/ui-form-field 10.12.0 → 10.12.1-snapshot-0

package/lib/FormFieldGroup/index.js

@@ -67,13 +67,17 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_s
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
   }
   get makeStylesVariables() {
+    // new form errors dont need borders
+    const oldInvalid = !!this.props.messages && this.props.messages.findIndex(message => {
+      return message.type === 'error';
+    }) >= 0;
     return {
-      invalid: this.invalid
+      invalid: oldInvalid
     };
   }
   get invalid() {
     return !!this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error';
+      return message.type === 'error' || message.type === 'newError';
     }) >= 0;
   }
   renderColumns() {
@@ -105,12 +109,21 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_s
       makeStyles = _this$props3.makeStyles,
       isGroup = _this$props3.isGroup,
       props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    // This is quite ugly, but according to ARIA spec the `aria-invalid` prop
+    // can only be used with certain roles see
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid#associated_roles
+    // `aria-invalid` is put on in FormFieldLayout because the error message
+    // DOM part gets there its ID.
+    let ariaInvalid = void 0;
+    if (this.props.role && this.invalid && ['application', 'checkbox', 'combobox', 'gridcell', 'listbox', 'radiogroup', 'slider', 'spinbutton', 'textbox', 'tree', 'columnheader', 'rowheader', 'searchbox', 'switch', 'treegrid'].includes(this.props.role)) {
+      ariaInvalid = 'true';
+    }
     return (0, _emotion.jsx)(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps), (0, _pickProps.pickProps)(props, _FormFieldLayout.FormFieldLayout.allowedProps), {
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
       label: props.description,
       "aria-disabled": props.disabled ? 'true' : void 0,
-      "aria-invalid": this.invalid ? 'true' : void 0,
+      "aria-invalid": ariaInvalid,
       elementRef: this.handleRef,
       isGroup: isGroup
     }), this.renderFields());
@@ -120,6 +133,7 @@ let FormFieldGroup = exports.FormFieldGroup = (_dec = (0, _emotion.withStyle)(_s
   disabled: false,
   rowSpacing: 'medium',
   colSpacing: 'small',
-  vAlign: 'middle'
+  vAlign: 'middle',
+  isGroup: true
 }, _FormFieldGroup)) || _class);
 var _default = exports.default = FormFieldGroup;

package/lib/FormFieldLayout/__new-tests__/FormFieldLayout.test.js

@@ -7,7 +7,7 @@ var _vitest = require("vitest");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 require("@testing-library/jest-dom");
 var _index = require("../index");
-var _FormFieldLayout, _FormFieldLayout2, _input;
+var _FormFieldLayout, _FormFieldLayout2;
 /*
  * The MIT License (MIT)
  *
@@ -49,7 +49,7 @@ describe('<FormFieldLayout />', () => {
       }))),
       container = _render.container;
     const formFieldLayout = container.querySelector("label[class$='-formFieldLayout']");
-    const formFieldLabel = container.querySelector("span[class$='-formFieldLabel']");
+    const formFieldLabel = container.querySelector("span[class$='-formFieldLayout__label']");
     expect(formFieldLayout).toBeInTheDocument();
     expect(formFieldLabel).toBeInTheDocument();
     expect(formFieldLabel).toHaveTextContent('Username');
@@ -64,13 +64,15 @@ describe('<FormFieldLayout />', () => {
   });
   it('should provide a ref to the input container', () => {
     const inputContainerRef = _vitest.vi.fn();
+    const ref = /*#__PURE__*/_react.default.createRef();
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.FormFieldLayout, {
       label: "Username",
       inputContainerRef: inputContainerRef
-    }, _input || (_input = /*#__PURE__*/_react.default.createElement("input", {
-      type: "text"
-    }))));
-    const input = _react2.screen.getByLabelText('Username');
-    expect(inputContainerRef).toHaveBeenCalledWith(input.parentElement);
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      ref: ref
+    })));
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(inputContainerRef).toHaveBeenCalledWith(ref.current.parentElement);
   });
 });

package/lib/FormFieldLayout/index.js

@@ -8,14 +8,10 @@ exports.default = exports.FormFieldLayout = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
-var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-var _Grid = require("@instructure/ui-grid/lib/Grid");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 var _emotion = require("@instructure/emotion");
-var _FormFieldLabel = require("../FormFieldLabel");
 var _FormFieldMessages = require("../FormFieldMessages");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
@@ -55,6 +51,7 @@ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId
   constructor(props) {
     super(props);
     this._messagesId = void 0;
+    this._labelId = void 0;
     this.ref = null;
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -63,69 +60,96 @@ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId
         elementRef(el);
       }
     };
+    this.makeStyleProps = () => {
+      var _this$props$messages;
+      const hasNewErrorMsgAndIsGroup = !!((_this$props$messages = this.props.messages) !== null && _this$props$messages !== void 0 && _this$props$messages.find(m => m.type === 'newError')) && !!this.props.isGroup;
+      return {
+        hasMessages: this.hasMessages,
+        hasVisibleLabel: this.hasVisibleLabel,
+        // if true render error message above the controls (and below the label)
+        hasNewErrorMsgAndIsGroup: hasNewErrorMsgAndIsGroup
+      };
+    };
     this.handleInputContainerRef = node => {
       if (typeof this.props.inputContainerRef === 'function') {
         this.props.inputContainerRef(node);
       }
     };
     this._messagesId = props.messagesId || props.deterministicId();
+    this._labelId = props.deterministicId('FormField-Label');
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
   get hasVisibleLabel() {
-    return this.props.label && (0, _hasVisibleChildren.hasVisibleChildren)(this.props.label);
+    return this.props.label ? (0, _hasVisibleChildren.hasVisibleChildren)(this.props.label) : false;
   }
   get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0;
+    if (!this.props.messages || this.props.messages.length == 0) {
+      return false;
+    }
+    for (const msg of this.props.messages) {
+      if (msg.text) {
+        if (typeof msg.text === 'string') {
+          return msg.text.length > 0;
+        }
+        // this is more complicated (e.g. an array, a React component,...)
+        // but we don't try to optimize here for these cases
+        return true;
+      }
+    }
+    return false;
   }
   get elementType() {
     return (0, _getElementType.getElementType)(FormFieldLayout, this.props);
   }
-  get inlineContainerAndLabel() {
-    // Return if both the component container and label will display inline
-    return this.props.inline && this.props.layout === 'inline';
-  }
   renderLabel() {
     if (this.hasVisibleLabel) {
-      return (0, _emotion.jsx)(_Grid.Grid.Col, {
-        textAlign: this.props.labelAlign,
-        width: this.inlineContainerAndLabel ? 'auto' : 3
-      }, (0, _emotion.jsx)(_FormFieldLabel.FormFieldLabel, {
-        "aria-hidden": this.elementType === 'fieldset' ? 'true' : void 0
-      }, this.props.label));
-    } else if (this.elementType !== 'fieldset') {
-      // to avoid duplicate label/legend content
-      return this.props.label;
-    } else {
-      return null;
-    }
-  }
-  renderLegend() {
-    // note: the legend element must be the first child of a fieldset element for SR
-    // so we render it twice in that case (once for SR-only and one that is visible)
-    return (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, {
-      as: "legend"
-    }, this.props.label, this.hasMessages && (0, _emotion.jsx)(_FormFieldMessages.FormFieldMessages, {
-      messages: this.props.messages
-    }));
+      var _this$props$styles2;
+      if (this.elementType == 'fieldset') {
+        var _this$props$styles;
+        // `legend` has some special built in CSS, this can only be reset
+        // this way https://stackoverflow.com/a/65866981/319473
+        return (0, _emotion.jsx)("legend", {
+          style: {
+            display: 'contents'
+          }
+        }, (0, _emotion.jsx)("span", {
+          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.formFieldLabel
+        }, this.props.label));
+      }
+      return (0, _emotion.jsx)("span", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.formFieldLabel
+      }, this.props.label);
+    } else if (this.props.label) {
+      if (this.elementType == 'fieldset') {
+        return (0, _emotion.jsx)("legend", {
+          id: this._labelId,
+          style: {
+            display: 'contents'
+          }
+        }, this.props.label);
+      }
+      // needs to be wrapped because it needs an `id`
+      return (0, _emotion.jsx)("div", {
+        id: this._labelId
+      }, this.props.label);
+    } else return null;
   }
   renderVisibleMessages() {
-    return this.hasMessages ? (0, _emotion.jsx)(_Grid.Grid.Row, null, (0, _emotion.jsx)(_Grid.Grid.Col, {
-      offset: this.inlineContainerAndLabel ? void 0 : 3,
-      textAlign: this.inlineContainerAndLabel ? 'end' : void 0
-    }, (0, _emotion.jsx)(_FormFieldMessages.FormFieldMessages, {
+    return this.hasMessages ? (0, _emotion.jsx)(_FormFieldMessages.FormFieldMessages, {
       id: this._messagesId,
-      messages: this.props.messages
-    }))) : null;
+      messages: this.props.messages,
+      gridArea: "messages"
+    }) : null;
   }
   render() {
-    // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
+    // Should be `<label>` if it's a FormField, fieldset if it's a group
     const ElementType = this.elementType;
     const _this$props3 = this.props,
       makeStyles = _this$props3.makeStyles,
@@ -134,26 +158,20 @@ let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId
       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]), {
+    const hasNewErrorMsgAndIsGroup = !!(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]), {
       css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
+      "aria-describedby": this.hasMessages ? this._messagesId : void 0,
+      "aria-errormessage": this.props['aria-invalid'] ? this._messagesId : void 0,
       style: {
         width
       },
-      "aria-describedby": this.hasMessages ? this._messagesId : void 0,
       ref: this.handleRef
-    }), this.elementType === 'fieldset' && this.renderLegend(), (0, _emotion.jsx)(_Grid.Grid, Object.assign({
-      rowSpacing: "small",
-      colSpacing: "small",
-      startAt: layout === 'inline' && this.hasVisibleLabel ? 'medium' : null
-    }, (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
-    }, hasNewErrorMsg && (0, _emotion.jsx)("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.groupErrorMessage
-    }, this.renderVisibleMessages()), children)), !hasNewErrorMsg && this.renderVisibleMessages()));
+    }), this.renderLabel(), hasNewErrorMsgAndIsGroup && this.renderVisibleMessages(), (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldChildren,
+      ref: this.handleInputContainerRef
+    }, children), !hasNewErrorMsgAndIsGroup && this.renderVisibleMessages());
   }
 }, _FormFieldLayout.displayName = "FormFieldLayout", _FormFieldLayout.componentId = 'FormFieldLayout', _FormFieldLayout.propTypes = _props.propTypes, _FormFieldLayout.allowedProps = _props.allowedProps, _FormFieldLayout.defaultProps = {
   inline: false,

package/lib/FormFieldLayout/styles.js

@@ -29,6 +29,31 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 
+const generateGridLayout = (isInlineLayout, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages) => {
+  if (isInlineLayout) {
+    if (hasNewErrorMsgAndIsGroup) {
+      if (hasMessages) {
+        return `${hasVisibleLabel ? ' "label messages"' : '. messages'}
+                                      ". controls"`;
+      } else {
+        return `${hasVisibleLabel ? ' "label controls"' : '. controls'}`;
+      }
+    } else {
+      return `${hasVisibleLabel ? ' "label controls"' : '. controls'}
+              ${hasMessages ? ' ". messages"' : ''}`;
+    }
+  }
+  // stacked layout -- in this case we could use a simple `Flex`
+  if (hasNewErrorMsgAndIsGroup) {
+    return `${hasVisibleLabel ? ' "label"' : ''}
+            ${hasMessages ? ' "messages"' : ''}
+            "controls"`;
+  } else {
+    return `${hasVisibleLabel ? ' "label"' : ''}
+            "controls"
+            ${hasMessages ? ' "messages"' : ''}`;
+  }
+};
 /**
  * ---
  * private: true
@@ -36,18 +61,57 @@ var _emotion = require("@instructure/emotion");
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} styleProps
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (componentTheme, props, styleProps) => {
   const inline = props.inline,
+    layout = props.layout,
+    vAlign = props.vAlign,
+    labelAlign = props.labelAlign,
     margin = props.margin;
-  const spacing = componentTheme.spacing;
-  const cssMargin = (0, _emotion.mapSpacingToShorthand)(margin, spacing);
+  const hasMessages = styleProps.hasMessages,
+    hasVisibleLabel = styleProps.hasVisibleLabel,
+    hasNewErrorMsgAndIsGroup = styleProps.hasNewErrorMsgAndIsGroup;
+  const cssMargin = (0, _emotion.mapSpacingToShorthand)(margin, componentTheme.spacing);
+  const isInlineLayout = layout === 'inline';
+  // This is quite ugly, we should simplify it
+  const gridTemplateAreas = generateGridLayout(isInlineLayout, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages);
+  let gridTemplateColumns = '100%'; // stacked layout
+  if (isInlineLayout) {
+    gridTemplateColumns = '1fr 3fr';
+    if (inline) {
+      gridTemplateColumns = 'auto 3fr';
+    }
+  }
+  const labelStyles = {
+    all: 'initial',
+    display: 'block',
+    gridArea: 'label',
+    color: componentTheme.color,
+    fontFamily: componentTheme.fontFamily,
+    fontWeight: componentTheme.fontWeight,
+    fontSize: componentTheme.fontSize,
+    lineHeight: componentTheme.lineHeight,
+    margin: '0 0 0.75rem 0',
+    ...(isInlineLayout && {
+      // when inline add a small padding between the label and the control
+      paddingRight: componentTheme.inlinePadding,
+      // and use the horizontal alignment prop
+      [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+        textAlign: labelAlign
+      }
+    })
+  };
+  let alignItems = 'start';
+  if (vAlign == 'top') {
+    alignItems = 'start';
+  } else if (vAlign == 'middle') {
+    alignItems = 'center';
+  } else if (vAlign == 'bottom') {
+    alignItems = 'end';
+  }
   return {
-    groupErrorMessage: {
-      margin: '0.5rem 0'
-    },
     formFieldLayout: {
       label: 'formFieldLayout',
       all: 'initial',
@@ -58,13 +122,48 @@ const generateStyle = (componentTheme, props) => {
       direction: 'inherit',
       textAlign: 'start',
       opacity: 'inherit',
-      display: 'block',
+      display: 'grid',
+      alignItems: alignItems,
+      verticalAlign: 'middle',
+      // removes margin in inline layouts
+      gridTemplateColumns: gridTemplateColumns,
+      gridTemplateAreas: gridTemplateAreas,
+      [`@media screen and (max-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+        // for small screens use the stacked layout
+        gridTemplateColumns: '100%',
+        gridTemplateAreas: generateGridLayout(false, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
+      },
+      columnGap: '0.375rem',
       width: '100%',
       ...(inline && {
-        display: 'inline-block',
-        verticalAlign: 'middle',
+        display: 'inline-grid',
         width: 'auto'
       })
+    },
+    formFieldLabel: {
+      label: 'formFieldLayout__label',
+      ...(hasVisibleLabel && {
+        ...labelStyles,
+        // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+        '&:is(label)': labelStyles,
+        '&:-webkit-any(label)': labelStyles
+      })
+    },
+    formFieldChildren: {
+      label: 'formFieldLayout__children',
+      gridArea: 'controls',
+      // add a small margin between the message and the controls
+      ...(hasMessages && hasNewErrorMsgAndIsGroup && {
+        marginTop: '0.375rem'
+      }),
+      ...(hasMessages && !hasNewErrorMsgAndIsGroup && {
+        marginBottom: '0.75rem'
+      }),
+      ...(isInlineLayout && inline && {
+        [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+          justifySelf: 'start'
+        }
+      })
     }
   };
 };

package/lib/FormFieldLayout/theme.js

@@ -28,10 +28,36 @@ exports.default = void 0;
  * SOFTWARE.
  */
 
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
 const generateComponentTheme = theme => {
-  const spacing = theme.spacing;
+  var _colors$contrasts;
+  const colors = theme.colors,
+    typography = theme.typography,
+    spacing = theme.spacing,
+    breakpoints = theme.breakpoints,
+    themeName = theme.key;
+  const themeSpecificStyle = {
+    canvas: {
+      color: theme['ic-brand-font-color-dark']
+    }
+  };
+  const componentVariables = {
+    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit,
+    inlinePadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    stackedOrInlineBreakpoint: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium,
+    spacing: theme.spacing
+  };
   return {
-    spacing
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
   };
 };
 var _default = exports.default = generateComponentTheme;

package/lib/FormFieldMessages/props.js

@@ -32,6 +32,7 @@ var _FormPropTypes = require("../FormPropTypes");
  */
 
 const propTypes = exports.propTypes = {
-  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message)
+  messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
+  gridArea: _propTypes.default.string
 };
-const allowedProps = exports.allowedProps = ['messages'];
+const allowedProps = exports.allowedProps = ['messages', 'gridArea'];

package/lib/FormFieldMessages/styles.js

@@ -35,16 +35,18 @@ exports.default = void 0;
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, props) => {
   return {
     formFieldMessages: {
       label: 'formFieldMessages',
       padding: 0,
       display: 'block',
-      margin: `calc(-1 * ${componentTheme.topMargin}) 0 0 0`
+      margin: `calc(-${componentTheme.topMargin}) 0 0 0`,
+      ...(props.gridArea && {
+        gridArea: props.gridArea
+      })
     },
     message: {
       label: 'formFieldMessages__message',

package/lib/FormPropTypes.js

@@ -32,6 +32,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 const formMessageTypePropType = exports.formMessageTypePropType = _propTypes.default.oneOf(['error', 'newError', 'hint', 'success', 'screenreader-only']);
 const formMessageChildPropType = exports.formMessageChildPropType = _propTypes.default.node;
+
+// TODO it will be easier if this would be just a string
+/**
+ * The text to display in the form message
+ */
+
 /**
  * ---
  * category: utilities/form

package/lib/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "FormFieldGroup", {
     return _FormFieldGroup.FormFieldGroup;
   }
 });
-Object.defineProperty(exports, "FormFieldLabel", {
-  enumerable: true,
-  get: function () {
-    return _FormFieldLabel.FormFieldLabel;
-  }
-});
 Object.defineProperty(exports, "FormFieldLayout", {
   enumerable: true,
   get: function () {
@@ -46,7 +40,6 @@ Object.defineProperty(exports, "FormPropTypes", {
   }
 });
 var _FormField = require("./FormField");
-var _FormFieldLabel = require("./FormFieldLabel");
 var _FormFieldMessage = require("./FormFieldMessage");
 var _FormFieldMessages = require("./FormFieldMessages");
 var _FormFieldLayout = require("./FormFieldLayout");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "10.12.0",
+  "version": "10.12.1-snapshot-0",
   "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.12.0",
-    "@instructure/ui-babel-preset": "10.12.0",
-    "@instructure/ui-test-utils": "10.12.0",
-    "@instructure/ui-themes": "10.12.0",
+    "@instructure/ui-axe-check": "10.12.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.12.1-snapshot-0",
+    "@instructure/ui-test-utils": "10.12.1-snapshot-0",
+    "@instructure/ui-themes": "10.12.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.12.0",
-    "@instructure/emotion": "10.12.0",
-    "@instructure/shared-types": "10.12.0",
-    "@instructure/ui-a11y-content": "10.12.0",
-    "@instructure/ui-a11y-utils": "10.12.0",
-    "@instructure/ui-grid": "10.12.0",
-    "@instructure/ui-icons": "10.12.0",
-    "@instructure/ui-react-utils": "10.12.0",
-    "@instructure/ui-utils": "10.12.0",
-    "@instructure/uid": "10.12.0",
+    "@instructure/console": "10.12.1-snapshot-0",
+    "@instructure/emotion": "10.12.1-snapshot-0",
+    "@instructure/shared-types": "10.12.1-snapshot-0",
+    "@instructure/ui-a11y-content": "10.12.1-snapshot-0",
+    "@instructure/ui-a11y-utils": "10.12.1-snapshot-0",
+    "@instructure/ui-grid": "10.12.1-snapshot-0",
+    "@instructure/ui-icons": "10.12.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.12.1-snapshot-0",
+    "@instructure/ui-utils": "10.12.1-snapshot-0",
+    "@instructure/uid": "10.12.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/FormField/README.md

@@ -9,7 +9,35 @@ components. In most cases it shouldn't be used directly.
 ---
 type: example
 ---
-<FormField id="_foo123" label="Opacity" width="200px">
-  <input style={{display: 'block', width: '100%'}} id="_foo123"/>
-</FormField>
+<div>
+  <FormField id="_foo121" label="Stacked layout" width="400px" layout="stacked"
+             messages={[{type:'success', text: 'This is a success message'}, {type:'newError', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>
+    <TextInput id="_foo121"/>
+  </FormField>
+  test
+  <hr/>
+  <FormField id="_foo122" label="Stacked layout (inline=true)" width="400px" layout="stacked" inline
+             messages={[{type:'success', text: 'This is a success message'}, {type:'newError', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>
+    <TextInput id="_foo122"/>
+  </FormField>
+  test
+  <hr/>
+  <FormField id="_foo123" label="Inline layout" width="400px" layout="inline"
+             messages={[{type:'success', text: 'success!'}, {type:'newError', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>
+    <TextInput id="_foo123"/>
+  </FormField>
+  test
+  <hr/>
+  <FormField id="_foo124" label="Inline layout (inline=true)" width="400px" layout="inline" inline
+             messages={[{type:'success', text: 'success!'}, {type:'newError', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>
+    <TextInput id="_foo124"/>
+  </FormField>
+  test
+  <hr/>
+  <FormField id="_foo121" label={<ScreenReaderContent>hidden text</ScreenReaderContent>} width="400px" layout="stacked">
+    <TextInput id="_foo121" />
+  </FormField>
+  test
+  <hr/>
+</div>
 ```

package/src/FormField/index.tsx

@@ -68,7 +68,6 @@ class FormField extends Component<FormFieldProps> {
         label={this.props.label}
         vAlign={this.props.vAlign}
         as="label"
-        htmlFor={this.props.id}
         elementRef={this.handleRef}
         margin={this.props.margin}
       />