@instructure/ui-form-field 9.11.0 → 9.11.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.11.1](https://github.com/instructure/instructure-ui/compare/v9.11.0...v9.11.1) (2025-03-11)
+
+
+### Bug Fixes
+
+* fix FormFieldLabel not read on NVDA hover ([c29b6ab](https://github.com/instructure/instructure-ui/commit/c29b6ab989266c6a7875e3f0dbdee3efbf18606a))
+
+
+
+
+
 # [9.11.0](https://github.com/instructure/instructure-ui/compare/v9.10.2...v9.11.0) (2025-02-12)
 
 **Note:** Version bump only for package @instructure/ui-form-field

package/es/FormField/index.js

@@ -47,7 +47,11 @@ class FormField extends Component {
     return /*#__PURE__*/React.createElement(FormFieldLayout, Object.assign({}, omitProps(this.props, FormField.allowedProps), pickProps(this.props, FormFieldLayout.allowedProps), {
       label: this.props.label,
       vAlign: this.props.vAlign,
-      as: "label",
+      as: "label"
+      // This makes the control in focus when the label is clicked
+      // This is needed to prevent the wrong element to be focused, e.g.
+      // multi selects Tag-s
+      ,
       htmlFor: this.props.id,
       elementRef: this.handleRef
     }));

package/es/FormFieldGroup/__new-tests__/FormFieldGroup.test.js

@@ -46,7 +46,7 @@ describe('<FormFieldGroup />', () => {
         description: "Please enter your full name"
       }, /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
       container = _render.container;
-    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    const formFieldGroup = container.querySelector("span[class$='-formFieldLayout__label']");
     const firstNameInput = screen.getByLabelText('First:');
     const middleNameInput = screen.getByLabelText('Middle:');
     const lastNameInput = screen.getByLabelText('Last:');
@@ -64,7 +64,7 @@ describe('<FormFieldGroup />', () => {
         description: "Please enter your full name"
       }, children)),
       container = _render2.container;
-    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    const formFieldGroup = container.querySelector('label');
     expect(formFieldGroup).toBeInTheDocument();
   });
   it('links the messages to the fieldset via aria-describedby', () => {
@@ -86,13 +86,13 @@ describe('<FormFieldGroup />', () => {
     expect(message).toHaveTextContent('Invalid name');
     expect(message).toHaveAttribute('id', messagesId);
   });
-  it('displays description message inside the legend', () => {
+  it('displays description message inside the label', () => {
     const description = 'Please enter your full name';
     const _render4 = render( /*#__PURE__*/React.createElement(FormFieldGroup, {
         description: description
       }, _label5 || (_label5 = /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null))), _label6 || (_label6 = /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null))), _label7 || (_label7 = /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
       container = _render4.container;
-    const legend = container.querySelector("legend[class$='-screenReaderContent']");
+    const legend = container.querySelector("span[class$='-formFieldLayout__label']");
     expect(legend).toBeInTheDocument();
     expect(legend).toHaveTextContent(description);
   });

package/es/FormFieldGroup/index.js

@@ -60,13 +60,17 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
     (_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() {
@@ -98,12 +102,21 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
       makeStyles = _this$props3.makeStyles,
       isGroup = _this$props3.isGroup,
       props = _objectWithoutProperties(_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 jsx(FormFieldLayout, Object.assign({}, omitProps(props, FormFieldGroup.allowedProps), pickProps(props, 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());
@@ -113,7 +126,8 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
   disabled: false,
   rowSpacing: 'medium',
   colSpacing: 'small',
-  vAlign: 'middle'
+  vAlign: 'middle',
+  isGroup: true
 }, _FormFieldGroup)) || _class);
 export default FormFieldGroup;
 export { FormFieldGroup };

package/es/FormFieldLabel/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _FormFieldLabel;
+var _dec, _dec2, _class, _FormFieldLabel;
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +25,7 @@ var _dec, _class, _FormFieldLabel;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { omitProps, getElementType } from '@instructure/ui-react-utils';
+import { omitProps, getElementType, deprecated } from '@instructure/ui-react-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -35,8 +35,7 @@ import { propTypes, allowedProps } from './props';
 parent: FormField
 ---
 
-This is a helper component that is used by most of the custom form
-components. In most cases it shouldn't be used directly.
+This is a helper component that is used by most of the custom form components. In most cases it shouldn't be used directly.
 
 ```js
 ---
@@ -45,8 +44,9 @@ type: example
 <FormFieldLabel>Hello</FormFieldLabel>
 ```
 
+@deprecated This is an internal component that will be removed in the future
 **/
-let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_FormFieldLabel = class FormFieldLabel extends Component {
+let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = deprecated('10', null, 'This component will be removed in a future version'), _dec(_class = _dec2(_class = (_FormFieldLabel = class FormFieldLabel extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -74,6 +74,6 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 }, _FormFieldLabel.displayName = "FormFieldLabel", _FormFieldLabel.componentId = 'FormFieldLabel', _FormFieldLabel.propTypes = propTypes, _FormFieldLabel.allowedProps = allowedProps, _FormFieldLabel.defaultProps = {
   as: 'span'
-}, _FormFieldLabel)) || _class);
+}, _FormFieldLabel)) || _class) || _class);
 export default FormFieldLabel;
 export { FormFieldLabel };

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

@@ -1,4 +1,4 @@
-var _FormFieldLayout, _FormFieldLayout2, _input;
+var _FormFieldLayout, _FormFieldLayout2;
 /*
  * The MIT License (MIT)
  *
@@ -24,7 +24,7 @@ var _FormFieldLayout, _FormFieldLayout2, _input;
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import '@testing-library/jest-dom';
@@ -47,7 +47,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');
@@ -62,13 +62,15 @@ describe('<FormFieldLayout />', () => {
   });
   it('should provide a ref to the input container', () => {
     const inputContainerRef = vi.fn();
+    const ref = /*#__PURE__*/React.createRef();
     render( /*#__PURE__*/React.createElement(FormFieldLayout, {
       label: "Username",
       inputContainerRef: inputContainerRef
-    }, _input || (_input = /*#__PURE__*/React.createElement("input", {
-      type: "text"
-    }))));
-    const input = screen.getByLabelText('Username');
-    expect(inputContainerRef).toHaveBeenCalledWith(input.parentElement);
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      ref: ref
+    })));
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(inputContainerRef).toHaveBeenCalledWith(ref.current.parentElement);
   });
 });

