@khanacademy/wonder-blocks-form 2.4.8 → 3.0.0

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

@@ -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

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,