@telus-uds/components-base 1.53.0 → 1.55.0

package/lib/Button/ButtonBase.js

@@ -232,19 +232,29 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   });
 };
 
-const selectItemIconTokens = _ref9 => {
+const selectButtonStyles = _ref9 => {
+  let {
+    textAlign
+  } = _ref9;
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  };
+};
+
+const selectItemIconTokens = _ref10 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref9;
+  } = _ref10;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
 
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
   let {
     id,
     href,
@@ -259,7 +269,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref10;
+  } = _ref11;
 
   const {
     onPress,
@@ -308,6 +318,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
+      const rowStyles = selectButtonStyles(themeTokens);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
@@ -315,7 +326,8 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
             maxWidth: '100%',
             // ensure overflowing content wraps
             // TODO: https://github.com/telus/universal-design-system/issues/487
-            transition: 'background-color 200ms, border-color 200ms'
+            transition: 'background-color 200ms, border-color 200ms',
+            ...rowStyles
           }
         })],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -27,7 +27,10 @@ const CarouselStepTracker = _ref => {
     activeIndex,
     totalItems,
     getCopyWithPlaceholders,
-    themeTokens
+    themeTokens: {
+      stepTrackerCurrentBackgroundColor,
+      ...themeTokens
+    }
   } = (0, _CarouselContext.useCarousel)();
   const stackViewTokens = {
     justifyContent: 'center'
@@ -35,7 +38,8 @@ const CarouselStepTracker = _ref => {
   const stepTrackerTokens = {
     showStepLabel: false,
     showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
+    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
+    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
     connectorCompletedColor: 'none',
     connectorColor: 'none',
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -39,19 +39,20 @@ const CarouselTabsPanel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _CarouselContext.useCarousel)();
   const nextFocusRef = (0, _react.useRef)();
   const firstTabRef = (0, _react.useRef)();
-  const [isInverse, setIsInverse] = (0, _react.useState)(false); // TODO: figure out a better cross-brand way to specify subcomponent variants.
-  // For now, this picks an Allium variant, and does nothing in brands that lack it.
-  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
-
-  const dividerVariant = {
-    decorative: true
-  };
+  const [isInverse, setIsInverse] = (0, _react.useState)(false);
   const lastTabSelected = activeIndex === items.length - 1; // Get current select tab style
 
   (0, _react.useEffect)(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
     setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
-  }, [items, activeIndex]);
+  }, [items, activeIndex]); // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+
+  const dividerVariant = {
+    decorative: true,
+    inverse: isInverse
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectTabPanelStyle(),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {

package/lib/Carousel/CarouselThumbnail.js

@@ -15,29 +15,52 @@ var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/I
 
 var _CarouselContext = require("./CarouselContext");
 
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const selectPressableTokens = _ref => {
+  let {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    margin,
+    padding
+  } = _ref;
+  return {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    margin,
+    padding
+  };
+};
 /**
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = _ref => {
+
+
+const CarouselThumbnail = _ref2 => {
   let {
     accessibilityLabel,
     alt,
     index,
     src
-  } = _ref;
+  } = _ref2;
   const {
     activeIndex,
     itemLabel,
     totalItems,
     getCopyWithPlaceholders,
-    goTo,
-    themeTokens
+    goTo
   } = (0, _CarouselContext.useCarousel)();
+  const getThumbnailTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselThumbnail');
+  const viewport = (0, _ViewportProvider.useViewport)();
   const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
 
   const handlePress = () => goTo(index);
@@ -48,37 +71,41 @@ const CarouselThumbnail = _ref => {
   };
 
   const {
-    thumbnailBorderColor,
-    thumbnailBorderRadius,
-    thumbnailBorderWidth,
-    thumbnailMargin,
-    thumbnailPadding,
-    thumbnailSelectedBorderColor,
-    thumbnailSelectedBorderWidth,
-    thumbnailSize
-  } = themeTokens;
+    borderWidth,
+    padding,
+    selectedBorderColor,
+    selectedBorderWidth,
+    size
+  } = getThumbnailTokens({
+    viewport
+  });
   const styles = {
-    pressable: {
-      borderColor: thumbnailBorderColor,
-      borderRadius: thumbnailBorderRadius,
-      borderWidth: thumbnailBorderWidth,
-      margin: thumbnailMargin,
-      padding: thumbnailPadding
-    },
     image: {
-      height: thumbnailSize,
-      width: thumbnailSize
+      height: size,
+      width: size
     },
     selected: {
-      borderColor: thumbnailSelectedBorderColor,
-      borderWidth: thumbnailSelectedBorderWidth,
-      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+      borderColor: selectedBorderColor,
+      borderWidth: selectedBorderWidth,
+      padding: padding - selectedBorderWidth + borderWidth
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     onKeyDown: handleKeyDown,
     onPress: handlePress,
-    style: [styles.pressable, index === activeIndex && styles.selected],
+    style: _ref3 => {
+      let {
+        hovered,
+        pressed,
+        focused
+      } = _ref3;
+      const pressableStyles = selectPressableTokens(getThumbnailTokens({
+        hover: hovered,
+        pressed,
+        focus: focused
+      }));
+      return [pressableStyles, index === activeIndex && styles.selected];
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,
       accessibilityLabel: accessibilityLabel ?? alt,

package/lib/Carousel/CarouselThumbnailNavigation.js

@@ -17,6 +17,10 @@ var _CarouselThumbnail = _interopRequireDefault(require("./CarouselThumbnail"));
 
 var _StackView = require("../StackView");
 
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,9 +33,14 @@ const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   let {
     thumbnails = []
   } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    alignItems
+  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail', {}, {
+    viewport
+  });
   const {
-    totalItems,
-    themeTokens
+    totalItems
   } = (0, _CarouselContext.useCarousel)();
 
   if (thumbnails.length !== totalItems) {
@@ -39,15 +48,15 @@ const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   }
 
   const {
-    thumbnailContainerPaddingTop,
-    thumbnailMargin
-  } = themeTokens;
+    containerPaddingTop: thumbnailContainerPaddingTop,
+    margin: thumbnailMargin
+  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail');
   const stackWrapTokens = {
     justifyContent: 'flex-start'
   };
   const containerStyles = {
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems,
     paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/ExpandCollapse/Panel.js

@@ -13,6 +13,8 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
@@ -44,7 +46,50 @@ const selectContainerStyles = _ref => {
     paddingLeft: contentPaddingLeft,
     paddingRight: contentPaddingRight,
     paddingTop: contentPaddingTop,
-    paddingBottom: contentPaddingBottom
+    paddingBottom: contentPaddingBottom,
+    flex: 1
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    contentPanelFontSize,
+    contentPanelFontName,
+    contentPanelFontColor,
+    contentPanelFontWeight,
+    contentPanelLineHeight
+  } = _ref2;
+  return {
+    fontSize: contentPanelFontSize,
+    fontFamily: `${contentPanelFontName}${contentPanelFontWeight}normal`,
+    lineHeight: contentPanelFontSize * contentPanelLineHeight,
+    color: contentPanelFontColor
+  };
+};
+
+const selectContentPanelStyles = _ref3 => {
+  let {
+    contentPanelBackgroundColor,
+    contentPanelPaddingTop,
+    contentPanelPaddingBottom,
+    contentPanelPaddingLeft,
+    contentPanelPaddingRight,
+    contentPanelBorderWidth,
+    contentPanelBorderColor,
+    borderRadius,
+    marginBottom
+  } = _ref3;
+  return {
+    backgroundColor: contentPanelBackgroundColor,
+    paddingTop: contentPanelPaddingTop,
+    paddingBottom: contentPanelPaddingBottom,
+    paddingLeft: contentPanelPaddingLeft,
+    paddingRight: contentPanelPaddingRight,
+    borderWidth: contentPanelBorderWidth,
+    borderColor: contentPanelBorderColor,
+    borderStyle: 'solid',
+    borderRadius,
+    marginBottom
   };
 };
 /**
@@ -59,7 +104,7 @@ const selectContainerStyles = _ref => {
  */
 
 
-const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     openIds = [],
     panelId,
@@ -71,8 +116,9 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     tokens,
     variant,
     controlRef,
+    content,
     ...rest
-  } = _ref2;
+  } = _ref4;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps({ ...rest,
@@ -107,7 +153,13 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     tokens: themeTokens
   });
   const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: selectContentPanelStyles(themeTokens),
