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

Comparing version 1.2.0 to 1.2.1

components/modal-panel.js

@@ -6,4 +6,2 @@ // @flow
 import {View} from "@khanacademy/wonder-blocks-core";
-import {icons} from "@khanacademy/wonder-blocks-icon";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import Toolbar from "@khanacademy/wonder-blocks-toolbar";
@@ -15,3 +13,3 @@
 import ModalFooter from "./modal-footer.js";
-import ModalContext from "./modal-context.js";
+import CloseButton from "./close-button.js";
 
@@ -80,25 +78,6 @@ type Props = {|
             >
-                <ModalContext.Consumer>
-                    {({closeModal}) => {
-                        if (closeModal && onClose) {
-                            throw new Error(
-                                "You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead",
-                            );
-                        }
-                        return (
-                            <IconButton
-                                icon={icons.dismiss}
-                                // TODO(mdr): Translate this string for i18n.
-                                aria-label="Close modal"
-                                onClick={closeModal || onClose}
-                                kind={
-                                    topBackgroundColor === "dark"
-                                        ? "primary"
-                                        : "tertiary"
-                                }
-                                light={topBackgroundColor === "dark"}
-                            />
-                        );
-                    }}
-                </ModalContext.Consumer>
+                <CloseButton
+                    onClick={onClose}
+                    light={topBackgroundColor === "dark"}
+                />
             </View>
@@ -183,4 +162,4 @@ );
         position: "absolute",
-        left: 8,
-        top: 8,
+        left: 16,
+        top: 16,
         // This is to allow the button to be tab-ordered before the modal
@@ -192,4 +171,4 @@ // content but still be above the header and content.
     smallCloseButton: {
-        left: 8,
-        top: 8,
+        left: 16,
+        top: 16,
     },
@@ -196,0 +175,0 @@

components/standard-modal.js

@@ -9,2 +9,3 @@ // @flow
 import ModalContent from "./modal-content.js";
+import CloseButton from "./close-button.js";
 
@@ -80,6 +81,11 @@ type Props = {|
                 <ModalPanel
-                    showCloseButton
                     onClose={onClose}
                     titleBar={
                         <Toolbar
+                            leftContent={
+                                <CloseButton
+                                    light={!!header}
+                                    onClick={onClose}
+                                />
+                            }
                             title={title}
@@ -86,0 +92,0 @@ subtitle={subtitle}

dist/es/index.js

@@ -681,2 +681,34 @@ import { Component, createElement, Fragment, createContext, cloneElement } from 'react';
 
+/**
+ * Context aware close button.
+ *
+ * If this button is rendered within a modal that was launched using ModalLauncher
+ * then it will call the `closeModal` function provided by ModalContext.Consumer.
+ * Otherwise, it calls the `onClick` method provided.
+ */
+class CloseButton extends Component {
+  render() {
+    const _this$props = this.props,
+          light = _this$props.light,
+          onClick = _this$props.onClick;
+    return createElement(ModalContext.Consumer, null, ({
+      closeModal
+    }) => {
+      if (closeModal && onClick) {
+        throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
+      }
+
+      return createElement(IconButton, {
+        icon: icons.dismiss // TODO(mdr): Translate this string for i18n.
+        ,
+        "aria-label": "Close modal",
+        onClick: closeModal || onClick,
+        kind: light ? "primary" : "tertiary",
+        light: light
+      });
+    });
+  }
+
+}
+
 class ModalPanel extends Component {
@@ -700,17 +732,5 @@ maybeRenderCloseButton() {
       style: [styles$6.closeButton]
-    }, createElement(ModalContext.Consumer, null, ({
-      closeModal
-    }) => {
-      if (closeModal && onClose) {
-        throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
-      }
-
-      return createElement(IconButton, {
-        icon: icons.dismiss // TODO(mdr): Translate this string for i18n.
-        ,
-        "aria-label": "Close modal",
-        onClick: closeModal || onClose,
-        kind: topBackgroundColor === "dark" ? "primary" : "tertiary",
-        light: topBackgroundColor === "dark"
-      });
+    }, createElement(CloseButton, {
+      onClick: onClose,
+      light: topBackgroundColor === "dark"
     }));
@@ -775,4 +795,4 @@ }
     position: "absolute",
-    left: 8,
-    top: 8,
+    left: 16,
+    top: 16,
     // This is to allow the button to be tab-ordered before the modal
@@ -783,4 +803,4 @@ // content but still be above the header and content.
   smallCloseButton: {
-    left: 8,
-    top: 8
+    left: 16,
+    top: 16
   },
@@ -820,5 +840,8 @@ dark: {
     }, createElement(ModalPanel, {
-      showCloseButton: true,
       onClose: onClose,
       titleBar: createElement(Toolbar, {
+        leftContent: createElement(CloseButton, {
+          light: !!header,
+          onClick: onClose
+        }),
         title: title,
@@ -825,0 +848,0 @@ subtitle: subtitle,

dist/index.js

@@ -734,9 +734,2 @@ module.exports =
 });
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
-var wonder_blocks_icon_ = __webpack_require__(7);
-
-// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon-button"
-var wonder_blocks_icon_button_ = __webpack_require__(6);
-var wonder_blocks_icon_button_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_button_);
-
 // CONCATENATED MODULE: ./packages/wonder-blocks-modal/components/modal-header.js
@@ -872,2 +865,46 @@ function modal_header_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 });
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
+var wonder_blocks_icon_ = __webpack_require__(7);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon-button"
+var wonder_blocks_icon_button_ = __webpack_require__(6);
+var wonder_blocks_icon_button_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_button_);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-modal/components/close-button.js
+
+
+
+
+
+/**
+ * Context aware close button.
+ *
+ * If this button is rendered within a modal that was launched using ModalLauncher
+ * then it will call the `closeModal` function provided by ModalContext.Consumer.
+ * Otherwise, it calls the `onClick` method provided.
+ */
+class close_button_CloseButton extends external_react_["Component"] {
+  render() {
+    const _this$props = this.props,
+          light = _this$props.light,
+          onClick = _this$props.onClick;
+    return external_react_["createElement"](modal_context.Consumer, null, ({
+      closeModal
+    }) => {
+      if (closeModal && onClick) {
+        throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
+      }
+
+      return external_react_["createElement"](wonder_blocks_icon_button_default.a, {
+        icon: wonder_blocks_icon_["icons"].dismiss // TODO(mdr): Translate this string for i18n.
+        ,
+        "aria-label": "Close modal",
+        onClick: closeModal || onClick,
+        kind: light ? "primary" : "tertiary",
+        light: light
+      });
+    });
+  }
+
+}
 // CONCATENATED MODULE: ./packages/wonder-blocks-modal/components/modal-panel.js
