From 192d07bd39949fda7ed8f1e666e106304b00bc97 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 6 Oct 2022 12:11:55 +0800
Subject: [PATCH] feat(avatar-group): add gap theme variable, closes #3819

---
 CHANGELOG.en-US.md                                   |  1 +
 CHANGELOG.zh-CN.md                                   |  1 +
 src/avatar-group/src/AvatarGroup.tsx                 | 11 +++++++++--
 src/avatar-group/src/styles/avatar-group-rtl.cssr.ts |  3 ++-
 src/avatar-group/src/styles/avatar-group.cssr.ts     |  5 +++--
 src/avatar-group/styles/dark.ts                      |  4 +++-
 src/avatar-group/styles/light.ts                     |  9 ++++++++-
 7 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index fc8e1b5d1..cb86bf38a 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -39,6 +39,7 @@
 - `n-select` adds `show-checkmark` prop, closes [#3749](https://github.com/tusen-ai/naive-ui/issues/3749).
 - `n-tree` adds `animated` prop, closes [#3784](https://github.com/tusen-ai/naive-ui/issues/3784).
 - `n-slider` adds `markFontSize` theme variable, closes [#3820](https://github.com/tusen-ai/naive-ui/issues/3820).
+- `n-avatar-group` adds `gap` theme variable, closes [#3819](https://github.com/tusen-ai/naive-ui/issues/3819).
 
 ## 2.33.3
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 62d07d155..4212f944e 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -40,6 +40,7 @@
 - `n-select` 新增 `show-checkmark` 属性，关闭 [#3749](https://github.com/tusen-ai/naive-ui/issues/3749)
 - `n-tree` 新增 `animated` 属性，关闭 [#3784](https://github.com/tusen-ai/naive-ui/issues/3784)
 - `n-slider` 新增 `markFontSize` 主题变量，关闭 [#3820](https://github.com/tusen-ai/naive-ui/issues/3820)
+- `n-avatar-group` 新增 `gap` 主题变量，关闭 [#3819](https://github.com/tusen-ai/naive-ui/issues/3819)
 
 ## 2.33.3
 
diff --git a/src/avatar-group/src/AvatarGroup.tsx b/src/avatar-group/src/AvatarGroup.tsx
index 17f8b0bd2..1abd6bc01 100644
--- a/src/avatar-group/src/AvatarGroup.tsx
+++ b/src/avatar-group/src/AvatarGroup.tsx
@@ -14,7 +14,8 @@ import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import style from './styles/avatar-group.cssr'
 import { useRtl } from '../../_mixins/use-rtl'
-import { avatarGroupLight, AvatarGroupTheme } from '../styles'
+import { avatarGroupLight } from '../styles'
+import type { AvatarGroupTheme } from '../styles'
 
 export interface AvatarGroupInjection {
   size?: Size | undefined
@@ -76,7 +77,12 @@ export default defineComponent({
       rtlEnabled: rtlEnabledRef,
       mergedClsPrefix: mergedClsPrefixRef,
       restOptions: restOptionsRef,
-      displayedOptions: displayedOptionsRef
+      displayedOptions: displayedOptionsRef,
+      cssVars: computed(() => {
+        return {
+          '--n-gap': mergedThemeRef.value.self.gap
+        }
+      })
     }
   },
   render () {
@@ -94,6 +100,7 @@ export default defineComponent({
           this.rtlEnabled && `${mergedClsPrefix}-avatar-group--rtl`,
           this.vertical && `${mergedClsPrefix}-avatar-group--vertical`
         ]}
+        style={this.cssVars}
         role="group"
       >
         {displayedOptions.map((option) => {
diff --git a/src/avatar-group/src/styles/avatar-group-rtl.cssr.ts b/src/avatar-group/src/styles/avatar-group-rtl.cssr.ts
index 1518608ba..c79a274b2 100644
--- a/src/avatar-group/src/styles/avatar-group-rtl.cssr.ts
+++ b/src/avatar-group/src/styles/avatar-group-rtl.cssr.ts
@@ -1,5 +1,6 @@
 import { c, cB, cM, cNotM } from '../../../_utils/cssr'
 
+// --n-gap
 export default cB('avatar-group', [
   cM('rtl', `
     direction: rtl;
@@ -9,7 +10,7 @@ export default cB('avatar-group', [
     `, [
       cB('avatar', [
         c('&:not(:first-child)', `
-          margin-right: -12px;
+          margin-right: var(--n-gap);
           margin-left: 0;
         `)
       ])
diff --git a/src/avatar-group/src/styles/avatar-group.cssr.ts b/src/avatar-group/src/styles/avatar-group.cssr.ts
index dda13af44..47f65c268 100644
--- a/src/avatar-group/src/styles/avatar-group.cssr.ts
+++ b/src/avatar-group/src/styles/avatar-group.cssr.ts
@@ -1,5 +1,6 @@
 import { c, cB, cM, cNotM } from '../../../_utils/cssr/index'
 
+// --n-gap
 export default cB('avatar-group', `
   flex-wrap: nowrap;
   display: inline-flex;
@@ -10,7 +11,7 @@ export default cB('avatar-group', `
   }, [
     cB('avatar', [
       c('&:not(:first-child)', `
-         margin-left: -12px;
+         margin-left: var(--n-gap);
       `)
     ])
   ]),
@@ -19,7 +20,7 @@ export default cB('avatar-group', `
   }, [
     cB('avatar', [
       c('&:not(:first-child)', `
-         margin-top: -12px;
+         margin-top: var(--n-gap);
       `)
     ])
   ])
diff --git a/src/avatar-group/styles/dark.ts b/src/avatar-group/styles/dark.ts
index 3f1674b3a..c9a97ce6a 100644
--- a/src/avatar-group/styles/dark.ts
+++ b/src/avatar-group/styles/dark.ts
@@ -1,13 +1,15 @@
 import { commonDark } from '../../_styles/common'
 import { avatarDark } from '../../avatar/styles'
 import type { AvatarGroupTheme } from './light'
+import { self } from './light'
 
 const avatarGroupDark: AvatarGroupTheme = {
   name: 'AvatarGroup',
   common: commonDark,
   peers: {
     Avatar: avatarDark
-  }
+  },
+  self
 }
 
 export default avatarGroupDark
diff --git a/src/avatar-group/styles/light.ts b/src/avatar-group/styles/light.ts
index 754490c63..e0aa319c9 100644
--- a/src/avatar-group/styles/light.ts
+++ b/src/avatar-group/styles/light.ts
@@ -5,12 +5,19 @@ import { avatarLight } from '../../avatar/styles'
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type AvatarGroupThemeVars = {}
 
+export const self = () => {
+  return {
+    gap: '-12px'
+  }
+}
+
 const avatarGroupLight = createTheme({
   name: 'AvatarGroup',
   common: commonLight,
   peers: {
     Avatar: avatarLight
-  }
+  },
+  self
 })
 
 export default avatarGroupLight