feat: New Component Avatar Group [HOMER-2118] #2518

Lelith · 2023-07-04T12:57:54Z

Purpose of PR

Introduces a new component for grouping Avatars. It comes in two sizes and two different designs (stacked and spaced). It will show a maximum of 3 Avatar children, the rest of the children get rendered as a Menu.
The Avatar components require an alt-text which will be displayed as the user name.

changeset-bot · 2023-07-04T12:57:57Z

⚠️ No Changeset found

Latest commit: c567ffd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2023-07-04T12:57:58Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	Jul 7, 2023 2:32pm

github-actions · 2023-07-04T13:03:23Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	147.83 KB (0%)	3 s (0%)	135 ms (+72.66% 🔺)	3.1 s
Module	144.08 KB (-0.01% 🔽)	2.9 s (-0.01% 🔽)	69 ms (-10.49% 🔽)	3 s

miguelcrespo

I also don't see the new component in the preview: https://forma-36-git-feat-avatargrouphomer-2118.colorfuldemo.com/components/avatar

Is this expected?

miguelcrespo · 2023-07-06T12:19:00Z

packages/components/avatar/README.mdx

+### Variants
+
+The group can be rendered in two variations
+
+- **spaced** - default variant
+- **stacked**
+
+```jsx file=./examples/AvatarGroupVariantExample.tsx
+
+```
+
+### Sizes
+
+The group can be rendered in two different sizes
+
+- **Small** - 24px
+- **Medium** - 32px, default size
+
+```jsx file=./examples/AvatarGroupSizeExample.tsx
+
+```


question: based on the example of the Avatar shouldn't this headings be under ## Examples ?

It also doesn't have the import section

yes, we have specified structure for readme files, https://github.com/contentful/forma-36/blob/7e46b96fd42f9a760987802acd7ef0b1811e9894/scripts/plop-templates/package/README.mdx.hbs

denkristoffer

The docs are broken: https://forma-36-git-feat-avatargrouphomer-2118.colorfuldemo.com/components/avatar

At least one of the errors is because the new component has not been added to the SandpackRenderer and LiveEditor.

bgutsol

Other than what I've commented, looks good!

Also make sure to add AvatarGroup import here and pass it to the liveProviderScope

SandpackRenderer though should work fine when the new version gets published.

bgutsol · 2023-07-06T13:07:55Z

packages/components/avatar/README.mdx

@@ -97,3 +97,39 @@ When the avatar image is loading, a loading skeleton will be shown automatically
 ## Accessibility

 Make sure to pass a fitting `alt` property, especially if the avatar is used by itself without the user's name next to it.
+


Let's follow the same structure we have in Button for example, which also has a ButtonGroup. And by the same structure I mean separate folder avatar/src/AvatarGroup where you can have implementation, styles, README, etc.

bgutsol · 2023-07-06T13:11:58Z

packages/components/avatar/README.mdx

+### Variants
+
+The group can be rendered in two variations
+
+- **spaced** - default variant
+- **stacked**
+
+```jsx file=./examples/AvatarGroupVariantExample.tsx
+
+```
+
+### Sizes
+
+The group can be rendered in two different sizes
+
+- **Small** - 24px
+- **Medium** - 32px, default size
+
+```jsx file=./examples/AvatarGroupSizeExample.tsx
+
+```


yes, we have specified structure for readme files, https://github.com/contentful/forma-36/blob/7e46b96fd42f9a760987802acd7ef0b1811e9894/scripts/plop-templates/package/README.mdx.hbs

bgutsol · 2023-07-06T13:14:10Z

packages/components/avatar/src/AvatarGroup.tsx

+
+import { cx } from 'emotion';
+
+export type Variant = 'stacked' | 'spaced';


If we export it I'd give it a more specific name

Suggested change

export type Variant = 'stacked' | 'spaced';

export type AvatarGroupVariant = 'stacked' | 'spaced';

bgutsol · 2023-07-06T13:15:08Z

packages/components/avatar/src/AvatarGroup.tsx

