@khanacademy/wonder-blocks-modal 7.1.4 → 7.1.6

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @khanacademy/wonder-blocks-modal
 
+## 7.1.6
+
+### Patch Changes
+
+- 4846e9c: Update icon buttons to use the new mapping (from `primary` to `tertiary`)
+- Updated dependencies [3dc5dac]
+- Updated dependencies [4846e9c]
+- Updated dependencies [4846e9c]
+    - @khanacademy/wonder-blocks-tokens@5.2.0
+    - @khanacademy/wonder-blocks-icon-button@8.0.0
+    - @khanacademy/wonder-blocks-breadcrumbs@3.1.5
+    - @khanacademy/wonder-blocks-layout@3.1.5
+    - @khanacademy/wonder-blocks-styles@0.2.1
+
+## 7.1.5
+
+### Patch Changes
+
+- 4887c59: Use `focus` styles from `wonder-blocks-styles` to match the global focus outline.
+- 86e1901: Update close button position to account for the new IconButton margin changes
+- 61f7837: Update dismiss button (CloseButton) to use `actionStyles.inverse` instead of the now deprecated `IconButton.light` variant"
+- Updated dependencies [61f7837]
+- Updated dependencies [86e1901]
+- Updated dependencies [aace76a]
+- Updated dependencies [3cacbe7]
+- Updated dependencies [61f7837]
+- Updated dependencies [4887c59]
+    - @khanacademy/wonder-blocks-icon-button@7.0.0
+    - @khanacademy/wonder-blocks-styles@0.2.0
+
 ## 7.1.4
 
 ### Patch Changes

package/dist/components/close-button.d.ts

@@ -1,13 +1,6 @@
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
-    /**
-     * Whether the button is on a dark/colored background.
-     *
-     * Sets primary button background color to white, and secondary and
-     * tertiary button title to color.
-     */
-    light?: boolean;
     /** Optional click handler */
     onClick?: () => unknown;
     /** Optional custom styles. */

package/dist/es/index.js

@@ -7,6 +7,7 @@ import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography
 import * as ReactDOM from 'react-dom';
 import { StyleSheet } from 'aphrodite';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
+import { actionStyles, focusStyles } from '@khanacademy/wonder-blocks-styles';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import { MediaLayout } from '@khanacademy/wonder-blocks-layout';
@@ -20,8 +21,7 @@ const theme$1 = {
       }
     },
     border: {
-      radius: border.radius.medium_4,
-      width: border.width.thin
+      radius: border.radius.medium_4
     }
   },
   backdrop: {
@@ -54,16 +54,13 @@ const theme$1 = {
     }
   },
   panel: {
-    color: {
-      border: semanticColor.focus.outer
-    },
     spacing: {
       gap: spacing.xLarge_32
     }
   },
   closeButton: {
     spacing: {
-      gap: spacing.medium_16
+      gap: spacing.xSmall_8
     }
   }
 };
@@ -658,7 +655,6 @@ ModalContent.defaultProps = {
 class CloseButton extends React.Component {
   render() {
     const {
-      light,
       onClick,
       style,
       testId
@@ -673,8 +669,8 @@ class CloseButton extends React.Component {
         icon: xIcon,
         "aria-label": "Close modal",
         onClick: onClick || closeModal,
-        kind: light ? "primary" : "tertiary",
-        light: light,
+        kind: "tertiary",
+        actionType: "neutral",
         style: style,
         testId: testId
       });
@@ -708,13 +704,13 @@ function ModalPanel({
     });
   }, [content, footer, scrollOverflow, styles.hasFooter]);
   const mainContent = renderMainContent();
+  const isInverse = !light;
   return React.createElement(View, {
-    style: [styles.wrapper, !light && styles.dark, style],
+    style: [styles.wrapper, isInverse && styles.dark, style],
     testId: testId && `${testId}-panel`
   }, closeButtonVisible && React.createElement(CloseButton, {
-    light: !light,
     onClick: onClose,
-    style: styles.closeButton,
+    style: [styles.closeButton, isInverse && actionStyles.inverse],
     testId: testId && `${testId}-close`
   }), header, mainContent, !footer || ModalFooter.isComponentOf(footer) ? footer : React.createElement(ModalFooter, null, footer));
 }
@@ -740,13 +736,7 @@ const themedStylesFn = theme => ({
     right: theme.closeButton.spacing.gap,
     top: theme.closeButton.spacing.gap,
     zIndex: 1,
-    ":focus": {
-      outlineWidth: theme.root.border.width,
-      outlineColor: theme.panel.color.border,
-      outlineOffset: 1,
-      outlineStyle: "solid",
-      borderRadius: theme.root.border.radius
-    }
+    ":focus": _extends({}, focusStyles.focus[":focus-visible"])
   },
   dark: {
     background: theme.root.color.inverse.background,

package/dist/index.js

@@ -11,6 +11,7 @@ var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var ReactDOM = require('react-dom');
 var aphrodite = require('aphrodite');
 var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
+var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
@@ -50,8 +51,7 @@ const theme$1 = {
       }
     },
     border: {
-      radius: wonderBlocksTokens.border.radius.medium_4,
-      width: wonderBlocksTokens.border.width.thin
+      radius: wonderBlocksTokens.border.radius.medium_4
     }
   },
   backdrop: {
@@ -84,16 +84,13 @@ const theme$1 = {
     }
   },
   panel: {
-    color: {
-      border: wonderBlocksTokens.semanticColor.focus.outer
-    },
     spacing: {
       gap: wonderBlocksTokens.spacing.xLarge_32
     }
   },
   closeButton: {
     spacing: {
-      gap: wonderBlocksTokens.spacing.medium_16
+      gap: wonderBlocksTokens.spacing.xSmall_8
     }
   }
 };
