@telus-uds/components-base 1.54.0 → 1.55.0

package/src/IconButton/IconButton.jsx

@@ -22,27 +22,71 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectOuterStyle = ({
   backgroundColor,
-  borderRadius,
   outerBorderWidth,
   outerBorderColor,
   outerBorderGap,
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
   shadow
 }) => [
   {
     backgroundColor,
     ...applyShadowToken(shadow),
-    ...applyOuterBorder({ borderRadius, outerBorderWidth, outerBorderColor, outerBorderGap }),
+    ...applyOuterBorder({
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderWidth,
+      outerBorderColor,
+      outerBorderGap
+    }),
     ...Platform.select({ web: { outline: 'none', display: 'inline-flex' } })
   },
   staticStyles.outer
 ]
 
-const selectInnerStyle = ({ borderColor, borderWidth = 0, borderRadius, padding = 0 }) => ({
+const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth) // Stable size as border changes
+
+const selectInnerStyle = ({
+  borderColor,
+  borderWidth,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderRadius,
+  padding = 0,
+  borderTopWidth,
+  borderRightWidth,
+  borderBottomWidth,
+  borderLeftWidth,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom
+}) => ({
   // 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)
 })
 
 /**
@@ -90,7 +134,7 @@ const IconButton = forwardRef(
           return (
             <View style={selectInnerStyle(themeTokens)}>
               <Icon
-                icon={IconComponent}
+                icon={IconComponent || themeTokens.icon}
                 title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
                 variant={variant}
@@ -111,7 +155,7 @@ IconButton.propTypes = {
   /**
    * Defines the icon to be rendered
    */
-  icon: PropTypes.elementType.isRequired,
+  icon: PropTypes.elementType,
   /**
    * URL to navigate to when the `Iconbutton` is pressed
    */

package/src/ThemeProvider/utils/styles.js

@@ -147,6 +147,13 @@ export function verticalAlignRow(verticalAlign, reverse = false) {
   }
 }
 
+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.
@@ -155,11 +162,31 @@ export const applyOuterBorder = ({
   outerBorderColor,
   outerBorderWidth = 0,
   outerBorderGap = 0,
-  borderRadius = 0
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius
 }) => ({
   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/src/TooltipButton/TooltipButton.jsx

@@ -7,7 +7,11 @@ import Icon from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectInnerContainerStyles = ({ borderRadius, width }) => ({ borderRadius, width })
+const selectInnerContainerStyles = ({ borderRadius, width, backgroundColor }) => ({
+  borderRadius,
+  width,
+  backgroundColor
+})
 
 const selectIconTokens = ({ iconSize, iconColor, iconScale = 1 }) => ({
   size: iconSize,