@khanacademy/wonder-blocks-popover 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @khanacademy/wonder-blocks-popover
 
+## 5.2.0
+
+### Minor Changes
+
+- a42d9f3: PopoverContent: Add `iconAlt` prop so alt text can be set on the icon
+
+### Patch Changes
+
+- fff5da0: Migrate to semanticColor tokens
+- Updated dependencies [ed26d66]
+- Updated dependencies [5655b9f]
+- Updated dependencies [5655b9f]
+- Updated dependencies [8f53293]
+- Updated dependencies [fff5da0]
+- Updated dependencies [6d37702]
+- Updated dependencies [051f0f8]
+- Updated dependencies [e1b78db]
+- Updated dependencies [8f53293]
+- Updated dependencies [051f0f8]
+    - @khanacademy/wonder-blocks-core@12.2.0
+    - @khanacademy/wonder-blocks-tokens@5.0.0
+    - @khanacademy/wonder-blocks-icon-button@6.1.2
+    - @khanacademy/wonder-blocks-modal@7.1.2
+    - @khanacademy/wonder-blocks-tooltip@4.1.2
+    - @khanacademy/wonder-blocks-typography@3.1.2
+
 ## 5.1.1
 
 ### Patch Changes

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

@@ -50,6 +50,11 @@ type Props = (CommonProps & {
      * same time with image.
      */
     icon?: string | React.ReactElement<React.ComponentProps<"img">> | React.ReactElement<React.ComponentProps<"svg">>;
+    /**
+     * Alt text for the icon. This prop is only used if the `icon` prop
+     * is passed a url (instead of a svg or img element).
+     */
+    iconAlt?: string;
     /**
      * Decorate the popover with a full-bleed illustration. It cannot be used at
      * the same time with icon.
@@ -64,6 +69,7 @@ type Props = (CommonProps & {
      */
     emphasized?: boolean;
     icon?: never;
+    iconAlt?: never;
     image?: never;
 });
 type DefaultProps = {

package/dist/es/index.js

@@ -5,7 +5,7 @@ import { View, Id, addStyle } from '@khanacademy/wonder-blocks-core';
 import { TooltipTail, TooltipPopper } from '@khanacademy/wonder-blocks-tooltip';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { StyleSheet } from 'aphrodite';
-import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, semanticColor, color } from '@khanacademy/wonder-blocks-tokens';
 import { HeadingSmall, Body } from '@khanacademy/wonder-blocks-typography';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
@@ -355,20 +355,21 @@ class FocusManager extends React.Component {
     const {
       children
     } = this.props;
-    return React.createElement("div", {
-      ref: this.getComponentRootNode,
-      onClick: () => {
-        this.changeFocusabilityInsidePopover(true);
-      },
-      onFocus: () => {
-        this.changeFocusabilityInsidePopover(true);
-      },
-      onBlur: () => {
-        this.changeFocusabilityInsidePopover(false);
-      }
-    }, React.createElement(InitialFocus, {
-      initialFocusId: this.props.initialFocusId
-    }, children));
+    return (React.createElement("div", {
+        ref: this.getComponentRootNode,
+        onClick: () => {
+          this.changeFocusabilityInsidePopover(true);
+        },
+        onFocus: () => {
+          this.changeFocusabilityInsidePopover(true);
+        },
+        onBlur: () => {
+          this.changeFocusabilityInsidePopover(false);
+        }
+      }, React.createElement(InitialFocus, {
+        initialFocusId: this.props.initialFocusId
+      }, children))
+    );
   }
 }
 