+
+export interface AvatarGroupProps extends CommonProps {
+  spacing?: SpacingTokens;
+  className?: string;


className is already assigned from CommonProps

Suggested change

className?: string;

bgutsol · 2023-07-06T13:49:55Z

packages/components/avatar/src/AvatarGroup.tsx

+const renderAvatars = (
+  children: AvatarGroupProps['children'],
+  size: AvatarGroupProps['size'],
+  variant: AvatarGroupProps['variant'],
+) => {
+  const styles = getAvatarGroupStyles(size);
+
+  if (React.Children.count(children) > 3) {
+    return (
+      <>
+        {React.Children.map(children, (child, index) => {
+          if (index < 2) {
+            return React.cloneElement(child as React.ReactElement, {
+              key: `avatar-rendered-${index}`,
+              size: size,
+              className: cx((child as React.ReactElement).props.className, {
+                [styles.avatarStacked]: variant === 'stacked',
+                [styles.avatarSpaced]: variant === 'spaced',
+              }),
+            });
+          }
+        })}
+        <Menu placement="bottom-end">
+          <Menu.Trigger>
+            <button
+              type="button"
+              className={cx(
+                {
+                  [styles.avatarStacked]: variant === 'stacked',
+                  [styles.avatarSpaced]: variant === 'spaced',
+                },
+                styles.moreAvatarsBtn,
+              )}
+            >
+              {React.Children.count(children) - 2}
+            </button>
+          </Menu.Trigger>
+          <Menu.List>
+            {React.Children.toArray(children)
+              .slice(2)
+              .map((child, index) => {
+                return (
+                  <Menu.Item
+                    className={styles.moreAvatarsItem}
+                    key={`avatar-${index}`}
+                  >
+                    {React.cloneElement(child as React.ReactElement, {
+                      key: `avatar-menuitem-${index}`,
+                      size: 'tiny',
+                    })}
+                    {(child as React.ReactElement).props.alt}
+                  </Menu.Item>
+                );
+              })}
+          </Menu.List>
+        </Menu>
+      </>
+    );
+  }
+  return React.Children.map(children, (child, index) => {
+    return React.cloneElement(child as React.ReactElement, {
+      key: `avatar-rendered-${index}`,
+      size: size,
+      className: cx((child as React.ReactElement).props.className, {
+        [styles.avatarStacked]: variant === 'stacked',
+        [styles.avatarSpaced]: variant === 'spaced',
+      }),
+    });
+  });
+};
+
+function _AvatarGroup(
+  {
+    children,
+    className,
+    size = 'medium',
+    variant = 'spaced',
+    testId = 'cf-ui-avatar-group',
+  }: AvatarGroupProps,
+  forwardedRef: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <Flex
+      flexDirection="row"
+      className={cx(className)}
+      data-test-id={testId}
+      ref={forwardedRef}
+    >
+      {renderAvatars(children, size, variant)}
+    </Flex>
+  );
+}


We can simplify it a bit. Sorry for nitpicking, just wanted to share the idea.

Suggested change

const renderAvatars = (

children: AvatarGroupProps['children'],

size: AvatarGroupProps['size'],

variant: AvatarGroupProps['variant'],

) => {

const styles = getAvatarGroupStyles(size);

if (React.Children.count(children) > 3) {

return (

<>

{React.Children.map(children, (child, index) => {

if (index < 2) {

return React.cloneElement(child as React.ReactElement, {

key: `avatar-rendered-${index}`,

size: size,

className: cx((child as React.ReactElement).props.className, {

[styles.avatarStacked]: variant === 'stacked',

[styles.avatarSpaced]: variant === 'spaced',

}),

});

}

})}

<Menu placement="bottom-end">

<Menu.Trigger>

<button

type="button"

className={cx(

{

[styles.avatarStacked]: variant === 'stacked',

[styles.avatarSpaced]: variant === 'spaced',

},

styles.moreAvatarsBtn,

)}

>

{React.Children.count(children) - 2}

</button>

</Menu.Trigger>

<Menu.List>

{React.Children.toArray(children)

.slice(2)

.map((child, index) => {

return (

<Menu.Item

className={styles.moreAvatarsItem}

key={`avatar-${index}`}

>

{React.cloneElement(child as React.ReactElement, {

key: `avatar-menuitem-${index}`,

size: 'tiny',

})}

{(child as React.ReactElement).props.alt}

</Menu.Item>

);

})}

</Menu.List>

</Menu>

</>

);

}

return React.Children.map(children, (child, index) => {

return React.cloneElement(child as React.ReactElement, {

key: `avatar-rendered-${index}`,

size: size,

className: cx((child as React.ReactElement).props.className, {

[styles.avatarStacked]: variant === 'stacked',

[styles.avatarSpaced]: variant === 'spaced',

}),

});

});

};

