From ebab10804c096f0aed0ef5ec473e8fc549c002f2 Mon Sep 17 00:00:00 2001 From: winches <96854855+winchesHe@users.noreply.github.com> Date: Mon, 8 Apr 2024 00:03:52 +0800 Subject: [PATCH 1/7] feat: rename newPost to new (#2665) --- packages/core/react/src/scripts/postbuild.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/react/src/scripts/postbuild.js b/packages/core/react/src/scripts/postbuild.js index 74f0cbc05c..4fc04f8009 100644 --- a/packages/core/react/src/scripts/postbuild.js +++ b/packages/core/react/src/scripts/postbuild.js @@ -52,7 +52,7 @@ function generateComponents() { version: componentVersion, docs: componentDocs, description: componentDesc, - status: (routeComponent.updated && 'updated') || (routeComponent.newPost && 'newPost') || 'stable', + status: (routeComponent.updated && 'updated') || (routeComponent.newPost && 'new') || 'stable', style: style || '', } From 85ccb96d25cc31664de113d9ac057ce306890114 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Mon, 8 Apr 2024 21:26:22 +0800 Subject: [PATCH 2/7] fix(avatar): spread getAvatarGroupCountProps in avatar count --- packages/components/avatar/src/avatar-group.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/avatar/src/avatar-group.tsx b/packages/components/avatar/src/avatar-group.tsx index f164e70b68..1106703f57 100644 --- a/packages/components/avatar/src/avatar-group.tsx +++ b/packages/components/avatar/src/avatar-group.tsx @@ -12,8 +12,9 @@ const AvatarGroup = forwardRef<"div", AvatarGroupProps>((props, ref) => { clones, context, remainingCount, - renderCount = (count) => , + getAvatarGroupCountProps, getAvatarGroupProps, + renderCount = (count) => , } = useAvatarGroup({ ...props, ref, From 1d014e2434d8cf36fff82ef6b77282e670b1b7d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Mon, 8 Apr 2024 21:26:48 +0800 Subject: [PATCH 3/7] feat(avatar): support slots in avatarGroup --- packages/core/theme/src/components/avatar.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/theme/src/components/avatar.ts b/packages/core/theme/src/components/avatar.ts index 96385f4873..16bf99f6f8 100644 --- a/packages/core/theme/src/components/avatar.ts +++ b/packages/core/theme/src/components/avatar.ts @@ -187,7 +187,10 @@ const avatar = tv({ * */ const avatarGroup = tv({ - base: "flex items-center justify-center h-auto w-max-content", + slots: { + base: "flex items-center justify-center h-auto w-max-content", + count: "hover:-translate-x-0", + }, variants: { isGrid: { true: "inline-grid grid-cols-4 gap-3", @@ -200,6 +203,7 @@ const avatarGroup = tv({ // -ms-2 hover:-translate-x-0 ms-0 export type AvatarGroupVariantProps = VariantProps; +export type AvatarGroupSlots = keyof ReturnType; export type AvatarVariantProps = VariantProps; export type AvatarSlots = keyof ReturnType; From e1f9f9509ffcecbab35d9c3b3c8a236179000920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Mon, 8 Apr 2024 21:27:13 +0800 Subject: [PATCH 4/7] feat(avatar): support classNames and add getAvatarGroupCountProps --- .../components/avatar/src/use-avatar-group.ts | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/components/avatar/src/use-avatar-group.ts b/packages/components/avatar/src/use-avatar-group.ts index 461e902508..c8bc27b48b 100644 --- a/packages/components/avatar/src/use-avatar-group.ts +++ b/packages/components/avatar/src/use-avatar-group.ts @@ -1,4 +1,5 @@ import type {ReactNode} from "react"; +import type {SlotsToClasses, AvatarGroupSlots, AvatarGroupVariantProps} from "@nextui-org/theme"; import {avatarGroup} from "@nextui-org/theme"; import {HTMLNextUIProps, PropGetter} from "@nextui-org/system"; @@ -31,9 +32,23 @@ interface Props extends HTMLNextUIProps<"div"> { * This allows you to render a custom count component. */ renderCount?: (count: number) => ReactNode; + /** + * Classname or List of classes to change the classNames of the avatar group. + * if `className` is passed, it will be added to the base slot. + * + * @example + * ```ts + * + * ``` + */ + classNames?: SlotsToClasses; } export type UseAvatarGroupProps = Props & + Omit & Partial>; export type ContextType = { @@ -60,6 +75,7 @@ export function useAvatarGroup(props: UseAvatarGroupProps = {}) { isGrid, renderCount, className, + classNames, ...otherProps } = props; @@ -78,7 +94,7 @@ export function useAvatarGroup(props: UseAvatarGroupProps = {}) { }), [size, color, radius, isGrid, isBordered, isDisabled], ); - const classNames = useMemo(() => avatarGroup({className, isGrid}), [className, isGrid]); + const slots = useMemo(() => avatarGroup({className, isGrid}), [className, isGrid]); const validChildren = getValidChildren(children); const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren; @@ -102,12 +118,22 @@ export function useAvatarGroup(props: UseAvatarGroupProps = {}) { const getAvatarGroupProps: PropGetter = () => { return { ref: domRef, - className: classNames, + className: slots.base({ + class: clsx(classNames?.base, className), + }), role: "group", ...otherProps, }; }; + const getAvatarGroupCountProps = () => { + return { + className: slots.count({ + class: classNames?.count, + }), + } as AvatarProps; + }; + return { Component, context, @@ -115,6 +141,7 @@ export function useAvatarGroup(props: UseAvatarGroupProps = {}) { clones, renderCount, getAvatarGroupProps, + getAvatarGroupCountProps, }; } From eab930c3166491e3db19468eb3a108ec30f2da0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Mon, 8 Apr 2024 21:42:51 +0800 Subject: [PATCH 5/7] feat(docs): add classNames to avatar group --- apps/docs/content/docs/components/avatar.mdx | 23 ++++++++++---------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx index ad8105f1f0..2cb464ea78 100644 --- a/apps/docs/content/docs/components/avatar.mdx +++ b/apps/docs/content/docs/components/avatar.mdx @@ -174,14 +174,15 @@ You can customize any part of the avatar by using the `classNames` prop, each `s ### Avatar Group Props -| Attribute | Type | Description | Default | -| ----------- | ------------------------------ | --------------------------------------------------- | ------- | -| max | `number` | The maximum number of visible avatars | `5` | -| total | `number` | Control the number of avatar not visible | - | -| size | `AvatarProps['size']` | Size of the avatars | - | -| color | `AvatarProps['color']` | Color of the avatars | - | -| radius | `AvatarProps['radius']` | Radius of the avatars | - | -| isGrid | `boolean` | Whether the avatars should be displayed in a grid | `false` | -| isDisabled | `boolean` | Whether the avatars are disabled | - | -| isBordered | `boolean` | Whether the avatars have a border | - | -| renderCount | `(count: number) => ReactNode` | This allows you to render a custom count component. | - | +| Attribute | Type | Description | Default | +| ----------- | ---------------------------------- | --------------------------------------------------- | ------- | +| max | `number` | The maximum number of visible avatars | `5` | +| total | `number` | Control the number of avatar not visible | - | +| size | `AvatarProps['size']` | Size of the avatars | - | +| color | `AvatarProps['color']` | Color of the avatars | - | +| radius | `AvatarProps['radius']` | Radius of the avatars | - | +| isGrid | `boolean` | Whether the avatars should be displayed in a grid | `false` | +| isDisabled | `boolean` | Whether the avatars are disabled | - | +| isBordered | `boolean` | Whether the avatars have a border | - | +| renderCount | `(count: number) => ReactNode` | This allows you to render a custom count component. | - | +| classNames | `Record<"base"｜ "count", string>` | Allows to set custom class names for the avatar group slots. | - | From 5cd9582e27e9d69d83d43916cc2c21160e27fe51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Mon, 8 Apr 2024 21:43:06 +0800 Subject: [PATCH 6/7] feat(avatar): add CustomSlots in avatar group --- .../avatar/stories/avatar-group.stories.tsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/packages/components/avatar/stories/avatar-group.stories.tsx b/packages/components/avatar/stories/avatar-group.stories.tsx index cb0e632469..2b5e75fc85 100644 --- a/packages/components/avatar/stories/avatar-group.stories.tsx +++ b/packages/components/avatar/stories/avatar-group.stories.tsx @@ -42,6 +42,47 @@ const Template = (args: AvatarGroupProps) => ( ); +const CustomSlotsTemplate = (args: AvatarGroupProps) => ( + + + + + + + + +); + export const Default = { render: Template, @@ -106,3 +147,14 @@ export const CustomCount = { ), }, }; + +export const CustomSlots = { + render: CustomSlotsTemplate, + + args: { + classNames: {count: "border-2 border-yellow-400"}, + max: 3, + radius: "sm", + size: "sm", + }, +}; From fdd9074cfafa6f8f1ad171d50e6f0d533fa33547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Mon, 8 Apr 2024 21:45:11 +0800 Subject: [PATCH 7/7] feat(changeset): support slots in avatar group --- .changeset/forty-ants-promise.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/forty-ants-promise.md diff --git a/.changeset/forty-ants-promise.md b/.changeset/forty-ants-promise.md new file mode 100644 index 0000000000..47eeaddd8a --- /dev/null +++ b/.changeset/forty-ants-promise.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/avatar": patch +"@nextui-org/theme": patch +--- + +Support slots in AvatarGroup