@khanacademy/wonder-blocks-form 2.4.8 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-form
 
+## 3.1.0
+
+### Minor Changes
+
+-   d3f459bf: Allow CheckboxGroup and RadioGroup to accept falsy children
+
+## 3.0.0
+
+### Major Changes
+
+-   3bae2aba: Remove Radio from wonder-blocks-form's exports so that RadioGroup is used
+
+### Patch Changes
+
+-   e91fb6c0: Update label, description, and error props in form components to accept React.Node
+-   Updated dependencies [3bae2aba]
+    -   @khanacademy/wonder-blocks-icon@1.2.31
+
 ## 2.4.8
 
 ### Patch Changes

package/dist/es/index.js

@@ -397,7 +397,7 @@ class ChoiceInternal extends React.Component {
       mockOnFirstRender: true,
       scope: "choice"
     }, ids => {
-      const descriptionId = description && ids.get("description");
+      const descriptionId = description ? ids.get("description") : undefined;
       return React.createElement(View, {
         style: style,
         className: className
@@ -550,20 +550,21 @@ class CheckboxGroup extends React.Component {
       style,
       testId
     } = this.props;
+    const allChildren = React.Children.toArray(children).filter(Boolean);
     return React.createElement(StyledFieldset$1, {
       "data-test-id": testId,
       style: styles$2.fieldset
     }, React.createElement(View, {
       style: style
-    }, typeof label === "string" ? React.createElement(StyledLegend$1, {
+    }, label && React.createElement(StyledLegend$1, {
       style: styles$2.legend
-    }, React.createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? React.createElement(LabelSmall, {
+    }, React.createElement(LabelMedium, null, label)), description && React.createElement(LabelSmall, {
       style: styles$2.description
-    }, description) : description && description, errorMessage && React.createElement(LabelSmall, {
+    }, description), errorMessage && React.createElement(LabelSmall, {
       style: styles$2.error
     }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
       size: Spacing.small_12
-    }), React.Children.map(children, (child, index) => {
+    }), allChildren.map((child, index) => {
       const {
         style,
         value
@@ -602,6 +603,7 @@ class RadioGroup extends React.Component {
       style,
       testId
     } = this.props;
+    const allChildren = React.Children.toArray(children).filter(Boolean);
     return React.createElement(StyledFieldset, {
       "data-test-id": testId,
       style: styles$2.fieldset
@@ -615,7 +617,7 @@ class RadioGroup extends React.Component {
       style: styles$2.error
     }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
       size: Spacing.small_12
-    }), React.Children.map(children, (child, index) => {
+    }), allChildren.map((child, index) => {
       const {
         style,
         value
@@ -832,12 +834,12 @@ class FieldHeading extends React.Component {
       style: styles.required,
       "aria-hidden": true
     }, " ", "*");
-    return React.createElement(React.Fragment, null, typeof label === "string" ? React.createElement(LabelMedium, {
+    return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
       style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label, required && requiredIcon) : label, React.createElement(Strut, {
+    }, label, required && requiredIcon), React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -852,10 +854,10 @@ class FieldHeading extends React.Component {
       return null;
     }
 
-    return React.createElement(React.Fragment, null, typeof description === "string" ? React.createElement(LabelSmall, {
+    return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
       style: styles.description,
       testId: testId && `${testId}-description`
-    }, description) : description, React.createElement(Strut, {
+    }, description), React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -873,12 +875,12 @@ class FieldHeading extends React.Component {
 
     return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: Spacing.small_12
-    }), typeof error === "string" ? React.createElement(LabelSmall, {
+    }), React.createElement(LabelSmall, {
       style: styles.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
-    }, error) : error);
+    }, error));
   }
 
   render() {
@@ -1026,4 +1028,4 @@ const LabeledTextField = React.forwardRef((props, ref) => React.createElement(La
   forwardedRef: ref
 })));
 
-export { Checkbox, CheckboxGroup, Choice, LabeledTextField, Radio, RadioGroup, TextField };
+export { Checkbox, CheckboxGroup, Choice, LabeledTextField, RadioGroup, TextField };

package/dist/index.js

@@ -197,7 +197,7 @@ module.exports = require("@khanacademy/wonder-blocks-layout");
 /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
+/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
 
 
  // Keep synced with ChoiceComponentProps in ../util/types.js
@@ -240,41 +240,6 @@ Checkbox.defaultProps = {
 /* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Radio; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
-
-
- // Keep synced with ChoiceComponentProps in ../util/types.js
-
-/**
- * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
- * optionally take label and description props.
- *
- * This component should not really be used by itself because radio buttons are
- * often grouped together. See RadioGroup.
- */
-class Radio extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
-  render() {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-      variant: "radio"
-    }, this.props));
-  }
-
-}
-Radio.defaultProps = {
-  disabled: false,
-  error: false
-};
-
-/***/ }),
-/* 11 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
 "use strict";
 /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
 /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
@@ -514,7 +479,7 @@ const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"](
 /* harmony default export */ __webpack_exports__["a"] = (TextField);
 
 /***/ }),
