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

package/es/FormFieldLayout/v2/index.js

@@ -0,0 +1,207 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["inline", "layout", "as", "labelAlign", "vAlign", "label", "messages", "messagesId", "children", "width", "elementRef", "inputContainerRef", "isGroup", "isRequired", "margin", "disabled", "readOnly", "themeOverride"];
+/*
+ * 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 { forwardRef, useEffect, useState, useCallback } from 'react';
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
+import { omitProps, useDeterministicId } from '@instructure/ui-react-utils';
+import { useStyle } from '@instructure/emotion';
+import { FormFieldMessages } from "../../FormFieldMessages/v2/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: FormField
+---
+**/
+const FormFieldLayout = /*#__PURE__*/forwardRef((props, ref) => {
+  var _FormFieldMessages;
+  const _props$inline = props.inline,
+    inline = _props$inline === void 0 ? false : _props$inline,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'stacked' : _props$layout,
+    _props$as = props.as,
+    as = _props$as === void 0 ? 'label' : _props$as,
+    _props$labelAlign = props.labelAlign,
+    labelAlign = _props$labelAlign === void 0 ? 'end' : _props$labelAlign,
+    vAlign = props.vAlign,
+    label = props.label,
+    messages = props.messages,
+    messagesIdProp = props.messagesId,
+    children = props.children,
+    width = props.width,
+    elementRef = props.elementRef,
+    inputContainerRef = props.inputContainerRef,
+    isGroup = props.isGroup,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    margin = props.margin,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    themeOverride = props.themeOverride,
+    rest = _objectWithoutProperties(props, _excluded);
+
+  // Deterministic ID generation
+  const _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    deterministicId = _useState2[0],
+    setDeterministicId = _useState2[1];
+  const getId = useDeterministicId('FormFieldLayout');
+  useEffect(() => {
+    setDeterministicId(getId());
+  }, []);
+  const messagesId = messagesIdProp || deterministicId;
+  const labelId = deterministicId ? `${deterministicId}-Label` : void 0;
+
+  // Filter out error and success messages when disabled or readOnly
+  const filteredMessages = disabled || readOnly ? messages === null || messages === void 0 ? void 0 : messages.filter(msg => msg.type !== 'error' && msg.type !== 'newError' && msg.type !== 'success') : messages;
+
+  // Compute style props
+  const hasMessages = filteredMessages && filteredMessages.length > 0 ? filteredMessages.some(msg => {
+    if (msg.text) {
+      if (typeof msg.text === 'string') {
+        return msg.text.length > 0;
+      }
+      return true;
+    }
+    return false;
+  }) : false;
+  const hasVisibleLabel = label ? hasVisibleChildren(label) : false;
+  const hasErrorMsgAndIsGroup = !!(filteredMessages !== null && filteredMessages !== void 0 && filteredMessages.find(m => m.type === 'error' || m.type === 'newError')) && !!isGroup;
+  const invalid = !!(filteredMessages !== null && filteredMessages !== void 0 && filteredMessages.find(m => m.type === 'error' || m.type === 'newError'));
+
+  // Styles
+  const styles = useStyle({
+    generateStyle,
+    themeOverride,
+    params: {
+      hasMessages,
+      hasVisibleLabel,
+      hasErrorMsgAndIsGroup,
+      inline,
+      layout,
+      vAlign,
+      labelAlign,
+      margin,
+      messages: filteredMessages,
+      isRequired,
+      invalid
+    },
+    componentId: 'FormFieldLayout',
+    displayName: 'FormFieldLayout'
+  });
+  const ElementType = as;
+  const handleRef = useCallback(el => {
+    if (typeof ref === 'function') {
+      ref(el);
+    } else if (ref) {
+      const refObject = ref;
+      refObject.current = el;
+    }
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  }, [ref, elementRef]);
+  const handleInputContainerRef = useCallback(node => {
+    if (typeof inputContainerRef === 'function') {
+      inputContainerRef(node);
+    }
+  }, [inputContainerRef]);
+  const renderLabel = () => {
+    const labelContent = hasVisibleLabel ? _jsxs(_Fragment, {
+      children: [label, isRequired && _jsxs("span", {
+        css: invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredAsterisk : {},
+        "aria-hidden": true,
+        children: [' ', "*"]
+      })]
+    }) : label;
+    if (hasVisibleLabel) {
+      if (ElementType === 'fieldset') {
+        // `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'
+          },
+          children: _jsx("span", {
+            css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
+            children: labelContent
+          })
+        });
+      }
+      return _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
+        children: labelContent
+      });
+    } else if (label) {
+      if (ElementType === 'fieldset') {
+        return _jsx("legend", {
+          id: labelId,
+          style: {
+            display: 'contents'
+          },
+          children: label
+        });
+      }
+      // needs to be wrapped because it needs an `id`
+      return _jsx("div", {
+        id: labelId,
+        style: {
+          display: 'contents'
+        },
+        children: label
+      });
+    } else return null;
+  };
+  const renderVisibleMessages = () => {
+    return hasMessages ? _FormFieldMessages || (_FormFieldMessages = _jsx(FormFieldMessages, {
+      id: messagesId,
+      messages: filteredMessages,
+      gridArea: "messages"
+    })) : null;
+  };
+  return _jsxs(ElementType, {
+    ...omitProps(rest, [...allowedProps]),
+    css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
+    "aria-describedby": hasMessages ? messagesId : void 0,
+    "aria-errormessage": rest['aria-invalid'] ? messagesId : void 0,
+    style: {
+      width
+    },
+    ref: handleRef,
+    children: [renderLabel(), hasErrorMsgAndIsGroup && renderVisibleMessages(), _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldChildren,
+      ref: handleInputContainerRef,
+      children: children
+    }), !hasErrorMsgAndIsGroup && renderVisibleMessages()]
+  });
+});
+FormFieldLayout.displayName = 'FormFieldLayout';
+export default FormFieldLayout;
+export { FormFieldLayout, allowedProps };