function _AvatarGroup(

{

children,

className,

size = 'medium',

variant = 'spaced',

testId = 'cf-ui-avatar-group',

}: AvatarGroupProps,

forwardedRef: React.Ref<HTMLDivElement>,

) {

return (

<Flex

flexDirection="row"

className={cx(className)}

data-test-id={testId}

ref={forwardedRef}

>

{renderAvatars(children, size, variant)}

</Flex>

);

}

function _AvatarGroup(

{

children,

className,

size = 'medium',

variant = 'spaced',

testId = 'cf-ui-avatar-group',

}: AvatarGroupProps,

forwardedRef: React.Ref<HTMLDivElement>,

) {

const styles = getAvatarGroupStyles(size);

const childrenArray = React.Children.toArray(children);

const childrenToRenderCount = childrenArray.length > 3 ? 2 : 3;

const childrenToRender = childrenArray.slice(0, childrenToRenderCount);

const childrenInMenu = childrenArray.slice(childrenToRenderCount);

return (

<Flex

flexDirection="row"

className={cx(className)}

data-test-id={testId}

ref={forwardedRef}

>

{childrenToRender.map((child, index) => {

return React.cloneElement(child as React.ReactElement, {

key: `avatar-rendered-${index}`,

size: size,

className: cx((child as React.ReactElement).props.className, {

[styles.avatarStacked]: variant === 'stacked',

[styles.avatarSpaced]: variant === 'spaced',

}),

});

})}

{childrenInMenu.length > 0 && (

<Menu placement="bottom-end">

<Menu.Trigger>

<button

type="button"

className={cx(

{

[styles.avatarStacked]: variant === 'stacked',

[styles.avatarSpaced]: variant === 'spaced',

},

styles.moreAvatarsBtn,

)}

>

{childrenInMenu.length}

</button>

</Menu.Trigger>

<Menu.List>

{childrenInMenu.map((child, index) => {

return (

<Menu.Item

className={styles.moreAvatarsItem}

key={`avatar-${index}`}

>

{React.cloneElement(child as React.ReactElement, {

key: `avatar-menuitem-${index}`,

size: 'tiny',

})}

{(child as React.ReactElement).props.alt}

</Menu.Item>

);

})}

</Menu.List>

</Menu>

)}

</Flex>

);

}

denkristoffer · 2023-07-07T11:57:22Z

packages/components/avatar/src/AvatarGroup/AvatarGroup.tsx

