@khanacademy/wonder-blocks-popover 5.2.2 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @khanacademy/wonder-blocks-popover
 
+## 6.0.1
+
+### Patch Changes
+
+- 4846e9c: Update icon buttons to use the new mapping (from `primary` to `tertiary`)
+- Updated dependencies [3dc5dac]
+- Updated dependencies [4846e9c]
+- Updated dependencies [4846e9c]
+- Updated dependencies [4846e9c]
+    - @khanacademy/wonder-blocks-tokens@5.2.0
+    - @khanacademy/wonder-blocks-modal@7.1.6
+    - @khanacademy/wonder-blocks-icon-button@8.0.0
+    - @khanacademy/wonder-blocks-styles@0.2.1
+    - @khanacademy/wonder-blocks-tooltip@4.1.6
+
+## 6.0.0
+
+### Major Changes
+
+- 46206d0: Remove `emphasized` variant from `PopoverContent` and `color` prop from `PopoverContentCore` as these are not currently used and no longer recommended
+
+### Patch 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]
+- Updated dependencies [86e1901]
+- Updated dependencies [61f7837]
+    - @khanacademy/wonder-blocks-icon-button@7.0.0
+    - @khanacademy/wonder-blocks-styles@0.2.0
+    - @khanacademy/wonder-blocks-modal@7.1.5
+    - @khanacademy/wonder-blocks-tooltip@4.1.5
+
 ## 5.2.2
 
 ### Patch Changes

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

