@khanacademy/wonder-blocks-form 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-form
 
+## 3.1.0
+
+### Minor Changes
+
+-   d3f459bf: Allow CheckboxGroup and RadioGroup to accept falsy children
+
 ## 3.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -550,6 +550,7 @@ 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
@@ -563,7 +564,7 @@ class CheckboxGroup 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
@@ -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

package/dist/index.js

@@ -848,6 +848,7 @@ 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
@@ -861,7 +862,7 @@ class CheckboxGroup 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
@@ -959,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
@@ -972,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",

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: {

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

@@ -166,6 +166,41 @@ MultipleChoiceStyling.parameters = {
     },
 };
 
+export const FiltersOutFalsyChildren: StoryComponentType = () => {
+    return (
+        <RadioGroup
+            groupName="pokemon"
+            selectedValue="bulbasaur"
+            onChange={() => {}}
+            label="Pokemon"
+            description="Your first Pokemon."
+        >
+            <Choice label="Bulbasaur" value="bulbasaur" />
+            <Choice
+                label="Charmander"
+                value="charmander"
+                description="Oops, we ran out of Charmanders"
+                disabled
+            />
+            <Choice label="Squirtle" value="squirtle" />
+            {false && <Choice label="Pikachu" value="pikachu" />}
+        </RadioGroup>
+    );
+};
+
+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({
     choice: {
         margin: 0,

package/src/components/__tests__/checkbox-group.test.js

@@ -132,5 +132,31 @@ describe("CheckboxGroup", () => {
             // Assert
             expect(screen.getByText("strong")).toBeInTheDocument();
         });
+
+        it("should filter out false-y children when rendering", () => {
+            // Arrange, Act
+            render(
+                <CheckboxGroup
+                    label="label"
+                    description="description"
+                    groupName="test"
+                    onChange={() => {}}
+                    selectedValues={[]}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    {false && (
+                        <Choice label="b" value="b" aria-labelledby="test-b" />
+                    )}
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                    {undefined}
+                    {null}
+                </CheckboxGroup>,
+            );
+
+            // Assert
+            const checkboxes = screen.getAllByRole("checkbox");
+
+            expect(checkboxes).toHaveLength(2);
+        });
     });
 });

package/src/components/__tests__/radio-group.test.js

@@ -108,51 +108,75 @@ describe("RadioGroup", () => {
     describe("flexible props", () => {
         it("should render with a React.Node label", () => {
             // Arrange, Act
-            const action = () =>
-                render(
-                    <RadioGroup
-                        label={
-                            <span>
-                                label with <strong>strong</strong> text
-                            </span>
-                        }
-                        groupName="test"
-                        onChange={() => {}}
-                        selectedValue={"a"}
-                    >
-                        <Choice label="a" value="a" aria-labelledby="test-a" />
-                        <Choice label="b" value="b" aria-labelledby="test-b" />
-                        <Choice label="c" value="c" aria-labelledby="test-c" />
-                    </RadioGroup>,
-                );
+            render(
+                <RadioGroup
+                    label={
+                        <span>
+                            label with <strong>strong</strong> text
+                        </span>
+                    }
+                    groupName="test"
+                    onChange={() => {}}
+                    selectedValue={"a"}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    <Choice label="b" value="b" aria-labelledby="test-b" />
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                </RadioGroup>,
+            );
 
             // Assert
-            expect(action).not.toThrow();
+            expect(screen.getByText("strong")).toBeInTheDocument();
         });
 
         it("should render with a React.Node description", () => {
             // Arrange, Act
-            const action = () =>
-                render(
-                    <RadioGroup
-                        label="label"
-                        description={
-                            <span>
-                                description with <strong>strong</strong> text
-                            </span>
-                        }
-                        groupName="test"
-                        onChange={() => {}}
-                        selectedValue={"a"}
-                    >
-                        <Choice label="a" value="a" aria-labelledby="test-a" />
+            render(
+                <RadioGroup
+                    label="label"
+                    description={
+                        <span>
+                            description with <strong>strong</strong> text
+                        </span>
+                    }
+                    groupName="test"
+                    onChange={() => {}}
+                    selectedValue={"a"}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    <Choice label="b" value="b" aria-labelledby="test-b" />
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                </RadioGroup>,
+            );
+
+            // Assert
+            expect(screen.getByText("strong")).toBeInTheDocument();
+        });
+
+        it("should filter out false-y children when rendering", () => {
+            // Arrange, Act
+            render(
+                <RadioGroup
+                    label="label"
+                    description="description"
+                    groupName="test"
+                    onChange={() => {}}
+                    selectedValue={"a"}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    {false && (
                         <Choice label="b" value="b" aria-labelledby="test-b" />
-                        <Choice label="c" value="c" aria-labelledby="test-c" />
-                    </RadioGroup>,
-                );
+                    )}
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                    {undefined}
+                    {null}
+                </RadioGroup>,
+            );
 
             // Assert
-            expect(action).not.toThrow();
+            const radios = screen.getAllByRole("radio");
+
+            expect(radios).toHaveLength(2);
         });
     });
 });

package/src/components/checkbox-group.js

@@ -16,7 +16,7 @@ type CheckboxGroupProps = {|
     /**
      * 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
@@ -128,6 +128,8 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
             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*/}
@@ -151,7 +153,7 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
                         <Strut size={Spacing.small_12} />
                     )}
 
-                    {React.Children.map(children, (child, index) => {
+                    {allChildren.map((child, index) => {
                         const {style, value} = child.props;
                         const checked = selectedValues.includes(value);
                         return (

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