@instructure/ui-form-field 10.12.1-snapshot-1 → 10.12.1-snapshot-3

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.12.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-1) (2025-03-03)
+## [10.12.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-3) (2025-03-04)
 
 
 ### Bug Fixes

package/es/FormFieldLabel/__new-tests__/FormFieldLabel.test.js

@@ -0,0 +1,66 @@
+var _FormFieldLabel, _FormFieldLabel2, _FormFieldLabel3;
+/*
+ * 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 { render } from '@testing-library/react';
+import { vi } from 'vitest';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
+import { FormFieldLabel } from '../index';
+describe('<FormFieldLabel />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', () => {
+    const _render = render(_FormFieldLabel || (_FormFieldLabel = /*#__PURE__*/React.createElement(FormFieldLabel, null, "Foo"))),
+      container = _render.container;
+    const formFieldLabel = container.querySelector("span[class$='-formFieldLabel']");
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Foo');
+  });
+  it('should render as specified via the `as` prop', () => {
+    const _render2 = render(_FormFieldLabel2 || (_FormFieldLabel2 = /*#__PURE__*/React.createElement(FormFieldLabel, {
+        as: "li"
+      }, "Foo"))),
+      container = _render2.container;
+    const formFieldLabel = container.querySelector('li');
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Foo');
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = render(_FormFieldLabel3 || (_FormFieldLabel3 = /*#__PURE__*/React.createElement(FormFieldLabel, null, "Foo"))),
+      container = _render3.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/es/FormFieldLabel/index.js

@@ -0,0 +1,81 @@
+var _dec, _dec2, _class, _FormFieldLabel;
+/*
+ * 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.
+ */
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { omitProps, getElementType, deprecated } from '@instructure/ui-react-utils';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import { propTypes, allowedProps } 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
+---
+<FormFieldLabel>Hello</FormFieldLabel>
+```
+
+ @deprecated since version 10. This is an internal component that will be
+ removed in the future
+**/
+let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = deprecated('10', null, 'This component will be removed in a future version'), _dec(_class = _dec2(_class = (_FormFieldLabel = class FormFieldLabel extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const ElementType = getElementType(FormFieldLabel, this.props);
+    const _this$props3 = this.props,
+      styles = _this$props3.styles,
+      children = _this$props3.children;
+    return jsx(ElementType, Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
+      ref: this.handleRef
+    }), children);
+  }
+}, _FormFieldLabel.displayName = "FormFieldLabel", _FormFieldLabel.componentId = 'FormFieldLabel', _FormFieldLabel.propTypes = propTypes, _FormFieldLabel.allowedProps = allowedProps, _FormFieldLabel.defaultProps = {
+  as: 'span'
+}, _FormFieldLabel)) || _class) || _class);
+export default FormFieldLabel;
+export { FormFieldLabel };

package/es/FormFieldLabel/props.js

@@ -0,0 +1,31 @@
+/*
+ * 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 PropTypes from 'prop-types';
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  as: PropTypes.elementType
+};
+const allowedProps = ['as', 'children'];
+export { propTypes, allowedProps };

package/es/FormFieldLabel/styles.js

@@ -0,0 +1,62 @@
+/*
+ * 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 { hasVisibleChildren } from '@instructure/ui-a11y-utils';
+/**
+ * ---
+ * 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, props) => {
+  const children = props.children;
+  const hasContent = hasVisibleChildren(children);
+  const labelStyles = {
+    all: 'initial',
+    display: 'block',
+    ...(hasContent && {
+      color: componentTheme.color,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      margin: 0,
+      textAlign: 'inherit'
+    })
+  };
+  return {
+    formFieldLabel: {
+      label: 'formFieldLabel',
+      ...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
+    }
+  };
+};
+export default generateStyle;

package/es/FormFieldLabel/theme.js

@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+/**
+ * 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 => {
+  var _colors$contrasts;
+  const colors = theme.colors,
+    typography = theme.typography,
+    themeName = theme.key;
+  const themeSpecificStyle = {
+    canvas: {
+      color: theme['ic-brand-font-color-dark']
+    }
+  };
+  const componentVariables = {
+    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
+  };
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+export default generateComponentTheme;

package/es/index.js

@@ -23,6 +23,7 @@
  */
 
 export { FormField } from './FormField';
+export { FormFieldLabel } from './FormFieldLabel';
 export { FormFieldMessage } from './FormFieldMessage';
 export { FormFieldMessages } from './FormFieldMessages';
 export { FormFieldLayout } from './FormFieldLayout';

package/lib/FormFieldLabel/__new-tests__/FormFieldLabel.test.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _FormFieldLabel, _FormFieldLabel2, _FormFieldLabel3;
+/*
+ * 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.
+ */
+describe('<FormFieldLabel />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', () => {
+    const _render = (0, _react2.render)(_FormFieldLabel || (_FormFieldLabel = /*#__PURE__*/_react.default.createElement(_index.FormFieldLabel, null, "Foo"))),
+      container = _render.container;
+    const formFieldLabel = container.querySelector("span[class$='-formFieldLabel']");
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Foo');
+  });
+  it('should render as specified via the `as` prop', () => {
+    const _render2 = (0, _react2.render)(_FormFieldLabel2 || (_FormFieldLabel2 = /*#__PURE__*/_react.default.createElement(_index.FormFieldLabel, {
+        as: "li"
+      }, "Foo"))),
+      container = _render2.container;
+    const formFieldLabel = container.querySelector('li');
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Foo');
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = (0, _react2.render)(_FormFieldLabel3 || (_FormFieldLabel3 = /*#__PURE__*/_react.default.createElement(_index.FormFieldLabel, null, "Foo"))),
+      container = _render3.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/FormFieldLabel/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FormFieldLabel = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _dec, _dec2, _class, _FormFieldLabel;
+/*
+ * 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.
+ */
+/** @jsx jsx */
+/**
+---
+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
+---
+<FormFieldLabel>Hello</FormFieldLabel>
+```
+
+ @deprecated since version 10. This is an internal component that will be
+ removed in the future
+**/
+let FormFieldLabel = exports.FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _deprecated.deprecated)('10', null, 'This component will be removed in a future version'), _dec(_class = _dec2(_class = (_FormFieldLabel = class FormFieldLabel extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const ElementType = (0, _getElementType.getElementType)(FormFieldLabel, this.props);
+    const _this$props3 = this.props,
+      styles = _this$props3.styles,
+      children = _this$props3.children;
+    return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps), {
+      css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
+      ref: this.handleRef
+    }), children);
+  }
+}, _FormFieldLabel.displayName = "FormFieldLabel", _FormFieldLabel.componentId = 'FormFieldLabel', _FormFieldLabel.propTypes = _props.propTypes, _FormFieldLabel.allowedProps = _props.allowedProps, _FormFieldLabel.defaultProps = {
+  as: 'span'
+}, _FormFieldLabel)) || _class) || _class);
+var _default = exports.default = FormFieldLabel;

