@khanacademy/wonder-blocks-form 2.4.8 → 3.1.0

package/src/components/checkbox.js

@@ -33,12 +33,12 @@ type ChoiceComponentProps = {|
     /**
      * Optional label for the field.
      */
-    label?: string,
+    label?: React.Node,
 
     /**
      * Optional description for the field.
      */
-    description?: string,
+    description?: React.Node,
 
     /**
      * Unique identifier attached to the HTML input element. If used, need to

package/src/components/choice-internal.js

@@ -52,10 +52,10 @@ type Props = {|
     /**
      * Label for the field.
      */
-    label?: string,
+    label?: React.Node,
 
     /** Optional description for the field. */
-    description?: string,
+    description?: React.Node,
 
     /** Auto-populated by parent's groupName prop if in a group. */
     groupName?: string,
@@ -142,7 +142,9 @@ type DefaultProps = {|
         return (
             <UniqueIDProvider mockOnFirstRender={true} scope="choice">
                 {(ids) => {
-                    const descriptionId = description && ids.get("description");
+                    const descriptionId = description
+                        ? ids.get("description")
+                        : undefined;
 
                     return (
                         <View style={style} className={className}>

package/src/components/choice.js

@@ -10,10 +10,10 @@ type Props = {|
     ...AriaProps,
 
     /** User-defined. Label for the field. */
-    label: string,
+    label: React.Node,
 
     /** User-defined. Optional description for the field. */
-    description?: string,
+    description?: React.Node,
 
     /** User-defined. Should be distinct for each item in the group. */
     value: string,

package/src/components/field-heading.js

@@ -6,11 +6,7 @@ import {View, addStyle, type StyleType} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {
-    type Typography,
-    LabelMedium,
-    LabelSmall,
-} from "@khanacademy/wonder-blocks-typography";
+import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 type Props = {|
     /**
@@ -21,12 +17,12 @@ type Props = {|
     /**
      * The title for the label element.
      */
-    label: string | React.Element<Typography>,
+    label: React.Node,
 
     /**
      * The text for the description element.
      */
-    description?: string | React.Element<Typography>,
+    description?: React.Node,
 
     /**
      * Whether this field is required to continue.
@@ -36,7 +32,7 @@ type Props = {|
     /**
      * The message for the error element.
      */
-    error?: string | React.Element<Typography>,
+    error?: React.Node,
 
     /**
      * Custom styles for the field heading container.
@@ -76,19 +72,15 @@ export default class FieldHeading extends React.Component<Props> {
 
         return (
             <React.Fragment>
-                {typeof label === "string" ? (
-                    <LabelMedium
-                        style={styles.label}
-                        tag="label"
-                        htmlFor={id && `${id}-field`}
-                        testId={testId && `${testId}-label`}
-                    >
-                        {label}
-                        {required && requiredIcon}
-                    </LabelMedium>
-                ) : (
-                    label
-                )}
+                <LabelMedium
+                    style={styles.label}
+                    tag="label"
+                    htmlFor={id && `${id}-field`}
+                    testId={testId && `${testId}-label`}
+                >
+                    {label}
+                    {required && requiredIcon}
+                </LabelMedium>
                 <Strut size={Spacing.xxxSmall_4} />
             </React.Fragment>
         );
@@ -103,16 +95,12 @@ export default class FieldHeading extends React.Component<Props> {
 
         return (
             <React.Fragment>
-                {typeof description === "string" ? (
-                    <LabelSmall
-                        style={styles.description}
-                        testId={testId && `${testId}-description`}
-                    >
-                        {description}
-                    </LabelSmall>
-                ) : (
-                    description
-                )}
+                <LabelSmall
+                    style={styles.description}
+                    testId={testId && `${testId}-description`}
+                >
+                    {description}
+                </LabelSmall>
                 <Strut size={Spacing.xxxSmall_4} />
             </React.Fragment>
         );
@@ -128,18 +116,14 @@ export default class FieldHeading extends React.Component<Props> {
         return (
             <React.Fragment>
                 <Strut size={Spacing.small_12} />
-                {typeof error === "string" ? (
-                    <LabelSmall
-                        style={styles.error}
-                        role="alert"
-                        id={id && `${id}-error`}
-                        testId={testId && `${testId}-error`}
-                    >
-                        {error}
-                    </LabelSmall>
-                ) : (
-                    error
-                )}
+                <LabelSmall
+                    style={styles.error}
+                    role="alert"
+                    id={id && `${id}-error`}
+                    testId={testId && `${testId}-error`}
+                >
+                    {error}
+                </LabelSmall>
             </React.Fragment>
         );
     }

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

@@ -2,7 +2,6 @@
 import * as React from "react";
 
 import {IDProvider, type StyleType} from "@khanacademy/wonder-blocks-core";
-import {type Typography} from "@khanacademy/wonder-blocks-typography";
 
 import FieldHeading from "./field-heading.js";
 import TextField, {type TextFieldType} from "./text-field.js";
@@ -24,12 +23,12 @@ type Props = {|
     /**
      * Provide a label for the TextField.
      */
-    label: string | React.Element<Typography>,
+    label: React.Node,
 
     /**
      * Provide a description for the TextField.
      */
-    description?: string | React.Element<Typography>,
+    description?: React.Node,
 
     /**
      * The input value.

package/src/components/radio-group.js

@@ -16,7 +16,7 @@ type RadioGroupProps = {|
     /**
      * Children should be Choice components.
      */
-    children: Array<React.Element<Choice>>,
+    children: Array<?(React.Element<Choice> | false)>,
 
     /**
      * Group name for this checkbox or radio group. Should be unique for all
@@ -28,12 +28,12 @@ type RadioGroupProps = {|
      * Optional label for the group. This label is optional to allow for
      * greater flexibility in implementing checkbox and radio groups.
      */
-    label?: string,
+    label?: React.Node,
 
     /**
      * Optional description for the group.
      */
-    description?: string,
+    description?: React.Node,
 
     /**
      * Optional error message. If supplied, the group will be displayed in an
@@ -118,6 +118,8 @@ export default class RadioGroup extends React.Component<RadioGroupProps> {
             testId,
         } = this.props;
 
+        const allChildren = React.Children.toArray(children).filter(Boolean);
+
         return (
             <StyledFieldset data-test-id={testId} style={styles.fieldset}>
                 {/* We have a View here because fieldset cannot be used with flexbox*/}
@@ -141,7 +143,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps> {
                         <Strut size={Spacing.small_12} />
                     )}
 
-                    {React.Children.map(children, (child, index) => {
+                    {allChildren.map((child, index) => {
                         const {style, value} = child.props;
                         const checked = selectedValue === value;
                         return (

package/src/components/radio.js

@@ -33,12 +33,12 @@ type ChoiceComponentProps = {|
     /**
      * Optional label for the field.
      */
-    label?: string,
+    label?: React.Node,
 
     /**
      * Optional description for the field.
      */
-    description?: string,
+    description?: React.Node,
 
     /**
      * Unique identifier attached to the HTML input element. If used, need to

package/src/index.js

@@ -1,6 +1,5 @@
 // @flow
 import Checkbox from "./components/checkbox.js";
-import Radio from "./components/radio.js";
 import Choice from "./components/choice.js";
 import CheckboxGroup from "./components/checkbox-group.js";
 import RadioGroup from "./components/radio-group.js";
@@ -9,7 +8,6 @@ import LabeledTextField from "./components/labeled-text-field.js";
 
 export {
     Checkbox,
-    Radio,
     Choice,
     CheckboxGroup,
     RadioGroup,