-/* 12 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -529,7 +494,7 @@ const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"](
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(17);
+/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
 /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__);
@@ -537,8 +502,8 @@ const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"](
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(4);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _checkbox_core_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(18);
-/* harmony import */ var _radio_core_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(20);
+/* harmony import */ var _checkbox_core_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(17);
+/* harmony import */ var _radio_core_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(19);
 
 
 
@@ -633,7 +598,7 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
       mockOnFirstRender: true,
       scope: "choice"
     }, ids => {
-      const descriptionId = description && ids.get("description");
+      const descriptionId = description ? ids.get("description") : undefined;
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
         style: style,
         className: className
@@ -690,7 +655,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 });
 
 /***/ }),
-/* 13 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -698,7 +663,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
-/* harmony import */ var _radio_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
+/* harmony import */ var _radio_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
 
 
 
@@ -798,7 +763,7 @@ Choice.defaultProps = {
 };
 
 /***/ }),
-/* 14 */
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -883,20 +848,21 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style,
       testId
     } = this.props;
+    const allChildren = react__WEBPACK_IMPORTED_MODULE_0__["Children"].toArray(children).filter(Boolean);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledFieldset, {
       "data-test-id": testId,
       style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].fieldset
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
       style: style
-    }, typeof label === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLegend, {
+    }, label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLegend, {
       style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].legend
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelMedium"], null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelMedium"], null, label)), description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
       style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].description
-    }, description) : description && description, errorMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
+    }, description), errorMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
       style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].error
     }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.small_12
-    }), react__WEBPACK_IMPORTED_MODULE_0__["Children"].map(children, (child, index) => {
+    }), allChildren.map((child, index) => {
       const {
         style,
         value
@@ -918,7 +884,7 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 15 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -994,6 +960,7 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style,
       testId
     } = this.props;
+    const allChildren = react__WEBPACK_IMPORTED_MODULE_0__["Children"].toArray(children).filter(Boolean);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledFieldset, {
       "data-test-id": testId,
       style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].fieldset
@@ -1007,7 +974,7 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].error
     }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.small_12
-    }), react__WEBPACK_IMPORTED_MODULE_0__["Children"].map(children, (child, index) => {
+    }), allChildren.map((child, index) => {
       const {
         style,
         value
@@ -1029,7 +996,7 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 16 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1040,7 +1007,7 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _field_heading_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21);
-/* harmony import */ var _text_field_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
+/* harmony import */ var _text_field_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
 
 
 
@@ -1193,13 +1160,13 @@ const LabeledTextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwar
 /* harmony default export */ __webpack_exports__["a"] = (LabeledTextField);
 
 /***/ }),
-/* 17 */
+/* 16 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-clickable");
 
 /***/ }),
-/* 18 */
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1214,7 +1181,7 @@ module.exports = require("@khanacademy/wonder-blocks-clickable");
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(18);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__);
 
 
@@ -1388,13 +1355,13 @@ const _generateStyles = (checked, error) => {
 };
 
 /***/ }),
-/* 19 */
+/* 18 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon");
 
 /***/ }),
-/* 20 */
+/* 19 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1580,6 +1547,41 @@ const _generateStyles = (checked, error) => {
   return styles[styleKey];
 };
 
+/***/ }),
+/* 20 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Radio; });
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
+
+
+ // Keep synced with ChoiceComponentProps in ../util/types.js
+
+/**
+ * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
+ * optionally take label and description props.
+ *
+ * This component should not really be used by itself because radio buttons are
+ * often grouped together. See RadioGroup.
+ */
+class Radio extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
+      variant: "radio"
+    }, this.props));
+  }
+
+}
+Radio.defaultProps = {
+  disabled: false,
+  error: false
+};
+
 /***/ }),
 /* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1625,12 +1627,12 @@ class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style: styles.required,
       "aria-hidden": true
     }, " ", "*");
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, typeof label === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], {
       style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label, required && requiredIcon) : label, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
+    }, label, required && requiredIcon), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4
     }));
   }
@@ -1645,10 +1647,10 @@ class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       return null;
     }
 
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, typeof description === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
       style: styles.description,
       testId: testId && `${testId}-description`
-    }, description) : description, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
+    }, description), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4
     }));
   }
@@ -1666,12 +1668,12 @@ class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.small_12
-    }), typeof error === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
       style: styles.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
-    }, error) : error);
+    }, error));
   }
 
   render() {
@@ -1711,24 +1713,20 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
-/* harmony import */ var _components_radio_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Radio", function() { return _components_radio_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
-
-/* harmony import */ var _components_choice_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Choice", function() { return _components_choice_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
-
-/* harmony import */ var _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
+/* harmony import */ var _components_choice_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Choice", function() { return _components_choice_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
 
