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

package/src/FormFieldGroup/__new-tests__/FormFieldGroup.test.tsx

@@ -66,7 +66,7 @@ describe('<FormFieldGroup />', () => {
     )
 
     const formFieldGroup = container.querySelector(
-      "fieldset[class$='-formFieldLayout']"
+      "span[class$='-formFieldLayout__label']"
     )
     const firstNameInput = screen.getByLabelText('First:')
     const middleNameInput = screen.getByLabelText('Middle:')
@@ -94,9 +94,7 @@ describe('<FormFieldGroup />', () => {
       </FormFieldGroup>
     )
 
-    const formFieldGroup = container.querySelector(
-      "fieldset[class$='-formFieldLayout']"
-    )
+    const formFieldGroup = container.querySelector('label')
 
     expect(formFieldGroup).toBeInTheDocument()
   })
@@ -136,7 +134,7 @@ describe('<FormFieldGroup />', () => {
     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 { container } = render(
@@ -154,7 +152,7 @@ describe('<FormFieldGroup />', () => {
     )
 
     const legend = container.querySelector(
-      "legend[class$='-screenReaderContent']"
+      "span[class$='-formFieldLayout__label']"
     )
 
     expect(legend).toBeInTheDocument()

package/src/FormFieldGroup/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children, ReactElement } from 'react'
+import { Component, Children, ReactElement, AriaAttributes } from 'react'
 
 import { Grid } from '@instructure/ui-grid'
 import { pickProps, omitProps } from '@instructure/ui-react-utils'
@@ -53,7 +53,8 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
     disabled: false,
     rowSpacing: 'medium',
     colSpacing: 'small',
-    vAlign: 'middle'
+    vAlign: 'middle',
+    isGroup: true
   }
 
   ref: Element | null = null
@@ -77,14 +78,20 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
   }
 
   get makeStylesVariables(): FormFieldGroupStyleProps {
-    return { invalid: this.invalid }
+    // new form errors dont need borders
+    const oldInvalid =
+      !!this.props.messages &&
+      this.props.messages.findIndex((message) => {
+        return message.type === 'error'
+      }) >= 0
+    return { 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
     )
   }
@@ -134,7 +141,35 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
 
   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)}
@@ -143,7 +178,7 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
         layout={props.layout === 'inline' ? 'inline' : 'stacked'}
         label={props.description}
         aria-disabled={props.disabled ? 'true' : undefined}
-        aria-invalid={this.invalid ? 'true' : undefined}
+        aria-invalid={ariaInvalid}
         elementRef={this.handleRef}
         isGroup={isGroup}
       >

package/src/FormFieldLayout/__new-tests__/FormFieldLayout.test.tsx

@@ -23,7 +23,7 @@
  */
 
 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'
