@telus-uds/components-base 1.24.0 → 1.24.2

package/lib/Tooltip/Tooltip.native.js

@@ -0,0 +1,357 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _shared = _interopRequireDefault(require("./shared"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _Backdrop = _interopRequireDefault(require("./Backdrop"));
+
+var _getTooltipPosition = _interopRequireDefault(require("./getTooltipPosition"));
+
+var _TooltipButton = _interopRequireDefault(require("../TooltipButton"));
+
+var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+const selectTooltipStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  };
+};
+
+const selectTooltipShadowStyles = _ref2 => {
+  let {
+    shadow,
+    borderRadius
+  } = _ref2;
+  return {
+    borderRadius,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
+
+const selectTooltipPositionStyles = _ref3 => {
+  let {
+    top,
+    left,
+    width
+  } = _ref3;
+  return {
+    top,
+    left,
+    width
+  };
+};
+
+const selectArrowStyles = (_ref4, _ref5) => {
+  let {
+    backgroundColor,
+    arrowWidth,
+    arrowBorderRadius,
+    shadow
+  } = _ref4;
+  let {
+    position,
+    width: tooltipWidth,
+    height: tooltipHeight
+  } = _ref5;
+  // the arrow width is actually a diagonal of the rectangle that we'll use as a tip
+  const rectangleSide = Math.sqrt(arrowWidth * arrowWidth / 2); // position the arrow at the side and center of the tooltip - this happens before rotation
+  // so we use the rectangle size as basis
+
+  const verticalOffset = -1 * rectangleSide / 2;
+  const horizontalOffset = rectangleSide / 2; // percentage-based absolute positioning doesn't act well on native, so we have to
+  // calculate the pixel values
+
+  const directionalStyles = {
+    above: {
+      bottom: verticalOffset,
+      left: tooltipWidth / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '45deg'
+      }]
+    },
+    below: {
+      top: verticalOffset,
+      left: tooltipWidth / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '-135deg'
+      }]
+    },
+    left: {
+      right: verticalOffset,
+      top: tooltipHeight / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '-45deg'
+      }]
+    },
+    right: {
+      left: verticalOffset,
+      top: tooltipHeight / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '135deg'
+      }]
+    }
+  };
+  return {
+    backgroundColor,
+    width: rectangleSide,
+    height: rectangleSide,
+    borderBottomRightRadius: arrowBorderRadius,
+    // this corner will be the arrow tip after rotation
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...directionalStyles[position]
+  };
+};
+
+const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
+
+const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
+  pressableState: pressableState,
+  variant: variant
+});
+/**
+ * Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label
+ * to help a user fill it in, or as a standalone component.
+ *
+ * By default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach
+ * a tooltip to any other component. A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).
+ *
+ * ### Positioning
+ * By default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport.
+ * You may suggest a position with a prop - it will be used, unless the tooltip would end up outside the viewport.
+ *
+ * ### Usage criteria
+ * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
+ * - Tooltips may also be useful when vertical space is an issue.
+ */
+
+
+const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    children,
+    content,
+    position = 'auto',
+    copy = 'en',
+    tokens,
+    variant,
+    ...rest
+  } = _ref6;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const controlRef = (0, _react.useRef)();
+  const [controlLayout, setControlLayout] = (0, _react.useState)(null);
+  const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)(null);
+  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(_Dimensions.default.get('window'));
+  const [tooltipPosition, setTooltipPosition] = (0, _react.useState)(null);
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
+  const {
+    arrowWidth,
+    arrowOffset
+  } = themeTokens;
+  (0, _react.useEffect)(() => {
+    const subscription = _Dimensions.default.addEventListener('change', _ref7 => {
+      let {
+        window
+      } = _ref7;
+      setWindowDimensions(window);
+    });
+
+    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
+  });
+
+  const toggleIsOpen = () => setIsOpen(!isOpen);
+
+  const close = () => setIsOpen(false);
+
+  const getPressableState = _ref8 => {
+    let {
+      pressed,
+      hovered,
+      focused
+    } = _ref8;
+    return {
+      pressed,
+      hover: hovered,
+      focus: focused
+    };
+  };
+
+  const onTooltipLayout = _ref9 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref9;
+
+    if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
+      setTooltipDimensions({
+        width: _Platform.default.select({
+          web: width + 0.3,
+          // avoids often unnecessary line breaks due to subpixel rendering of fonts
+          native: width
+        }),
+        height
+      });
+    }
+  };
+
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      controlRef.current.measureInWindow((x, y, width, height) => {
+        setControlLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    } else {
+      setControlLayout(null);
+      setTooltipDimensions(null);
+      setTooltipPosition(null);
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(() => {
+    setIsOpen(false);
+  }, [windowDimensions]);
+  (0, _react.useEffect)(() => {
+    if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
+      return;
+    }
+
+    const updatedPosition = (0, _getTooltipPosition.default)(position, {
+      controlLayout,
+      tooltipDimensions,
+      windowDimensions,
+      arrowWidth,
+      arrowOffset
+    }); // avoid ending up in an infinite normalization loop
+
+    if (tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized && updatedPosition.isNormalized) {
+      return;
+    }
+
+    setTooltipPosition(updatedPosition);
+  }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
+  const control = children !== undefined ? children : defaultControl;
+  const pressableStyles = control === defaultControl ? _Platform.default.select({
+    web: {
+      outline: 'none'
+    }
+  }) : undefined;
+  const pressableHitSlop = control === defaultControl ? {
+    top: 10,
+    bottom: 10,
+    left: 10,
+    right: 10
+  } : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: staticStyles.container,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      onPress: toggleIsOpen,
+      ref: controlRef,
+      onBlur: close,
+      style: pressableStyles,
+      hitSlop: pressableHitSlop,
+      accessibilityLabel: getCopy('a11yText'),
+      accessibilityRole: "button",
+      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+      onPress: close,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        ref: ref,
+        style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
+        tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
+        ],
+        onLayout: onTooltipLayout,
+        accessibilityRole: "alert",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectTooltipStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: selectTextStyles(themeTokens),
+            children: content
+          })
+        })]
+      })
+    })]
+  });
+});
+Tooltip.displayName = 'NativeTooltip';
+Tooltip.propTypes = { ...selectedSystemPropTypes,
+  ..._shared.default
+};
+var _default = Tooltip;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    alignItems: 'flex-start'
+  },
+  tooltip: {
+    position: 'absolute',
+    maxWidth: 240,
+    top: 0,
+    left: 0
+  },
+  tooltipHidden: {
+    opacity: 0
+  },
+  arrow: {
+    position: 'absolute'
+  }
+});

