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

package/src/FormFieldMessage/v2/index.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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'
+
+import type { FormFieldMessageProps } 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
+---
+<FormFieldMessage variant="error">Invalid value</FormFieldMessage>
+```
+**/
+const FormFieldMessage = forwardRef<HTMLSpanElement, FormFieldMessageProps>(
+  ({ variant = 'hint', children, themeOverride }, ref) => {
+    const styles = useStyle({
+      generateStyle,
+      themeOverride,
+      params: {
+        variant
+      },
+      componentId: 'FormFieldMessage',
+      displayName: 'FormFieldMessage'
+    })
+
+    const handleRef = (el: Element | null) => {
+      if (typeof ref === 'function') {
+        ref(el as HTMLSpanElement)
+      } else if (ref) {
+        const refObject = ref
+        refObject.current = el as HTMLSpanElement
+      }
+    }
+
+    const isErrorVariant = variant === 'error' || variant === 'newError'
+    const shouldShowIcon = (isErrorVariant || variant === 'success') && children
+
+    return variant !== 'screenreader-only' ? (
+      <span css={{ display: 'flex' }}>
+        {shouldShowIcon && (
+          <span css={styles?.icon}>
+            {isErrorVariant ? (
+              <AlertCircleInstUIIcon size="sm" color="errorColor" />
+            ) : (
+              <CheckCircle2InstUIIcon size="sm" color="successColor" />
+            )}
+          </span>
+        )}
+        <span css={styles?.formFieldMessage} ref={handleRef}>
+          {children}
+        </span>
+      </span>
+    ) : (
+      <ScreenReaderContent elementRef={handleRef}>
+        {children}
+      </ScreenReaderContent>
+    )
+  }
+)
+
+FormFieldMessage.displayName = 'FormFieldMessage'
+
+export default FormFieldMessage
+export { FormFieldMessage }

package/src/FormFieldMessage/v2/props.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type {
+  FormMessageType,
+  FormMessageChild
+} from '../../utils/v1/FormPropTypes'
+
+type FormFieldMessageOwnProps = {
+  variant?: FormMessageType
+  children?: FormMessageChild
+}
+
+type PropKeys = keyof FormFieldMessageOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type FormFieldMessageProps = FormFieldMessageOwnProps & {
+  themeOverride?: ThemeOverrideValue
+}
+
+type FormFieldMessageStyle = ComponentStyle<'formFieldMessage' | 'icon'>
+const allowedProps: AllowedPropKeys = ['variant', 'children']
+
+export type { FormFieldMessageProps, FormFieldMessageStyle }
+export { allowedProps }

package/src/FormFieldMessage/v2/styles.ts

@@ -0,0 +1,76 @@
+/*
+ * 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 { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { FormFieldMessageProps, FormFieldMessageStyle } from './props'
+import type { FormMessageType } from '../../utils/v1/FormPropTypes'
+
+type StyleParams = {
+  variant: FormFieldMessageProps['variant']
+}
+
+/**
+ * ---
+ * 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: NewComponentTypes['FormFieldMessage'],
+  params: StyleParams,
+  sharedTokens: SharedTokens
+): FormFieldMessageStyle => {
+  const { variant } = params
+
+  const variants: Record<FormMessageType, { color?: string }> = {
+    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/src/FormFieldMessages/{index.tsx → v1/index.tsx}

@@ -26,9 +26,9 @@ import { Component } from 'react'
 
 import { omitProps } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
-import { FormFieldMessage } from '../FormFieldMessage'
+import { FormFieldMessage } from '../../FormFieldMessage/v1'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

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

@@ -27,7 +27,7 @@ import type {
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { FormMessage } from '../FormPropTypes'
+import type { FormMessage } from '../../utils/v1/FormPropTypes'
 
 type FormFieldMessagesOwnProps = {
   /**

package/src/FormFieldMessages/v2/index.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 } from '@instructure/ui-react-utils'
+
+import { withStyle } from '@instructure/emotion'
+
+import { FormFieldMessage } from '../../FormFieldMessage/v2'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { FormFieldMessagesProps } from './props'
+
+/**
+---
+parent: FormField
+---
+
+A FormFieldMessages component
+
+```js
+---
+type: example
+---
+<FormFieldMessages messages={[
+  { text: 'Invalid name', type: 'error' },
+  { text: 'Good job!', type: 'success' },
+  { text: 'Full name, first and last', type: 'hint' },
+]} />
+```
+**/
+@withStyle(generateStyle)
+class FormFieldMessages extends Component<FormFieldMessagesProps> {
+  static readonly componentId = 'FormFieldMessages'
+
+  static allowedProps = allowedProps
+  static defaultProps = {}
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const { messages, styles } = this.props
+
+    return messages && messages.length > 0 ? (
+      <div
+        css={styles?.formFieldMessages}
+        {...omitProps(this.props, FormFieldMessages.allowedProps)}
+        ref={this.handleRef}
+      >
+        {messages.map((msg, i) => {
+          return (
+            <span key={`error${i}`} css={styles?.message}>
+              <FormFieldMessage variant={msg.type}>{msg.text}</FormFieldMessage>
+            </span>
+          )
+        })}
+      </div>
+    ) : null
+  }
+}
+
+export default FormFieldMessages
+export { FormFieldMessages }

package/src/FormFieldMessages/v2/props.ts

@@ -0,0 +1,59 @@
+/*
+ * 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 {
+  FormFieldMessagesTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { FormMessage } from '../../utils/v1/FormPropTypes'
+
+type FormFieldMessagesOwnProps = {
+  /**
+   * Array of objects with shape: `{
+   *   text: React.ReactNode,
+   *   type: One of: ['newError', 'error', 'hint', 'success', 'screenreader-only']
+   * }`
+   */
+  messages?: FormMessage[]
+  /**
+   * Specifies the size and location if inside a CSS grid, see
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
+   */
+  gridArea?: string
+}
+
+type PropKeys = keyof FormFieldMessagesOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type FormFieldMessagesProps = FormFieldMessagesOwnProps &
+  WithStyleProps<FormFieldMessagesTheme, FormFieldMessagesStyle> &
+  OtherHTMLAttributes<FormFieldMessagesOwnProps>
+
+type FormFieldMessagesStyle = ComponentStyle<'formFieldMessages' | 'message'>
+const allowedProps: AllowedPropKeys = ['messages', 'gridArea']
+
+export type { FormFieldMessagesProps, FormFieldMessagesStyle }
+export { allowedProps }

package/src/FormFieldMessages/v2/styles.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 { FormFieldMessagesTheme } from '@instructure/shared-types'
+import type { FormFieldMessagesProps, FormFieldMessagesStyle } 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
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  _componentTheme: FormFieldMessagesTheme,
+  props: FormFieldMessagesProps
+): FormFieldMessagesStyle => {
+  return {
+    formFieldMessages: {
+      label: 'formFieldMessages',
+      padding: 0,
+      display: 'block',
+      ...(props.gridArea && { gridArea: props.gridArea })
+    },
+    message: {
+      label: 'formFieldMessages__message',
+      display: 'block'
+    }
+  }
+}
+
+export default generateStyle

package/src/{index.ts → exports/a.ts}

@@ -22,18 +22,22 @@
  * SOFTWARE.
  */
 
-export { FormField } from './FormField'
-export { FormFieldLabel } from './FormFieldLabel'
-export { FormFieldMessage } from './FormFieldMessage'
-export { FormFieldMessages } from './FormFieldMessages'
-export { FormFieldLayout } from './FormFieldLayout'
-export { FormFieldGroup } from './FormFieldGroup'
+export { FormField } from '../FormField/v1'
+export { FormFieldLabel } from '../FormFieldLabel/v1'
+export { FormFieldMessage } from '../FormFieldMessage/v1'
+export { FormFieldMessages } from '../FormFieldMessages/v1'
+export { FormFieldLayout } from '../FormFieldLayout/v1'
+export { FormFieldGroup } from '../FormFieldGroup/v1'
 
-export type { FormMessageType, FormMessage } from './FormPropTypes'
+export type {
+  FormMessageType,
+  FormMessage,
+  FormMessageChild
+} from '../utils/v1/FormPropTypes'
 
-export type { FormFieldOwnProps, FormFieldProps } from './FormField/props'
-export type { FormFieldLabelProps } from './FormFieldLabel/props'
-export type { FormFieldMessageProps } from './FormFieldMessage/props'
-export type { FormFieldMessagesProps } from './FormFieldMessages/props'
-export type { FormFieldLayoutProps } from './FormFieldLayout/props'
-export type { FormFieldGroupProps } from './FormFieldGroup/props'
+export type { FormFieldOwnProps, FormFieldProps } from '../FormField/v1/props'
+export type { FormFieldLabelProps } from '../FormFieldLabel/v1/props'
+export type { FormFieldMessageProps } from '../FormFieldMessage/v1/props'
+export type { FormFieldMessagesProps } from '../FormFieldMessages/v1/props'
+export type { FormFieldLayoutProps } from '../FormFieldLayout/v1/props'
+export type { FormFieldGroupProps } from '../FormFieldGroup/v1/props'

package/src/exports/b.ts

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+export { FormField } from '../FormField/v2'
+export { FormFieldLabel } from '../FormFieldLabel/v2'
+export { FormFieldMessage } from '../FormFieldMessage/v2'
+export { FormFieldMessages } from '../FormFieldMessages/v2'
+export { FormFieldLayout } from '../FormFieldLayout/v2'
+export { FormFieldGroup } from '../FormFieldGroup/v2'
+
+export type {
+  FormMessageType,
+  FormMessage,
+  FormMessageChild
+} from '../utils/v1/FormPropTypes'
+
+export type { FormFieldOwnProps, FormFieldProps } from '../FormField/v2/props'
+export type { FormFieldLabelProps } from '../FormFieldLabel/v2/props'
+export type { FormFieldMessageProps } from '../FormFieldMessage/v2/props'
+export type { FormFieldMessagesProps } from '../FormFieldMessages/v2/props'
+export type { FormFieldLayoutProps } from '../FormFieldLayout/v2/props'
+export type { FormFieldGroupProps } from '../FormFieldGroup/v2/props'

package/tsconfig.build.json

@@ -16,6 +16,7 @@
     { "path": "../ui-a11y-utils/tsconfig.build.json" },
     { "path": "../ui-grid/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../uid/tsconfig.build.json" },