fix(ui-svg-images): fix Firefox discarding numeric width/height values

Firefox interprets unitless width/height values as undefined when they are strings, e.g. width="100"
This fix converts numerical string values like "3.5" to number to make FF happy

INSTUI-4650

Author: matyasf

packages/ui-svg-images/src/InlineSVG/index.tsx

@@ -143,14 +143,33 @@ class InlineSVG extends Component<InlineSVGProps> {
     }
   }
 
+  // Firefox workaround: If width/height is a string that's a number (e.g. '100')
+  // it needs to be converted to a number, otherwise it is not added to the
+  // stylesheet
+  numberToNumberType(n: string | number | undefined) {
+    if (typeof n === 'string') {
+      const parsed = parseFloat(n)
+      // from https://stackoverflow.com/a/52986361/319473
+      if (!isNaN(parsed) && isFinite(n as unknown as number)) {
+        return parsed
+      }
+    }
+    return n
+  }
+
   render() {
     const { style, title, description, focusable, src, styles, ...props } =
       this.props
 
     // if width or height are 'auto', don't supply anything to the SVG
-    const width = this.props.width === 'auto' ? undefined : this.props.width
-    const height = this.props.height === 'auto' ? undefined : this.props.height
-
+    const width =
+      this.props.width === 'auto'
+        ? undefined
+        : this.numberToNumberType(this.props.width)
+    const height =
+      this.props.height === 'auto'
+        ? undefined
+        : this.numberToNumberType(this.props.height)
     return (
       <svg
         {...parseAttributes(src)}

packages/ui-svg-images/src/InlineSVG/props.ts

@@ -39,10 +39,12 @@ type InlineSVGOwnProps = {
   description?: string
   focusable?: boolean
   /**
+   * Width of the SVG. Accepts valid CSS unit strings like '1rem'
    * To let the SVG expand to fill its container, use "`auto`"
    */
   width?: string | number
   /**
+   * Height of the SVG. Accepts valid CSS unit strings like '1rem'
    * To let the SVG expand to fill its container, use "`auto`"
    */
   height?: string | number

packages/ui-svg-images/src/SVGIcon/README.md

@@ -47,15 +47,15 @@ type: example
 </div>
 ```
 
-If you need a size that is not offered via the `size` prop, adjust the
-`font-size` on the icon's parent element.
+If you need a size that is not offered via the `size` prop, use the `width` or `height` props, these accept a valid CSS length value.
 
 ```js
 ---
 type: example
 ---
-<div style={{fontSize: '15rem', lineHeight: 1}}>
-  <SVGIcon src={iconExample} title="Icon Example" />
+<div>
+  <SVGIcon width="1rem" height="1rem" src={iconExample} title="Icon Example" />
+  <SVGIcon width="55px" height="55px" src={iconExample} title="Icon Example" />
 </div>
 ```