feat: added RTL support to avatar and avatar group components

nextui-org · Oct 1, 2023 · 6ac699c · 6ac699c
1 parent 9d4c7ed
commit 6ac699c
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/apps/docs/content/components/avatar/group-custom-count.ts b/apps/docs/content/components/avatar/group-custom-count.ts
@@ -7,7 +7,7 @@ export default function App() {
       max={3}
       total={10}
       renderCount={(count) => (
-        <p className="text-small text-foreground font-medium ml-2">+{count} others</p>
+        <p className="text-small text-foreground font-medium ms-2">+{count} others</p>
       )}
     >
       <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />

diff --git a/packages/components/avatar/src/use-avatar-group.ts b/packages/components/avatar/src/use-avatar-group.ts
@@ -91,7 +91,7 @@ export function useAvatarGroup(props: UseAvatarGroupProps = {}) {
 
     const childProps = {
       className: clsx(
-        isFirstAvatar ? "ml-0" : !isGrid ? "-ml-2" : "",
+        isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
         isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : "",
       ),
     };

diff --git a/packages/components/avatar/stories/avatar-group.stories.tsx b/packages/components/avatar/stories/avatar-group.stories.tsx
@@ -102,7 +102,7 @@ export const CustomCount = {
     max: 3,
     total: 10,
     renderCount: (count: number) => (
-      <p className="text-sm text-black dark:text-white ml-2">+{count}</p>
+      <p className="text-sm text-black dark:text-white ms-2">+{count}</p>
     ),
   },
 };
diff --git a/packages/core/theme/src/components/avatar.ts b/packages/core/theme/src/components/avatar.ts
@@ -114,7 +114,7 @@ const avatar = tv({
     isInGroup: {
       true: {
         base: [
-          "-ml-2 data-[hover=true]:-translate-x-3 transition-transform",
+          "-ms-2 data-[hover=true]:-translate-x-3 transition-transform",
           "data-[focus-visible=true]:-translate-x-3",
         ],
       },
@@ -197,7 +197,7 @@ const avatarGroup = tv({
 
 // calculated classNames
 // src/components/avatar/src/use-avatar-group.ts
-// -ml-2 hover:-translate-x-0 ml-0
+// -ms-2 hover:-translate-x-0 ms-0
 
 export type AvatarGroupVariantProps = VariantProps<typeof avatarGroup>;
 export type AvatarVariantProps = VariantProps<typeof avatar>;