@khanacademy/wonder-blocks-modal - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

building-blocks.md

@@ -7,2 +7,4 @@ Use these low-level building blocks to build your own modal dialog, instead of using OnePaneDialog. This should happen very rarely and only when a specific exception is required.
 const {StyleSheet} = require("aphrodite");
+
+const {ModalDialog, ModalPanel} = require("@khanacademy/wonder-blocks-modal");
 const {View} = require("@khanacademy/wonder-blocks-core");
@@ -9,0 +11,0 @@ const Button = require("@khanacademy/wonder-blocks-button").default;

components/one-pane-dialog/one-pane-dialog.md

 ### Example: OnePaneDialog with above container
 
 ```js
-const {StyleSheet} = require("aphrodite");
-const {View} = require("@khanacademy/wonder-blocks-core");
-const {Body} = require("@khanacademy/wonder-blocks-typography");
-const Button = require("@khanacademy/wonder-blocks-button").default;
+import {StyleSheet} from "aphrodite";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Body} from "@khanacademy/wonder-blocks-typography";
+import Button from "@khanacademy/wonder-blocks-button";
 
@@ -79,9 +79,9 @@ const styles = StyleSheet.create({
 ```js
-const {StyleSheet} = require("aphrodite");
-const {View} = require("@khanacademy/wonder-blocks-core");
-const {Body} = require("@khanacademy/wonder-blocks-typography");
-const Button = require("@khanacademy/wonder-blocks-button").default;
-const Spacing = require("@khanacademy/wonder-blocks-spacing").default;
-const {Breadcrumbs, BreadcrumbsItem} = require("@khanacademy/wonder-blocks-breadcrumbs");
-const {MediaLayout} = require("@khanacademy/wonder-blocks-layout");
+import {StyleSheet} from "aphrodite";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Body} from "@khanacademy/wonder-blocks-typography";
+import Button from "@khanacademy/wonder-blocks-button";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {Breadcrumbs, BreadcrumbsItem} from "@khanacademy/wonder-blocks-breadcrumbs";
+import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
 
