AvatarGroup : add overflow slot for custom tooltip on hidden avatars#6369
AvatarGroup : add overflow slot for custom tooltip on hidden avatars#6369
Conversation
📝 WalkthroughWalkthroughAdded an Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@docs/app/components/content/examples/avatar-group/AvatarGroupOverflowTooltipExample.vue`:
- Line 2: The tooltip string returned by getOverflowTooltip always uses the
plural "teammates", causing "1 more teammates" for a single hidden avatar;
update getOverflowTooltip to return a singular label when hiddenCount is 1
(e.g., "1 more teammate") and the plural for all other counts (e.g., "{n} more
teammates") so the tooltip grammatically matches the count.
In `@docs/content/docs/2.components/avatar-group.md`:
- Line 72: Update the new docs heading "### Overflow tooltip" to include the
unreleased-feature badge by appending :badge{label="Soon"
class="align-text-top"} to that heading so it reads "### Overflow tooltip
:badge{label=\"Soon\" class=\"align-text-top\"}" in
docs/content/docs/2.components/avatar-group.md.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e0bb0410-d95d-416d-aafc-7f0a06eb499a
📒 Files selected for processing (4)
docs/app/components/content/examples/avatar-group/AvatarGroupOverflowTooltipExample.vuedocs/content/docs/2.components/avatar-group.mdsrc/runtime/components/AvatarGroup.vuetest/components/AvatarGroup.spec.ts
| @@ -0,0 +1,31 @@ | |||
| <script setup lang="ts"> | |||
| const getOverflowTooltip = (hiddenCount: number) => `${hiddenCount} more teammates` | |||
There was a problem hiding this comment.
Pluralize the tooltip label for the single-hidden-avatar case.
With the current example data, this renders 1 more teammates.
Suggested copy fix
-const getOverflowTooltip = (hiddenCount: number) => `${hiddenCount} more teammates`
+const getOverflowTooltip = (hiddenCount: number) => `${hiddenCount} more teammate${hiddenCount === 1 ? '' : 's'}`📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const getOverflowTooltip = (hiddenCount: number) => `${hiddenCount} more teammates` | |
| const getOverflowTooltip = (hiddenCount: number) => `${hiddenCount} more teammate${hiddenCount === 1 ? '' : 's'}` |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@docs/app/components/content/examples/avatar-group/AvatarGroupOverflowTooltipExample.vue`
at line 2, The tooltip string returned by getOverflowTooltip always uses the
plural "teammates", causing "1 more teammates" for a single hidden avatar;
update getOverflowTooltip to return a singular label when hiddenCount is 1
(e.g., "1 more teammate") and the plural for all other counts (e.g., "{n} more
teammates") so the tooltip grammatically matches the count.
| :u-avatar{src="https://github.com/noook.png" alt="Neil Richter" loading="lazy"} | ||
| :: | ||
|
|
||
| ### Overflow tooltip |
There was a problem hiding this comment.
Add the unreleased-feature badge to this new docs heading.
This section documents a new slot API, so the heading should carry the Soon badge until the feature ships in the next npm release.
Suggested docs fix
-### Overflow tooltip
+### Overflow tooltip :badge{label="Soon" class="align-text-top"}As per coding guidelines, docs/**/*.md: Add :badge{label="Soon" class="align-text-top"} to docs headings when introducing new features or fixes, as the docs deploy on merge but features ship on next npm release.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ### Overflow tooltip | |
| ### Overflow tooltip :badge{label="Soon" class="align-text-top"} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/content/docs/2.components/avatar-group.md` at line 72, Update the new
docs heading "### Overflow tooltip" to include the unreleased-feature badge by
appending :badge{label="Soon" class="align-text-top"} to that heading so it
reads "### Overflow tooltip :badge{label=\"Soon\" class=\"align-text-top\"}" in
docs/content/docs/2.components/avatar-group.md.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/runtime/components/AvatarGroup.vue`:
- Line 29: The overflow fallback avatar is still tagged as data-slot="base" and
the overflow slot marker must be carried through avatarProps so consumers/tests
can identify overflow content; update the overflow slot signature (the
overflow?(props: { hiddenCount: number, avatarProps: { text: string, class: any
} }): VNode[] type) and the code that builds/passes avatarProps in
AvatarGroup.vue so that avatarProps includes the data-slot attribute (e.g.,
data-slot="overflow") and ensure the default fallback avatar element binds that
avatarProps, and also apply the same change for the other overflow usage block
around the ~94-108 region so both default and custom slot renderings expose the
same data-slot marker.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 36a8884e-766d-4f3f-a6df-65e0a43c0913
📒 Files selected for processing (4)
docs/app/components/content/examples/avatar-group/AvatarGroupOverflowTooltipExample.vuedocs/content/docs/2.components/avatar-group.mdsrc/runtime/components/AvatarGroup.vuetest/components/AvatarGroup.spec.ts
✅ Files skipped from review due to trivial changes (2)
- docs/content/docs/2.components/avatar-group.md
- docs/app/components/content/examples/avatar-group/AvatarGroupOverflowTooltipExample.vue
|
|
||
| export interface AvatarGroupSlots { | ||
| default?(props?: {}): VNode[] | ||
| overflow?(props: { hiddenCount: number, avatarProps: { text: string, class: any } }): VNode[] |
There was a problem hiding this comment.
Expose the overflow slot marker through avatarProps.
The fallback overflow avatar is still marked as data-slot="base", so consumers/tests can’t distinguish the new overflow content when using the provided avatarProps. Consider carrying the marker in avatarProps so both the default fallback and custom slot examples keep the same identifier.
Proposed fix
- overflow?(props: { hiddenCount: number, avatarProps: { text: string, class: any } }): VNode[]
+ overflow?(props: { hiddenCount: number, avatarProps: { text: string, class: any, 'data-slot': string } }): VNode[] const overflowAvatarProps = computed(() => ({
text: `+${hiddenCount.value}`,
- class: ui.value.base({ class: uiProp.value?.base })
+ class: ui.value.base({ class: uiProp.value?.base }),
+ 'data-slot': 'overflow'
})) <slot v-if="hiddenCount > 0" name="overflow" :hidden-count="hiddenCount" :avatar-props="overflowAvatarProps">
- <UAvatar v-bind="overflowAvatarProps" data-slot="base" />
+ <UAvatar v-bind="overflowAvatarProps" />
</slot>As per coding guidelines, src/runtime/components/**/*.vue: “Add data-slot="name" attributes on all template elements to identify slot content”.
Also applies to: 94-108
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/runtime/components/AvatarGroup.vue` at line 29, The overflow fallback
avatar is still tagged as data-slot="base" and the overflow slot marker must be
carried through avatarProps so consumers/tests can identify overflow content;
update the overflow slot signature (the overflow?(props: { hiddenCount: number,
avatarProps: { text: string, class: any } }): VNode[] type) and the code that
builds/passes avatarProps in AvatarGroup.vue so that avatarProps includes the
data-slot attribute (e.g., data-slot="overflow") and ensure the default fallback
avatar element binds that avatarProps, and also apply the same change for the
other overflow usage block around the ~94-108 region so both default and custom
slot renderings expose the same data-slot marker.
commit: |
1 participant
❓ Type of change
📚 Description
This pull request adds support for customizable tooltips on the overflow (“+N”) avatar in the
AvatarGroupcomponent.Added a new section in
avatar-group.mdwith an example on how to use the slotSee #4870 for the original V3 PR
📝 Checklist