Merge pull request #525 from ably/supply-icon-size-units

[WEB-4025] 14.7.6 - fix: explicitly set Icon size units
ably · Oct 29, 2024 · d0ac55e · d0ac55e
2 parents 62dadf2 + 40f19b1
commit d0ac55e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.7.5",
+  "version": "14.7.6",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx
@@ -141,14 +141,14 @@ const AccordionRow = ({
         {...(!isStaticTheme(theme) ? { onClick } : {})}
         className={`flex w-full ${sticky ? "sticky top-0" : ""} focus:outline-none py-16 rounded-lg ui-text-p1 font-bold text-left items-center gap-12 ${isNonTransparentTheme(theme) ? "px-16 mb-16" : ""} ${isStaticTheme(theme) ? "pointer-events-none" : ""} transition-colors ${bgClasses} ${textClass}`}
       >
-        {rowIcon ? <Icon name={rowIcon} color={textClass} size="32" /> : null}
+        {rowIcon ? <Icon name={rowIcon} color={textClass} size="32px" /> : null}
         <span>{name}</span>
         {!selectable ? (
           <span className="flex-1 justify-end flex items-center">
             <Icon
               name={open ? toggleIcons.open.name : toggleIcons.closed.name}
               color={toggleIconColor}
-              size="16"
+              size="16px"
             />{" "}
           </span>
         ) : null}

diff --git a/src/core/Expander/Expander.stories.tsx b/src/core/Expander/Expander.stories.tsx
@@ -140,7 +140,7 @@ export const OverriddenControls = {
       controlsOpenedLabel={
         <span className="flex items-center gap-8">
           Away with you, knave.{" "}
-          <Icon color="text-pink-500" size="24" name="icon-gui-warning" />
+          <Icon color="text-pink-500" size="24px" name="icon-gui-warning" />
         </span>
       }
       controlsClosedLabel="Give me more!"

diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
@@ -72,7 +72,7 @@ const PricingCards = ({
         {delimiter !== "blank" ? (
           <Icon
             name={delimiter}
-            size="20"
+            size="20px"
             additionalCSS={themeColor("text-neutral-500")}
           />
         ) : null}
@@ -229,7 +229,7 @@ const PricingCards = ({
                                   secondaryColor={themeColor(
                                     listItemColors.foreground,
                                   )}
-                                  size="16"
+                                  size="16px"
                                   additionalCSS="mt-2"
                                 />
                               ) : null}

diff --git a/src/core/styles/colors/Colors.stories.tsx b/src/core/styles/colors/Colors.stories.tsx
@@ -115,7 +115,11 @@ export const DynamicTheming = {
         <div className="flex flex-wrap gap-24">
           {colorSet(["orange-300"], "bg-orange-300")}
         </div>
-        <Icon name="icon-gui-arrow-right" size="48" additionalCSS="m-16"></Icon>
+        <Icon
+          name="icon-gui-arrow-right"
+          size="48px"
+          additionalCSS="m-16"
+        ></Icon>
         <div className="flex flex-wrap gap-24">
           {colorSet(["orange-900"], themeColor("bg-orange-300"))}
         </div>