@instructure/ui-form-field 7.11.0 → 7.14.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.14.1](https://github.com/instructure/instructure-ui/compare/v7.14.0...v7.14.1) (2021-12-06)
+
+**Note:** Version bump only for package @instructure/ui-form-field
+
+# [7.14.0](https://github.com/instructure/instructure-ui/compare/v7.13.0...v7.14.0) (2021-12-01)
+
+### Features
+
+- **ui-form-field:** make FormField messages accept `node` text, not just `string` ([d9e1a7a](https://github.com/instructure/instructure-ui/commit/d9e1a7a)), closes [PR#819](https://github.com/PR/issues/819)
+
+# [7.13.0](https://github.com/instructure/instructure-ui/compare/v7.12.0...v7.13.0) (2021-11-18)
+
+**Note:** Version bump only for package @instructure/ui-form-field
+
+# [7.12.0](https://github.com/instructure/instructure-ui/compare/v7.11.0...v7.12.0) (2021-10-15)
+
+**Note:** Version bump only for package @instructure/ui-form-field
+
 # [7.11.0](https://github.com/instructure/instructure-ui/compare/v7.10.0...v7.11.0) (2021-09-17)
 
 **Note:** Version bump only for package @instructure/ui-form-field

package/es/FormField/index.js

@@ -73,7 +73,7 @@ FormField.propTypes = {
 
   /**
    * object with shape: `{
-   *   text: PropTypes.string,
+   *   text: PropTypes.node,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    * }`
    */

package/es/FormFieldGroup/index.js

@@ -126,7 +126,7 @@ var FormFieldGroup = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
 
   /**
    * object with shape: `{
-   * text: PropTypes.string,
+   * text: PropTypes.node,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */

package/es/FormFieldLayout/index.js

@@ -195,7 +195,7 @@ var FormFieldLayout = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
 
   /**
    * object with shape: `{
-   * text: PropTypes.string,
+   * text: PropTypes.node,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */

package/es/FormFieldMessage/index.js

@@ -30,10 +30,10 @@ var _dec, _class, _class2, _temp;
  * SOFTWARE.
  */
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { themeable } from '@instructure/ui-themeable';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { formMessageChildPropType, formMessageTypePropType } from "../FormPropTypes.js";
 var styles = {
   componentId: 'bVlfD',
   template: function template(theme) {
@@ -87,8 +87,8 @@ var FormFieldMessage = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   FormFieldMessage.displayName = "FormFieldMessage";
   return FormFieldMessage;
 }(Component), _class2.propTypes = {
-  variant: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only']),
-  children: PropTypes.node
+  variant: formMessageTypePropType,
+  children: formMessageChildPropType
 }, _class2.defaultProps = {
   variant: 'hint',
   children: null

package/es/FormFieldMessages/index.js

@@ -95,7 +95,7 @@ var FormFieldMessages = (_dec = themeable(theme, styles), _dec(_class = (_temp =
 }(Component), _class2.propTypes = {
   /**
    * object with shape: `{
-   * text: PropTypes.string,
+   * text: PropTypes.node,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */

package/es/FormPropTypes.js

@@ -22,6 +22,8 @@
  * SOFTWARE.
  */
 import PropTypes from 'prop-types';
+var formMessageChildPropType = PropTypes.node;
+var formMessageTypePropType = PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only']);
 /**
  * ---
  * category: utilities/form
@@ -32,9 +34,9 @@ import PropTypes from 'prop-types';
 
 var FormPropTypes = {
   message: PropTypes.shape({
-    text: PropTypes.string,
-    type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+    text: formMessageChildPropType,
+    type: formMessageTypePropType
   })
 };
 export default FormPropTypes;
-export { FormPropTypes };
+export { FormPropTypes, formMessageTypePropType, formMessageChildPropType };

package/lib/FormField/index.js

@@ -93,7 +93,7 @@ FormField.propTypes = {
 
   /**
    * object with shape: `{
-   *   text: PropTypes.string,
+   *   text: PropTypes.node,
    *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    * }`
    */

package/lib/FormFieldGroup/index.js

@@ -127,7 +127,7 @@ var FormFieldGroup = (_dec = (0, _themeable.themeable)(_theme.default, styles),
 
   /**
    * object with shape: `{
-   * text: PropTypes.string,
+   * text: PropTypes.node,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */

package/lib/FormFieldLayout/index.js

@@ -201,7 +201,7 @@ var FormFieldLayout = (_dec = (0, _themeable.themeable)(_theme.default, styles),
 
   /**
    * object with shape: `{
-   * text: PropTypes.string,
+   * text: PropTypes.node,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */

package/lib/FormFieldMessage/index.js

@@ -21,14 +21,14 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _themeable = require("@instructure/ui-themeable/lib/themeable.js");
 
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
 
+var _FormPropTypes = require("../FormPropTypes.js");
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
@@ -83,8 +83,8 @@ var FormFieldMessage = (_dec = (0, _themeable.themeable)(_theme.default, styles)
   FormFieldMessage.displayName = "FormFieldMessage";
   return FormFieldMessage;
 }(_react.Component), _class2.propTypes = {
-  variant: _propTypes.default.oneOf(['error', 'hint', 'success', 'screenreader-only']),
-  children: _propTypes.default.node
+  variant: _FormPropTypes.formMessageTypePropType,
+  children: _FormPropTypes.formMessageChildPropType
 }, _class2.defaultProps = {
   variant: 'hint',
   children: null

package/lib/FormFieldMessages/index.js

@@ -91,7 +91,7 @@ var FormFieldMessages = (_dec = (0, _themeable.themeable)(_theme.default, styles
 }(_react.Component), _class2.propTypes = {
   /**
    * object with shape: `{
-   * text: PropTypes.string,
+   * text: PropTypes.node,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */

package/lib/FormPropTypes.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FormPropTypes = exports.default = void 0;
+exports.formMessageChildPropType = exports.formMessageTypePropType = exports.FormPropTypes = exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -32,7 +32,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+var formMessageChildPropType = _propTypes.default.node;
+exports.formMessageChildPropType = formMessageChildPropType;
 
+var formMessageTypePropType = _propTypes.default.oneOf(['error', 'hint', 'success', 'screenreader-only']);
 /**
  * ---
  * category: utilities/form
@@ -40,10 +43,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * Custom prop types for React components.
  * @module FormPropTypes
  */
+
+
+exports.formMessageTypePropType = formMessageTypePropType;
 var FormPropTypes = {
   message: _propTypes.default.shape({
-    text: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+    text: formMessageChildPropType,
+    type: formMessageTypePropType
   })
 };
 exports.FormPropTypes = FormPropTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "7.11.0",
+  "version": "7.14.1",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -23,20 +23,20 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.11.0",
-    "@instructure/ui-test-utils": "^7.11.0"
+    "@instructure/ui-babel-preset": "^7.14.1",
+    "@instructure/ui-test-utils": "^7.14.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/console": "^7.11.0",
-    "@instructure/ui-a11y-content": "^7.11.0",
-    "@instructure/ui-a11y-utils": "^7.11.0",
-    "@instructure/ui-grid": "^7.11.0",
-    "@instructure/ui-icons": "^7.11.0",
-    "@instructure/ui-react-utils": "^7.11.0",
-    "@instructure/ui-themeable": "^7.11.0",
-    "@instructure/ui-utils": "^7.11.0",
-    "@instructure/uid": "^7.11.0",
+    "@instructure/console": "^7.14.1",
+    "@instructure/ui-a11y-content": "^7.14.1",
+    "@instructure/ui-a11y-utils": "^7.14.1",
+    "@instructure/ui-grid": "^7.14.1",
+    "@instructure/ui-icons": "^7.14.1",
+    "@instructure/ui-react-utils": "^7.14.1",
+    "@instructure/ui-themeable": "^7.14.1",
+    "@instructure/ui-utils": "^7.14.1",
+    "@instructure/uid": "^7.14.1",
     "classnames": "^2",
     "prop-types": "^15"
   },

package/src/FormField/index.js

@@ -44,7 +44,7 @@ class FormField extends Component {
     id: PropTypes.string.isRequired,
     /**
      * object with shape: `{
-     *   text: PropTypes.string,
+     *   text: PropTypes.node,
      *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      * }`
      */

package/src/FormFieldGroup/index.js

@@ -51,7 +51,7 @@ class FormFieldGroup extends Component {
     as: PropTypes.elementType,
     /**
      * object with shape: `{
-     * text: PropTypes.string,
+     * text: PropTypes.node,
      * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      *   }`
      */

package/src/FormFieldLayout/index.js

@@ -64,7 +64,7 @@ class FormFieldLayout extends Component {
     as: PropTypes.elementType,
     /**
      * object with shape: `{
-     * text: PropTypes.string,
+     * text: PropTypes.node,
      * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      *   }`
      */

package/src/FormFieldMessage/index.js

@@ -23,12 +23,16 @@
  */
 
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import { themeable } from '@instructure/ui-themeable'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
+import {
+  formMessageChildPropType,
+  formMessageTypePropType
+} from '../FormPropTypes'
+
 import styles from './styles.css'
 import theme from './theme'
 
@@ -50,8 +54,8 @@ example: true
 @themeable(theme, styles)
 class FormFieldMessage extends Component {
   static propTypes = {
-    variant: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only']),
-    children: PropTypes.node
+    variant: formMessageTypePropType,
+    children: formMessageChildPropType
   }
 
   static defaultProps = {

package/src/FormFieldMessages/index.js

@@ -57,7 +57,7 @@ class FormFieldMessages extends Component {
   static propTypes = {
     /**
      * object with shape: `{
-     * text: PropTypes.string,
+     * text: PropTypes.node,
      * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      *   }`
      */

package/src/FormPropTypes.js

@@ -24,6 +24,14 @@
 
 import PropTypes from 'prop-types'
 
+const formMessageChildPropType = PropTypes.node
+const formMessageTypePropType = PropTypes.oneOf([
+  'error',
+  'hint',
+  'success',
+  'screenreader-only'
+])
+
 /**
  * ---
  * category: utilities/form
@@ -33,10 +41,10 @@ import PropTypes from 'prop-types'
  */
 const FormPropTypes = {
   message: PropTypes.shape({
-    text: PropTypes.string,
-    type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+    text: formMessageChildPropType,
+    type: formMessageTypePropType
   })
 }
 
 export default FormPropTypes
-export { FormPropTypes }
+export { FormPropTypes, formMessageTypePropType, formMessageChildPropType }

package/types/index.d.ts

@@ -1,42 +1,35 @@
 import * as React from 'react';
 
-export type FormFieldGroupLayout = "stacked" | "columns" | "inline";
-
-export type FormFieldGroupRowSpacing = "none" | "small" | "medium" | "large";
-
-export type FormFieldGroupColSpacing = "none" | "small" | "medium" | "large";
+export type FormFieldLayout = "stacked" | "inline";
 
-export type FormFieldGroupVAlign = "top" | "middle" | "bottom";
+export type FormFieldLabelAlign = "start" | "end";
 
-export type FormFieldGroupStartAt = "small" | "medium" | "large" | "x-large" | any;
+export type FormFieldVAlign = "top" | "middle" | "bottom";
 
-export interface FormFieldGroupProps {
-    description: React.ReactNode;
+export interface FormFieldProps {
+    label: React.ReactNode;
     /**
-     * the element type to render as
+     * the id of the input (to link it to its label for a11y)
      */
-    as?: any;
+    id: string;
     /**
      * object with shape: `{
-     * text: PropTypes.string,
+     * text: PropTypes.node,
      * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      * }`
      */
     messages?: any[];
-    /**
-     * id for the form field messages
-     */
     messagesId?: string;
-    disabled?: boolean;
     children?: React.ReactNode;
-    layout?: FormFieldGroupLayout;
-    rowSpacing?: FormFieldGroupRowSpacing;
-    colSpacing?: FormFieldGroupColSpacing;
-    vAlign?: FormFieldGroupVAlign;
-    startAt?: FormFieldGroupStartAt;
+    inline?: boolean;
+    layout?: FormFieldLayout;
+    labelAlign?: FormFieldLabelAlign;
+    vAlign?: FormFieldVAlign;
+    width?: string;
+    inputContainerRef?: (...args: any[])=>any;
 }
 
-export class FormFieldGroup extends React.Component<FormFieldGroupProps, any> {
+export class FormField extends React.Component<FormFieldProps, any> {
     render(): JSX.Element;
 
 }
@@ -44,36 +37,43 @@ export class FormFieldGroup extends React.Component<FormFieldGroupProps, any> {
 
 
 
-export type FormFieldLayout = "stacked" | "inline";
+export type FormFieldGroupLayout = "stacked" | "columns" | "inline";
 
-export type FormFieldLabelAlign = "start" | "end";
+export type FormFieldGroupRowSpacing = "none" | "small" | "medium" | "large";
 
-export type FormFieldVAlign = "top" | "middle" | "bottom";
+export type FormFieldGroupColSpacing = "none" | "small" | "medium" | "large";
 
-export interface FormFieldProps {
-    label: React.ReactNode;
+export type FormFieldGroupVAlign = "top" | "middle" | "bottom";
+
+export type FormFieldGroupStartAt = "small" | "medium" | "large" | "x-large" | any;
+
+export interface FormFieldGroupProps {
+    description: React.ReactNode;
     /**
-     * the id of the input (to link it to its label for a11y)
+     * the element type to render as
      */
-    id: string;
+    as?: any;
     /**
      * object with shape: `{
-     * text: PropTypes.string,
+     * text: PropTypes.node,
      * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      * }`
      */
     messages?: any[];
+    /**
+     * id for the form field messages
+     */
     messagesId?: string;
+    disabled?: boolean;
     children?: React.ReactNode;
-    inline?: boolean;
-    layout?: FormFieldLayout;
-    labelAlign?: FormFieldLabelAlign;
-    vAlign?: FormFieldVAlign;
-    width?: string;
-    inputContainerRef?: (...args: any[])=>any;
+    layout?: FormFieldGroupLayout;
+    rowSpacing?: FormFieldGroupRowSpacing;
+    colSpacing?: FormFieldGroupColSpacing;
+    vAlign?: FormFieldGroupVAlign;
+    startAt?: FormFieldGroupStartAt;
 }
 
-export class FormField extends React.Component<FormFieldProps, any> {
+export class FormFieldGroup extends React.Component<FormFieldGroupProps, any> {
     render(): JSX.Element;
 
 }
@@ -110,7 +110,7 @@ export interface FormFieldLayoutProps {
     as?: any;
     /**
      * object with shape: `{
-     * text: PropTypes.string,
+     * text: PropTypes.node,
      * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      * }`
      */
@@ -135,11 +135,9 @@ export class FormFieldLayout extends React.Component<FormFieldLayoutProps, any>
 
 
 
-export type FormFieldMessageVariant = "error" | "hint" | "success" | "screenreader-only";
-
 export interface FormFieldMessageProps {
-    variant?: FormFieldMessageVariant;
-    children?: React.ReactNode;
+    variant?: any;
+    children?: any;
 }
 
 export class FormFieldMessage extends React.Component<FormFieldMessageProps, any> {
@@ -153,7 +151,7 @@ export class FormFieldMessage extends React.Component<FormFieldMessageProps, any
 export interface FormFieldMessagesProps {
     /**
      * object with shape: `{
-     * text: PropTypes.string,
+     * text: PropTypes.node,
      * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      * }`
      */