@instructure/ui-form-field 9.11.0 → 9.11.1

package/es/FormPropTypes.js

@@ -25,6 +25,12 @@
 import PropTypes from 'prop-types';
 const formMessageTypePropType = PropTypes.oneOf(['error', 'newError', 'hint', 'success', 'screenreader-only']);
 const formMessageChildPropType = PropTypes.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/FormField/index.js

@@ -55,7 +55,11 @@ class FormField extends _react.Component {
     return /*#__PURE__*/_react.default.createElement(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(this.props, FormField.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldLayout.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/lib/FormFieldGroup/__new-tests__/FormFieldGroup.test.js

@@ -48,7 +48,7 @@ describe('<FormFieldGroup />', () => {
         description: "Please enter your full name"
       }, /*#__PURE__*/_react.default.createElement("label", null, "First: ", /*#__PURE__*/_react.default.createElement("input", null)), /*#__PURE__*/_react.default.createElement("label", null, "Middle: ", /*#__PURE__*/_react.default.createElement("input", null)), /*#__PURE__*/_react.default.createElement("label", null, "Last: ", /*#__PURE__*/_react.default.createElement("input", null))))),
       container = _render.container;
-    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    const formFieldGroup = container.querySelector("span[class$='-formFieldLayout__label']");
     const firstNameInput = _react2.screen.getByLabelText('First:');
     const middleNameInput = _react2.screen.getByLabelText('Middle:');
     const lastNameInput = _react2.screen.getByLabelText('Last:');
@@ -66,7 +66,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', () => {
@@ -88,13 +88,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 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.FormFieldGroup, {
         description: description
       }, _label5 || (_label5 = /*#__PURE__*/_react.default.createElement("label", null, "First: ", /*#__PURE__*/_react.default.createElement("input", null))), _label6 || (_label6 = /*#__PURE__*/_react.default.createElement("label", null, "Middle: ", /*#__PURE__*/_react.default.createElement("input", null))), _label7 || (_label7 = /*#__PURE__*/_react.default.createElement("label", null, "Last: ", /*#__PURE__*/_react.default.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/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/FormFieldLabel/index.js

@@ -8,11 +8,12 @@ exports.default = exports.FormFieldLabel = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _dec, _class, _FormFieldLabel;
+var _dec, _dec2, _class, _FormFieldLabel;
 /*
  * The MIT License (MIT)
  *
@@ -42,8 +43,7 @@ var _dec, _class, _FormFieldLabel;
 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
 ---
@@ -52,8 +52,9 @@ type: example
 <FormFieldLabel>Hello</FormFieldLabel>
 ```
 
+@deprecated This is an internal component that will be removed in the future
 **/
-let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_FormFieldLabel = class FormFieldLabel extends _react.Component {
+let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _deprecated.deprecated)('10', null, 'This component will be removed in a future version'), _dec(_class = _dec2(_class = (_FormFieldLabel = class FormFieldLabel extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -81,5 +82,5 @@ let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_s
   }
 }, _FormFieldLabel.displayName = "FormFieldLabel", _FormFieldLabel.componentId = 'FormFieldLabel', _FormFieldLabel.propTypes = _props.propTypes, _FormFieldLabel.allowedProps = _props.allowedProps, _FormFieldLabel.defaultProps = {
   as: 'span'
-}, _FormFieldLabel)) || _class);
+}, _FormFieldLabel)) || _class) || _class);
 var _default = exports.default = FormFieldLabel;

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,18 +8,14 @@ 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 _console = require("@instructure/console");
 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");
+var _theme = _interopRequireDefault(require("./theme"));
 const _excluded = ["makeStyles", "styles", "messages", "isGroup"];
 var _dec, _dec2, _class, _FormFieldLayout;
 /*
@@ -51,10 +47,11 @@ var _dec, _dec2, _class, _FormFieldLayout;
 parent: FormField
 ---
 **/
-let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends _react.Component {
+let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends _react.Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;
+    this._labelId = void 0;
     this.ref = null;
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -63,71 +60,99 @@ 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();
-    (0, _console.logError)(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 && (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,
+        style: {
+          display: 'contents'
+        }
+      }, 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,
@@ -136,26 +161,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/props.js

@@ -47,9 +47,4 @@ const propTypes = exports.propTypes = {
   elementRef: _propTypes.default.func,
   isGroup: _propTypes.default.bool
 };
-const allowedProps = exports.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 = exports.allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef', 'vAlign'];

package/lib/FormFieldLayout/styles.js

@@ -28,6 +28,31 @@ exports.default = void 0;
  * 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
@@ -35,15 +60,55 @@ 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
+ * @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',
@@ -54,13 +119,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/lib/FormFieldLayout/theme.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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]
+  };
+};
+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',