@khanacademy/wonder-blocks-form 3.0.0 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-form
 
+## 3.1.1
+
+### Patch Changes
+
+-   c13dc28e: Don't wrap Choices in a Fragment to so that each child has a 'key' prop
+
+## 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,13 +564,13 @@ 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
       } = child.props;
       const checked = selectedValues.includes(value);
-      return React.createElement(React.Fragment, null, React.cloneElement(child, {
+      return React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -578,7 +579,7 @@ class CheckboxGroup extends React.Component {
         onChange: () => this.handleChange(value, checked),
         style: [index > 0 && styles$2.defaultLineGap, style],
         variant: "checkbox"
-      }));
+      });
     })));
   }
 
@@ -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,13 +617,13 @@ 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
       } = child.props;
       const checked = selectedValue === value;
-      return React.createElement(React.Fragment, null, React.cloneElement(child, {
+      return React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -630,7 +632,7 @@ class RadioGroup extends React.Component {
         onChange: () => this.handleChange(value),
         style: [index > 0 && styles$2.defaultLineGap, style],
         variant: "radio"
-      }));
+      });
     })));
   }
 

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,13 +862,13 @@ 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
       } = child.props;
       const checked = selectedValues.includes(value);
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -876,7 +877,7 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         onChange: () => this.handleChange(value, checked),
         style: [index > 0 && _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].defaultLineGap, style],
         variant: "checkbox"
-      }));
+      });
     })));
   }
 
@@ -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,13 +974,13 @@ 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
       } = child.props;
       const checked = selectedValue === value;
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["cloneElement"](child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -987,7 +989,7 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         onChange: () => this.handleChange(value),
         style: [index > 0 && _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].defaultLineGap, style],
         variant: "radio"
-      }));
+      });
     })));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "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,27 +153,19 @@ 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 (
-                            <React.Fragment>
-                                {React.cloneElement(child, {
-                                    checked: checked,
-                                    error: !!errorMessage,
-                                    groupName: groupName,
-                                    id: `${groupName}-${value}`,
-                                    key: value,
-                                    onChange: () =>
-                                        this.handleChange(value, checked),
-                                    style: [
-                                        index > 0 && styles.defaultLineGap,
-                                        style,
-                                    ],
-                                    variant: "checkbox",
-                                })}
-                            </React.Fragment>
-                        );
+                        return React.cloneElement(child, {
+                            checked: checked,
+                            error: !!errorMessage,
+                            groupName: groupName,
+                            id: `${groupName}-${value}`,
+                            key: value,
+                            onChange: () => this.handleChange(value, checked),
+                            style: [index > 0 && styles.defaultLineGap, style],
+                            variant: "checkbox",
+                        });
                     })}
                 </View>
             </StyledFieldset>

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,26 +143,19 @@ 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 (
-                            <React.Fragment>
-                                {React.cloneElement(child, {
-                                    checked: checked,
-                                    error: !!errorMessage,
-                                    groupName: groupName,
-                                    id: `${groupName}-${value}`,
-                                    key: value,
-                                    onChange: () => this.handleChange(value),
-                                    style: [
-                                        index > 0 && styles.defaultLineGap,
-                                        style,
-                                    ],
-                                    variant: "radio",
-                                })}
-                            </React.Fragment>
-                        );
+                        return React.cloneElement(child, {
+                            checked: checked,
+                            error: !!errorMessage,
+                            groupName: groupName,
+                            id: `${groupName}-${value}`,
+                            key: value,
+                            onChange: () => this.handleChange(value),
+                            style: [index > 0 && styles.defaultLineGap, style],
+                            variant: "radio",
+                        });
                     })}
                 </View>
             </StyledFieldset>