@@ -184,9 +184,7 @@ const styles = StyleSheet.create({
 ```js
-const {StyleSheet} = require("aphrodite");
-const {View} = require("@khanacademy/wonder-blocks-core");
-const {Body} = require("@khanacademy/wonder-blocks-typography");
-const {Strut} = require("@khanacademy/wonder-blocks-layout");
-const {LabelLarge} = require("@khanacademy/wonder-blocks-typography");
-const Button = require("@khanacademy/wonder-blocks-button").default;
-const {MediaLayout} = require("@khanacademy/wonder-blocks-layout");
+import {StyleSheet} from "aphrodite";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {MediaLayout, Strut} from "@khanacademy/wonder-blocks-layout";
+import Button from "@khanacademy/wonder-blocks-button";
 
@@ -193,0 +191,0 @@ const exampleStyles = StyleSheet.create({

docs.md

@@ -1,3 +0,208 @@
-Looking for docs for StandardModal, OneColumnModal, or TwoColumnModal click [here](https://deploy-preview-389--wonder-blocks.netlify.com/#modal)
+Looking for docs for StandardModal, OneColumnModal, or TwoColumnModal click
+[here](https://deploy-preview-389--wonder-blocks.netlify.com/#modal)
 
+## Examples
+
+### Example: Default modal
+
+Once the modal is launched, tab focus wraps inside the modal content. Pressing Tab at the end of the modal will focus the modal's first element, and pressing Shift-Tab at the start of the modal will focus the modal's last element.
+
+```js
+import {StyleSheet} from "aphrodite";
+
+import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Body} from "@khanacademy/wonder-blocks-typography";
+import Button from "@khanacademy/wonder-blocks-button";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+
+const styles = StyleSheet.create({
+    example: {
+        padding: Spacing.xLarge,
+        alignItems: "center",
+    },
+
+    title: {
+        marginBottom: Spacing.medium,
+    },
+
+    modalContent: {
+        margin: "0 auto",
+        maxWidth: 544,
+    },
+
+    above: {
+        background: "url(/modal-above.png)",
+        width: 874,
+        height: 551,
+        position: "absolute",
+        top: 40,
+        left: -140
+    },
+
+    below: {
+        background: "url(/modal-below.png)",
+        width: 868,
+        height: 521,
+        position: "absolute",
+        top: -100,
+        left: -300
+    },
+});
+
+const onePaneDialog = ({closeModal}) => (
+    <OnePaneDialog
+        title="Title"
+        subtitle="You're reading the subtitle!"
+        above={<View style={styles.above} />}
+        below={<View style={styles.below} />}
+        content={
+            <View style={styles.modalContent}>
+                <Body tag="p">
+                    {
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
+                    }
+                </Body>
+            </View>
+        }
+        footer={
+            <Button onClick={closeModal}>
+                Close modal
+            </Button>
+        }
+    />
+);
+
+<View style={styles.example}>
+    <ModalLauncher modal={onePaneDialog}>
+        {({openModal}) => <Button onClick={openModal}>OnePaneDialog</Button>}
+    </ModalLauncher>
+</View>;
+```
+
+### Example: Disabling backdrop dismission
+
+By default, `ModalLauncher` allows you to close the modal by clicking on the overlay/backdrop window. Somethimes you might need to disable it, and to to this, you can set `backgropDismissEnabled` to `false`.
+
+```js
+import {StyleSheet} from "aphrodite";
+
+import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Body} from "@khanacademy/wonder-blocks-typography";
+import Button from "@khanacademy/wonder-blocks-button";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+
+const styles = StyleSheet.create({
+    example: {
+        padding: Spacing.xLarge,
+        alignItems: "center",
+    },
+
+    modalContent: {
+        margin: "0 auto",
+        maxWidth: 544,
+    },
+});
+
+const exampleModal = ({closeModal}) => (
+    <OnePaneDialog
+        title="Backdrop dismission disabled"
+        content={
+            <View style={styles.modalContent}>
+                <Body tag="p">
+                    {
+                        "This window won't be closed if you click/tap outside of the ModalPanel. To do that, you can still press `esc` or use the close button located on the top right."
+                    }
+                </Body>
+            </View>
+        }
+    />
+);
+
+<View style={styles.example}>
+    <ModalLauncher modal={exampleModal} backdropDismissEnabled={false}>
+        {({openModal}) => <Button onClick={openModal}>Open modal</Button>}
+    </ModalLauncher>
+</View>
+```
+
+### Example: Triggering programmatically
+
+Sometimes you'll want to trigger a modal programmatically. This can be done by
+rendering `ModalLauncher` without any children and instead setting its `opened`
+prop to `true`.  In this situation `ModalLauncher` is a controlled component
+which means you'll also have to update `opened` to `false` in response to the
+`onClose` callback being triggered.
+
+```js
+import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
+import {Title} from "@khanacademy/wonder-blocks-typography";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Button from "@khanacademy/wonder-blocks-button";
+import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
+
+class Example extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            opened: false,
+        };
+    }
+
+    handleOpen() {
+        console.log('opening modal');
+        this.setState({opened: true});
+    }
+
+    handleClose() {
+        console.log('closing modal');
+        this.setState({opened: false});
+    }
+
+    render() {
+        return <View>
+            <ActionMenu menuText="actions">
+                <ActionItem
+                    label="Open modal"
+                    onClick={() => this.handleOpen()}
+                />
+            </ActionMenu>
+            <ModalLauncher
+                onClose={() => this.handleClose()}
+                opened={this.state.opened}
+                modal={({closeModal}) => (
+                    <OnePaneDialog
+                        title="Triggered from action menu"
+                        content={
+                            <View>
+                                <Title>Hello, world</Title>
+                            </View>
+                        }
+                        footer={
+                            <Button onClick={closeModal}>
+                                Close Modal
+                            </Button>
+                        }
+                    />
+                )}
+            />
+        </View>;
+    }
+}
+
+<Example />
+```
+
+**Warning:** Do not wrap items in a dropdown in a `ModalLauncher`.  Instead, trigger
+the modal programmatically by using the `ModalLauncher` as an uncontrolled component
+as shown in the above example.
+
+This is necessary because wrapping an item in `ModalLauncher` will result in the
+modal disappearing as soon as the focus changes.  The reason is that the change in
+focus results in the item that in the dropdown that was clicked to be blur which
+closes the dropdown.  This results in all of its children to unmount including the
+ModalLauncher which was wrapping the menu item.
+
+
 ## Accessibility
@@ -29,10 +234,10 @@
 ```js