@@ -1,11 +1,6 @@
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = AriaProps & {
-    /**
-     * Whether to display the light version of this component instead, for use
-     * when the item is used on a dark background.
-     */
-    light?: boolean;
     /**
      * Custom styles applied to the IconButton
      */
@@ -16,7 +11,6 @@ type Props = AriaProps & {
     testId?: string;
 };
 type DefaultProps = {
-    light: Props["light"];
     ["aria-label"]: Props["aria-label"];
 };
 /**

package/dist/components/popover-content-core.d.ts

@@ -17,11 +17,6 @@ type Props = AriaProps & {
      * When true, the close button is shown; otherwise, the close button is not shown.
      */
     closeButtonVisible?: boolean;
-    /**
-     * Whether we should use the default light color scheme or switch to a
-     * different color scheme.
-     */
-    color: "blue" | "darkBlue" | "white";
     /**
      * Custom styles applied to the content container
      */
@@ -32,7 +27,6 @@ type Props = AriaProps & {
     testId?: string;
 };
 type DefaultProps = {
-    color: Props["color"];
     closeButtonLight: Props["closeButtonLight"];
     closeButtonVisible: Props["closeButtonVisible"];
 };

package/dist/components/popover-content.d.ts

@@ -44,7 +44,7 @@ type CommonProps = AriaProps & {
      */
     uniqueId?: string;
 };
-type Props = (CommonProps & {
+type Props = CommonProps & {
     /**
      * Decorate the popover with an illustrated icon. It cannot be used at the
      * same time with image.
@@ -60,18 +60,7 @@ type Props = (CommonProps & {
      * the same time with icon.
      */
     image?: React.ReactElement<React.ComponentProps<"img">> | React.ReactElement<React.ComponentProps<"svg">>;
-    emphasized?: never;
-}) | (CommonProps & {
-    /**
-     * When true, changes the popover dialog background to blue; otherwise, the
-     * popover dialog background is not modified. It can be used only with
-     * Text-only popovers. It cannot be used with icon or image.
-     */
-    emphasized?: boolean;
-    icon?: never;
-    iconAlt?: never;
-    image?: never;
-});
+};
 type DefaultProps = {
     closeButtonVisible: Props["closeButtonVisible"];
 };

package/dist/es/index.js

@@ -7,6 +7,7 @@ import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-block
 import { StyleSheet } from 'aphrodite';
 import { spacing, semanticColor, color } from '@khanacademy/wonder-blocks-tokens';
 import { HeadingSmall, Body } from '@khanacademy/wonder-blocks-typography';
+import { actionStyles } from '@khanacademy/wonder-blocks-styles';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
@@ -76,7 +77,7 @@ class PopoverDialog extends React.Component {
       "aria-label": ariaLabel
     } = this.props;
     const contentProps = children.props;
-    const color = contentProps.emphasized ? "blue" : contentProps.color;
+    const color = contentProps.color;
     return React.createElement(React.Fragment, null, React.createElement(View, {
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby,
@@ -540,7 +541,6 @@ Popover.defaultProps = {
 class CloseButton extends React.Component {
   render() {
     const {
-      light,
       "aria-label": ariaLabel,
       style,
       testId
@@ -552,8 +552,8 @@ class CloseButton extends React.Component {
         icon: xIcon,
         "aria-label": ariaLabel,
         onClick: close,
-        kind: light ? "primary" : "tertiary",
-        light: light,
+        kind: "tertiary",
+        actionType: "neutral",
         style: style,
         testId: testId
       });
@@ -561,7 +561,6 @@ class CloseButton extends React.Component {
   }
 }
 CloseButton.defaultProps = {
-  light: true,
   "aria-label": "Close Popover"
 };
 
@@ -573,24 +572,21 @@ class PopoverContentCore extends React.Component {
       closeButtonLight,
       closeButtonLabel,
       closeButtonVisible,
-      color,
       style,
       testId
     } = this.props;
     return React.createElement(View, {
       testId: testId,
-      style: [styles$1.content, color !== "white" && styles$1[color], style],
+      style: [styles$1.content, style],
       "aria-label": ariaLabel
     }, closeButtonVisible && React.createElement(CloseButton, {
       "aria-label": closeButtonLabel,
-      light: closeButtonLight || color !== "white",
-      style: styles$1.closeButton,
+      style: [styles$1.closeButton, closeButtonLight && actionStyles.inverse],
       testId: `${testId || "popover"}-close-btn`
     }), children);
   }
 }
 PopoverContentCore.defaultProps = {
-  color: "white",
   closeButtonLight: false,
   closeButtonVisible: false
 };
@@ -606,14 +602,6 @@ const styles$1 = StyleSheet.create({
     overflow: "hidden",
     justifyContent: "center"
   },
-  blue: {
-    backgroundColor: semanticColor.surface.emphasis,
-    color: semanticColor.text.inverse
-  },
-  darkBlue: {
-    backgroundColor: semanticColor.surface.inverse,
-    color: semanticColor.text.inverse
-  },
   closeButton: {
     margin: 0,
     position: "absolute",
@@ -691,7 +679,6 @@ class PopoverContent extends React.Component {
       closeButtonLabel,
       closeButtonVisible,
       content,
-      emphasized = undefined,
       icon,
       image,
       style,
@@ -708,7 +695,6 @@ class PopoverContent extends React.Component {
         placement
       });
       return React.createElement(PopoverContentCore, {
-        color: emphasized ? "blue" : "white",
         closeButtonLight: image && placement === "top",
         closeButtonLabel: closeButtonLabel,
         closeButtonVisible: closeButtonVisible,

package/dist/index.js

@@ -11,6 +11,7 @@ var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
 var aphrodite = require('aphrodite');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 
@@ -106,7 +107,7 @@ class PopoverDialog extends React__namespace.Component {
       "aria-label": ariaLabel
     } = this.props;
     const contentProps = children.props;
-    const color = contentProps.emphasized ? "blue" : contentProps.color;
+    const color = contentProps.color;
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby,
@@ -570,7 +571,6 @@ Popover.defaultProps = {
 class CloseButton extends React__namespace.Component {
   render() {
     const {
-      light,
       "aria-label": ariaLabel,
       style,
       testId
@@ -582,8 +582,8 @@ class CloseButton extends React__namespace.Component {
         icon: xIcon__default["default"],
         "aria-label": ariaLabel,
         onClick: close,
-        kind: light ? "primary" : "tertiary",
-        light: light,
+        kind: "tertiary",
+        actionType: "neutral",
         style: style,
         testId: testId
       });
@@ -591,7 +591,6 @@ class CloseButton extends React__namespace.Component {
   }
 }
 CloseButton.defaultProps = {
-  light: true,
   "aria-label": "Close Popover"
 };
 
@@ -603,24 +602,21 @@ class PopoverContentCore extends React__namespace.Component {
       closeButtonLight,
       closeButtonLabel,
       closeButtonVisible,
-      color,
       style,
       testId
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       testId: testId,
-      style: [styles$1.content, color !== "white" && styles$1[color], style],
+      style: [styles$1.content, style],
       "aria-label": ariaLabel
     }, closeButtonVisible && React__namespace.createElement(CloseButton, {
       "aria-label": closeButtonLabel,
-      light: closeButtonLight || color !== "white",
-      style: styles$1.closeButton,
+      style: [styles$1.closeButton, closeButtonLight && wonderBlocksStyles.actionStyles.inverse],
       testId: `${testId || "popover"}-close-btn`
     }), children);
   }
 }
 PopoverContentCore.defaultProps = {
-  color: "white",
   closeButtonLight: false,
   closeButtonVisible: false
 };
@@ -636,14 +632,6 @@ const styles$1 = aphrodite.StyleSheet.create({
     overflow: "hidden",
     justifyContent: "center"
   },
-  blue: {
-    backgroundColor: wonderBlocksTokens.semanticColor.surface.emphasis,
-    color: wonderBlocksTokens.semanticColor.text.inverse
-  },
-  darkBlue: {
-    backgroundColor: wonderBlocksTokens.semanticColor.surface.inverse,
-    color: wonderBlocksTokens.semanticColor.text.inverse
-  },
   closeButton: {
     margin: 0,
     position: "absolute",
@@ -721,7 +709,6 @@ class PopoverContent extends React__namespace.Component {
       closeButtonLabel,
       closeButtonVisible,
       content,
-      emphasized = undefined,
       icon,
       image,
       style,
@@ -738,7 +725,6 @@ class PopoverContent extends React__namespace.Component {
         placement
       });
       return React__namespace.createElement(PopoverContentCore, {
-        color: emphasized ? "blue" : "white",
         closeButtonLight: image && placement === "top",
         closeButtonLabel: closeButtonLabel,
         closeButtonVisible: closeButtonVisible,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "5.2.2",
+  "version": "6.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,10 +14,11 @@
   "dependencies": {
     "@babel/runtime": "^7.24.5",
     "@khanacademy/wonder-blocks-core": "12.2.1",
-    "@khanacademy/wonder-blocks-icon-button": "6.1.4",
-    "@khanacademy/wonder-blocks-modal": "7.1.4",
-    "@khanacademy/wonder-blocks-tokens": "5.1.1",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.4",
+    "@khanacademy/wonder-blocks-icon-button": "8.0.0",
+    "@khanacademy/wonder-blocks-modal": "7.1.6",
+    "@khanacademy/wonder-blocks-styles": "0.2.1",
+    "@khanacademy/wonder-blocks-tokens": "5.2.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.6",
     "@khanacademy/wonder-blocks-typography": "3.1.3"
   },
   "peerDependencies": {