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

package/src/FormFieldGroup/v2/index.tsx

@@ -0,0 +1,182 @@
+/*
+ * 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, ReactElement, AriaAttributes } 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'
+
+import { FormFieldLayout } from '../../FormFieldLayout/v2'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { FormFieldGroupProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+@withStyle(generateStyle)
+class FormFieldGroup extends Component<FormFieldGroupProps> {
+  static readonly componentId = 'FormFieldGroup'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    as: 'fieldset',
+    disabled: false,
+    rowSpacing: 'medium',
+    colSpacing: 'small',
+    vAlign: 'middle',
+    isGroup: true
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  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 ? (
+        <Grid.Col
+          width={
+            (child as ReactElement).props &&
+            (child as ReactElement<any>).props.width
+              ? 'auto'
+              : undefined
+          }
+          key={index}
+        >
+          {child}
+        </Grid.Col>
+      ) : null
+    })
+  }
+
+  renderChildren() {
+    return (
+      <Grid
+        colSpacing={this.props.colSpacing}
+        rowSpacing={this.props.rowSpacing}
+        vAlign={this.props.vAlign}
+        startAt={
+          this.props.startAt ||
+          (this.props.layout === 'columns' ? 'medium' : null)
+        }
+      >
+        <Grid.Row>{this.renderColumns()}</Grid.Row>
+      </Grid>
+    )
+  }
+
+  renderFields() {
+    const { styles } = this.props
+
+    return (
+      <span key="fields" css={styles?.formFieldGroup}>
+        {this.renderChildren()}
+      </span>
+    )
+  }
+
+  render() {
+    const { styles, makeStyles, isGroup, ...props } = this.props
+    // 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: AriaAttributes['aria-invalid'] = undefined
+    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 (
+      <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' : undefined}
+        aria-invalid={ariaInvalid}
+        elementRef={this.handleRef}
+        isGroup={isGroup}
+      >
+        {this.renderFields()}
+      </FormFieldLayout>
+    )
+  }
+}
+
+export default FormFieldGroup
+export { FormFieldGroup }

package/src/FormFieldGroup/v2/props.ts

@@ -0,0 +1,103 @@
+/*
+ * 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 type {
+  AsElementType,
+  FormFieldGroupTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { FormFieldLayoutOwnProps } from '../../FormFieldLayout/v2/props'
+import type { FormMessage } from '../../utils/v1/FormPropTypes'
+
+type FormFieldGroupOwnProps = {
+  description: React.ReactNode
+  /**
+   * the element type to render as
+   */
+  as?: AsElementType
+  /**
+   * Array of objects with shape: `{
+   *   text: React.ReactNode,
+   *   type: One of: ['newError', 'error', 'hint', 'success', 'screenreader-only']
+   * }`
+   */
+  messages?: FormMessage[]
+  /**
+   * id for the form field messages
+   */
+  messagesId?: string
+  /**
+   * Whether the field group is disabled. When true, error and success messages will be hidden.
+   */
+  disabled?: boolean
+  /**
+   * Whether the field group is read-only. When true, error and success messages will be hidden.
+   */
+  readOnly?: boolean
+  children?: React.ReactNode
+  layout?: 'stacked' | 'columns' | 'inline'
+  rowSpacing?: 'none' | 'small' | 'medium' | 'large'
+  colSpacing?: 'none' | 'small' | 'medium' | 'large'
+  vAlign?: 'top' | 'middle' | 'bottom'
+  startAt?: 'small' | 'medium' | 'large' | 'x-large' | null
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+}
+
+type PropKeys = keyof FormFieldGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type FormFieldGroupProps = FormFieldGroupOwnProps &
+  WithStyleProps<FormFieldGroupTheme, FormFieldGroupStyle> &
+  OtherHTMLAttributes<FormFieldGroupOwnProps> &
+  // Adding other props that can be passed to FormFieldLayout,
+  // excluding the ones we set manually
+  Omit<
+    FormFieldLayoutOwnProps,
+    'messages' | 'messagesId' | 'vAlign' | 'layout' | 'label' | 'children'
+  >
+
+type FormFieldGroupStyle = ComponentStyle<'formFieldGroup'>
+const allowedProps: AllowedPropKeys = [
+  'description',
+  'as',
+  'messages',
+  'messagesId',
+  'disabled',
+  'readOnly',
+  'children',
+  'layout',
+  'rowSpacing',
+  'colSpacing',
+  'vAlign',
+  'startAt',
+  'elementRef'
+]
+
+export type { FormFieldGroupProps, FormFieldGroupStyle }
+export { allowedProps }