@@ -885,4 +922,2 @@ function modal_panel_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-
-
 class modal_panel_ModalPanel extends external_react_["Component"] {
@@ -906,17 +941,5 @@ maybeRenderCloseButton() {
       style: [modal_panel_styles.closeButton]
-    }, external_react_["createElement"](modal_context.Consumer, null, ({
-      closeModal
-    }) => {
-      if (closeModal && onClose) {
-        throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
-      }
-
-      return external_react_["createElement"](wonder_blocks_icon_button_default.a, {
-        icon: wonder_blocks_icon_["icons"].dismiss // TODO(mdr): Translate this string for i18n.
-        ,
-        "aria-label": "Close modal",
-        onClick: closeModal || onClose,
-        kind: topBackgroundColor === "dark" ? "primary" : "tertiary",
-        light: topBackgroundColor === "dark"
-      });
+    }, external_react_["createElement"](close_button_CloseButton, {
+      onClick: onClose,
+      light: topBackgroundColor === "dark"
     }));
@@ -981,4 +1004,4 @@ }
     position: "absolute",
-    left: 8,
-    top: 8,
+    left: 16,
+    top: 16,
     // This is to allow the button to be tab-ordered before the modal
@@ -989,4 +1012,4 @@ // content but still be above the header and content.
   smallCloseButton: {
-    left: 8,
-    top: 8
+    left: 16,
+    top: 16
   },
@@ -1015,2 +1038,3 @@ dark: {
 
+
 /**
@@ -1034,5 +1058,8 @@ * The "standard" modal layout: a titlebar, a content area, and a footer.
     }, external_react_["createElement"](modal_panel_ModalPanel, {
-      showCloseButton: true,
       onClose: onClose,
       titleBar: external_react_["createElement"](wonder_blocks_toolbar_default.a, {
+        leftContent: external_react_["createElement"](close_button_CloseButton, {
+          light: !!header,
+          onClick: onClose
+        }),
         title: title,
@@ -1039,0 +1066,0 @@ subtitle: subtitle,

package.json

 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "design": "v1",
@@ -18,8 +18,8 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-color": "^1.0.10",
-    "@khanacademy/wonder-blocks-core": "^1.2.3",
-    "@khanacademy/wonder-blocks-icon": "^1.0.7",
-    "@khanacademy/wonder-blocks-icon-button": "^3.0.0",
-    "@khanacademy/wonder-blocks-toolbar": "^2.0.0",
-    "@khanacademy/wonder-blocks-typography": "^1.0.10"
+    "@khanacademy/wonder-blocks-color": "^1.0.11",
+    "@khanacademy/wonder-blocks-core": "^1.2.4",
+    "@khanacademy/wonder-blocks-icon": "^1.0.8",
+    "@khanacademy/wonder-blocks-icon-button": "^3.0.1",
+    "@khanacademy/wonder-blocks-toolbar": "^2.0.1",
+    "@khanacademy/wonder-blocks-typography": "^1.0.11"
   },
@@ -32,4 +32,4 @@ "peerDependencies": {
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^2.2.1"
+    "@khanacademy/wonder-blocks-button": "^2.2.2"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

438172

increased by0.95%

Number of package files

38

increased by5.56%

Lines of code

4980

increased by1.92%

Dependency changes

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

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

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

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

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

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