Make change non-breaking

Author: federico-ercoles

packages/bento-design-system/src/IconButton/Config.ts

@@ -5,6 +5,7 @@ export type IconButtonConfig = {
   radius: BentoSprinkles["borderRadius"];
   padding: Record<
     IconProps["size"],
-    { paddingX: BentoSprinkles["paddingX"]; paddingY: BentoSprinkles["paddingY"] }
+    | BentoSprinkles["padding"]
+    | { paddingX: BentoSprinkles["paddingX"]; paddingY: BentoSprinkles["paddingY"] }
   >;
 };

packages/bento-design-system/src/IconButton/IconButton.tsx

@@ -37,6 +37,9 @@ export function IconButton(props: Props) {
     },
     ref
   );
+
+  const paddingConfig = config.padding[props.size];
+
   return (
     <Box
       as="button"
@@ -57,7 +60,11 @@ export function IconButton(props: Props) {
       justifyContent="center"
       borderRadius={config.radius}
       {...match(props.kind)
-        .with("solid", "outline", () => config.padding[props.size])
+        .with("solid", "outline", () =>
+          paddingConfig && typeof paddingConfig === "object" && "paddingX" in paddingConfig
+            ? paddingConfig
+            : { padding: paddingConfig }
+        )
         .with("transparent", () => {})
         .exhaustive()}
     >

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -314,10 +314,10 @@ export const formLayout: FormLayoutConfig = {
 export const iconButton: IconButtonConfig = {
   radius: 4,
   padding: {
-    8: { paddingX: 8, paddingY: 8 },
-    12: { paddingX: 8, paddingY: 8 },
-    16: { paddingX: 16, paddingY: 16 },
-    24: { paddingX: 16, paddingY: 16 },
+    8: 8,
+    12: 8,
+    16: 16,
+    24: 16,
   },
 };