+import { cx } from 'emotion';
+
+export interface AvatarGroupProps extends CommonProps {
+  spacing?: SpacingTokens;


I don't see the spacing prop being used anywhere, should it be?

packages/components/avatar/src/AvatarGroup/AvatarGroup.tsx

…forma-36 into feat/Avatar_Group_HOMER-2118

denkristoffer · 2023-07-07T13:00:52Z

Can you please bump the package.json version? You can do it with npm run-script prerelease or manually.

miguelcrespo · 2023-07-07T13:48:53Z

Can you please bump the package.json version? You can do it with npm run-script prerelease or manually.

@denkristoffer Done

Lelith added 8 commits July 3, 2023 16:11

feat: enable conditional render for more than 3 avatars

618559f

feat: render additonal avatars in dropdown

aafcc35

feat: add styling to component

a6ecedd

test: add tests for AvatarGroup

a9c34e8

docs: add documentation and storybook examples

5d86526

feat: handover size to styles

4cbaae9

fix: remove eslint disable

49c05f4

chore: add dependency package

f777d06

Lelith requested review from denkristoffer, miguelcrespo and jfctfl July 4, 2023 12:57

Lelith requested a review from a team as a code owner July 4, 2023 12:57

Lelith requested a review from bgutsol July 4, 2023 12:57

Merge branch 'main' into feat/Avatar_Group_HOMER-2118

bcaffed

vercel bot deployed to Preview July 4, 2023 13:06 View deployment

Lelith added 2 commits July 6, 2023 09:21

Merge branch 'main' into feat/Avatar_Group_HOMER-2118

957db15

feat: adjust types for Avatar component

063fd37

vercel bot had a problem deploying to Preview July 6, 2023 07:46 Failure

chore: adjust type

434157a

vercel bot deployed to Preview July 6, 2023 07:59 View deployment

mdmjg approved these changes Jul 6, 2023

View reviewed changes

miguelcrespo approved these changes Jul 6, 2023

View reviewed changes

denkristoffer requested changes Jul 6, 2023

View reviewed changes

bgutsol reviewed Jul 6, 2023

View reviewed changes

Lelith added 2 commits July 6, 2023 17:24

chore: add to live editor

8e00979

feat: apply review findings

98f5f6d

vercel bot had a problem deploying to Preview July 6, 2023 15:46 Failure

chore: refactor logic for split rendering the avatars

835ce39

vercel bot had a problem deploying to Preview July 6, 2023 16:00 Failure

fix: add README to Avatar component

f679b2d

vercel bot had a problem deploying to Preview July 7, 2023 10:04 Failure

fix: move README to main folder

50f0a53

vercel bot had a problem deploying to Preview July 7, 2023 10:15 Failure

fix: Fix component slu

c84853b

vercel bot had a problem deploying to Preview July 7, 2023 10:27 Failure

fix: another try

487e8b5

vercel bot had a problem deploying to Preview July 7, 2023 10:40 Failure

fix: update sidebarLinks

c94a480

vercel bot had a problem deploying to Preview July 7, 2023 11:00 Failure

fix: move examples to their own folders

5e068f6

vercel bot deployed to Preview July 7, 2023 11:17 View deployment

miguelcrespo requested review from denkristoffer and bgutsol July 7, 2023 11:22

feat: add Avatar Components to sidebar

e303987

vercel bot deployed to Preview July 7, 2023 11:43 View deployment

denkristoffer reviewed Jul 7, 2023

View reviewed changes

denkristoffer and others added 3 commits July 7, 2023 14:04

Update packages/components/avatar/src/AvatarGroup/AvatarGroup.tsx

d5c2bd0

fix: remove unused type

b832387

Merge branch 'feat/Avatar_Group_HOMER-2118' of github.com:contentful/…

af68a14

…forma-36 into feat/Avatar_Group_HOMER-2118

vercel bot deployed to Preview July 7, 2023 12:12 View deployment

chore: bump package version

c567ffd

denkristoffer approved these changes Jul 7, 2023

View reviewed changes

vercel bot deployed to Preview July 7, 2023 14:32 View deployment

denkristoffer merged commit ca6c2dd into main Jul 7, 2023
3 checks passed

denkristoffer deleted the feat/Avatar_Group_HOMER-2118 branch July 7, 2023 16:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: New Component Avatar Group [HOMER-2118] #2518

feat: New Component Avatar Group [HOMER-2118] #2518

Lelith commented Jul 4, 2023

changeset-bot bot commented Jul 4, 2023 •

edited

Loading

vercel bot commented Jul 4, 2023 •

edited

Loading

github-actions bot commented Jul 4, 2023 •

edited

Loading

miguelcrespo left a comment

miguelcrespo Jul 6, 2023

bgutsol Jul 6, 2023

denkristoffer left a comment

bgutsol left a comment

bgutsol Jul 6, 2023

bgutsol Jul 6, 2023

bgutsol Jul 6, 2023

bgutsol Jul 6, 2023

bgutsol Jul 6, 2023

denkristoffer Jul 7, 2023

denkristoffer commented Jul 7, 2023

miguelcrespo commented Jul 7, 2023

		@@ -97,3 +97,39 @@ When the avatar image is loading, a loading skeleton will be shown automatically
		## Accessibility

		Make sure to pass a fitting `alt` property, especially if the avatar is used by itself without the user's name next to it.


		import { cx } from 'emotion';

		export type Variant = 'stacked' \| 'spaced';

	export type Variant = 'stacked' \| 'spaced';
	export type AvatarGroupVariant = 'stacked' \| 'spaced';

feat: New Component Avatar Group [HOMER-2118] #2518

feat: New Component Avatar Group [HOMER-2118] #2518

Conversation

Lelith commented Jul 4, 2023

Purpose of PR

changeset-bot bot commented Jul 4, 2023 • edited Loading

⚠️ No Changeset found

vercel bot commented Jul 4, 2023 • edited Loading

github-actions bot commented Jul 4, 2023 • edited Loading

size-limit report 📦

miguelcrespo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

denkristoffer left a comment

Choose a reason for hiding this comment

bgutsol left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

denkristoffer commented Jul 7, 2023

miguelcrespo commented Jul 7, 2023

changeset-bot bot commented Jul 4, 2023 •

edited

Loading

vercel bot commented Jul 4, 2023 •

edited

Loading

github-actions bot commented Jul 4, 2023 •

edited

Loading