fix(ui-kit): fix icon-button

youtogether-online · Jul 21, 2023 · 2fa4de7 · 2fa4de7
1 parent 33e460f
commit 2fa4de7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/src/shared/ui/button/base-button.tsx b/src/shared/ui/button/base-button.tsx
@@ -1,5 +1,5 @@
 import { Slot, Slottable } from "@radix-ui/react-slot";
-import { cva } from "cva";
+import { cva, cx } from "cva";
 import { forwardRef } from "react";
 
 import { type ButtonProps } from "./types";
@@ -34,7 +34,7 @@ export const baseButton = cva(
           "disabled:(bg-button-danger-disabled-bg text-button-danger-disabled-text)",
         ],
         invisible: [
-          "text-accent-fg border-none",
+          "text-accent-fg border-transparent",
           "hover:bg-button-invisible-hover-bg",
           "active:bg-button-invisible-selected-bg",
         ],
@@ -84,12 +84,12 @@ export const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Component
         disabled={disabled}
-        className={baseButton({ disabled, variant, size, block, class: sx })}
+        className={cx(baseButton({ disabled, variant, size, block }), sx)}
         ref={ref}
         {...props}
       >
         {leadingIcon && <span className={buttonIcon}>{leadingIcon}</span>}
-        <Slottable>{children}</Slottable>
+        <Slottable>{icon ?? children}</Slottable>
         {trailingIcon && <span className={buttonIcon}>{trailingIcon}</span>}
         {trailingAction && <span className={buttonIcon}>{trailingAction}</span>}
       </Component>

diff --git a/src/shared/ui/button/icon-button.tsx b/src/shared/ui/button/icon-button.tsx
@@ -4,5 +4,5 @@ import { BaseButton } from "./base-button";
 import { type IconButtonProps } from "./types";
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({ ...props }, ref) => {
-  return <BaseButton ref={ref} sx={"text-fg-default"} {...props} />;
+  return <BaseButton ref={ref} sx="text-fg-default w-8 px-none" {...props} />;
 });
diff --git a/src/shared/ui/icon/icon.tsx b/src/shared/ui/icon/icon.tsx
@@ -14,21 +14,23 @@ type IconProps = {
 } & SxProp &
   Omit<SVGProps<SVGSVGElement>, "name" | "type">;
 
-export const Icon = forwardRef<SVGSVGElement, IconProps>(({ name, viewBox, sx, ...props }, ref) => {
-  const [spriteName, iconName] = name.split("/");
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ name, viewBox = "0 0 16 16", sx, ...props }, ref) => {
+    const [spriteName, iconName] = name.split("/");
 
-  return (
-    <AccessibleIcon.Root label={iconName}>
-      <svg
-        focusable="false"
-        ref={ref}
-        aria-hidden
-        viewBox={viewBox}
-        {...props}
-        className={cx("select-none inline-block h-full text-inherit", sx)}
-      >
-        <use xlinkHref={`/sprites/${spriteName}.svg#${iconName}`} />
-      </svg>
-    </AccessibleIcon.Root>
-  );
-});
+    return (
+      <AccessibleIcon.Root label={iconName}>
+        <svg
+          focusable="false"
+          ref={ref}
+          aria-hidden
+          viewBox={viewBox}
+          {...props}
+          className={cx("select-none inline-block h-full text-inherit w-4 h-4", sx)}
+        >
+          <use xlinkHref={`/sprites/${spriteName}.svg#${iconName}`} />
+        </svg>
+      </AccessibleIcon.Root>
+    );
+  },
+);