package/lib/Tooltip/index.js

@@ -5,9 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
+var _Tooltip2 = _interopRequireDefault(require("./Tooltip.native"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = _Tooltip.default;
+const Tooltip = !_Dimensions.default.get('screen').width <= 340 ? _Tooltip2.default : _Tooltip.default;
+var _default = Tooltip;
 exports.default = _default;

package/lib/Tooltip/shared.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const propTypes = {
+  /**
+   * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
+   * pressable state and tooltip variant as an argument.
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+
+  /**
+   * The message. Can be raw text or text components.
+   */
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
+  /**
+   * Use to place the tooltip in a specific location (only if it fits within viewport).
+   */
+  position: _propTypes.default.oneOf(['auto', 'above', 'right', 'below', 'left']),
+  tokens: (0, _utils.getTokensPropType)('Tooltip'),
+  variant: _utils.variantProp.propType
+};
+var _default = propTypes;
+exports.default = _default;

package/lib/Typography/Typography.js

@@ -87,7 +87,9 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  const containerProps = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+  const containerProps = {
+    accessibilityRole,
+    ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectContainerProps(rest)
   };
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/utils/floating-ui/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "arrow", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.arrow;
+  }
+});
+Object.defineProperty(exports, "autoPlacement", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.autoPlacement;
+  }
+});
+Object.defineProperty(exports, "flip", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.flip;
+  }
+});
+Object.defineProperty(exports, "offset", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.offset;
+  }
+});
+Object.defineProperty(exports, "shift", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.shift;
+  }
+});
+Object.defineProperty(exports, "useFloating", {
+  enumerable: true,
+  get: function () {
+    return _reactDom.useFloating;
+  }
+});
+
+var _reactDom = require("@floating-ui/react-dom");