+    children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: selectTextStyles(themeTokens),
+      children: children
+    }) : children
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: themeTokens,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, { ...selectedProps,
@@ -157,7 +209,7 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
    * Function to call on pressing the panel's control, which should open or close the panel.
    * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
    */
-  onToggle: _propTypes.default.func.isRequired,
+  onToggle: _propTypes.default.func,
 
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
@@ -171,9 +223,9 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
   /**
-   * The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed.
+   * The content inside the control element that opens and closes the ExpandCollapse when pressed.
    */
-  control: _Control.default.propTypes.children.isRequired,
+  control: _Control.default.propTypes.children,
 
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
@@ -183,7 +235,12 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: _airbnbPropTypes.default.ref()
+  controlRef: _airbnbPropTypes.default.ref(),
+
+  /**
+   * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
+   */
+  content: _propTypes.default.bool
 };
 var _default = ExpandCollapsePanel;
 exports.default = _default;

package/lib/IconButton/IconButton.js

@@ -36,10 +36,14 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectOuterStyle = _ref => {
   let {
     backgroundColor,
-    borderRadius,
     outerBorderWidth,
     outerBorderColor,
     outerBorderGap,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
     shadow
   } = _ref;
   return [{
@@ -47,6 +51,10 @@ const selectOuterStyle = _ref => {
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
     ...(0, _ThemeProvider.applyOuterBorder)({
       borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
       outerBorderWidth,
       outerBorderColor,
       outerBorderGap
@@ -60,20 +68,46 @@ const selectOuterStyle = _ref => {
   }, staticStyles.outer];
 };
 
+const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
+
+
 const selectInnerStyle = _ref2 => {
   let {
     borderColor,
-    borderWidth = 0,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
     borderRadius,
-    padding = 0
+    padding = 0,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom
   } = _ref2;
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
     borderColor,
     borderRadius,
     borderWidth,
-    padding: Math.max(0, padding - borderWidth) // Stable size as border changes
-
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    padding: calculatePadding(padding, borderWidth),
+    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculatePadding(paddingRight, borderRightWidth),
+    paddingTop: calculatePadding(paddingTop, borderTopWidth),
+    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth)
   };
 };
 /**
@@ -132,7 +166,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectInnerStyle(themeTokens),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          icon: IconComponent,
+          icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
           tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
           variant: variant
@@ -149,7 +183,7 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
   /**
    * Defines the icon to be rendered
    */
-  icon: _propTypes.default.elementType.isRequired,
+  icon: _propTypes.default.elementType,
 
   /**
    * URL to navigate to when the `Iconbutton` is pressed

package/lib/Modal/Modal.js

@@ -13,6 +13,8 @@ var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+
 var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -166,8 +168,8 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
     transparent: true,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [staticStyles.positioningContainer],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollView.default, {
+      contentContainerStyle: [staticStyles.positioningContainer],
       ref: modalRef,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
@@ -258,7 +260,11 @@ const staticStyles = _StyleSheet.default.create({
   modal: {
     maxHeight: '100%',
     // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
-    overflow: 'auto'
+    ..._Platform.default.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
   },
   closeButtonContainer: {
     position: 'absolute',

package/lib/SkipLink/SkipLink.js

@@ -56,10 +56,19 @@ const selectStyles = _ref => {
 
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    textLine,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
   } = _ref2;
   return {
-    color
+    color,
+    textDecorationLine: textLine,
+    fontFamily: `${fontName}${fontWeight}normal`,
+    lineHeight: fontSize * lineHeight,
+    fontSize
   };
 };
 /**
@@ -134,9 +143,6 @@ const SkipLink = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   } = _utils.clickProps.toPressProps(rawRest);
 
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SkipLink', tokens, variant);
-  const defaultTokens = getTokens();
-
-  const resolveLinkTokens = pressState => (0, _utils.resolvePressableTokens)(defaultTokens, pressState);
 
   const handlePress = event => {
     if (typeof onPress === 'function') onPress(event); // TODO - support native apps with something based on refs and/or setAccessibilityFocus
@@ -147,19 +153,17 @@ const SkipLink = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     accessibilityRole: "link",
     onPress: handlePress,
     href: href,
-    style: _ref4 => {
-      let {
-        focused: focus
-      } = _ref4;
-      const themeTokens = getTokens({
-        focus
-      });
+    style: pressableState => {
+      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
       const skipLinkStyle = selectStyles(themeTokens);
-      return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden];
+      const {
+        focused
+      } = pressableState;
+      return [staticStyles.absolute, skipLinkStyle, !focused && staticStyles.hidden];
     },
     ...selectProps(rest),
-    children: pressState => {
-      const themeTokens = resolveLinkTokens(pressState);
+    children: pressableState => {
+      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
       const textStyles = selectTextStyles(themeTokens);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [textStyles, staticStyles.baseline],

package/lib/ThemeProvider/utils/styles.js

@@ -189,6 +189,14 @@ function verticalAlignRow(verticalAlign) {
     alignItems: verticalAlignToFlexRowAlign[verticalAlign]
   };
 }
+
+const calculateBorderRadius = (borderRadius, outerBorderGap, outerBorderWidth) => {
+  if (borderRadius) {
+    return borderRadius + outerBorderGap + outerBorderWidth;
+  }
+
+  return null;
+};
 /**
  * Use on an outer container to create an outer border with an optional gap around it
  * that matches the border radius of any inner border.
@@ -200,12 +208,20 @@ const applyOuterBorder = _ref4 => {
     outerBorderColor,
     outerBorderWidth = 0,
     outerBorderGap = 0,
-    borderRadius = 0
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
   } = _ref4;
   return {
     margin: 0 - outerBorderWidth - outerBorderGap,
     padding: outerBorderGap,
-    borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
+    borderRadius: calculateBorderRadius(borderRadius, outerBorderGap, outerBorderWidth),
+    borderTopLeftRadius: calculateBorderRadius(borderTopLeftRadius, outerBorderGap, outerBorderWidth),
+    borderTopRightRadius: calculateBorderRadius(borderTopRightRadius, outerBorderGap, outerBorderWidth),
+    borderBottomLeftRadius: calculateBorderRadius(borderBottomLeftRadius, outerBorderGap, outerBorderWidth),
+    borderBottomRightRadius: calculateBorderRadius(borderBottomRightRadius, outerBorderGap, outerBorderWidth),
     borderWidth: outerBorderWidth,
     borderColor: outerBorderColor
   };

package/lib/TooltipButton/TooltipButton.js

@@ -26,11 +26,13 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectInnerContainerStyles = _ref => {
   let {
     borderRadius,
-    width
+    width,
+    backgroundColor
   } = _ref;
   return {
     borderRadius,
-    width
+    width,
+    backgroundColor
   };
 };
 
@@ -65,7 +67,9 @@ const TooltipButton = _ref3 => {
     icon: IconComponent
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: (0, _ThemeProvider.applyOuterBorder)(themeTokens),
+    style: [(0, _ThemeProvider.applyOuterBorder)(themeTokens), themeTokens.outerBorderWidth && {
+      margin: -themeTokens.outerBorderWidth
+    }],
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),