@instructure/ui-form-field 11.6.0 → 11.6.1-snapshot-129

package/es/FormField/v2/index.js

@@ -0,0 +1,78 @@
+/*
+ * 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.
+ */
+
+import { Component } from 'react';
+import { omitProps, pickProps } from '@instructure/ui-react-utils';
+import { allowedProps as formFieldLayoutAllowedProps } from "../../FormFieldLayout/v2/props.js";
+import { FormFieldLayout } from "../../FormFieldLayout/v2/index.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+class FormField extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  render() {
+    return _jsx(FormFieldLayout, {
+      ...omitProps(this.props, FormField.allowedProps),
+      ...pickProps(this.props, formFieldLayoutAllowedProps),
+      label: this.props.label,
+      vAlign: this.props.vAlign,
+      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,
+      margin: this.props.margin,
+      isRequired: this.props.isRequired,
+      disabled: this.props.disabled,
+      readOnly: this.props.readOnly
+    });
+  }
+}
+FormField.displayName = "FormField";
+FormField.componentId = 'FormField';
+FormField.allowedProps = allowedProps;
+FormField.defaultProps = {
+  inline: false,
+  layout: 'stacked',
+  labelAlign: 'end',
+  vAlign: 'middle'
+};
+export default FormField;
+export { FormField };

package/es/FormField/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+const allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef', 'elementRef', 'isRequired', 'margin', 'disabled', 'readOnly'];
+export { allowedProps };

package/es/FormFieldGroup/{index.js → v1/index.js}

@@ -26,10 +26,11 @@ var _dec, _class, _FormFieldGroup;
  */
 
 import { Component, Children } from 'react';
-import { Grid } from '@instructure/ui-grid';
+import { Grid } from '@instructure/ui-grid/v11_6';
 import { pickProps, omitProps } from '@instructure/ui-react-utils';
-import { withStyle } from '@instructure/emotion';
-import { FormFieldLayout } from "../FormFieldLayout/index.js";
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { allowedProps as FormFieldLayoutAllowedProps } from "../../FormFieldLayout/v1/props.js";
+import { FormFieldLayout } from "../../FormFieldLayout/v1/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";
@@ -116,7 +117,7 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
     }
     return _jsx(FormFieldLayout, {
       ...omitProps(props, FormFieldGroup.allowedProps),
-      ...pickProps(props, FormFieldLayout.allowedProps),
+      ...pickProps(props, FormFieldLayoutAllowedProps),
       vAlign: props.vAlign,
       layout: props.layout === 'inline' ? 'inline' : 'stacked',
       label: props.description,

package/es/FormFieldGroup/v2/index.js

@@ -0,0 +1,130 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["styles", "makeStyles", "isGroup"];
+var _dec, _class, _FormFieldGroup;
+/*
+ * 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.
+ */
+
+import { Component, Children } from 'react';
+import { Grid } from '@instructure/ui-grid/latest';
+import { pickProps, omitProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import { allowedProps as formFieldLayoutAllowedProps } from "../../FormFieldLayout/v2/props.js";
+import { FormFieldLayout } from "../../FormFieldLayout/v2/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let FormFieldGroup = (_dec = withStyle(generateStyle), _dec(_class = (_FormFieldGroup = class FormFieldGroup extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  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);
+  }
+  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);
+  }
+  get invalid() {
+    return !!this.props.messages && this.props.messages.findIndex(message => {
+      return message.type === 'error' || message.type === 'newError';
+    }) >= 0;
+  }
+  renderColumns() {
+    return Children.map(this.props.children, (child, index) => {
+      return child ? _jsx(Grid.Col, {
+        width: child.props && child.props.width ? 'auto' : void 0,
+        children: child
+      }, index) : null;
+    });
+  }
+  renderChildren() {
+    return _jsx(Grid, {
+      colSpacing: this.props.colSpacing,
+      rowSpacing: this.props.rowSpacing,
+      vAlign: this.props.vAlign,
+      startAt: this.props.startAt || (this.props.layout === 'columns' ? 'medium' : null),
+      children: _jsx(Grid.Row, {
+        children: this.renderColumns()
+      })
+    });
+  }
+  renderFields() {
+    const styles = this.props.styles;
+    return _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup,
+      children: this.renderChildren()
+    }, "fields");
+  }
+  render() {
+    const _this$props3 = this.props,
+      styles = _this$props3.styles,
+      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, {
+      ...omitProps(props, FormFieldGroup.allowedProps),
+      ...pickProps(props, formFieldLayoutAllowedProps),
+      vAlign: props.vAlign,
+      layout: props.layout === 'inline' ? 'inline' : 'stacked',
+      label: props.description,
+      "aria-disabled": props.disabled ? 'true' : void 0,
+      "aria-invalid": ariaInvalid,
+      elementRef: this.handleRef,
+      isGroup: isGroup,
+      children: this.renderFields()
+    });
+  }
+}, _FormFieldGroup.displayName = "FormFieldGroup", _FormFieldGroup.componentId = 'FormFieldGroup', _FormFieldGroup.allowedProps = allowedProps, _FormFieldGroup.defaultProps = {
+  as: 'fieldset',
+  disabled: false,
+  rowSpacing: 'medium',
+  colSpacing: 'small',
+  vAlign: 'middle',
+  isGroup: true
+}, _FormFieldGroup)) || _class);
+export default FormFieldGroup;
+export { FormFieldGroup };

