@khanacademy/wonder-blocks-icon-button 8.0.1 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 9.0.1
+
+### Patch Changes
+
+- e8ccf60: Update `borderRadius` styles to use new `border.radius` tokens
+- Updated dependencies [e8ccf60]
+- Updated dependencies [e8ccf60]
+    - @khanacademy/wonder-blocks-styles@0.2.3
+    - @khanacademy/wonder-blocks-tokens@7.0.0
+    - @khanacademy/wonder-blocks-clickable@7.0.1
+
+## 9.0.0
+
+### Major Changes
+
+- 38c926c: Upgrade WB to using react-router-dom-v5-compat.
+
+### Patch Changes
+
+- Updated dependencies [38c926c]
+    - @khanacademy/wonder-blocks-clickable@7.0.0
+    - @khanacademy/wonder-blocks-core@12.2.1
+
 ## 8.0.1
 
 ### Patch Changes

package/dist/components/icon-button-core.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import type { SharedProps } from "./icon-button";
 type Props = SharedProps & {
     /**

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 export type IconButtonSize = "xsmall" | "small" | "medium" | "large";
 export type IconButtonActionType = "progressive" | "destructive" | "neutral";
 export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {

package/dist/es/index.js

@@ -2,8 +2,7 @@ import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
-import { Link } from 'react-router-dom';
-import { __RouterContext } from 'react-router';
+import { Link, useInRouterContext } from 'react-router-dom-v5-compat';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import { isClientSideUrl } from '@khanacademy/wonder-blocks-clickable';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
@@ -56,7 +55,7 @@ const theme = {
       }
     },
     radius: {
-      default: border.radius.medium_4
+      default: border.radius.radius_040
     }
   }
 };
@@ -117,36 +116,34 @@ const IconButtonCore = React.forwardRef(function IconButtonCore(props, ref) {
     theme,
     themeName
   } = useScopedTheme(IconButtonThemeContext);
-  const renderInner = router => {
-    const buttonStyles = _generateStyles(actionType, !!disabled, kind, size, theme, themeName);
-    const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled];
-    const child = React.createElement(IconChooser, {
-      size: size,
-      icon: icon
-    });
-    const commonProps = _extends({
-      "data-testid": testId,
-      style: [defaultStyle, style]
-    }, restProps);
-    if (href && !disabled) {
-      return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
-        to: href,
-        ref: ref
-      }), child) : React.createElement(StyledA, _extends({}, commonProps, {
-        href: href,
-        ref: ref
-      }), child);
-    } else {
-      return React.createElement(StyledButton, _extends({
-        type: type
-      }, commonProps, {
-        onClick: disabled ? undefined : restProps.onClick,
-        "aria-disabled": disabled,
-        ref: ref
-      }), child);
-    }
-  };
-  return React.createElement(__RouterContext.Consumer, null, router => renderInner(router));
+  const inRouterContext = useInRouterContext();
+  const buttonStyles = _generateStyles(actionType, !!disabled, kind, size, theme, themeName);
+  const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled];
+  const child = React.createElement(IconChooser, {
+    size: size,
+    icon: icon
+  });
+  const commonProps = _extends({
+    "data-testid": testId,
+    style: [defaultStyle, style]
+  }, restProps);
+  if (href && !disabled) {
+    return inRouterContext && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
+      to: href,
+      ref: ref
+    }), child) : React.createElement(StyledA, _extends({}, commonProps, {
+      href: href,
+      ref: ref
+    }), child);
+  } else {
+    return React.createElement(StyledButton, _extends({
+      type: type
+    }, commonProps, {
+      onClick: disabled ? undefined : restProps.onClick,
+      "aria-disabled": disabled,
+      ref: ref
+    }), child);
+  }
 });
 const sharedStyles = StyleSheet.create({
   shared: {

package/dist/index.js

@@ -4,8 +4,7 @@ var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
 var aphrodite = require('aphrodite');
-var reactRouterDom = require('react-router-dom');
-var reactRouter = require('react-router');
+var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
@@ -82,7 +81,7 @@ const theme = {
       }
     },
     radius: {
-      default: wonderBlocksTokens.border.radius.medium_4
+      default: wonderBlocksTokens.border.radius.radius_040
     }
   }
 };
@@ -124,7 +123,7 @@ function IconChooser({
 }
 const StyledA = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
-const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
+const StyledLink = wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);
 const IconButtonCore = React__namespace.forwardRef(function IconButtonCore(props, ref) {
   const {
       actionType,
@@ -143,36 +142,34 @@ const IconButtonCore = React__namespace.forwardRef(function IconButtonCore(props
     theme,
     themeName
   } = wonderBlocksTheming.useScopedTheme(IconButtonThemeContext);
-  const renderInner = router => {
-    const buttonStyles = _generateStyles(actionType, !!disabled, kind, size, theme, themeName);
-    const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled];
-    const child = React__namespace.createElement(IconChooser, {
-      size: size,
-      icon: icon
-    });
-    const commonProps = _extends__default["default"]({
-      "data-testid": testId,
-      style: [defaultStyle, style]
-    }, restProps);
-    if (href && !disabled) {
-      return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
-        to: href,
-        ref: ref
-      }), child) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
-        href: href,
-        ref: ref
-      }), child);
-    } else {
-      return React__namespace.createElement(StyledButton, _extends__default["default"]({
-        type: type
-      }, commonProps, {
-        onClick: disabled ? undefined : restProps.onClick,
-        "aria-disabled": disabled,
-        ref: ref
-      }), child);
-    }
-  };
-  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderInner(router));
+  const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
+  const buttonStyles = _generateStyles(actionType, !!disabled, kind, size, theme, themeName);
+  const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled];
+  const child = React__namespace.createElement(IconChooser, {
+    size: size,
+    icon: icon
+  });
+  const commonProps = _extends__default["default"]({
+    "data-testid": testId,
+    style: [defaultStyle, style]
+  }, restProps);
+  if (href && !disabled) {
+    return inRouterContext && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
+      to: href,
+      ref: ref
+    }), child) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
+      href: href,
+      ref: ref
+    }), child);
+  } else {
+    return React__namespace.createElement(StyledButton, _extends__default["default"]({
+      type: type
+    }, commonProps, {
+      onClick: disabled ? undefined : restProps.onClick,
+      "aria-disabled": disabled,
+      ref: ref
+    }), child);
+  }
 });
 const sharedStyles = aphrodite.StyleSheet.create({
   shared: {

package/dist/themes/default.d.ts

@@ -199,7 +199,7 @@ declare const theme: {
             };
         };
         radius: {
-            default: number;
+            default: string;
         };
     };
 };

package/dist/themes/themed-icon-button.d.ts

@@ -209,7 +209,7 @@ export declare const IconButtonThemeContext: React.Context<{
             };
         };
         radius: {
-            default: number;
+            default: string;
         };
     };
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "8.0.1",
+  "version": "9.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,18 +13,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-clickable": "6.1.6",
+    "@khanacademy/wonder-blocks-clickable": "7.0.1",
     "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
-    "@khanacademy/wonder-blocks-styles": "0.2.2",
+    "@khanacademy/wonder-blocks-styles": "0.2.3",
     "@khanacademy/wonder-blocks-theming": "3.2.1",
-    "@khanacademy/wonder-blocks-tokens": "6.0.0"
+    "@khanacademy/wonder-blocks-tokens": "7.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "18.2.0",
     "react-router": "5.3.4",
-    "react-router-dom": "5.3.4"
+    "react-router-dom": "5.3.4",
+    "react-router-dom-v5-compat": "^6.30.0"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "2.1.1"