feat: add button icon only variation

Author: abelflopes

packages/components/button/src/index.tsx

@@ -29,9 +29,26 @@ export const Button = ({
   children,
   className,
   ...otherProps
-}: Readonly<ButtonProps>): React.ReactElement => (
-  <button className={classNames(styles.root, styles[skin], className)} {...otherProps}>
-    {icon && <span className={styles.icon}>{icon}</span>}
-    {children}
-  </button>
-);
+}: Readonly<ButtonProps>): React.ReactElement => {
+  const isIconOnly = useMemo(
+    () => icon !== undefined && React.Children.count(children) === 0,
+    [children, icon],
+  );
+
+  return (
+    <button
+      className={classNames(
+        styles.root,
+        styles[skin],
+        {
+          [`${styles["icon-only"]}`]: isIconOnly,
+        },
+        className,
+      )}
+      {...otherProps}>
+      {icon && !isIconOnly && <span className={styles.icon}>{icon}</span>}
+      {children}
+      {isIconOnly && icon}
+    </button>
+  );
+};

packages/components/button/src/styles/index.module.scss

@@ -3,6 +3,10 @@
 .root {
   @include font-base;
 
+  @include define-css-var(button, border-radius, get-spacing(1));
+  @include define-css-var(button, padding-y, get-spacing(1));
+  @include define-css-var(button, padding-x, get-spacing(2));
+
   background-color: get-css-var(button, background-color);
   color: get-css-var(button, color);
   font-weight: 700;
@@ -11,13 +15,20 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: get-spacing(1) get-spacing(2);
-  border-radius: get-spacing(1);
+  padding: get-css-var(button, padding-y) get-css-var(button, padding-x);
+  border-radius: get-css-var(button, border-radius);
   transition: background-color 0.2s ease;
 
   &:disabled {
     cursor: not-allowed;
   }
+
+  &.icon-only {
+    @include define-css-var(button, padding-x, get-spacing(1));
+    @include define-css-var(button, border-radius, 50%);
+
+    aspect-ratio: 1/1;
+  }
 }
 
 .primary {