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

package/lib/exports/b.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormField", {
+  enumerable: true,
+  get: function () {
+    return _v.FormField;
+  }
+});
+Object.defineProperty(exports, "FormFieldGroup", {
+  enumerable: true,
+  get: function () {
+    return _v6.FormFieldGroup;
+  }
+});
+Object.defineProperty(exports, "FormFieldLabel", {
+  enumerable: true,
+  get: function () {
+    return _v2.FormFieldLabel;
+  }
+});
+Object.defineProperty(exports, "FormFieldLayout", {
+  enumerable: true,
+  get: function () {
+    return _v5.FormFieldLayout;
+  }
+});
+Object.defineProperty(exports, "FormFieldMessage", {
+  enumerable: true,
+  get: function () {
+    return _v3.FormFieldMessage;
+  }
+});
+Object.defineProperty(exports, "FormFieldMessages", {
+  enumerable: true,
+  get: function () {
+    return _v4.FormFieldMessages;
+  }
+});
+var _v = require("../FormField/v2");
+var _v2 = require("../FormFieldLabel/v2");
+var _v3 = require("../FormFieldMessage/v2");
+var _v4 = require("../FormFieldMessages/v2");
+var _v5 = require("../FormFieldLayout/v2");
+var _v6 = require("../FormFieldGroup/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,24 +15,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/ui-a11y-utils": "11.6.0",
-    "@instructure/ui-grid": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/uid": "11.6.0",
-    "@instructure/ui-icons": "11.6.0"
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-content": "11.6.1-snapshot-129",
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-utils": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-grid": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -41,17 +41,39 @@
     "access": "public"
   },
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

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

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { omitProps, pickProps } from '@instructure/ui-react-utils'
 
-import { FormFieldLayout } from '../FormFieldLayout'
+import { FormFieldLayout } from '../../FormFieldLayout/v1'
 
 import { allowedProps } from './props'
 import type { FormFieldProps } from './props'

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