@@ -56,7 +56,7 @@ describe('<FormFieldLayout />', () => {
       "label[class$='-formFieldLayout']"
     )
     const formFieldLabel = container.querySelector(
-      "span[class$='-formFieldLabel']"
+      "span[class$='-formFieldLayout__label']"
     )
 
     expect(formFieldLayout).toBeInTheDocument()
@@ -74,15 +74,13 @@ describe('<FormFieldLayout />', () => {
 
   it('should provide a ref to the input container', () => {
     const inputContainerRef = vi.fn()
-
+    const ref = React.createRef<HTMLInputElement>()
     render(
       <FormFieldLayout label="Username" inputContainerRef={inputContainerRef}>
-        <input type="text" />
+        <input type="text" ref={ref} />
       </FormFieldLayout>
     )
-
-    const input = screen.getByLabelText('Username')
-
-    expect(inputContainerRef).toHaveBeenCalledWith(input.parentElement)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    expect(inputContainerRef).toHaveBeenCalledWith(ref.current!.parentElement)
   })
 })

package/src/FormFieldLayout/index.tsx

@@ -24,25 +24,17 @@
 
 /** @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 { withStyle, jsx } from '@instructure/emotion'
-
-import { FormFieldLabel } from '../FormFieldLabel'
 import { FormFieldMessages } from '../FormFieldMessages'
-
 import generateStyle from './styles'
-
-import { propTypes, allowedProps } from './props'
+import { propTypes, allowedProps, FormFieldStyleProps } from './props'
 import type { FormFieldLayoutProps } from './props'
 import generateComponentTheme from './theme'
 
@@ -68,9 +60,11 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
   constructor(props: FormFieldLayoutProps) {
     super(props)
     this._messagesId = props.messagesId || props.deterministicId!()
+    this._labelId = props.deterministicId!('FormField-Label')
   }
 
   private _messagesId: string
+  private _labelId: string
 
   ref: Element | null = null
 
@@ -85,31 +79,51 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
   }
 
   componentDidMount() {
-    this.props.makeStyles?.()
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.()
+    this.props.makeStyles?.(this.makeStyleProps())
+  }
+
+  makeStyleProps = (): FormFieldStyleProps => {
+    const hasNewErrorMsgAndIsGroup =
+      !!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
+    }
   }
 
   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'
-  }
-
-  handleInputContainerRef = (node: HTMLSpanElement | null) => {
+  handleInputContainerRef = (node: HTMLElement | null) => {
     if (typeof this.props.inputContainerRef === 'function') {
       this.props.inputContainerRef(node)
     }
@@ -117,101 +131,73 @@ class FormFieldLayout extends Component<FormFieldLayoutProps> {
 
   renderLabel() {
     if (this.hasVisibleLabel) {
+      if (this.elementType == 'fieldset') {
+        // `legend` has some special built in CSS, this can only be reset
+        // this way https://stackoverflow.com/a/65866981/319473
+        return (
+          <legend style={{ display: 'contents' }}>
+            <span css={this.props.styles?.formFieldLabel}>
+              {this.props.label}
+            </span>
+          </legend>
+        )
+      }
       return (
-        <Grid.Col
-          textAlign={this.props.labelAlign}
-          width={this.inlineContainerAndLabel ? 'auto' : 3}
-        >
-          <FormFieldLabel
-            aria-hidden={this.elementType === 'fieldset' ? 'true' : undefined}
-          >
-            {this.props.label}
-          </FormFieldLabel>
-        </Grid.Col>
+        <span css={this.props.styles?.formFieldLabel}>{this.props.label}</span>
       )
-    } 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 (
-      <ScreenReaderContent as="legend">
-        {this.props.label}
-        {this.hasMessages && (
-          <FormFieldMessages messages={this.props.messages} />
-        )}
-      </ScreenReaderContent>
-    )
+    } else if (this.props.label) {
+      if (this.elementType == 'fieldset') {
+        return (
+          <legend id={this._labelId} style={{ display: 'contents' }}>
+            {this.props.label}
+          </legend>
+        )
+      }
+      // needs to be wrapped because it needs an `id`
+      return <div id={this._labelId}>{this.props.label}</div>
+    } else return null
   }
 
   renderVisibleMessages() {
     return this.hasMessages ? (
-      <Grid.Row>
-        <Grid.Col
-          offset={this.inlineContainerAndLabel ? undefined : 3}
-          textAlign={this.inlineContainerAndLabel ? 'end' : undefined}
-        >
-          <FormFieldMessages
-            id={this._messagesId}
-            messages={this.props.messages}
-          />
-        </Grid.Col>
-      </Grid.Row>
+      <FormFieldMessages
+        id={this._messagesId}
+        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
-    const ElementType = this.elementType as any
+    // Should be `<label>` if it's a FormField, fieldset if it's a group
+    const ElementType = this.elementType
 
     const { makeStyles, styles, messages, isGroup, ...props } = this.props
 
-    const { width, layout, children } = props
+    const { width, children } = props
 
-    const hasNewErrorMsg =
+    const hasNewErrorMsgAndIsGroup =
       !!messages?.find((m) => m.type === 'newError') && isGroup
     return (
       <ElementType
-        {...omitProps(props, [
-          ...FormFieldLayout.allowedProps,
-          ...Grid.allowedProps
-        ])}
+        {...omitProps(props, [...FormFieldLayout.allowedProps])}
         css={styles?.formFieldLayout}
-        style={{ width }}
         aria-describedby={this.hasMessages ? this._messagesId : undefined}
+        aria-errormessage={
+          this.props['aria-invalid'] ? this._messagesId : undefined
+        }
+        style={{ width }}
         ref={this.handleRef}
       >
-        {this.elementType === 'fieldset' && this.renderLegend()}
-        <Grid
-          rowSpacing="small"
-          colSpacing="small"
-          startAt={
-            layout === 'inline' && this.hasVisibleLabel ? 'medium' : null
-          }
-          {...pickProps(props, Grid.allowedProps)}
+        {this.renderLabel()}
+        {hasNewErrorMsgAndIsGroup && this.renderVisibleMessages()}
+        <span
+          css={styles?.formFieldChildren}
+          ref={this.handleInputContainerRef}
         >
-          <Grid.Row>
-            {this.renderLabel()}
-            <Grid.Col
-              width={this.inlineContainerAndLabel ? 'auto' : undefined}
-              elementRef={this.handleInputContainerRef}
-            >
-              {hasNewErrorMsg && (
-                <div css={styles?.groupErrorMessage}>
-                  {this.renderVisibleMessages()}
-                </div>
-              )}
-              {children}
-            </Grid.Col>
-          </Grid.Row>
-          {!hasNewErrorMsg && this.renderVisibleMessages()}
-        </Grid>
+          {children}
+        </span>
+        {!hasNewErrorMsgAndIsGroup && this.renderVisibleMessages()}
       </ElementType>
     )
   }

package/src/FormFieldLayout/props.ts

@@ -61,12 +61,31 @@ type FormFieldLayoutOwnProps = {
    */
   messagesId?: string
   children?: React.ReactNode
+  /**
+   * If `true` use an inline layout -- content will flow on the left/right side
+   * of this component
+   */
   inline?: boolean
+  /**
+   * In `stacked` mode the container is below the label, in `inline` mode the
+   * container is to the right/left (depending on text direction)
+   */
   layout?: 'stacked' | 'inline'
+  /**
+   * The horizontal alignment of the label. Only works in `inline` layout
+   */
   labelAlign?: 'start' | 'end'
+  /**
+   * The vertical alignment of the label and the controls.
+   * "top" by default
+   */
   vAlign?: 'top' | 'middle' | 'bottom'
   width?: string
-  inputContainerRef?: (element: HTMLSpanElement | null) => void
+  /**
+   * Provides a reference to the container that holds the input element
+   * @param element The element that holds the input control as its children
+   */
+  inputContainerRef?: (element: HTMLElement | null) => void
   /**
    * provides a reference to the underlying html root element
    */
@@ -89,7 +108,7 @@ type FormFieldLayoutProps = FormFieldLayoutOwnProps &
   WithDeterministicIdProps
 
 type FormFieldLayoutStyle = ComponentStyle<
-  'formFieldLayout' | 'groupErrorMessage'
+  'formFieldLayout' | 'formFieldLabel' | 'formFieldChildren'
 >
 
 const propTypes: PropValidators<PropKeys> = {
@@ -130,7 +149,14 @@ const allowedProps: AllowedPropKeys = [
   //'vAlign'
 ]
 
+type FormFieldStyleProps = {
+  hasMessages: boolean
+  hasVisibleLabel: boolean
+  hasNewErrorMsgAndIsGroup: boolean
+}
+
 export type {
+  FormFieldStyleProps,
   FormFieldLayoutProps,
   FormFieldLayoutStyle,
   FormFieldLayoutOwnProps

package/src/FormFieldLayout/styles.ts

@@ -22,9 +22,44 @@
  * SOFTWARE.
  */
 
+import type {
+  FormFieldLayoutProps,
+  FormFieldLayoutStyle,
+  FormFieldStyleProps
+} from './props'
+import type { FormFieldLayoutTheme } from '@instructure/shared-types'
 import { mapSpacingToShorthand } from '@instructure/emotion'
-import type { FormFieldLayoutProps, FormFieldLayoutStyle } from './props'
 
+const generateGridLayout = (
+  isInlineLayout: boolean,
+  hasNewErrorMsgAndIsGroup: boolean,
+  hasVisibleLabel: boolean,
+  hasMessages: boolean
+) => {
+  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
@@ -32,21 +67,62 @@ import type { FormFieldLayoutProps, FormFieldLayoutStyle } from './props'
  * 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: any,
-  props: FormFieldLayoutProps
+  componentTheme: FormFieldLayoutTheme,
+  props: FormFieldLayoutProps,
+  styleProps: FormFieldStyleProps
 ): FormFieldLayoutStyle => {
-  const { inline, margin } = props
-  const { spacing } = componentTheme
+  const { inline, layout, vAlign, labelAlign, margin } = props
+  const { hasMessages, hasVisibleLabel, hasNewErrorMsgAndIsGroup } = styleProps
+  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
+        }
+    })
+  }
 