-const React = require("react");
-const {StyleSheet} = require("aphrodite");
+import {StyleSheet} from "aphrodite";
 
-const {Title} = require("@khanacademy/wonder-blocks-typography");
-const {View} = require("@khanacademy/wonder-blocks-core");
-const Button = require("@khanacademy/wonder-blocks-button").default;
-const {Strut} = require("@khanacademy/wonder-blocks-layout");
-const Spacing = require("@khanacademy/wonder-blocks-spacing").default;
+import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
+import {Title} from "@khanacademy/wonder-blocks-typography";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Button from "@khanacademy/wonder-blocks-button";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
 
@@ -97,8 +302,10 @@ const styles = StyleSheet.create({
 ```js
-const React = require("react");
-const {StyleSheet} = require("aphrodite");
+import {StyleSheet} from "aphrodite";
 
-const Spacing = require("@khanacademy/wonder-blocks-spacing").default;
-const {View} = require("@khanacademy/wonder-blocks-core");
-const Button = require("@khanacademy/wonder-blocks-button").default;
+import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
+import Button from "@khanacademy/wonder-blocks-button";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
@@ -201,7 +408,9 @@ const styles = StyleSheet.create({
 ```js
-const {StyleSheet} = require("aphrodite");
-const {View} = require("@khanacademy/wonder-blocks-core");
-const {Title, Body} = require("@khanacademy/wonder-blocks-typography");
-const {MediaLayout} = require("@khanacademy/wonder-blocks-layout");
+import {StyleSheet} from "aphrodite";
 
+import {OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Title, Body} from "@khanacademy/wonder-blocks-typography";
+import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
+
 const styles = StyleSheet.create({
@@ -208,0 +417,0 @@ previewSizer: {

generated-snapshot.test.js

@@ -11,4 +11,15 @@ // This file is auto-generated by gen-snapshot-tests.js
 jest.mock("react-dom");
-import ModalLauncher from "./components/modal-launcher.js";
-import OnePaneDialog from "./components/one-pane-dialog/one-pane-dialog.js";
+import {StyleSheet} from "aphrodite";
+import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Body, Title, LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import Button from "@khanacademy/wonder-blocks-button";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
+import {Strut, MediaLayout} from "@khanacademy/wonder-blocks-layout";
+import {
+    Breadcrumbs,
+    BreadcrumbsItem,
+} from "@khanacademy/wonder-blocks-breadcrumbs";
+
 import ModalDialog from "./components/modal-dialog.js";
@@ -21,11 +32,65 @@ import ModalPanel from "./components/modal-panel.js";
     it("example 1", () => {
-        const React = require("react");
-        const {StyleSheet} = require("aphrodite");
+        const styles = StyleSheet.create({
+            example: {
+                padding: Spacing.xLarge,
+                alignItems: "center",
+            },
+            title: {
+                marginBottom: Spacing.medium,
+            },
+            modalContent: {
+                margin: "0 auto",
+                maxWidth: 544,
+            },
+            above: {
+                background: "url(/modal-above.png)",
+                width: 874,
+                height: 551,
+                position: "absolute",
+                top: 40,
+                left: -140,
+            },
+            below: {
+                background: "url(/modal-below.png)",
+                width: 868,
+                height: 521,
+                position: "absolute",
+                top: -100,
+                left: -300,
+            },
+        });
 
-        const {Title} = require("@khanacademy/wonder-blocks-typography");
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-        const {Strut} = require("@khanacademy/wonder-blocks-layout");
-        const Spacing = require("@khanacademy/wonder-blocks-spacing").default;
+        const onePaneDialog = ({closeModal}) => (
+            <OnePaneDialog
+                title="Title"
+                subtitle="You're reading the subtitle!"
+                above={<View style={styles.above} />}
+                below={<View style={styles.below} />}
+                content={
+                    <View style={styles.modalContent}>
+                        <Body tag="p">
+                            {
+                                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
+                            }
+                        </Body>
+                    </View>
+                }
+                footer={<Button onClick={closeModal}>Close modal</Button>}
+            />
+        );
 
+        const example = (
+            <View style={styles.example}>
+                <ModalLauncher modal={onePaneDialog}>
+                    {({openModal}) => (
+                        <Button onClick={openModal}>OnePaneDialog</Button>
+                    )}
+                </ModalLauncher>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 2", () => {
         const styles = StyleSheet.create({
@@ -36,4 +101,108 @@ example: {
             },
+            modalContent: {
+                margin: "0 auto",
+                maxWidth: 544,
+            },
         });
 
+        const exampleModal = ({closeModal}) => (
+            <OnePaneDialog
+                title="Backdrop dismission disabled"
+                content={
+                    <View style={styles.modalContent}>
+                        <Body tag="p">
+                            {
+                                "This window won't be closed if you click/tap outside of the ModalPanel. To do that, you can still press `esc` or use the close button located on the top right."
+                            }
+                        </Body>
+                    </View>
+                }
+            />
+        );
+
+        const example = (
+            <View style={styles.example}>
+                <ModalLauncher
+                    modal={exampleModal}
+                    backdropDismissEnabled={false}
+                >
+                    {({openModal}) => (
+                        <Button onClick={openModal}>Open modal</Button>
+                    )}
+                </ModalLauncher>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 3", () => {
+        class Example extends React.Component {
+            constructor(props) {
+                super(props);
+                this.state = {
+                    opened: false,
+                };
+            }
+
+            handleOpen() {
+                console.log("opening modal");
+                this.setState({
+                    opened: true,
+                });
+            }
+
+            handleClose() {
+                console.log("closing modal");
+                this.setState({
+                    opened: false,
+                });
+            }
+
+            render() {
+                return (
+                    <View>
+                        <ActionMenu menuText="actions">
+                            <ActionItem
+                                label="Open modal"
+                                onClick={() => this.handleOpen()}
+                            />
+                        </ActionMenu>
+                        <ModalLauncher
+                            onClose={() => this.handleClose()}
+                            opened={this.state.opened}
+                            modal={({closeModal}) => (
+                                <OnePaneDialog
+                                    title="Triggered from action menu"
+                                    content={
+                                        <View>
+                                            <Title>Hello, world</Title>
+                                        </View>
+                                    }
+                                    footer={
+                                        <Button onClick={closeModal}>
+                                            Close Modal
+                                        </Button>
+                                    }
+                                />
+                            )}
+                        />
+                    </View>
+                );
+            }
+        }
+
+        const example = <Example />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 4", () => {
+        const styles = StyleSheet.create({
+            example: {
+                padding: Spacing.xLarge,
+                alignItems: "center",
+            },
+        });
+
         const modalInitialFocus = ({closeModal}) => (
@@ -84,10 +253,4 @@ <OnePaneDialog
     });
-    it("example 2", () => {
-        const React = require("react");
-        const {StyleSheet} = require("aphrodite");
 
-        const Spacing = require("@khanacademy/wonder-blocks-spacing").default;
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-
+    it("example 5", () => {
         const styles = StyleSheet.create({
@@ -119,3 +282,2 @@ example: {
                 } = this.props;
-
                 return (
@@ -161,3 +323,2 @@ <OnePaneDialog
                 super(props);
-
                 this.state = {
@@ -228,8 +389,4 @@ currentQuestion: 0,
     });
-    it("example 3", () => {
-        const {StyleSheet} = require("aphrodite");
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const {Title, Body} = require("@khanacademy/wonder-blocks-typography");
-        const {MediaLayout} = require("@khanacademy/wonder-blocks-layout");
 
+    it("example 6", () => {
         const styles = StyleSheet.create({
@@ -239,3 +396,2 @@ previewSizer: {
             },
-
             modalPositioner: {
@@ -247,3 +403,2 @@ // Checkerboard background
                 backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
-
                 display: "flex",
@@ -253,3 +408,2 @@ flexDirection: "row",
                 justifyContent: "center",
-
                 position: "absolute",
@@ -262,3 +416,2 @@ left: 0,
         });
-
         const styleSheets = {
@@ -270,3 +423,2 @@ mdOrLarger: StyleSheet.create({
                 },
-
                 below: {
@@ -281,3 +433,2 @@ background: "url(/blue-blob.png)",
                 },
-
                 above: {
@@ -294,3 +445,2 @@ background: "url(/asteroid.png)",
         };
-
         const example = (
@@ -323,195 +473,4 @@ <View style={styles.previewSizer}>
     });
-    it("example 4", () => {
-        const {StyleSheet} = require("aphrodite");
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const {Body} = require("@khanacademy/wonder-blocks-typography");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-        const Spacing = require("@khanacademy/wonder-blocks-spacing").default;
 
-        const styles = StyleSheet.create({
-            example: {
-                padding: Spacing.xLarge,
-                alignItems: "center",
-            },
-
-            title: {
-                marginBottom: Spacing.medium,
-            },
-
-            modalContent: {
-                margin: "0 auto",
-                maxWidth: 544,
-            },
-
-            above: {
-                background: "url(/modal-above.png)",
-                width: 874,
-                height: 551,
-                position: "absolute",
-                top: 40,
-                left: -140,
-            },
-
-            below: {
-                background: "url(/modal-below.png)",
-                width: 868,
-                height: 521,
-                position: "absolute",
-                top: -100,
-                left: -300,
-            },
-        });
-
-        const onePaneDialog = ({closeModal}) => (
-            <OnePaneDialog
-                title="Title"
-                subtitle="You're reading the subtitle!"
-                above={<View style={styles.above} />}
-                below={<View style={styles.below} />}
-                content={
-                    <View style={styles.modalContent}>
-                        <Body tag="p">
-                            {
-                                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
-                            }
-                        </Body>
-                    </View>
-                }
-                footer={<Button onClick={closeModal}>Close modal</Button>}
-            />
-        );
-
-        const example = (
-            <View style={styles.example}>
-                <ModalLauncher modal={onePaneDialog}>
-                    {({openModal}) => (
-                        <Button onClick={openModal}>OnePaneDialog</Button>
-                    )}
-                </ModalLauncher>
-            </View>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-    it("example 5", () => {
-        const {StyleSheet} = require("aphrodite");
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const {Body} = require("@khanacademy/wonder-blocks-typography");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-        const Spacing = require("@khanacademy/wonder-blocks-spacing").default;
-
-        const styles = StyleSheet.create({
-            example: {
-                padding: Spacing.xLarge,
-                alignItems: "center",
-            },
-
-            modalContent: {
-                margin: "0 auto",
-                maxWidth: 544,
-            },
-        });
-
-        const exampleModal = ({closeModal}) => (
-            <OnePaneDialog
-                title="Backdrop dismission disabled"
-                content={
-                    <View style={styles.modalContent}>
-                        <Body tag="p">
-                            {
-                                "This window won't be closed if you click/tap outside of the ModalPanel. To do that, you can still press `esc` or use the close button located on the top right."
-                            }
-                        </Body>
-                    </View>
-                }
-            />
-        );
-
-        const example = (
-            <View style={styles.example}>
-                <ModalLauncher
-                    modal={exampleModal}
-                    backdropDismissEnabled={false}
-                >
-                    {({openModal}) => (
-                        <Button onClick={openModal}>Open modal</Button>
-                    )}
-                </ModalLauncher>
-            </View>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-    it("example 6", () => {
-        const React = require("react");
-
-        const {Title} = require("@khanacademy/wonder-blocks-typography");
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-        const {
-            ActionMenu,
-            ActionItem,
-        } = require("@khanacademy/wonder-blocks-dropdown");
-
-        class Example extends React.Component {
-            constructor(props) {
-                super(props);
-                this.state = {
-                    opened: false,
-                };
-            }
-
-            handleOpen() {
-                console.log("opening modal");
-                this.setState({opened: true});
-            }
-
-            handleClose() {
-                console.log("closing modal");
-                this.setState({opened: false});
-            }
-
-            render() {
-                return (
-                    <View>
-                        <ActionMenu menuText="actions">
-                            <ActionItem
-                                label="Open modal"
-                                onClick={() => this.handleOpen()}
-                            />
-                        </ActionMenu>
-                        <ModalLauncher
-                            onClose={() => this.handleClose()}
-                            opened={this.state.opened}
-                            modal={({closeModal}) => (
-                                <OnePaneDialog
-                                    title="Triggered from action menu"
-                                    content={
-                                        <View>
-                                            <Title>Hello, world</Title>
-                                        </View>
-                                    }
-                                    footer={
-                                        <Button onClick={closeModal}>
-                                            Close Modal
-                                        </Button>
-                                    }
-                                />
-                            )}
-                        />
-                    </View>
-                );
-            }
-        }
-
-        const example = <Example />;
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
     it("example 7", () => {
-        const {StyleSheet} = require("aphrodite");
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const {Body} = require("@khanacademy/wonder-blocks-typography");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-
         const styles = StyleSheet.create({
@@ -521,3 +480,2 @@ previewSizer: {
             },
-
             modalPositioner: {
@@ -529,7 +487,5 @@ // Checkerboard background
                 backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
-
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "center",
-
                 position: "absolute",
@@ -541,3 +497,2 @@ left: 0,
             },
-
             modalContent: {
@@ -547,3 +502,2 @@ margin: "0 auto",
             },
-
             above: {
@@ -559,3 +513,2 @@ background: "url(/modal-above.png)",
         });
-
         const example = (
@@ -597,14 +550,4 @@ <View style={styles.previewSizer}>
     });
+
     it("example 8", () => {
-        const {StyleSheet} = require("aphrodite");
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const {Body} = require("@khanacademy/wonder-blocks-typography");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-        const Spacing = require("@khanacademy/wonder-blocks-spacing").default;
-        const {
-            Breadcrumbs,
-            BreadcrumbsItem,
-        } = require("@khanacademy/wonder-blocks-breadcrumbs");
-        const {MediaLayout} = require("@khanacademy/wonder-blocks-layout");
-
         const styles = StyleSheet.create({
@@ -614,3 +557,2 @@ previewSizer: {
             },
-
             modalPositioner: {
@@ -622,7 +564,5 @@ // Checkerboard background
                 backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
-
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "center",
-
                 position: "absolute",
@@ -635,3 +575,2 @@ left: 0,
         });
-
         const defaultStyles = StyleSheet.create({
@@ -646,3 +585,2 @@ row: {
         });
-
         const smallStyles = StyleSheet.create({
@@ -657,3 +595,2 @@ row: {
         });
-
         const styleSheets = {
@@ -710,11 +647,4 @@ mdOrLarger: defaultStyles,
     });
+
     it("example 9", () => {
-        const {StyleSheet} = require("aphrodite");
-        const {View} = require("@khanacademy/wonder-blocks-core");
-        const {Body} = require("@khanacademy/wonder-blocks-typography");
-        const {Strut} = require("@khanacademy/wonder-blocks-layout");
-        const {LabelLarge} = require("@khanacademy/wonder-blocks-typography");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-        const {MediaLayout} = require("@khanacademy/wonder-blocks-layout");
-
         const exampleStyles = StyleSheet.create({
@@ -724,3 +654,2 @@ previewSizer: {
             },
-
             modalPositioner: {
@@ -732,7 +661,5 @@ // Checkerboard background
                 backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
-
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "center",
-
                 position: "absolute",
@@ -745,3 +672,2 @@ left: 0,
         });
-
         const styles = StyleSheet.create({
@@ -759,3 +685,2 @@ row: {
         });
-
         const example = (
@@ -792,7 +717,17 @@ <View style={exampleStyles.previewSizer}>
     });
+
     it("example 10", () => {
         const {StyleSheet} = require("aphrodite");
+
+        const {
+            ModalDialog,
+            ModalPanel,
+        } = require("@khanacademy/wonder-blocks-modal");
+
         const {View} = require("@khanacademy/wonder-blocks-core");
+
         const Button = require("@khanacademy/wonder-blocks-button").default;
+
         const {Title, Body} = require("@khanacademy/wonder-blocks-typography");
+
         const {
@@ -807,3 +742,2 @@ MediaLayout,
             },
-
             modalPositioner: {
@@ -815,3 +749,2 @@ // Checkerboard background
                 backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
-
                 display: "flex",
@@ -821,3 +754,2 @@ flexDirection: "row",
                 justifyContent: "center",
-
                 position: "absolute",
@@ -830,3 +762,2 @@ left: 0,
         });
-
         const styleSheets = {
@@ -840,3 +771,2 @@ mdOrLarger: StyleSheet.create({
                 },
-
                 panelGroup: {
@@ -846,3 +776,2 @@ flexDirection: "row",
                 },
-
                 below: {
@@ -857,3 +786,2 @@ background: "url(/blue-blob.png)",
                 },
-
                 above: {
@@ -869,3 +797,2 @@ background: "url(/asteroid.png)",
             }),
-
             small: StyleSheet.create({
@@ -877,3 +804,2 @@ dialog: {
                 },
-
                 panelGroup: {
@@ -885,3 +811,2 @@ flexDirection: "column",
         };
-
         const example = (
@@ -888,0 +813,0 @@ <View style={styles.previewSizer}>

package.json

 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "design": "v2",
@@ -18,10 +18,11 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.5",
-    "@khanacademy/wonder-blocks-color": "^1.1.6",
-    "@khanacademy/wonder-blocks-core": "^2.4.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.2",
-    "@khanacademy/wonder-blocks-icon-button": "^3.1.6",
-    "@khanacademy/wonder-blocks-layout": "^1.3.5",
-    "@khanacademy/wonder-blocks-toolbar": "^2.1.6",
-    "@khanacademy/wonder-blocks-typography": "^1.1.6"
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.6",
+    "@khanacademy/wonder-blocks-color": "^1.1.7",
+    "@khanacademy/wonder-blocks-core": "^2.4.1",
+    "@khanacademy/wonder-blocks-icon": "^1.2.3",
+    "@khanacademy/wonder-blocks-icon-button": "^3.1.7",
+    "@khanacademy/wonder-blocks-layout": "^1.3.6",
+    "@khanacademy/wonder-blocks-spacing": "^2.1.7",
+    "@khanacademy/wonder-blocks-toolbar": "^2.1.7",
+    "@khanacademy/wonder-blocks-typography": "^1.1.7"
   },
@@ -34,5 +35,5 @@ "peerDependencies": {
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^2.4.2",
+    "@khanacademy/wonder-blocks-button": "^2.4.3",
     "wb-dev-build-settings": "^0.0.2"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

373918

decreased by-0.4%

Dependency count

12

increased by9.09%

Lines of code

5578

decreased by-0.78%

Dependency changes

• + Added@khanacademy/wonder-blocks-spacing@^2.1.7

• Updated@khanacademy/wonder-blocks-breadcrumbs@^1.0.6

• Updated@khanacademy/wonder-blocks-color@^1.1.7

• Updated@khanacademy/wonder-blocks-core@^2.4.1

• Updated@khanacademy/wonder-blocks-icon@^1.2.3

• Updated@khanacademy/wonder-blocks-icon-button@^3.1.7

• Updated@khanacademy/wonder-blocks-layout@^1.3.6

• Updated@khanacademy/wonder-blocks-toolbar@^2.1.7

• Updated@khanacademy/wonder-blocks-typography@^1.1.7