fix(ui): Fix Avatar styling

medusajs · Oct 17, 2024 · b56cdb3 · b56cdb3
1 parent e9a06f4
commit b56cdb3
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 14 deletions.
diff --git a/packages/design-system/ui/src/components/avatar/avatar.stories.tsx b/packages/design-system/ui/src/components/avatar/avatar.stories.tsx
@@ -42,11 +42,55 @@ export const WithImage: Story = {
  args: {
  src: "https://avatars.githubusercontent.com/u/10656202?v=4",
  fallback: "J",
+ size: "base",
  },
 }
 
 export const WithFallback: Story = {
  args: {
  fallback: "J",
+ size: "large",
+ },
+}
+
+export const TwoXSmall: Story = {
+ args: {
+ fallback: "J",
+ size: "2xsmall",
+ },
+}
+
+export const XSmall: Story = {
+ args: {
+ fallback: "J",
+ size: "xsmall",
+ },
+}
+
+export const Small: Story = {
+ args: {
+ fallback: "J",
+ size: "small",
+ },
+}
+
+export const Base: Story = {
+ args: {
+ fallback: "J",
+ size: "base",
+ },
+}
+
+export const Large: Story = {
+ args: {
+ fallback: "J",
+ size: "large",
+ },
+}
+
+export const XLarge: Story = {
+ args: {
+ fallback: "J",
+ size: "xlarge",
  },
 }
diff --git a/packages/design-system/ui/src/components/avatar/avatar.tsx b/packages/design-system/ui/src/components/avatar/avatar.tsx
@@ -7,7 +7,7 @@ import * as React from "react"
 import { clx } from "@/utils/clx"
 
 const avatarVariants = cva({
- base: "border-ui-border-strong flex shrink-0 items-center justify-center overflow-hidden border",
+ base: "flex shrink-0 items-center justify-center overflow-hidden shadow-borders-base bg-ui-bg-base",
  variants: {
  variant: {
  squared: "",
@@ -26,7 +26,7 @@ const avatarVariants = cva({
  {
  variant: "squared",
  size: "2xsmall",
- className: "rounded-md",
+ className: "rounded",
  },
  {
  variant: "squared",
@@ -68,12 +68,12 @@ const innerVariants = cva({
  rounded: "rounded-full",
  },
  size: {
- "2xsmall": "txt-compact-xsmall-plus h-4 w-4",
- xsmall: "txt-compact-xsmall-plus h-5 w-5",
- small: "txt-compact-small-plus h-6 w-6",
- base: "txt-compact-small-plus h-7 w-7",
- large: "txt-compact-medium-plus h-9 w-9",
- xlarge: "txt-compact-large-plus h-11 w-11",
+ "2xsmall": "txt-compact-xsmall-plus size-4",
+ xsmall: "txt-compact-xsmall-plus size-5",
+ small: "txt-compact-small-plus size-6",
+ base: "txt-compact-small-plus size-7",
+ large: "txt-compact-medium-plus size-9",
+ xlarge: "txt-compact-large-plus size-11",
  },
  },
  compoundVariants: [
@@ -85,17 +85,17 @@ const innerVariants = cva({
  {
  variant: "squared",
  size: "xsmall",
- className: "rounded-sm",
+ className: "rounded",
  },
  {
  variant: "squared",
  size: "small",
- className: "rounded-[4px]",
+ className: "rounded",
  },
  {
  variant: "squared",
  size: "base",
- className: "rounded-[4px]",
+ className: "rounded",
  },
  {
  variant: "squared",
@@ -158,8 +158,7 @@ const Avatar = React.forwardRef<
  <Primitives.Root
  ref={ref}
  {...props}
- className={clx(
- "rounded-x",
+ className={clx( 
  avatarVariants({ variant, size }),
  className
  )}
@@ -173,7 +172,7 @@ const Avatar = React.forwardRef<
  <Primitives.Fallback
  className={clx(
  innerVariants({ variant, size }),
- "bg-ui-bg-component text-ui-fg-subtle pointer-events-none flex select-none items-center justify-center"
+ "bg-ui-bg-component-hover text-ui-fg-subtle pointer-events-none flex select-none items-center justify-center"
  )}
  >
  {fallback}