package/es/FormFieldGroup/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+const allowedProps = ['description', 'as', 'messages', 'messagesId', 'disabled', 'readOnly', 'children', 'layout', 'rowSpacing', 'colSpacing', 'vAlign', 'startAt', 'elementRef'];
+export { allowedProps };

package/es/FormFieldGroup/v2/styles.js

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * 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, props) => {
+  const disabled = props.disabled;
+  return {
+    formFieldGroup: {
+      label: 'formFieldGroup',
+      display: 'block',
+      ...(disabled && {
+        opacity: 0.6,
+        cursor: 'not-allowed',
+        pointerEvents: 'none'
+      })
+    }
+  };
+};
+export default generateStyle;

package/es/FormFieldLabel/{index.js → v1/index.js}

@@ -25,7 +25,7 @@ var _dec, _class, _FormFieldLabel;
 
 import { Component } from 'react';
 import { omitProps, getElementType } from '@instructure/ui-react-utils';
-import { withStyle } from '@instructure/emotion';
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";

package/es/FormFieldLabel/v2/index.js

@@ -0,0 +1,83 @@
+var _dec, _class, _FormFieldLabel;
+/*
+ * 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.
+ */
+
+import { Component } from 'react';
+import { omitProps, getElementType } from '@instructure/ui-react-utils';
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+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.
+
+```js
+---
+type: example
+---
+<FormFieldLabel>Hello</FormFieldLabel>
+```
+
+ @deprecated since version 10. 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 {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
+  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);
+  }
+  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);
+  }
+  render() {
+    const ElementType = getElementType(FormFieldLabel, this.props);
+    const _this$props3 = this.props,
+      styles = _this$props3.styles,
+      children = _this$props3.children;
+    return _jsx(ElementType, {
+      ...omitProps(this.props, FormFieldLabel.allowedProps),
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
+      ref: this.handleRef,
+      children: children
+    });
+  }
+}, _FormFieldLabel.displayName = "FormFieldLabel", _FormFieldLabel.componentId = 'FormFieldLabel', _FormFieldLabel.allowedProps = allowedProps, _FormFieldLabel.defaultProps = {
+  as: 'span'
+}, _FormFieldLabel)) || _class);
+export default FormFieldLabel;
+export { FormFieldLabel };

package/es/FormFieldLabel/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+const allowedProps = ['as', 'children'];
+export { allowedProps };

package/es/FormFieldLabel/v2/styles.js

@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
+/**
+ * ---
+ * private: true
+ * ---
+ * 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, props) => {
+  const children = props.children;
+  const hasContent = hasVisibleChildren(children);
+  const labelStyles = {
+    all: 'initial',
+    display: 'block',
+    ...(hasContent && {
+      color: componentTheme.color,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      margin: 0,
+      textAlign: 'inherit'
+    })
+  };
+  return {
+    formFieldLabel: {
+      label: 'formFieldLabel',
+      ...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
+    }
+  };
+};
+export default generateStyle;

package/es/FormFieldLabel/v2/theme.js

@@ -0,0 +1,52 @@
+/*
+ * 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 => {
+  var _colors$contrasts;
+  const colors = theme.colors,
+    typography = theme.typography,
+    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
+  };
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+export default generateComponentTheme;

package/es/FormFieldLayout/{index.js → v1/index.js}

@@ -28,8 +28,8 @@ var _dec, _dec2, _class, _FormFieldLayout;
 import { Component } from 'react';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { omitProps, getElementType, withDeterministicId } from '@instructure/ui-react-utils';
-import { withStyle } from '@instructure/emotion';
-import { FormFieldMessages } from "../FormFieldMessages/index.js";
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { FormFieldMessages } from "../../FormFieldMessages/v1/index.js";
 import generateStyle from "./styles.js";
 import { allowedProps } from "./props.js";
 import generateComponentTheme from "./theme.js";

package/es/FormFieldLayout/{styles.js → v1/styles.js}

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { mapSpacingToShorthand } from '@instructure/emotion';
+import { calcSpacingFromShorthand } from '@instructure/emotion';
 const generateGridLayout = (isInlineLayout, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages) => {
   if (isInlineLayout) {
     if (hasNewErrorMsgAndIsGroup) {
@@ -68,7 +68,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
   const hasMessages = styleProps.hasMessages,
     hasVisibleLabel = styleProps.hasVisibleLabel,
     hasNewErrorMsgAndIsGroup = styleProps.hasNewErrorMsgAndIsGroup;
-  const cssMargin = mapSpacingToShorthand(margin, componentTheme.spacing);
+  const cssMargin = calcSpacingFromShorthand(margin, componentTheme.spacing);
   const isInlineLayout = layout === 'inline';
   const hasNonEmptyMessages = messages === null || messages === void 0 ? void 0 : messages.reduce((acc, message) => acc || message.type !== 'screenreader-only', false);