Merge pull request #527 from ably/assert-icon-size-units

[WEB-4025] Assert presence of units in Icon size prop values

src/core/Icon.tsx

@@ -1,12 +1,12 @@
 import React, { CSSProperties } from "react";
 import { defaultIconSecondaryColor } from "./Icon/secondary-colors";
-import { IconName } from "./Icon/types";
+import { IconName, IconSize } from "./Icon/types";
 import { ColorClass } from "./styles/colors/types";
 import { convertTailwindClassToVar } from "./styles/colors/utils";
 
 export type IconProps = {
   name: IconName;
-  size?: string;
+  size?: IconSize;
   color?: ColorClass;
   secondaryColor?: ColorClass;
   additionalCSS?: string;

src/core/Icon/EncapsulatedIcon.tsx

@@ -2,14 +2,18 @@ import React from "react";
 import Icon, { IconProps } from "../Icon";
 import useTheming from "../hooks/useTheming";
 import { Theme } from "../styles/colors/types";
+import { IconSize } from "./types";
 
 type EncapsulatedIconProps = {
   theme?: Theme;
   className?: string;
   innerClassName?: string;
-  iconSize?: string;
+  iconSize?: IconSize;
 } & IconProps;
 
+const ICON_SIZE_REDUCTION = 12;
+const ICON_HEIGHT_REDUCTION = 2;
+
 const EncapsulatedIcon = ({
   theme = "dark",
   size = "40px",
@@ -22,21 +26,31 @@ const EncapsulatedIcon = ({
     baseTheme: "dark",
     theme,
   });
-  const numericalSize = parseInt(size, 10);
-  const numericalIconSize = iconSize
-    ? parseInt(iconSize, 10)
-    : numericalSize - 12;
+  let computedIconSize = size,
+    computedIconHeight = size;
+
+  if (iconSize) {
+    computedIconSize = iconSize;
+  } else if (size.toString().endsWith("px")) {
+    const numericalSize = parseInt(size, 10);
+    computedIconSize = `${numericalSize - ICON_SIZE_REDUCTION}px`;
+    computedIconHeight = `${numericalSize - ICON_HEIGHT_REDUCTION}px`;
+  } else {
+    console.warn(
+      `EncapsulatedIcon: Non-pixel units might not behave as expected`,
+    );
+  }
 
   return (
     <div
       className={`p-1 rounded-lg ${theme === "light" ? "bg-gradient-to-t" : "bg-gradient-to-b"} ${themeColor("from-neutral-900")} ${className ?? ""}`}
-      style={{ width: numericalSize, height: numericalSize }}
+      style={{ width: size, height: size }}
     >
       <div
         className={`flex items-center justify-center rounded-lg ${themeColor("bg-neutral-1100")} ${innerClassName ?? ""}`}
-        style={{ height: numericalSize - 2 }}
+        style={{ height: computedIconHeight }}
       >
-        <Icon size={`${numericalIconSize}`} {...iconProps} />
+        <Icon size={computedIconSize} {...iconProps} />
       </div>
     </div>
   );

src/core/Icon/types.ts

@@ -16,3 +16,9 @@ export type IconName =
   | (typeof iconNames.other)[number]
   | (typeof iconNames.tech)[number]
   | (typeof iconNames.product)[number];
+
+export type IconSize =
+  | `${number}px`
+  | `${number}em`
+  | `${number}rem`
+  | `calc(${string})`;