terra-form-field - npm Package Compare versions

Comparing version 4.10.0 to 4.11.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 4.11.0 - (November 10, 2020)
+
+* Changed
+  * Updated `terra-dev-site` examples to use react hooks.
+
 ## 4.10.0 - (October 27, 2020)
@@ -11,2 +16,3 @@
 
+
 ## 4.9.0 - (September 29, 2020)
@@ -13,0 +19,0 @@

lib/terra-dev-site/doc/example/FieldExamples.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +10,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -19,102 +21,72 @@ var _terraFormField = _interopRequireDefault(require("terra-form-field"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 var cx = _bind.default.bind(_FieldExamplesModule.default);
 
-var FieldExamples = /*#__PURE__*/function (_React$Component) {
-  _inherits(FieldExamples, _React$Component);
+var FieldExamples = function FieldExamples() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInvalid = _useState2[0],
+      setIsInvalid = _useState2[1];
 
-  var _super = _createSuper(FieldExamples);
+  var toggleIsInvalid = function toggleIsInvalid() {
+    setIsInvalid(!isInvalid);
+  };
 
-  function FieldExamples(props) {
-    var _this;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraFormField.default, {
+    label: "Field Label",
+    help: "This is a standard, non-required field.",
+    error: "Error Message",
+    isInvalid: isInvalid
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_terraFormField.default, {
+    label: "Field Label",
+    help: "This is an optional field.",
+    error: "Error Message",
+    isInvalid: isInvalid,
+    isInline: true,
+    showOptional: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_terraFormField.default, {
+    label: "Field Label",
+    help: "This is a required field.",
+    error: "Error Message",
+    isInvalid: isInvalid,
+    isInline: true,
+    required: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_terraFormField.default, {
+    label: "Field Label",
+    help: "This is a required field, but the required indicator is hidden until the field is in error.",
+    error: "Now the required indicator is showing because the field is in error.",
+    isInvalid: isInvalid,
+    isInline: true,
+    required: true,
+    hideRequired: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement("p", null, "If a field is invalid, an error icon will be displayed.", /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: toggleIsInvalid
+  }, "Toggle Invalid State")));
+};
 
-    _classCallCheck(this, FieldExamples);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      isInvalid: false
-    };
-    _this.toggleIsInvalid = _this.toggleIsInvalid.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(FieldExamples, [{
-    key: "toggleIsInvalid",
-    value: function toggleIsInvalid() {
-      this.setState(function (prevState) {
-        return {
-          isInvalid: !prevState.isInvalid
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_terraFormField.default, {
-        label: "Field Label",
-        help: "This is a standard, non-required field.",
-        error: "Error Message",
-        isInvalid: this.state.isInvalid
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_terraFormField.default, {
-        label: "Field Label",
-        help: "This is an optional field.",
-        error: "Error Message",
-        isInvalid: this.state.isInvalid,
-        isInline: true,
-        showOptional: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_terraFormField.default, {
-        label: "Field Label",
-        help: "This is a required field.",
-        error: "Error Message",
-        isInvalid: this.state.isInvalid,
-        isInline: true,
-        required: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_terraFormField.default, {
-        label: "Field Label",
-        help: "This is a required field, but the required indicator is hidden until the field is in error.",
-        error: "Now the required indicator is showing because the field is in error.",
-        isInvalid: this.state.isInvalid,
-        isInline: true,
-        required: true,
-        hideRequired: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement("p", null, "If a field is invalid, an error icon will be displayed.", /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        onClick: this.toggleIsInvalid
-      }, "Toggle Invalid State")));
-    }
-  }]);
-
-  return FieldExamples;
-}(_react.default.Component);
-
 var _default = FieldExamples;
 exports.default = _default;

lib/terra-dev-site/test/form-field/FieldInteractiveInvalid.test.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -8,3 +10,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -19,161 +21,131 @@ var _bind = _interopRequireDefault(require("classnames/bind"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 var cx = _bind.default.bind(_FormFieldTestCommonModule.default);
 
-var FieldExamples = /*#__PURE__*/function (_React$Component) {
-  _inherits(FieldExamples, _React$Component);
+var FieldExamples = function FieldExamples() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInvalid = _useState2[0],
+      setIsInvalid = _useState2[1];
 
-  var _super = _createSuper(FieldExamples);
+  var handleIsInvalidChange = function handleIsInvalidChange() {
+    setIsInvalid(!isInvalid);
+  };
 
-  function FieldExamples(props) {
-    var _this;
+  var field = /*#__PURE__*/_react.default.createElement(_Field.default, {
+    id: "default",
+    className: cx('form-field'),
+    label: "Field Label",
+    help: "Help Message",
+    error: "Error Message",
+    isInvalid: isInvalid
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder"));
 
-    _classCallCheck(this, FieldExamples);
+  var optional = /*#__PURE__*/_react.default.createElement(_Field.default, {
+    id: "optional",
+    className: cx('form-field'),
+    label: "Field Label",
+    help: "Help Message",
+    error: "Error Message",
+    isInvalid: isInvalid,
+    showOptional: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder"));
 
-    _this = _super.call(this, props);
-    _this.state = {
-      isInvalid: false
-    };
-    _this.handleIsInvalidChange = _this.handleIsInvalidChange.bind(_assertThisInitialized(_this));
-    return _this;
-  }
+  var required = /*#__PURE__*/_react.default.createElement(_Field.default, {
+    id: "required",
+    className: cx('form-field'),
+    label: "Field Label",
+    help: "Help Message",
+    error: "Error Message",
+    isInvalid: isInvalid,
+    required: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder"));
 
-  _createClass(FieldExamples, [{
-    key: "handleIsInvalidChange",
-    value: function handleIsInvalidChange() {
-      this.setState(function (prevState) {
-        return {
-          isInvalid: !prevState.isInvalid
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var field = /*#__PURE__*/_react.default.createElement(_Field.default, {
-        id: "default",
-        className: cx('form-field'),
-        label: "Field Label",
-        help: "Help Message",
-        error: "Error Message",
-        isInvalid: this.state.isInvalid
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder"));
+  var requiredHidden = /*#__PURE__*/_react.default.createElement(_Field.default, {
+    id: "required-hidden",
+    className: cx('form-field'),
+    label: "Field Label",
+    help: "Help Message",
+    error: "Error Message",
+    isInvalid: isInvalid,
+    required: true,
+    hideRequired: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder"));
 
-      var optional = /*#__PURE__*/_react.default.createElement(_Field.default, {
-        id: "optional",
-        className: cx('form-field'),
-        label: "Field Label",
-        help: "Help Message",
-        error: "Error Message",
-        isInvalid: this.state.isInvalid,
-        showOptional: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder"));
+  var hiddenLabel = /*#__PURE__*/_react.default.createElement(_Field.default, {
+    id: "label-hidden",
+    className: cx('form-field'),
+    label: "Field Label",
+    help: "Help Message",
+    error: "Error Message",
+    isInvalid: isInvalid,
+    isLabelHidden: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder"));
 
-      var required = /*#__PURE__*/_react.default.createElement(_Field.default, {
-        id: "required",
-        className: cx('form-field'),
-        label: "Field Label",
-        help: "Help Message",
-        error: "Error Message",
-        isInvalid: this.state.isInvalid,
-        required: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder"));
+  var inline = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Field.default, {
+    id: "inline-1",
+    className: cx('form-field'),
+    label: "Field Label - Spacing POC",
+    error: "Error Message",
+    isInline: true,
+    isInvalid: isInvalid,
+    required: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_Field.default, {
+    id: "inline-2",
+    className: cx('form-field'),
+    label: "Field Label - Spacing POC",
+    error: "Error Message",
+    isInline: true,
+    isInvalid: isInvalid,
+    required: true,
+    hideRequired: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_Field.default, {
+    id: "inline-3",
+    className: cx('form-field'),
+    label: "Field Label - Spacing POC",
+    error: "Error Message",
+    isInline: true,
+    isInvalid: isInvalid,
+    showOptional: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cx('field-content')
+  }, "Control Placeholder")));
 
-      var requiredHidden = /*#__PURE__*/_react.default.createElement(_Field.default, {
-        id: "required-hidden",
-        className: cx('form-field'),
-        label: "Field Label",
-        help: "Help Message",
-        error: "Error Message",
-        isInvalid: this.state.isInvalid,
-        required: true,
-        hideRequired: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder"));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    id: "toggle-is-invalid",
+    onClick: handleIsInvalidChange
+  }, "Toggle In Error "), /*#__PURE__*/_react.default.createElement("h3", null, "Field"), field, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Optional"), optional, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Required"), required, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Required but Indicator Hidden"), requiredHidden, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Hidden Label"), hiddenLabel, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Inline"), inline);
+};
 
-      var hiddenLabel = /*#__PURE__*/_react.default.createElement(_Field.default, {
-        id: "label-hidden",
-        className: cx('form-field'),
-        label: "Field Label",
-        help: "Help Message",
-        error: "Error Message",
-        isInvalid: this.state.isInvalid,
-        isLabelHidden: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder"));
-
-      var inline = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Field.default, {
-        id: "inline-1",
-        className: cx('form-field'),
-        label: "Field Label - Spacing POC",
-        error: "Error Message",
-        isInline: true,
-        isInvalid: this.state.isInvalid,
-        required: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_Field.default, {
-        id: "inline-2",
-        className: cx('form-field'),
-        label: "Field Label - Spacing POC",
-        error: "Error Message",
-        isInline: true,
-        isInvalid: this.state.isInvalid,
-        required: true,
-        hideRequired: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder")), /*#__PURE__*/_react.default.createElement(_Field.default, {
-        id: "inline-3",
-        className: cx('form-field'),
-        label: "Field Label - Spacing POC",
-        error: "Error Message",
-        isInline: true,
-        isInvalid: this.state.isInvalid,
-        showOptional: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: cx('field-content')
-      }, "Control Placeholder")));
-
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
-        id: "toggle-is-invalid",
-        onClick: this.handleIsInvalidChange
-      }, "Toggle In Error "), /*#__PURE__*/_react.default.createElement("h3", null, "Field"), field, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Optional"), optional, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Required"), required, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Required but Indicator Hidden"), requiredHidden, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Hidden Label"), hiddenLabel, /*#__PURE__*/_react.default.createElement("h3", null, "Field - Inline"), inline);
-    }
-  }]);
-
-  return FieldExamples;
-}(_react.default.Component);
-
 var _default = FieldExamples;
 exports.default = _default;

package.json

 {
   "name": "terra-form-field",
   "main": "lib/Field.js",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "The Form Field component handles the layout of the label, help text and error text associated with a form element.",
@@ -48,3 +48,3 @@ "repository": {
   },
-  "gitHead": "6e29f8f1dad526259a02fea6a926fb6545998098"
+  "gitHead": "1b981da7df893b44257a6fbffb2cbaccc6714b97"
 }

src/terra-dev-site/doc/example/FieldExamples.jsx

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Field from 'terra-form-field';
@@ -8,66 +8,61 @@ import classNames from 'classnames/bind';
 
-class FieldExamples extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { isInvalid: false };
-    this.toggleIsInvalid = this.toggleIsInvalid.bind(this);
-  }
+const FieldExamples = () => {
+  const [isInvalid, setIsInvalid] = useState(false);
 
-  toggleIsInvalid() {
-    this.setState(prevState => ({ isInvalid: !prevState.isInvalid }));
-  }
+  const toggleIsInvalid = () => {
+    setIsInvalid(!isInvalid);
+  };
 
-  render() {
-    return (
-      <div>
-        <Field
-          label="Field Label"
-          help="This is a standard, non-required field."
-          error="Error Message"
-          isInvalid={this.state.isInvalid}
-        >
-          <div className={cx('field-content')}>Control Placeholder</div>
-        </Field>
-        <Field
-          label="Field Label"
-          help="This is an optional field."
-          error="Error Message"
-          isInvalid={this.state.isInvalid}
-          isInline
-          showOptional
-        >
-          <div className={cx('field-content')}>Control Placeholder</div>
-        </Field>
+  return (
+    <div>
+      <Field
+        label="Field Label"
+        help="This is a standard, non-required field."
+        error="Error Message"
+        isInvalid={isInvalid}
+      >
+        <div className={cx('field-content')}>Control Placeholder</div>
+      </Field>
+      <Field
+        label="Field Label"
+        help="This is an optional field."
+        error="Error Message"
+        isInvalid={isInvalid}
+        isInline
+        showOptional
+      >
+        <div className={cx('field-content')}>Control Placeholder</div>
+      </Field>
 
-        <Field
-          label="Field Label"
-          help="This is a required field."
-          error="Error Message"
-          isInvalid={this.state.isInvalid}
-          isInline
-          required
-        >
-          <div className={cx('field-content')}>Control Placeholder</div>
-        </Field>
+      <Field
+        label="Field Label"
+        help="This is a required field."
+        error="Error Message"
+        isInvalid={isInvalid}
+        isInline
+        required
+      >
+        <div className={cx('field-content')}>Control Placeholder</div>
+      </Field>
 
-        <Field
-          label="Field Label"
-          help="This is a required field, but the required indicator is hidden until the field is in error."
-          error="Now the required indicator is showing because the field is in error."
-          isInvalid={this.state.isInvalid}
-          isInline
-          required
-          hideRequired
-        >
-          <div className={cx('field-content')}>Control Placeholder</div>
-        </Field>
-        <hr />
-        <p>
-          If a field is invalid, an error icon will be displayed.
-          <button type="button" onClick={this.toggleIsInvalid}>Toggle Invalid State</button>
-        </p>
-      </div>
-    );
-  }
-}
+      <Field
+        label="Field Label"
+        help="This is a required field, but the required indicator is hidden until the field is in error."
+        error="Now the required indicator is showing because the field is in error."
+        isInvalid={isInvalid}
+        isInline
+        required
+        hideRequired
+      >
+        <div className={cx('field-content')}>Control Placeholder</div>
+      </Field>
+      <hr />
+      <p>
+        If a field is invalid, an error icon will be displayed.
+        <button type="button" onClick={toggleIsInvalid}>Toggle Invalid State</button>
+      </p>
+    </div>
+  );
+};
+
 export default FieldExamples;

src/terra-dev-site/test/form-field/FieldInteractiveInvalid.test.jsx

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames/bind';
@@ -8,49 +8,88 @@ import Field from '../../../Field';
 
-class FieldExamples extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { isInvalid: false };
-    this.handleIsInvalidChange = this.handleIsInvalidChange.bind(this);
-  }
+const FieldExamples = () => {
+  const [isInvalid, setIsInvalid] = useState(false);
 
-  handleIsInvalidChange() {
-    this.setState(prevState => ({ isInvalid: !prevState.isInvalid }));
-  }
+  const handleIsInvalidChange = () => {
+    setIsInvalid(!isInvalid);
+  };
 
-  render() {
-    const field = (
-      <Field
-        id="default"
-        className={cx('form-field')}
-        label="Field Label"
-        help="Help Message"
-        error="Error Message"
-        isInvalid={this.state.isInvalid}
-      >
-        <div className={cx('field-content')}>Control Placeholder</div>
-      </Field>
-    );
+  const field = (
+    <Field
+      id="default"
+      className={cx('form-field')}
+      label="Field Label"
+      help="Help Message"
+      error="Error Message"
+      isInvalid={isInvalid}
+    >
+      <div className={cx('field-content')}>Control Placeholder</div>
+    </Field>
+  );
 
-    const optional = (
-      <Field
-        id="optional"
-        className={cx('form-field')}
-        label="Field Label"
-        help="Help Message"
-        error="Error Message"
-        isInvalid={this.state.isInvalid}
-        showOptional
-      >
-        <div className={cx('field-content')}>Control Placeholder</div>
-      </Field>
-    );
+  const optional = (
+    <Field
+      id="optional"
+      className={cx('form-field')}
+      label="Field Label"
+      help="Help Message"
+      error="Error Message"
+      isInvalid={isInvalid}
+      showOptional
+    >
+      <div className={cx('field-content')}>Control Placeholder</div>
+    </Field>
+  );
 
-    const required = (
+  const required = (
+    <Field
+      id="required"
+      className={cx('form-field')}
+      label="Field Label"
+      help="Help Message"
+      error="Error Message"
+      isInvalid={isInvalid}
+      required
+    >
+      <div className={cx('field-content')}>Control Placeholder</div>
+    </Field>
+  );
+
+  const requiredHidden = (
+    <Field
+      id="required-hidden"
+      className={cx('form-field')}
+      label="Field Label"
+      help="Help Message"
+      error="Error Message"
+      isInvalid={isInvalid}
+      required
+      hideRequired
+    >
+      <div className={cx('field-content')}>Control Placeholder</div>
+    </Field>
+  );
+
+  const hiddenLabel = (
+    <Field
+      id="label-hidden"
+      className={cx('form-field')}
+      label="Field Label"
+      help="Help Message"
+      error="Error Message"
+      isInvalid={isInvalid}
+      isLabelHidden
+    >
+      <div className={cx('field-content')}>Control Placeholder</div>
+    </Field>
+  );
+
+  const inline = (
+    <div>
       <Field
-        id="required"
+        id="inline-1"
         className={cx('form-field')}
-        label="Field Label"
-        help="Help Message"
+        label="Field Label - Spacing POC"
         error="Error Message"
-        isInvalid={this.state.isInvalid}
+        isInline
+        isInvalid={isInvalid}
         required
@@ -60,12 +99,10 @@ >
       </Field>
-    );
 
-    const requiredHidden = (
       <Field
-        id="required-hidden"
+        id="inline-2"
         className={cx('form-field')}
-        label="Field Label"
-        help="Help Message"
+        label="Field Label - Spacing POC"
         error="Error Message"
-        isInvalid={this.state.isInvalid}
+        isInline
+        isInvalid={isInvalid}
         required
@@ -76,79 +113,36 @@ hideRequired
       </Field>
-    );
 
-    const hiddenLabel = (
       <Field
-        id="label-hidden"
+        id="inline-3"
         className={cx('form-field')}
-        label="Field Label"
-        help="Help Message"
+        label="Field Label - Spacing POC"
         error="Error Message"
-        isInvalid={this.state.isInvalid}
-        isLabelHidden
+        isInline
+        isInvalid={isInvalid}
+        showOptional
       >
         <div className={cx('field-content')}>Control Placeholder</div>
       </Field>
-    );
+    </div>
+  );
 
-    const inline = (
-      <div>
-        <Field
-          id="inline-1"
-          className={cx('form-field')}
-          label="Field Label - Spacing POC"
-          error="Error Message"
-          isInline
-          isInvalid={this.state.isInvalid}
-          required
-        >
-          <div className={cx('field-content')}>Control Placeholder</div>
-        </Field>
+  return (
+    <div>
+      <button type="button" id="toggle-is-invalid" onClick={handleIsInvalidChange}>Toggle In Error </button>
+      <h3>Field</h3>
+      {field}
+      <h3>Field - Optional</h3>
+      {optional}
+      <h3>Field - Required</h3>
+      {required}
+      <h3>Field - Required but Indicator Hidden</h3>
+      {requiredHidden}
+      <h3>Field - Hidden Label</h3>
+      {hiddenLabel}
+      <h3>Field - Inline</h3>
+      {inline}
+    </div>
+  );
+};
 
-        <Field
-          id="inline-2"
-          className={cx('form-field')}
-          label="Field Label - Spacing POC"
-          error="Error Message"
-          isInline
-          isInvalid={this.state.isInvalid}
-          required
-          hideRequired
-        >
-          <div className={cx('field-content')}>Control Placeholder</div>
-        </Field>
-
-        <Field
-          id="inline-3"
-          className={cx('form-field')}
-          label="Field Label - Spacing POC"
-          error="Error Message"
-          isInline
-          isInvalid={this.state.isInvalid}
-          showOptional
-        >
-          <div className={cx('field-content')}>Control Placeholder</div>
-        </Field>
-      </div>
-    );
-
-    return (
-      <div>
-        <button type="button" id="toggle-is-invalid" onClick={this.handleIsInvalidChange}>Toggle In Error </button>
-        <h3>Field</h3>
-        {field}
-        <h3>Field - Optional</h3>
-        {optional}
-        <h3>Field - Required</h3>
-        {required}
-        <h3>Field - Required but Indicator Hidden</h3>
-        {requiredHidden}
-        <h3>Field - Hidden Label</h3>
-        {hiddenLabel}
-        <h3>Field - Inline</h3>
-        {inline}
-      </div>
-    );
-  }
-}
-
 export default FieldExamples;

No alert changes

Worsened metrics

Total package byte prevSize

111750

decreased by-2.17%

Lines of code

1894

decreased by-2.87%

No dependency changes