package/lib/FormFieldLabel/props.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+/*
+ * 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.
+ */
+
+const propTypes = exports.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  as: _propTypes.default.elementType
+};
+const allowedProps = exports.allowedProps = ['as', 'children'];

package/lib/FormFieldLabel/styles.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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, props) => {
+  const children = props.children;
+  const hasContent = (0, _hasVisibleChildren.hasVisibleChildren)(children);
+  const labelStyles = {
+    all: 'initial',
+    display: 'block',
+    ...(hasContent && {
+      color: componentTheme.color,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      margin: 0,
+      textAlign: 'inherit'
+    })
+  };
+  return {
+    formFieldLabel: {
+      label: 'formFieldLabel',
+      ...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
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/FormFieldLabel/theme.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * 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 => {
+  var _colors$contrasts;
+  const colors = theme.colors,
+    typography = theme.typography,
+    themeName = theme.key;
+  const themeSpecificStyle = {
+    canvas: {
+      color: theme['ic-brand-font-color-dark']
+    }
+  };
+  const componentVariables = {
+    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
+  };
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/lib/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "FormFieldGroup", {
     return _FormFieldGroup.FormFieldGroup;
   }
 });
+Object.defineProperty(exports, "FormFieldLabel", {
+  enumerable: true,
+  get: function () {
+    return _FormFieldLabel.FormFieldLabel;
+  }
+});
 Object.defineProperty(exports, "FormFieldLayout", {
   enumerable: true,
   get: function () {
@@ -40,6 +46,7 @@ Object.defineProperty(exports, "FormPropTypes", {
   }
 });
 var _FormField = require("./FormField");
+var _FormFieldLabel = require("./FormFieldLabel");
 var _FormFieldMessage = require("./FormFieldMessage");
 var _FormFieldMessages = require("./FormFieldMessages");
 var _FormFieldLayout = require("./FormFieldLayout");