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

package/src/FormFieldMessages/props.ts

@@ -42,6 +42,11 @@ type FormFieldMessagesOwnProps = {
    * }`
    */
   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
@@ -55,10 +60,11 @@ type FormFieldMessagesProps = FormFieldMessagesOwnProps &
 type FormFieldMessagesStyle = ComponentStyle<'formFieldMessages' | 'message'>
 
 const propTypes: PropValidators<PropKeys> = {
-  messages: PropTypes.arrayOf(FormPropTypes.message)
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  gridArea: PropTypes.string
 }
 
-const allowedProps: AllowedPropKeys = ['messages']
+const allowedProps: AllowedPropKeys = ['messages', 'gridArea']
 
 export type { FormFieldMessagesProps, FormFieldMessagesStyle }
 export { propTypes, allowedProps }

package/src/FormFieldMessages/styles.ts

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

package/src/FormPropTypes.ts

@@ -40,6 +40,10 @@ type FormMessageType =
   | 'hint'
   | 'success'
   | 'screenreader-only'
+// TODO it will be easier if this would be just a string
+/**
+ * The text to display in the form message
+ */
 type FormMessageChild = React.ReactNode
 
 /**

package/src/index.ts

@@ -23,7 +23,6 @@
  */
 
 export { FormField } from './FormField'
-export { FormFieldLabel } from './FormFieldLabel'
 export { FormFieldMessage } from './FormFieldMessage'
 export { FormFieldMessages } from './FormFieldMessages'
 export { FormFieldLayout } from './FormFieldLayout'
@@ -33,7 +32,6 @@ export { FormPropTypes } from './FormPropTypes'
 export type { FormMessageType, FormMessage } from './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'