package/src/FormFieldGroup/v2/styles.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 type { FormFieldGroupProps, FormFieldGroupStyle } from './props'
+
+/**
+ * ---
+ * 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 = (
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  _componentTheme: {},
+  props: FormFieldGroupProps
+): FormFieldGroupStyle => {
+  const { disabled } = props
+
+  return {
+    formFieldGroup: {
+      label: 'formFieldGroup',
+      display: 'block',
+
+      ...(disabled && {
+        opacity: 0.6,
+        cursor: 'not-allowed',
+        pointerEvents: 'none'
+      })
+    }
+  }
+}
+
+export default generateStyle

package/src/FormFieldLabel/{index.tsx → v1/index.tsx}

@@ -25,7 +25,7 @@
 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'
 import generateComponentTheme from './theme'

package/src/FormFieldLabel/v2/index.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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'
+import generateComponentTheme from './theme'
+
+import { allowedProps } from './props'
+import type { FormFieldLabelProps } from './props'
+
+/**
+---
+parent: FormField
+---
+
+This is a helper component that is used by most of the custom form
+components. In most cases it shouldn't be used directly.
+
+```js
+---
+type: example
+---
+<FormFieldLabel>Hello</FormFieldLabel>
+```
+
+ @deprecated since version 10. This is an internal component that will be
+ removed in the future
+**/
+@withStyle(generateStyle, generateComponentTheme)
+class FormFieldLabel extends Component<FormFieldLabelProps> {
+  static readonly componentId = 'FormFieldLabel'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    as: 'span'
+  } as const
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const ElementType = getElementType(FormFieldLabel, this.props)
+
+    const { styles, children } = this.props
+
+    return (
+      <ElementType
+        {...omitProps(this.props, FormFieldLabel.allowedProps)}
+        css={styles?.formFieldLabel}
+        ref={this.handleRef}
+      >
+        {children}
+      </ElementType>
+    )
+  }
+}
+
+export default FormFieldLabel
+export { FormFieldLabel }

package/src/FormFieldLabel/v2/props.ts

@@ -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.
+ */
+
+import type {
+  AsElementType,
+  FormFieldLabelTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+type FormFieldLabelOwnProps = {
+  children: React.ReactNode
+  as?: AsElementType
+}
+
+type PropKeys = keyof FormFieldLabelOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type FormFieldLabelProps = FormFieldLabelOwnProps &
+  WithStyleProps<FormFieldLabelTheme, FormFieldLabelStyle> &
+  OtherHTMLAttributes<FormFieldLabelOwnProps>
+
+type FormFieldLabelStyle = ComponentStyle<'formFieldLabel'>
+const allowedProps: AllowedPropKeys = ['as', 'children']
+
+export type { FormFieldLabelProps, FormFieldLabelStyle }
+export { allowedProps }

package/src/FormFieldLabel/v2/styles.ts

@@ -0,0 +1,74 @@
+/*
+ * 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'
+
+import type { FormFieldLabelTheme } from '@instructure/shared-types'
+import type { FormFieldLabelProps, FormFieldLabelStyle } from './props'
+
+/**
+ * ---
+ * 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: FormFieldLabelTheme,
+  props: FormFieldLabelProps
+): FormFieldLabelStyle => {
+  const { children } = props
+
+  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/src/FormFieldLabel/v2/theme.ts

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

package/src/FormFieldLayout/{index.tsx → v1/index.tsx}

@@ -30,8 +30,8 @@ import {
   withDeterministicId
 } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
-import { FormFieldMessages } from '../FormFieldMessages'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
+import { FormFieldMessages } from '../../FormFieldMessages/v1'
 import generateStyle from './styles'
 import { allowedProps, FormFieldStyleProps } from './props'
 import type { FormFieldLayoutProps } from './props'

package/src/FormFieldLayout/{props.ts → v1/props.ts}

@@ -31,7 +31,7 @@ import type {
   ComponentStyle,
   Spacing
 } from '@instructure/emotion'
-import type { FormMessage } from '../FormPropTypes'
+import type { FormMessage } from '../../utils/v1/FormPropTypes'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type FormFieldLayoutOwnProps = {

package/src/FormFieldLayout/{styles.ts → v1/styles.ts}

@@ -28,7 +28,7 @@ import type {
   FormFieldStyleProps
 } from './props'
 import type { FormFieldLayoutTheme } from '@instructure/shared-types'
-import { mapSpacingToShorthand } from '@instructure/emotion'
+import { calcSpacingFromShorthand } from '@instructure/emotion'
 
 const generateGridLayout = (
   isInlineLayout: boolean,
@@ -77,7 +77,7 @@ const generateStyle = (
 ): FormFieldLayoutStyle => {
   const { inline, layout, vAlign, labelAlign, margin, messages } = props
   const { hasMessages, hasVisibleLabel, hasNewErrorMsgAndIsGroup } = styleProps
-  const cssMargin = mapSpacingToShorthand(margin, componentTheme.spacing)
+  const cssMargin = calcSpacingFromShorthand(margin, componentTheme.spacing)
   const isInlineLayout = layout === 'inline'
 
   const hasNonEmptyMessages = messages?.reduce(