@@ -596,8 +597,8 @@ PopoverContentCore.defaultProps = {
 const styles$1 = StyleSheet.create({
   content: {
     borderRadius: spacing.xxxSmall_4,
-    border: `solid 1px ${color.offBlack16}`,
-    backgroundColor: color.white,
+    border: `solid 1px ${semanticColor.border.primary}`,
+    backgroundColor: semanticColor.surface.primary,
     boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
     margin: 0,
     maxWidth: spacing.medium_16 * 18,
@@ -606,12 +607,12 @@ const styles$1 = StyleSheet.create({
     justifyContent: "center"
   },
   blue: {
-    backgroundColor: color.blue,
-    color: color.white
+    backgroundColor: semanticColor.surface.emphasis,
+    color: semanticColor.text.inverse
   },
   darkBlue: {
-    backgroundColor: color.darkBlue,
-    color: color.white
+    backgroundColor: semanticColor.surface.inverse,
+    color: semanticColor.text.inverse
   },
   closeButton: {
     margin: 0,
@@ -641,7 +642,8 @@ class PopoverContent extends React.Component {
     };
     this.maybeRenderIcon = () => {
       const {
-        icon
+        icon,
+        iconAlt
       } = this.props;
       if (!icon) {
         return null;
@@ -650,7 +652,8 @@ class PopoverContent extends React.Component {
         style: styles.iconContainer
       }, typeof icon !== "string" ? icon : React.createElement(StyledImg, {
         src: icon,
-        style: styles.icon
+        style: styles.icon,
+        alt: iconAlt || ""
       }));
     };
     this.maybeRenderActions = close => {

package/dist/index.js

@@ -385,20 +385,21 @@ class FocusManager extends React__namespace.Component {
     const {
       children
     } = this.props;
-    return React__namespace.createElement("div", {
-      ref: this.getComponentRootNode,
-      onClick: () => {
-        this.changeFocusabilityInsidePopover(true);
-      },
-      onFocus: () => {
-        this.changeFocusabilityInsidePopover(true);
-      },
-      onBlur: () => {
-        this.changeFocusabilityInsidePopover(false);
-      }
-    }, React__namespace.createElement(InitialFocus, {
-      initialFocusId: this.props.initialFocusId
-    }, children));
+    return (React__namespace.createElement("div", {
+        ref: this.getComponentRootNode,
+        onClick: () => {
+          this.changeFocusabilityInsidePopover(true);
+        },
+        onFocus: () => {
+          this.changeFocusabilityInsidePopover(true);
+        },
+        onBlur: () => {
+          this.changeFocusabilityInsidePopover(false);
+        }
+      }, React__namespace.createElement(InitialFocus, {
+        initialFocusId: this.props.initialFocusId
+      }, children))
+    );
   }
 }
 
@@ -626,8 +627,8 @@ PopoverContentCore.defaultProps = {
 const styles$1 = aphrodite.StyleSheet.create({
   content: {
     borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
-    border: `solid 1px ${wonderBlocksTokens.color.offBlack16}`,
-    backgroundColor: wonderBlocksTokens.color.white,
+    border: `solid 1px ${wonderBlocksTokens.semanticColor.border.primary}`,
+    backgroundColor: wonderBlocksTokens.semanticColor.surface.primary,
     boxShadow: `0 ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0 ${wonderBlocksTokens.color.offBlack8}`,
     margin: 0,
     maxWidth: wonderBlocksTokens.spacing.medium_16 * 18,
@@ -636,12 +637,12 @@ const styles$1 = aphrodite.StyleSheet.create({
     justifyContent: "center"
   },
   blue: {
-    backgroundColor: wonderBlocksTokens.color.blue,
-    color: wonderBlocksTokens.color.white
+    backgroundColor: wonderBlocksTokens.semanticColor.surface.emphasis,
+    color: wonderBlocksTokens.semanticColor.text.inverse
   },
   darkBlue: {
-    backgroundColor: wonderBlocksTokens.color.darkBlue,
-    color: wonderBlocksTokens.color.white
+    backgroundColor: wonderBlocksTokens.semanticColor.surface.inverse,
+    color: wonderBlocksTokens.semanticColor.text.inverse
   },
   closeButton: {
     margin: 0,
@@ -671,7 +672,8 @@ class PopoverContent extends React__namespace.Component {
     };
     this.maybeRenderIcon = () => {
       const {
-        icon
+        icon,
+        iconAlt
       } = this.props;
       if (!icon) {
         return null;
@@ -680,7 +682,8 @@ class PopoverContent extends React__namespace.Component {
         style: styles.iconContainer
       }, typeof icon !== "string" ? icon : React__namespace.createElement(StyledImg, {
         src: icon,
-        style: styles.icon
+        style: styles.icon,
+        alt: iconAlt || ""
       }));
     };
     this.maybeRenderActions = close => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,12 +13,12 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.1.1",
-    "@khanacademy/wonder-blocks-icon-button": "6.1.1",
-    "@khanacademy/wonder-blocks-modal": "7.1.1",
-    "@khanacademy/wonder-blocks-tokens": "4.2.1",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.1",
-    "@khanacademy/wonder-blocks-typography": "3.1.1"
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-icon-button": "6.1.2",
+    "@khanacademy/wonder-blocks-modal": "7.1.2",
+    "@khanacademy/wonder-blocks-tokens": "5.0.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.2",
+    "@khanacademy/wonder-blocks-typography": "3.1.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",