[docs] Update Avatar docs

z-hhh · May 13, 2022 · cc3eb7c · cc3eb7c
1 parent 877918f
commit cc3eb7c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 35 deletions.
diff --git a/docs/src/docs/core/Avatar.mdx b/docs/src/docs/core/Avatar.mdx
@@ -6,11 +6,12 @@ order: 1
 slug: /core/avatar/
 category: 'data-display'
 description: 'Display user profile image, initials or fallback icon'
-props: ['Avatar', 'AvatarsGroup']
-import: "import { Avatar, AvatarsGroup } from '@mantine/core';"
+componentPrefix: 'Avatar'
+props: ['Avatar', 'AvatarGroup']
+import: "import { Avatar } from '@mantine/core';"
 source: 'mantine-core/src/components/Avatar/Avatar.tsx'
 docs: 'core/Avatar.mdx'
-styles: ['Avatar', 'AvatarsGroup']
+styles: ['Avatar']
 ---
 
 import { AvatarDemos } from '@mantine/demos';
@@ -21,19 +22,13 @@ import { AvatarDemos } from '@mantine/demos';
 
 ## Placeholder
 
-If `src` prop is not set, equals to null or image cannot be loaded, placeholder icon will be rendered instead.
+If `src` prop is not set, equals to null or image cannot be loaded, placeholder icon will be displayed instead.
 Any React node can be used instead of placeholder icon. Usually icon or initials are used in this case:
 
 <Demo data={AvatarDemos.placeholders} />
 
 ## Size and radius
 
-<Demo data={AvatarDemos.configurator} />
-
-Control avatar width and height with `size` and border-radius with `radius`.
-Both props have predefined values: xs, sm, md, lg, xl.
-Alternatively, a number can be used to set radius or size in px:
-
 ```tsx
 <Avatar radius="lg" /> // -> theme predefined large radius
 <Avatar radius={10} /> // -> { borderRadius: '10px' }
@@ -42,6 +37,8 @@ Alternatively, a number can be used to set radius or size in px:
 <Avatar size={50} /> // -> { width: '50px', height: '50px' }
 ```
 
+<Demo data={AvatarDemos.configurator} />
+
 ## Change root element
 
 <Demo data={AvatarDemos.link} />
@@ -57,35 +54,19 @@ function Demo() {
 }
 ```
 
-To use a custom component with TypeScript, pass an additional type:
-
-```tsx
-import { Avatar } from '@mantine/core';
-import { Link } from 'react-router-dom';
-
-function Demo() {
-  return (
-    <>
-      <Avatar<'a'> component="a" href="#" />
-      <Avatar<typeof Link> component={Link} to="/hello" />
-    </>
-  );
-}
-```
-
-## Avatars Group
+## Avatar.Group
 
-Use AvatarsGroup to stack avatar components, set `limit` prop to truncate avatars:
+`Avatar.Group` component can be used to combine multiple avatars into a stack:
 
-<Demo data={AvatarDemos.avatarsGroup} />
+<Demo data={AvatarDemos.group} />
 
-To override truncated avatars length set `total` prop:
+You can combine it with [Tooltip](/core/tooltip/) or [Popover](/core/popover/) to show additional information on hover
 
-<Demo data={AvatarDemos.total} />
+<Demo data={AvatarDemos.groupTooltip} />
 
 ## Accessibility
 
-Avatar renders img html element. It is important to add alt text.
+Avatar renders img html element. Do not forget to add alt text.
 If image fails to load alt will be used as `title` for placeholder.
 
 ```tsx

diff --git a/scripts/docgen.ts b/scripts/docgen.ts
@@ -33,6 +33,9 @@ const EXTRA_FILES_PATHS = [
   '../src/mantine-core/src/components/Menu/MenuItem/MenuItem.tsx',
   '../src/mantine-core/src/components/Menu/MenuLabel/MenuLabel.tsx',
 
+  // Avatar
+  '../src/mantine-core/src/components/Avatar/AvatarGroup/AvatarGroup.tsx',
+
   // Other
   '../src/mantine-notifications/src/NotificationsProvider/NotificationsProvider.tsx',
   '../src/mantine-core/src/components/Menu/MenuItem/MenuItem.tsx',
@@ -43,7 +46,6 @@ const EXTRA_FILES_PATHS = [
   '../src/mantine-core/src/components/Slider/Slider/Slider.tsx',
   '../src/mantine-core/src/components/Slider/RangeSlider/RangeSlider.tsx',
   '../src/mantine-core/src/components/Stepper/Step/Step.tsx',
-  '../src/mantine-core/src/components/Avatar/AvatarsGroup/AvatarsGroup.tsx',
   '../src/mantine-core/src/components/AppShell/Navbar/Navbar.tsx',
   '../src/mantine-core/src/components/AppShell/Header/Header.tsx',
   '../src/mantine-core/src/components/AppShell/Footer/Footer.tsx',

diff --git a/src/mantine-core/src/components/Avatar/Avatar.tsx b/src/mantine-core/src/components/Avatar/Avatar.tsx
@@ -31,8 +31,8 @@ export interface AvatarProps extends DefaultProps<AvatarStylesNames> {
   /** Color from theme.colors used for letter and icon placeholders */
   color?: MantineColor;
 
-  /** `img` element attributes */
-  imageProps?: React.ComponentPropsWithoutRef<'img'>;
+  /** img element attributes */
+  imageProps?: Record<string, any>;
 
   /** Custom placeholder */
   children?: React.ReactNode;