package/lib/utils/floating-ui/index.native.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "arrow", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.arrow;
+  }
+});
+Object.defineProperty(exports, "autoPlacement", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.autoPlacement;
+  }
+});
+Object.defineProperty(exports, "flip", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.flip;
+  }
+});
+Object.defineProperty(exports, "offset", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.offset;
+  }
+});
+Object.defineProperty(exports, "shift", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.shift;
+  }
+});
+Object.defineProperty(exports, "useFloating", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.useFloating;
+  }
+});
+
+var _reactNative = require("@floating-ui/react-native");

package/lib-module/Box/Box.js

@@ -126,7 +126,9 @@ const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
-  const props = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+  const props = {
+    accessibilityRole,
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
   const themeTokens = useThemeTokens('Box', tokens, variant);

package/lib-module/Divider/Divider.js

@@ -73,7 +73,10 @@ const Divider = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
   const a11y = Platform.OS === 'web' ? // There are aria attributes for dividers on web
   {
+    // Early versions of React Native Web support 'aria-orientation' while
+    // later versions only support accessibilityOrientation and map it. Supply both.
     'aria-orientation': vertical ? 'vertical' : 'horizontal',
+    accessibilityOrientation: vertical ? 'vertical' : 'horizontal',
     accessibilityRole: 'separator'
   } : // There are no such equivalent attributes for native
   {};

package/lib-module/Feedback/Feedback.js

@@ -84,12 +84,10 @@ const Feedback = /*#__PURE__*/forwardRef((_ref5, ref) => {
     validation,
     tokens,
     variant,
-    showFeedbackIcon = false,
     ...rest
   } = _ref5;
   const themeTokens = useThemeTokens('Feedback', tokens, { ...variant,
-    validation,
-    icon: showFeedbackIcon
+    validation
   });
   const {
     space
@@ -155,8 +153,7 @@ Feedback.propTypes = { ...selectedSystemPropTypes,
   /** @ignore */
   id: PropTypes.string,
   tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType,
-  showFeedbackIcon: PropTypes.bool
+  variant: variantProp.propType
 };
 export default Feedback;
 const staticStyles = StyleSheet.create({

package/lib-module/Fieldset/Fieldset.js

@@ -59,7 +59,9 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     id: feedbackId,
     title: feedback,
     validation: validation,
-    showFeedbackIcon: showIcon
+    variant: {
+      icon: showIcon
+    }
   }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between

package/lib-module/FlexGrid/FlexGrid.js

@@ -62,7 +62,9 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     flexDirection = reverseLevel[4] ? 'column-reverse' : 'column';
   }
 
-  const props = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+  const props = {
+    accessibilityRole,
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
   return /*#__PURE__*/_jsx(GutterContext.Provider, {

package/lib-module/Link/InlinePressable.js

@@ -9,6 +9,8 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
  *
+ * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
+ *
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
@@ -18,12 +20,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
+    inlineFlex = true,
     style,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
-    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -31,7 +34,11 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
 InlinePressable.displayName = 'InlinePressable';
 const staticStyles = StyleSheet.create({
   inline: {
+    // Stop Pressable defaulting to (block) flex
     display: 'inline'
+  },
+  inlineFlex: {
+    display: 'inline-flex'
   }
 });
 export default InlinePressable;

package/lib-module/Link/LinkBase.js

@@ -12,7 +12,7 @@ import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 
-const selectOuterBorderStyles = (_ref, hasIcon) => {
+const selectOuterBorderStyles = _ref => {
   let {
     outerBorderColor,
     outerBorderWidth,
@@ -30,11 +30,7 @@ const selectOuterBorderStyles = (_ref, hasIcon) => {
         outerBorderWidth,
         outerBorderGap,
         borderRadius
-      }),
-      // Stops focus ring stretching horizontally if parent has display: block
-      // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-      display: hasIcon ? 'inline-flex' : 'inline' // Stop Pressable defaulting to (block) flex
-
+      })
     } : {}
   );
 };
@@ -170,12 +166,14 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     themeOptions
   } = useTheme();
   return /*#__PURE__*/_jsx(InlinePressable, { ...selectedProps,
+    inlineFlex: hasIcon // assuming links without icons should be inline (even if they are long)
+    ,
     ref: ref,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
-      const outerBorderStyles = selectOuterBorderStyles(themeTokens, hasIcon);
+      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);