package/es/FormFieldLayout/index.js

@@ -28,24 +28,23 @@ var _dec, _dec2, _class, _FormFieldLayout;
 /** @jsx jsx */
 import { Component } from 'react';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Grid } from '@instructure/ui-grid';
-import { logError as error } from '@instructure/console';
-import { omitProps, pickProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
+import { omitProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
 import { withStyle, jsx } from '@instructure/emotion';
-import { FormFieldLabel } from '../FormFieldLabel';
 import { FormFieldMessages } from '../FormFieldMessages';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
+import generateComponentTheme from './theme';
+
 /**
 ---
 parent: FormField
 ---
 **/
-let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends Component {
+let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;
+    this._labelId = void 0;
     this.ref = null;
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -54,71 +53,99 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
         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();
-    error(typeof props.width !== 'undefined' || !props.inline || props.layout !== 'inline', `[FormFieldLayout] The 'inline' prop is true, and the 'layout' is set to 'inline'.
-      This will cause a layout issue in Internet Explorer 11 unless you also add a value for the 'width' prop.`);
+    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 && hasVisibleChildren(this.props.label);
+    return this.props.label ? 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 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 jsx(Grid.Col, {
-        textAlign: this.props.labelAlign,
-        width: this.inlineContainerAndLabel ? 'auto' : 3
-      }, jsx(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 jsx(ScreenReaderContent, {
-      as: "legend"
-    }, this.props.label, this.hasMessages && jsx(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 jsx("legend", {
+          style: {
+            display: 'contents'
+          }
+        }, 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 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 jsx("legend", {
+          id: this._labelId,
+          style: {
+            display: 'contents'
+          }
+        }, this.props.label);
+      }
+      // needs to be wrapped because it needs an `id`
+      return jsx("div", {
+        id: this._labelId,
+        style: {
+          display: 'contents'
+        }
+      }, this.props.label);
+    } else return null;
   }
   renderVisibleMessages() {
-    return this.hasMessages ? jsx(Grid.Row, null, jsx(Grid.Col, {
-      offset: this.inlineContainerAndLabel ? void 0 : 3,
-      textAlign: this.inlineContainerAndLabel ? 'end' : void 0
-    }, jsx(FormFieldMessages, {
+    return this.hasMessages ? jsx(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,
@@ -127,26 +154,20 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
       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]), {
+    const hasNewErrorMsgAndIsGroup = !!(messages !== null && messages !== void 0 && messages.find(m => m.type === 'newError')) && isGroup;
+    return jsx(ElementType, Object.assign({}, 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(), jsx(Grid, Object.assign({
-      rowSpacing: "small",
-      colSpacing: "small",
-      startAt: layout === 'inline' && this.hasVisibleLabel ? 'medium' : null
-    }, pickProps(props, Grid.allowedProps)), jsx(Grid.Row, null, this.renderLabel(), jsx(Grid.Col, {
-      width: this.inlineContainerAndLabel ? 'auto' : void 0,
-      elementRef: this.handleInputContainerRef
-    }, hasNewErrorMsg && jsx("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.groupErrorMessage
-    }, this.renderVisibleMessages()), children)), !hasNewErrorMsg && this.renderVisibleMessages()));
+    }), this.renderLabel(), hasNewErrorMsgAndIsGroup && this.renderVisibleMessages(), 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 = propTypes, _FormFieldLayout.allowedProps = allowedProps, _FormFieldLayout.defaultProps = {
   inline: false,

package/es/FormFieldLayout/props.js

@@ -40,10 +40,5 @@ const propTypes = {
   elementRef: PropTypes.func,
   isGroup: PropTypes.bool
 };
-const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'
-
-// added vAlign because FormField and FormFieldGroup passes it, but not adding
-// it to allowedProps to prevent it from getting passed through accidentally
-//'vAlign'
-];
+const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef', 'vAlign'];
 export { propTypes, allowedProps };

package/es/FormFieldLayout/styles.js

@@ -22,6 +22,31 @@
  * 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
@@ -29,15 +54,55 @@
  * 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 inline = props.inline;
+const generateStyle = (componentTheme, props, styleProps) => {
+  const inline = props.inline,
+    layout = props.layout,
+    vAlign = props.vAlign,
+    labelAlign = props.labelAlign;
+  const hasMessages = styleProps.hasMessages,
+    hasVisibleLabel = styleProps.hasVisibleLabel,
+    hasNewErrorMsgAndIsGroup = styleProps.hasNewErrorMsgAndIsGroup;
+  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,
+    ...(isInlineLayout && {
+      margin: '0',
+      // when inline add a small padding between the label and the control
+      paddingRight: componentTheme.inlinePadding,
+      // and use the horizontal alignment prop
+      [`@media screen and (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',
@@ -48,13 +113,44 @@ 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 (width < ${componentTheme.stackedOrInlineBreakpoint})`]: {
+        // for small screens use the stacked layout
+        gridTemplateColumns: '100%',
+        gridTemplateAreas: generateGridLayout(false, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
+      },
+      columnGap: '0.375rem',
+      rowGap: '0.75rem',
       width: '100%',
       ...(inline && {
-        display: 'inline-block',
-        verticalAlign: 'middle',
+        display: 'inline-grid',
         width: 'auto'
       })
+    },
+    formFieldLabel: {
+      label: 'formFieldLayout__label',
+      ...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'
+      }),
+      ...(isInlineLayout && inline && {
+        [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
+          justifySelf: 'start'
+        }
+      })
     }
   };
 };

package/es/FormFieldLayout/theme.js

@@ -0,0 +1,56 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * 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 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.licorice,
+    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 {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+export default generateComponentTheme;

package/es/FormFieldMessages/props.js

@@ -25,7 +25,8 @@
 import PropTypes from 'prop-types';
 import { FormPropTypes } from '../FormPropTypes';
 const propTypes = {
-  messages: PropTypes.arrayOf(FormPropTypes.message)
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  gridArea: PropTypes.string
 };
-const allowedProps = ['messages'];
+const allowedProps = ['messages', 'gridArea'];
 export { propTypes, allowedProps };

package/es/FormFieldMessages/styles.js

@@ -29,16 +29,18 @@
  * 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',