Allow separate config of paddingX and paddingY for IconButton

Author: federico-ercoles

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

@@ -3,5 +3,8 @@ import { BentoSprinkles } from "../internal";
 
 export type IconButtonConfig = {
   radius: BentoSprinkles["borderRadius"];
-  padding: Record<IconProps["size"], BentoSprinkles["padding"]>;
+  padding: Record<
+    IconProps["size"],
+    { paddingX: BentoSprinkles["paddingX"]; paddingY: BentoSprinkles["paddingY"] }
+  >;
 };

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

@@ -56,9 +56,9 @@ export function IconButton(props: Props) {
       alignItems="center"
       justifyContent="center"
       borderRadius={config.radius}
-      padding={match(props.kind)
+      {...match(props.kind)
         .with("solid", "outline", () => config.padding[props.size])
-        .with("transparent", () => undefined)
+        .with("transparent", () => {})
         .exhaustive()}
     >
       {props.icon({ size: props.size, color: "inherit" })}

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

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