@@ -25,7 +25,7 @@
 import React from 'react'
 
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
-import type { FormMessage } from '../FormPropTypes'
+import type { FormMessage } from '../../utils/v1/FormPropTypes'
 import type { Spacing } from '@instructure/emotion'
 
 type FormFieldOwnProps = {

package/src/FormField/v2/README.md

@@ -0,0 +1,43 @@
+---
+describes: 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
+---
+<div>
+  <FormField id="_foo121" label="Stacked layout" width="400px" layout="stacked"
+             messages={[{type:'success', text: 'This is a success message'}, {type:'error', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>
+    <TextInput id="_foo121"/>
+  </FormField>
+  test
+  <hr/>
+  <FormField id="_foo122" label="Stacked layout (inline=true)" width="400px" layout="stacked" inline
+             messages={[{type:'success', text: 'This is a success message'}, {type:'error', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>
+    <TextInput id="_foo122"/>
+  </FormField>
+  test
+  <hr/>
+  <FormField id="_foo123" label="Inline layout" width="400px" layout="inline"
+             messages={[{type:'success', text: 'success!'}, {type:'error', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>
+    <TextInput id="_foo123"/>
+  </FormField>
+  test
+  <hr/>
+  <FormField id="_foo124" label="Inline layout (inline=true)" width="400px" layout="inline" inline
+             messages={[{type:'success', text: 'success!'}, {type:'error', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>
+    <TextInput id="_foo124"/>
+  </FormField>
+  test
+  <hr/>
+  <FormField id="_foo121" label={<ScreenReaderContent>hidden text</ScreenReaderContent>} width="400px" layout="stacked">
+    <TextInput id="_foo121" />
+  </FormField>
+  test
+  <hr/>
+</div>
+```

package/src/FormField/v2/index.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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, pickProps } from '@instructure/ui-react-utils'
+
+import { allowedProps as formFieldLayoutAllowedProps } from '../../FormFieldLayout/v2/props'
+
+import { FormFieldLayout } from '../../FormFieldLayout/v2'
+
+import { allowedProps } from './props'
+import type { FormFieldProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+class FormField extends Component<FormFieldProps> {
+  static readonly componentId = 'FormField'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    inline: false,
+    layout: 'stacked',
+    labelAlign: 'end',
+    vAlign: 'middle'
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  render() {
+    return (
+      <FormFieldLayout
+        {...omitProps(this.props, FormField.allowedProps)}
+        {...pickProps(this.props, formFieldLayoutAllowedProps)}
+        label={this.props.label}
+        vAlign={this.props.vAlign}
+        as="label"
+        // This makes the control in focus when the label is clicked
+        // This is needed to prevent the wrong element to be focused, e.g.
+        // multi selects Tag-s
+        htmlFor={this.props.id}
+        elementRef={this.handleRef}
+        margin={this.props.margin}
+        isRequired={this.props.isRequired}
+        disabled={this.props.disabled}
+        readOnly={this.props.readOnly}
+      />
+    )
+  }
+}
+
+export default FormField
+export { FormField }

package/src/FormField/v2/props.ts

@@ -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 React from 'react'
+
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { FormMessage } from '../../utils/v1/FormPropTypes'
+import type { Spacing } from '@instructure/emotion'
+
+type FormFieldOwnProps = {
+  label: React.ReactNode
+  /**
+   * the id of the input (to link it to its label for a11y).
+   * Applied as the `for` HTML prop on the label.
+   */
+  id: string
+  /**
+   * 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
+  children?: React.ReactNode
+  inline?: boolean
+  layout?: 'stacked' | 'inline'
+  labelAlign?: 'start' | 'end'
+  vAlign?: 'top' | 'middle' | 'bottom'
+  width?: string
+  inputContainerRef?: (element: HTMLSpanElement | null) => void
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * If `true`, displays an asterisk after the label to indicate the field is required
+   */
+  isRequired?: boolean
+
+  /**
+   * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
+  /**
+   * Whether the field is disabled. When true, error and success messages will be hidden.
+   */
+  disabled?: boolean
+  /**
+   * Whether the field is read-only. When true, error and success messages will be hidden.
+   */
+  readOnly?: boolean
+}
+
+type PropKeys = keyof FormFieldOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type FormFieldProps = FormFieldOwnProps & OtherHTMLAttributes<FormFieldOwnProps>
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'id',
+  'messages',
+  'messagesId',
+  'children',
+  'inline',
+  'layout',
+  'labelAlign',
+  'vAlign',
+  'width',
+  'inputContainerRef',
+  'elementRef',
+  'isRequired',
+  'margin',
+  'disabled',
+  'readOnly'
+]
+
+export type { FormFieldOwnProps, FormFieldProps }
+export { allowedProps }

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

@@ -24,11 +24,13 @@
 
 import { Component, Children, ReactElement, AriaAttributes } from 'react'
 
-import { Grid } from '@instructure/ui-grid'
+import { Grid } from '@instructure/ui-grid/v11_6'
 import { pickProps, omitProps } from '@instructure/ui-react-utils'
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
-import { FormFieldLayout } from '../FormFieldLayout'
+import { allowedProps as FormFieldLayoutAllowedProps } from '../../FormFieldLayout/v1/props'
+
+import { FormFieldLayout } from '../../FormFieldLayout/v1'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
@@ -172,7 +174,7 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
     return (
       <FormFieldLayout
         {...omitProps(props, FormFieldGroup.allowedProps)}
-        {...pickProps(props, FormFieldLayout.allowedProps)}
+        {...pickProps(props, FormFieldLayoutAllowedProps)}
         vAlign={props.vAlign}
         layout={props.layout === 'inline' ? 'inline' : 'stacked'}
         label={props.description}

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

@@ -28,8 +28,8 @@ import type {
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { FormFieldLayoutOwnProps } from '../FormFieldLayout/props'
-import type { FormMessage } from '../FormPropTypes'
+import type { FormFieldLayoutOwnProps } from '../../FormFieldLayout/v1/props'
+import type { FormMessage } from '../../utils/v1/FormPropTypes'
 
 type FormFieldGroupOwnProps = {
   description: React.ReactNode

package/src/FormFieldGroup/v2/README.md

@@ -0,0 +1,114 @@
+---
+describes: FormFieldGroup
+---
+
+This is a helper component that is used by most of the custom form
+components. Perfect if you need to wrap a complex group of form fields
+(Play with the different properties inside the code editor
+to see how they affect the overall look and feel). The first example
+sets the `layout to inline` and sets the `vAlign to middle` and `small rowSpacing`
+
+```js
+---
+type: example
+---
+  <FormFieldGroup
+    description="Breakfast"
+    rowSpacing="small"
+    layout="inline"
+    vAlign="middle"
+  >
+    <TextInput renderLabel="Favorite Breakfast Eatery"
+      messages={[
+      { text: 'Invalid name', type: 'error' }
+      ]}
+    />
+    <TextInput renderLabel="Favorite Side Dish" />
+    <RadioInputGroup
+      name="beverage"
+      description="Beverage of Choice"
+      defaultValue="coffee"
+      layout="columns"
+    >
+      <RadioInput label="Juice" value="juice" />
+      <RadioInput label="Water" value="water" />
+      <RadioInput label="Coffee" value="coffee" />
+      <RadioInput label="Milk" value="milk" />
+      <RadioInput label="Soda" value="soda" />
+      <RadioInput label="Hot Tea" value="tea" />
+    </RadioInputGroup>
+  </FormFieldGroup>
+```
+
+This example sets the `layout to columns` and sets the `vAlign to top`
+and the `colSpacing to medium`
+
+```js
+---
+type: example
+---
+  <FormFieldGroup
+    description="Lunch"
+    colSpacing="medium"
+    layout="columns"
+    vAlign="top"
+  >
+    <TextInput renderLabel="Dining Style" />
+    <TextInput renderLabel="Favorite Lunch Outing"/>
+    <CheckboxGroup name="times"
+      layout="stacked"
+      onChange={function (value) { console.log(value) }}
+      defaultValue={['afternoon']}
+      description="Best Time to Head Out for Lunch"
+    >
+      <Checkbox label="Between 11:00 and 11:30" value="morning" />
+      <Checkbox label="Between 11:30 and Noon" value="early-afternoon" />
+      <Checkbox label="Between Noon and 1:00" value="afternoon" />
+      <Checkbox label="Between 1:00 and 2:00" value="late-afternoon" />
+    </CheckboxGroup>
+  </FormFieldGroup>
+```
+
+This example sets the `layout to stacked` and sets the `rowSpacing to large`
+
+```js
+---
+type: example
+---
+  <FormFieldGroup
+    description="Dinner"
+    layout="stacked"
+    rowSpacing="large"
+    messages={[
+    { text: 'Complete All Fields', type: 'error' }
+    ]}
+  >
+    <RadioInputGroup
+      name="diningstyle"
+      description="Size of Your Meal"
+      defaultValue="grill"
+      layout="stacked"
+    >
+      <RadioInput label="Keep it light" value="light" />
+      <RadioInput label="Anything cooked on the grill" value="grill" />
+      <RadioInput label="Bring it on... Ready for the full course" value="full-course" />
+      <RadioInput label="Breakfast for dinner" value="breakfast" />
+    </RadioInputGroup>
+    <TextInput renderLabel="If Not At Home - I'd Like To Eat Dinner At"
+      />
+    <Checkbox label="Love to Eat Dessert After Dinner" value="medium" variant="toggle" />
+  </FormFieldGroup>
+```
+
+### Guidelines
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <Figure.Item>Avoid placeholder text (it creates usability problems by increasing cognitive load, low contrast, lack of screen reader compatibility, etc.)</Figure.Item>
+  </Figure>
+</Guidelines>
+```