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

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.
 
+## [10.12.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-0) (2025-02-26)
+
+
+### Bug Fixes
+
+* **many:** fix form label not read by NVDA in hover mode and other layout issues ([ef77281](https://github.com/instructure/instructure-ui/commit/ef77281890511e8eea794196445d3ef2454537ba))
+
+
+
+
+
 # [10.12.0](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.12.0) (2025-02-24)
 
 

package/es/FormField/index.js

@@ -48,7 +48,6 @@ class FormField extends Component {
       label: this.props.label,
       vAlign: this.props.vAlign,
       as: "label",
-      htmlFor: this.props.id,
       elementRef: this.handleRef,
       margin: this.props.margin
     }));

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/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,11 +28,8 @@ 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 { 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';
@@ -47,6 +44,7 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
   constructor(props) {
     super(props);
     this._messagesId = void 0;
+    this._labelId = void 0;
     this.ref = null;
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -55,69 +53,96 @@ 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();
+    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
+      }, 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,
@@ -126,26 +151,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/styles.js

@@ -23,6 +23,31 @@
  */
 
 import { mapSpacingToShorthand } from '@instructure/emotion';
+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
@@ -30,18 +55,57 @@ import { mapSpacingToShorthand } from '@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 = mapSpacingToShorthand(margin, spacing);
+  const hasMessages = styleProps.hasMessages,
+    hasVisibleLabel = styleProps.hasVisibleLabel,
+    hasNewErrorMsgAndIsGroup = styleProps.hasNewErrorMsgAndIsGroup;
+  const cssMargin = 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',
@@ -52,13 +116,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/es/FormFieldLayout/theme.js

@@ -22,10 +22,36 @@
  * 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]
   };
 };
 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',

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/es/index.js

@@ -23,7 +23,6 @@
  */
 
 export { FormField } from './FormField';
-export { FormFieldLabel } from './FormFieldLabel';
 export { FormFieldMessage } from './FormFieldMessage';
 export { FormFieldMessages } from './FormFieldMessages';
 export { FormFieldLayout } from './FormFieldLayout';

package/lib/FormField/index.js

@@ -56,7 +56,6 @@ class FormField extends _react.Component {
       label: this.props.label,
       vAlign: this.props.vAlign,
       as: "label",
-      htmlFor: this.props.id,
       elementRef: this.handleRef,
       margin: this.props.margin
     }));

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);
   });