@@ -688,7 +685,6 @@ ModalContent.defaultProps = {
 class CloseButton extends React__namespace.Component {
   render() {
     const {
-      light,
       onClick,
       style,
       testId
@@ -703,8 +699,8 @@ class CloseButton extends React__namespace.Component {
         icon: xIcon__default["default"],
         "aria-label": "Close modal",
         onClick: onClick || closeModal,
-        kind: light ? "primary" : "tertiary",
-        light: light,
+        kind: "tertiary",
+        actionType: "neutral",
         style: style,
         testId: testId
       });
@@ -738,13 +734,13 @@ function ModalPanel({
     });
   }, [content, footer, scrollOverflow, styles.hasFooter]);
   const mainContent = renderMainContent();
+  const isInverse = !light;
   return React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles.wrapper, !light && styles.dark, style],
+    style: [styles.wrapper, isInverse && styles.dark, style],
     testId: testId && `${testId}-panel`
   }, closeButtonVisible && React__namespace.createElement(CloseButton, {
-    light: !light,
     onClick: onClose,
-    style: styles.closeButton,
+    style: [styles.closeButton, isInverse && wonderBlocksStyles.actionStyles.inverse],
     testId: testId && `${testId}-close`
   }), header, mainContent, !footer || ModalFooter.isComponentOf(footer) ? footer : React__namespace.createElement(ModalFooter, null, footer));
 }
@@ -770,13 +766,7 @@ const themedStylesFn = theme => ({
     right: theme.closeButton.spacing.gap,
     top: theme.closeButton.spacing.gap,
     zIndex: 1,
-    ":focus": {
-      outlineWidth: theme.root.border.width,
-      outlineColor: theme.panel.color.border,
-      outlineOffset: 1,
-      outlineStyle: "solid",
-      borderRadius: theme.root.border.radius
-    }
+    ":focus": _extends__default["default"]({}, wonderBlocksStyles.focusStyles.focus[":focus-visible"])
   },
   dark: {
     background: theme.root.color.inverse.background,

package/dist/themes/default.d.ts

@@ -11,7 +11,6 @@ declare const theme: {
         };
         border: {
             radius: number;
-            width: number;
         };
     };
     /**
@@ -47,16 +46,13 @@ declare const theme: {
         };
     };
     panel: {
-        color: {
-            border: string;
-        };
         spacing: {
             gap: 32;
         };
     };
     closeButton: {
         spacing: {
-            gap: 16;
+            gap: 8;
         };
     };
 };

package/dist/themes/khanmigo.d.ts

@@ -11,7 +11,6 @@ declare const theme: {
         };
         border: {
             radius: number;
-            width: number;
         };
     };
     backdrop: {
@@ -44,16 +43,13 @@ declare const theme: {
         };
     };
     panel: {
-        color: {
-            border: string;
-        };
         spacing: {
             gap: 32;
         };
     };
     closeButton: {
         spacing: {
-            gap: 16;
+            gap: 8;
         };
     };
 };

package/dist/themes/themed-modal-dialog.d.ts

@@ -18,7 +18,6 @@ export declare const ModalDialogThemeContext: React.Context<{
         };
         border: {
             radius: number;
-            width: number;
         };
     };
     backdrop: {
@@ -51,16 +50,13 @@ export declare const ModalDialogThemeContext: React.Context<{
         };
     };
     panel: {
-        color: {
-            border: string;
-        };
         spacing: {
             gap: 32;
         };
     };
     closeButton: {
         spacing: {
-            gap: 16;
+            gap: 8;
         };
     };
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "7.1.4",
+  "version": "7.1.6",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -13,13 +13,14 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-breadcrumbs": "3.1.4",
+    "@khanacademy/wonder-blocks-breadcrumbs": "3.1.5",
     "@khanacademy/wonder-blocks-core": "12.2.1",
-    "@khanacademy/wonder-blocks-icon-button": "6.1.4",
-    "@khanacademy/wonder-blocks-layout": "3.1.4",
+    "@khanacademy/wonder-blocks-icon-button": "8.0.0",
+    "@khanacademy/wonder-blocks-layout": "3.1.5",
+    "@khanacademy/wonder-blocks-styles": "0.2.1",
     "@khanacademy/wonder-blocks-theming": "3.2.1",
     "@khanacademy/wonder-blocks-timing": "7.0.2",
-    "@khanacademy/wonder-blocks-tokens": "5.1.1",
+    "@khanacademy/wonder-blocks-tokens": "5.2.0",
     "@khanacademy/wonder-blocks-typography": "3.1.3"
   },
   "peerDependencies": {