-  const cssMargin = mapSpacingToShorthand(margin, spacing)
+  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',
@@ -57,14 +133,52 @@ const generateStyle = (
       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/src/FormFieldLayout/theme.ts

@@ -22,12 +22,38 @@
  * SOFTWARE.
  */
 
-import type { Theme } from '@instructure/ui-themes'
+import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
+import { FormFieldLayoutTheme } from '@instructure/shared-types'
 
-const generateComponentTheme = (theme: Theme): any => {
-  const { spacing } = theme
+/**
+ * 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): FormFieldLayoutTheme => {
+  const { colors, typography, spacing, breakpoints, key: themeName } = theme
+
+  const themeSpecificStyle: ThemeSpecificStyle<FormFieldLayoutTheme> = {
+    canvas: {
+      color: theme['ic-brand-font-color-dark']
+    }
+  }
+
+  const componentVariables: FormFieldLayoutTheme = {
+    color: colors?.contrasts?.grey125125,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightBold,
+    fontSize: typography?.fontSizeMedium,
+    lineHeight: typography?.lineHeightFit,
+    inlinePadding: spacing?.xxSmall,
+    stackedOrInlineBreakpoint: breakpoints?.medium,
+    spacing: theme.spacing
+  }
 
-  return { spacing }
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  }
 }
 
 export default generateComponentTheme