package/es/FormFieldLayout/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', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef', 'margin', 'vAlign', 'isRequired', 'disabled', 'readOnly'];
+export { allowedProps };

package/es/FormFieldLayout/v2/styles.js

@@ -0,0 +1,171 @@
+/*
+ * 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 { calcSpacingFromShorthand } from '@instructure/emotion';
+const generateGridLayout = (isInlineLayout, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages) => {
+  if (isInlineLayout) {
+    if (hasErrorMsgAndIsGroup) {
+      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 (hasErrorMsgAndIsGroup) {
+    return `${hasVisibleLabel ? ' "label"' : ''}
+            ${hasMessages ? ' "messages"' : ''}
+            "controls"`;
+  } else {
+    return `${hasVisibleLabel ? ' "label"' : ''}
+            "controls"
+            ${hasMessages ? ' "messages"' : ''}`;
+  }
+};
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, sharedTokens) => {
+  const inline = params.inline,
+    layout = params.layout,
+    vAlign = params.vAlign,
+    labelAlign = params.labelAlign,
+    margin = params.margin,
+    messages = params.messages;
+  const hasMessages = params.hasMessages,
+    hasVisibleLabel = params.hasVisibleLabel,
+    hasErrorMsgAndIsGroup = params.hasErrorMsgAndIsGroup;
+  const cssMargin = calcSpacingFromShorthand(margin, {
+    ...sharedTokens.spacing,
+    ...sharedTokens.legacy.spacing
+  });
+  const isInlineLayout = layout === 'inline';
+  const hasNonEmptyMessages = messages === null || messages === void 0 ? void 0 : messages.reduce((acc, message) => acc || message.type !== 'screenreader-only', false);
+
+  // This is quite ugly, we should simplify it
+  const gridTemplateAreas = generateGridLayout(isInlineLayout, hasErrorMsgAndIsGroup, 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.textColor,
+    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.gapPrimitives,
+      // 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 {
+    formFieldLayout: {
+      label: 'formFieldLayout',
+      all: 'initial',
+      border: '0',
+      padding: '0',
+      margin: cssMargin,
+      minWidth: '0',
+      direction: 'inherit',
+      textAlign: 'start',
+      opacity: 'inherit',
+      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, hasErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
+      },
+      columnGap: '0.375rem',
+      rowGap: hasNonEmptyMessages ? componentTheme.gapPrimitives : '0',
+      width: '100%',
+      ...(inline && {
+        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,
+      paddingBottom: hasNonEmptyMessages ? '0' : componentTheme.gapPrimitives
+    },
+    formFieldChildren: {
+      label: 'formFieldLayout__children',
+      gridArea: 'controls',
+      // add a small margin between the message and the controls
+      ...(hasMessages && hasErrorMsgAndIsGroup && {
+        marginTop: '0.375rem'
+      }),
+      ...(isInlineLayout && inline && {
+        [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
+          justifySelf: 'start'
+        }
+      })
+    },
+    requiredAsterisk: {
+      label: 'formFieldLayout__requiredAsterisk',
+      color: componentTheme.asteriskColor
+    }
+  };
+};
+export default generateStyle;

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

@@ -26,7 +26,7 @@ var _dec, _class, _FormFieldMessage, _IconWarningSolid;
 import { Component } from 'react';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconWarningSolid } from '@instructure/ui-icons';
-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/FormFieldMessage/v2/index.js

@@ -0,0 +1,96 @@
+var _AlertCircleInstUIIco, _CheckCircle2InstUIIc;
+/*
+ * 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 { forwardRef } from 'react';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { AlertCircleInstUIIcon, CheckCircle2InstUIIcon } from '@instructure/ui-icons';
+import { useStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { jsx as _jsx, jsxs as _jsxs } 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
+---
+<FormFieldMessage variant="error">Invalid value</FormFieldMessage>
+```
+**/
+const FormFieldMessage = /*#__PURE__*/forwardRef(({
+  variant = 'hint',
+  children,
+  themeOverride
+}, ref) => {
+  const styles = useStyle({
+    generateStyle,
+    themeOverride,
+    params: {
+      variant
+    },
+    componentId: 'FormFieldMessage',
+    displayName: 'FormFieldMessage'
+  });
+  const handleRef = el => {
+    if (typeof ref === 'function') {
+      ref(el);
+    } else if (ref) {
+      const refObject = ref;
+      refObject.current = el;
+    }
+  };
+  const isErrorVariant = variant === 'error' || variant === 'newError';
+  const shouldShowIcon = (isErrorVariant || variant === 'success') && children;
+  return variant !== 'screenreader-only' ? _jsxs("span", {
+    css: {
+      display: 'flex'
+    },
+    children: [shouldShowIcon && _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.icon,
+      children: isErrorVariant ? _AlertCircleInstUIIco || (_AlertCircleInstUIIco = _jsx(AlertCircleInstUIIcon, {
+        size: "sm",
+        color: "errorColor"
+      })) : _CheckCircle2InstUIIc || (_CheckCircle2InstUIIc = _jsx(CheckCircle2InstUIIcon, {
+        size: "sm",
+        color: "successColor"
+      }))
+    }), _jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
+      ref: handleRef,
+      children: children
+    })]
+  }) : _jsx(ScreenReaderContent, {
+    elementRef: handleRef,
+    children: children
+  });
+});
+FormFieldMessage.displayName = 'FormFieldMessage';
+export default FormFieldMessage;
+export { FormFieldMessage };

package/es/FormFieldMessage/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 = ['variant', 'children'];
+export { allowedProps };

package/es/FormFieldMessage/v2/styles.js

@@ -0,0 +1,69 @@
+/*
+ * 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, params, sharedTokens) => {
+  const variant = params.variant;
+  const variants = {
+    hint: {
+      color: componentTheme.hintTextColor
+    },
+    error: {
+      color: componentTheme.errorTextColor
+    },
+    newError: {
+      color: componentTheme.errorTextColor
+    },
+    success: {
+      color: componentTheme.successTextColor
+    },
+    'screenreader-only': {}
+  };
+  return {
+    icon: {
+      fontSize: componentTheme.fontSize,
+      marginRight: sharedTokens.spacing.general.spaceXs,
+      lineHeight: 1.25
+    },
+    formFieldMessage: {
+      label: 'formFieldMessage',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      display: 'block',
+      ...variants[variant]
+    }
+  };
+};
+export default generateStyle;

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

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