feat(avatar-group): add gap theme variable, closes #3819

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
 

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
 

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) => {

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;
         `)
       ])

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);
       `)
     ])
   ])

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

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