@khanacademy/wonder-blocks-button 7.1.6 → 8.0.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @khanacademy/wonder-blocks-button
 
+## 8.0.1
+
+### Patch Changes
+
+- e8ccf60: - Update `Button.large` to use `radius_40` (4px, 0.4rem) instead of `6px`.
+    - Update `Button.small (khanmigo)` to use `radius_80` (8px, 0.8rem) instead of `6px`.
+- Updated dependencies [e8ccf60]
+    - @khanacademy/wonder-blocks-tokens@7.0.0
+    - @khanacademy/wonder-blocks-clickable@7.0.1
+    - @khanacademy/wonder-blocks-progress-spinner@3.1.7
+
+## 8.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
+
 ## 7.1.6
 
 ### Patch Changes

package/dist/components/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 { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
 import type { SharedProps } from "./button";
 import { ButtonThemeContract } from "../themes/themed-button";

package/dist/components/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import type { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 export type SharedProps = 
 /**
  * aria-label should be used when `spinner={true}` to let people using screen

package/dist/es/index.js

@@ -1,10 +1,9 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
+import { Link, useInRouterContext } from 'react-router-dom-v5-compat';
 import { StyleSheet } from 'aphrodite';
-import { Link } from 'react-router-dom';
 import { LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
@@ -210,10 +209,10 @@ const theme$1 = {
       secondary: -tokens.spacing.xxxxSmall_2
     },
     radius: {
-      default: tokens.border.radius.medium_4,
-      small: tokens.border.radius.medium_4,
-      large: tokens.border.radius.large_6,
-      icon: tokens.border.radius.full
+      default: tokens.border.radius.radius_040,
+      small: tokens.border.radius.radius_040,
+      large: tokens.border.radius.radius_040,
+      icon: tokens.border.radius.radius_full
     }
   },
   size: {
@@ -293,9 +292,9 @@ const theme = mergeTheme(theme$1, {
   },
   border: {
     radius: {
-      default: tokens.border.radius.xLarge_12,
-      small: tokens.border.radius.large_6,
-      large: tokens.border.radius.xLarge_12
+      default: tokens.border.radius.radius_120,
+      small: tokens.border.radius.radius_080,
+      large: tokens.border.radius.radius_120
     },
     width: {
       focused: tokens.border.width.hairline
@@ -363,87 +362,85 @@ const ButtonCore = React.forwardRef(function ButtonCore(props, ref) {
     themeName
   } = useScopedTheme(ButtonThemeContext);
   const sharedStyles = useStyles(themedSharedStyles, theme);
-  const renderInner = router => {
-    const {
-        children,
-        skipClientNav,
-        color,
-        disabled: disabledProp,
-        focused,
-        hovered,
-        href = undefined,
-        kind = "primary",
-        labelStyle,
-        light = false,
-        pressed,
-        size = "medium",
-        style,
-        testId,
-        type = undefined,
-        spinner,
-        startIcon,
-        endIcon,
-        id
-      } = props,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-    const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
-    const disabled = spinner || disabledProp;
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
-    const commonProps = _extends({
-      "data-testid": testId,
-      id: id,
-      role: "button",
-      style: [defaultStyle, style]
-    }, restProps);
-    const Label = size === "small" ? LabelSmall : LabelLarge;
-    const label = React.createElement(Label, {
-      style: [sharedStyles.text, size === "small" && sharedStyles.smallText, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
-      testId: testId ? `${testId}-inner-label` : undefined
-    }, children);
-    const sizeMapping = {
-      medium: "small",
-      small: "xsmall",
-      large: "medium"
-    };
-    const iconSize = size === "small" ? "small" : "medium";
-    const contents = React.createElement(React.Fragment, null, startIcon && React.createElement(View, {
-      style: sharedStyles.iconWrapper
-    }, React.createElement(ButtonIcon, {
-      size: iconSize,
-      icon: startIcon,
-      style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
-      testId: testId ? `${testId}-start-icon` : undefined
-    })), label, spinner && React.createElement(CircularSpinner, {
-      style: sharedStyles.spinner,
-      size: sizeMapping[size],
-      light: kind === "primary",
-      testId: `${testId || "button"}-spinner`
-    }), endIcon && React.createElement(View, {
-      testId: testId ? `${testId}-end-icon-wrapper` : undefined,
-      style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
-    }, React.createElement(ButtonIcon, {
-      size: iconSize,
-      icon: endIcon,
-      testId: testId ? `${testId}-end-icon` : undefined
-    })));
-    if (href && !disabled) {
-      return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
-        to: href,
-        ref: ref
-      }), contents) : React.createElement(StyledA, _extends({}, commonProps, {
-        href: href,
-        ref: ref
-      }), contents);
-    } else {
-      return React.createElement(StyledButton, _extends({
-        type: type || "button"
-      }, commonProps, {
-        "aria-disabled": disabled,
-        ref: ref
-      }), contents);
-    }
+  const inRouterContext = useInRouterContext();
+  const {
+      children,
+      skipClientNav,
+      color,
+      disabled: disabledProp,
+      focused,
+      hovered,
+      href = undefined,
+      kind = "primary",
+      labelStyle,
+      light = false,
+      pressed,
+      size = "medium",
+      style,
+      testId,
+      type = undefined,
+      spinner,
+      startIcon,
+      endIcon,
+      id
+    } = props,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
+  const disabled = spinner || disabledProp;
+  const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
+  const commonProps = _extends({
+    "data-testid": testId,
+    id: id,
+    role: "button",
+    style: [defaultStyle, style]
+  }, restProps);
+  const Label = size === "small" ? LabelSmall : LabelLarge;
+  const label = React.createElement(Label, {
+    style: [sharedStyles.text, size === "small" && sharedStyles.smallText, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
+    testId: testId ? `${testId}-inner-label` : undefined
+  }, children);
+  const sizeMapping = {
+    medium: "small",
+    small: "xsmall",
+    large: "medium"
   };
-  return React.createElement(__RouterContext.Consumer, null, router => renderInner(router));
+  const iconSize = size === "small" ? "small" : "medium";
+  const contents = React.createElement(React.Fragment, null, startIcon && React.createElement(View, {
+    style: sharedStyles.iconWrapper
+  }, React.createElement(ButtonIcon, {
+    size: iconSize,
+    icon: startIcon,
+    style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
+    testId: testId ? `${testId}-start-icon` : undefined
+  })), label, spinner && React.createElement(CircularSpinner, {
+    style: sharedStyles.spinner,
+    size: sizeMapping[size],
+    light: kind === "primary",
+    testId: `${testId || "button"}-spinner`
+  }), endIcon && React.createElement(View, {
+    testId: testId ? `${testId}-end-icon-wrapper` : undefined,
+    style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
+  }, React.createElement(ButtonIcon, {
+    size: iconSize,
+    icon: endIcon,
+    testId: testId ? `${testId}-end-icon` : undefined
+  })));
+  if (href && !disabled) {
+    return inRouterContext && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
+      to: href,
+      ref: ref
+    }), contents) : React.createElement(StyledA, _extends({}, commonProps, {
+      href: href,
+      ref: ref
+    }), contents);
+  } else {
+    return React.createElement(StyledButton, _extends({
+      type: type || "button"
+    }, commonProps, {
+      "aria-disabled": disabled,
+      ref: ref
+    }), contents);
+  }
 });
 const themedSharedStyles = theme => ({
   shared: {
@@ -686,49 +683,47 @@ const Button = React.forwardRef(function Button(props, ref) {
       spinner = false
     } = props,
     sharedButtonCoreProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const renderClickableBehavior = router => {
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-    const renderProp = (state, restChildProps) => {
-      return React.createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
-        disabled: disabled,
-        spinner: spinner || state.waiting,
-        color: color,
-        kind: kind,
-        light: light,
-        size: size,
-        skipClientNav: skipClientNav,
-        href: href,
-        target: target,
-        type: type,
-        tabIndex: tabIndex,
-        ref: ref
-      }), children);
-    };
-    if (beforeNav) {
-      return React.createElement(ClickableBehavior, {
-        disabled: spinner || disabled,
-        href: href,
-        role: "button",
-        type: type,
-        onClick: onClick,
-        beforeNav: beforeNav,
-        safeWithNav: safeWithNav,
-        rel: rel
-      }, renderProp);
-    } else {
-      return React.createElement(ClickableBehavior, {
-        disabled: spinner || disabled,
-        href: href,
-        role: "button",
-        type: type,
-        onClick: onClick,
-        safeWithNav: safeWithNav,
-        target: target,
-        rel: rel
-      }, renderProp);
-    }
+  const inRouterContext = useInRouterContext();
+  const ClickableBehavior = getClickableBehavior(href, skipClientNav, inRouterContext);
+  const renderProp = (state, restChildProps) => {
+    return React.createElement(ThemedButton, null, React.createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
+      disabled: disabled,
+      spinner: spinner || state.waiting,
+      color: color,
+      kind: kind,
+      light: light,
+      size: size,
+      skipClientNav: skipClientNav,
+      href: href,
+      target: target,
+      type: type,
+      tabIndex: tabIndex,
+      ref: ref
+    }), children));
   };
-  return React.createElement(ThemedButton, null, React.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router)));
+  if (beforeNav) {
+    return React.createElement(ClickableBehavior, {
+      disabled: spinner || disabled,
+      href: href,
+      role: "button",
+      type: type,
+      onClick: onClick,
+      beforeNav: beforeNav,
+      safeWithNav: safeWithNav,
+      rel: rel
+    }, renderProp);
+  } else {
+    return React.createElement(ClickableBehavior, {
+      disabled: spinner || disabled,
+      href: href,
+      role: "button",
+      type: type,
+      onClick: onClick,
+      safeWithNav: safeWithNav,
+      target: target,
+      rel: rel
+    }, renderProp);
+  }
 });
 
 export { Button as default };

package/dist/index.js

@@ -3,10 +3,9 @@
 var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
-var reactRouter = require('react-router');
 var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
+var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
 var aphrodite = require('aphrodite');
-var reactRouterDom = require('react-router-dom');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
@@ -237,10 +236,10 @@ const theme$1 = {
       secondary: -tokens__namespace.spacing.xxxxSmall_2
     },
     radius: {
-      default: tokens__namespace.border.radius.medium_4,
-      small: tokens__namespace.border.radius.medium_4,
-      large: tokens__namespace.border.radius.large_6,
-      icon: tokens__namespace.border.radius.full
+      default: tokens__namespace.border.radius.radius_040,
+      small: tokens__namespace.border.radius.radius_040,
+      large: tokens__namespace.border.radius.radius_040,
+      icon: tokens__namespace.border.radius.radius_full
     }
   },
   size: {
@@ -320,9 +319,9 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
   },
   border: {
     radius: {
-      default: tokens__namespace.border.radius.xLarge_12,
-      small: tokens__namespace.border.radius.large_6,
-      large: tokens__namespace.border.radius.xLarge_12
+      default: tokens__namespace.border.radius.radius_120,
+      small: tokens__namespace.border.radius.radius_080,
+      large: tokens__namespace.border.radius.radius_120
     },
     width: {
       focused: tokens__namespace.border.width.hairline
@@ -383,94 +382,92 @@ function ButtonIcon({
 const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
 const StyledA = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
-const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
+const StyledLink = wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);
 const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
   const {
     theme,
     themeName
   } = wonderBlocksTheming.useScopedTheme(ButtonThemeContext);
   const sharedStyles = wonderBlocksTheming.useStyles(themedSharedStyles, theme);
-  const renderInner = router => {
-    const {
-        children,
-        skipClientNav,
-        color,
-        disabled: disabledProp,
-        focused,
-        hovered,
-        href = undefined,
-        kind = "primary",
-        labelStyle,
-        light = false,
-        pressed,
-        size = "medium",
-        style,
-        testId,
-        type = undefined,
-        spinner,
-        startIcon,
-        endIcon,
-        id
-      } = props,
-      restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
-    const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
-    const disabled = spinner || disabledProp;
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
-    const commonProps = _extends__default["default"]({
-      "data-testid": testId,
-      id: id,
-      role: "button",
-      style: [defaultStyle, style]
-    }, restProps);
-    const Label = size === "small" ? wonderBlocksTypography.LabelSmall : wonderBlocksTypography.LabelLarge;
-    const label = React__namespace.createElement(Label, {
-      style: [sharedStyles.text, size === "small" && sharedStyles.smallText, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
-      testId: testId ? `${testId}-inner-label` : undefined
-    }, children);
-    const sizeMapping = {
-      medium: "small",
-      small: "xsmall",
-      large: "medium"
-    };
-    const iconSize = size === "small" ? "small" : "medium";
-    const contents = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(wonderBlocksCore.View, {
-      style: sharedStyles.iconWrapper
-    }, React__namespace.createElement(ButtonIcon, {
-      size: iconSize,
-      icon: startIcon,
-      style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
-      testId: testId ? `${testId}-start-icon` : undefined
-    })), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
-      style: sharedStyles.spinner,
-      size: sizeMapping[size],
-      light: kind === "primary",
-      testId: `${testId || "button"}-spinner`
-    }), endIcon && React__namespace.createElement(wonderBlocksCore.View, {
-      testId: testId ? `${testId}-end-icon-wrapper` : undefined,
-      style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
-    }, React__namespace.createElement(ButtonIcon, {
-      size: iconSize,
-      icon: endIcon,
-      testId: testId ? `${testId}-end-icon` : undefined
-    })));
-    if (href && !disabled) {
-      return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
-        to: href,
-        ref: ref
-      }), contents) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
-        href: href,
-        ref: ref
-      }), contents);
-    } else {
-      return React__namespace.createElement(StyledButton, _extends__default["default"]({
-        type: type || "button"
-      }, commonProps, {
-        "aria-disabled": disabled,
-        ref: ref
-      }), contents);
-    }
+  const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
+  const {
+      children,
+      skipClientNav,
+      color,
+      disabled: disabledProp,
+      focused,
+      hovered,
+      href = undefined,
+      kind = "primary",
+      labelStyle,
+      light = false,
+      pressed,
+      size = "medium",
+      style,
+      testId,
+      type = undefined,
+      spinner,
+      startIcon,
+      endIcon,
+      id
+    } = props,
+    restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+  const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
+  const disabled = spinner || disabledProp;
+  const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
+  const commonProps = _extends__default["default"]({
+    "data-testid": testId,
+    id: id,
+    role: "button",
+    style: [defaultStyle, style]
+  }, restProps);
+  const Label = size === "small" ? wonderBlocksTypography.LabelSmall : wonderBlocksTypography.LabelLarge;
+  const label = React__namespace.createElement(Label, {
+    style: [sharedStyles.text, size === "small" && sharedStyles.smallText, size === "large" && sharedStyles.largeText, labelStyle, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
+    testId: testId ? `${testId}-inner-label` : undefined
+  }, children);
+  const sizeMapping = {
+    medium: "small",
+    small: "xsmall",
+    large: "medium"
   };
-  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderInner(router));
+  const iconSize = size === "small" ? "small" : "medium";
+  const contents = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(wonderBlocksCore.View, {
+    style: sharedStyles.iconWrapper
+  }, React__namespace.createElement(ButtonIcon, {
+    size: iconSize,
+    icon: startIcon,
+    style: [sharedStyles.startIcon, kind === "tertiary" && sharedStyles.tertiaryStartIcon],
+    testId: testId ? `${testId}-start-icon` : undefined
+  })), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
+    style: sharedStyles.spinner,
+    size: sizeMapping[size],
+    light: kind === "primary",
+    testId: `${testId || "button"}-spinner`
+  }), endIcon && React__namespace.createElement(wonderBlocksCore.View, {
+    testId: testId ? `${testId}-end-icon-wrapper` : undefined,
+    style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
+  }, React__namespace.createElement(ButtonIcon, {
+    size: iconSize,
+    icon: endIcon,
+    testId: testId ? `${testId}-end-icon` : undefined
+  })));
+  if (href && !disabled) {
+    return inRouterContext && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
+      to: href,
+      ref: ref
+    }), contents) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
+      href: href,
+      ref: ref
+    }), contents);
+  } else {
+    return React__namespace.createElement(StyledButton, _extends__default["default"]({
+      type: type || "button"
+    }, commonProps, {
+      "aria-disabled": disabled,
+      ref: ref
+    }), contents);
+  }
 });
 const themedSharedStyles = theme => ({
   shared: {
@@ -713,49 +710,47 @@ const Button = React__namespace.forwardRef(function Button(props, ref) {
       spinner = false
     } = props,
     sharedButtonCoreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const renderClickableBehavior = router => {
-    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
-    const renderProp = (state, restChildProps) => {
-      return React__namespace.createElement(ButtonCore, _extends__default["default"]({}, sharedButtonCoreProps, state, restChildProps, {
-        disabled: disabled,
-        spinner: spinner || state.waiting,
-        color: color,
-        kind: kind,
-        light: light,
-        size: size,
-        skipClientNav: skipClientNav,
-        href: href,
-        target: target,
-        type: type,
-        tabIndex: tabIndex,
-        ref: ref
-      }), children);
-    };
-    if (beforeNav) {
-      return React__namespace.createElement(ClickableBehavior, {
-        disabled: spinner || disabled,
-        href: href,
-        role: "button",
-        type: type,
-        onClick: onClick,
-        beforeNav: beforeNav,
-        safeWithNav: safeWithNav,
-        rel: rel
-      }, renderProp);
-    } else {
-      return React__namespace.createElement(ClickableBehavior, {
-        disabled: spinner || disabled,
-        href: href,
-        role: "button",
-        type: type,
-        onClick: onClick,
-        safeWithNav: safeWithNav,
-        target: target,
-        rel: rel
-      }, renderProp);
-    }
+  const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
+  const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, inRouterContext);
+  const renderProp = (state, restChildProps) => {
+    return React__namespace.createElement(ThemedButton, null, React__namespace.createElement(ButtonCore, _extends__default["default"]({}, sharedButtonCoreProps, state, restChildProps, {
+      disabled: disabled,
+      spinner: spinner || state.waiting,
+      color: color,
+      kind: kind,
+      light: light,
+      size: size,
+      skipClientNav: skipClientNav,
+      href: href,
+      target: target,
+      type: type,
+      tabIndex: tabIndex,
+      ref: ref
+    }), children));
   };
-  return React__namespace.createElement(ThemedButton, null, React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router)));
+  if (beforeNav) {
+    return React__namespace.createElement(ClickableBehavior, {
+      disabled: spinner || disabled,
+      href: href,
+      role: "button",
+      type: type,
+      onClick: onClick,
+      beforeNav: beforeNav,
+      safeWithNav: safeWithNav,
+      rel: rel
+    }, renderProp);
+  } else {
+    return React__namespace.createElement(ClickableBehavior, {
+      disabled: spinner || disabled,
+      href: href,
+      role: "button",
+      type: type,
+      onClick: onClick,
+      safeWithNav: safeWithNav,
+      target: target,
+      rel: rel
+    }, renderProp);
+  }
 });
 
 module.exports = Button;

package/dist/themes/default.d.ts

@@ -320,9 +320,9 @@ declare const theme: {
             secondary: number;
         };
         radius: {
-            default: number;
-            small: number;
-            large: number;
+            default: string;
+            small: string;
+            large: string;
             /**
              * Icons
              */

package/dist/themes/khanmigo.d.ts

@@ -310,9 +310,9 @@ declare const theme: {
             secondary: number;
         };
         radius: {
-            default: number;
-            small: number;
-            large: number;
+            default: string;
+            small: string;
+            large: string;
             icon: string;
         };
     };

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

@@ -317,9 +317,9 @@ export declare const ButtonThemeContext: React.Context<{
             secondary: number;
         };
         radius: {
-            default: number;
-            small: number;
-            large: number;
+            default: string;
+            small: string;
+            large: string;
             icon: string;
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "7.1.6",
+  "version": "8.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,19 +13,20 @@
   "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-progress-spinner": "3.1.6",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.7",
     "@khanacademy/wonder-blocks-theming": "3.2.1",
-    "@khanacademy/wonder-blocks-tokens": "6.0.0",
+    "@khanacademy/wonder-blocks-tokens": "7.0.0",
     "@khanacademy/wonder-blocks-typography": "3.1.3"
   },
   "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"