-/* harmony import */ var _components_radio_group_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(15);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _components_radio_group_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
+/* harmony import */ var _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
 
-/* harmony import */ var _components_text_field_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextField", function() { return _components_text_field_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
+/* harmony import */ var _components_radio_group_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _components_radio_group_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
 
-/* harmony import */ var _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(16);
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LabeledTextField", function() { return _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_6__["a"]; });
+/* harmony import */ var _components_text_field_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextField", function() { return _components_text_field_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
 
+/* harmony import */ var _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(15);
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LabeledTextField", function() { return _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
 
 
 

package/docs.md

@@ -1 +1,5 @@
-Form components, including TextBox, Choice, and FieldSet.
+Documentation for `@khanacademy/wonder-blocks-form` is now in Storybook.
+
+Visit the [Storybook
+Form](https://khan.github.io/wonder-blocks/?path=/docs/form-overview--page) docs
+on GitHub Pages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.4.8",
+  "version": "3.1.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -19,7 +19,7 @@
     "@khanacademy/wonder-blocks-clickable": "^2.3.1",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.4.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.30",
+    "@khanacademy/wonder-blocks-icon": "^1.2.31",
     "@khanacademy/wonder-blocks-layout": "^1.4.11",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-typography": "^1.1.33"

package/src/__docs__/_overview_.stories.mdx

@@ -0,0 +1,15 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Form / Overview"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# Form
+
+`wonder-blocks-form` provides building blocks form Form components, including
+TextField, Choice, Checkbox, RadioButton, etc.

package/src/components/__docs__/checkbox-group.stories.js

@@ -232,6 +232,41 @@ MultipleChoiceStyling.parameters = {
     },
 };
 
+export const FiltersOutFalsyChildren: StoryComponentType = () => {
+    return (
+        <CheckboxGroup
+            groupName="pokemon"
+            selectedValues={["pepperoni", "sausage"]}
+            onChange={() => {}}
+            label="Pokemon"
+            description="Your first Pokemon."
+        >
+            <Choice label="Pepperoni" value="pepperoni" />
+            <Choice
+                label="Sausage"
+                value="sausage"
+                description="Imported from Italy"
+            />
+            <Choice label="Extra cheese" value="cheese" />
+            <Choice label="Green pepper" value="pepper" />
+            {false && <Choice label="Mushroom" value="mushroom" />}
+        </CheckboxGroup>
+    );
+};
+
+FiltersOutFalsyChildren.parameters = {
+    docs: {
+        storyDescription: `This example shows that children can be falsy values and
+        that those falsy values are filtered out when rendering children.  In this
+        case, one of the children is \`{false && <Choice .../>}\` which results in
+        that choice being filtered out.`,
+    },
+    chromatic: {
+        // The unit tests already verify that false-y children aren't rendered.
+        disableSnapshot: true,
+    },
+};
+
 const styles = StyleSheet.create({
     // Row styling
     wrapper: {
@@ -257,7 +292,6 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     description: {
-        marginTop: 5,
         color: Color.offBlack64,
     },
     last: {

package/src/components/__docs__/labeled-text-field.argtypes.js

@@ -34,7 +34,7 @@ export default {
         type: {required: true},
         table: {
             type: {
-                summary: "string | React.Element<Typography>",
+                summary: "React.Node",
             },
         },
         control: {
@@ -45,7 +45,7 @@ export default {
         description: "Provide a description for the TextField.",
         table: {
             type: {
-                summary: "string | React.Element<Typography>",
+                summary: "React.Node",
             },
         },
         control: {

package/src/components/__docs__/labeled-text-field.stories.js

@@ -9,6 +9,7 @@ import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Button from "@khanacademy/wonder-blocks-button";
+import Link from "@khanacademy/wonder-blocks-link";
 
 import type {StoryComponentType} from "@storybook/react";
 
@@ -528,6 +529,30 @@ CustomStyle.parameters = {
     },
 };
 
+export const WithMarkup: StoryComponentType = (args) => {
+    return (
+        <LabeledTextField
+            {...args}
+            label="Name"
+            description={
+                <span>
+                    Description with <strong>strong</strong> text and a{" "}
+                    <Link href="/path/to/resource">link</Link>
+                </span>
+            }
+        />
+    );
+};
+
+WithMarkup.parameters = {
+    docs: {
+        storyDescription: `\`LabeledTextField\`'s \`label\` and \`description\` props
+        can accept \`React.Node\`s.  This is helpful when you need to decorate or use
+        specific elements in your form field (e.g. including Popovers, Tooltips or
+        emphasized text)`,
+    },
+};
+
 export const Ref: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
     const inputRef = React.createRef();