Skip to content

Commit 3a18ca4

Browse files
AlbertCarrerasAlbertCarreras
authored
AvatarGroupCluster: new component (#4048)
1 parent 668464b commit 3a18ca4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+2870
-636
lines changed

‎.github/pr-title-checker-config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"ESLint plugin: ",
1212
"Tokens: "
1313
],
14-
"regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|IconCompact|Image|Indicator|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverMessage|Pulsar|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
14+
"regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|AvatarGroupCluster|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|IconCompact|Image|Indicator|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverMessage|Pulsar|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
1515
"regexpFlags": "",
1616
"ignoreLabels": []
1717
},

‎docs/docs-components/siteIndex.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ const siteIndex: readonly [siteIndexType, ...siteIndexType[]] = [
119119
'ActivationCard',
120120
'Avatar',
121121
'AvatarGroup',
122+
'AvatarGroupCluster',
122123
'Badge',
123124
'BannerCallout',
124125
'BannerOverlay',

‎docs/examples/avatar/containerExample.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ export default function Example() {
1111
<Avatar name="Keethi" />
1212
</Box>
1313
<Box column={4}>
14-
<Avatar name="Keerthi" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />
14+
<Avatar
15+
name="Keerthi"
16+
src="https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg"
17+
/>
1518
</Box>
1619
</Flex>
1720
</Box>

‎docs/examples/avatarGroup/accessibility.tsx‎

Lines changed: 24 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,34 @@
11
import { useEffect, useRef, useState } from 'react';
2-
import {
3-
AvatarGroup,
4-
Box,
5-
Flex,
6-
Layer,
7-
Popover,
8-
SearchField,
9-
Text,
10-
useDangerouslyInGestaltExperiment,
11-
} from 'gestalt';
2+
import { AvatarGroup, Box, Flex, Layer, Popover, SearchField, Text } from 'gestalt';
123

13-
function SearchCollaboratorsField() {
4+
export default function Example() {
5+
const [open, setOpen] = useState(false);
6+
const anchorRef = useRef<null | HTMLAnchorElement | HTMLDivElement>(null);
147
const ref = useRef<null | HTMLInputElement>(null);
158

169
useEffect(() => {
1710
if (ref.current) ref.current.focus();
1811
}, []);
1912

2013
return (
21-
<SearchField
22-
ref={ref}
23-
accessibilityLabel="Search other users"
24-
id="searchField"
25-
onChange={() => {}}
26-
placeholder="Search by name or email"
27-
size="lg"
28-
/>
29-
);
30-
}
31-
32-
export default function Example() {
33-
const [open, setOpen] = useState(false);
34-
const anchorRef = useRef<null | HTMLAnchorElement | HTMLDivElement>(null);
35-
const isInVRExperiment = useDangerouslyInGestaltExperiment({
36-
webExperimentName: 'web_gestalt_visualrefresh',
37-
mwebExperimentName: 'web_gestalt_visualrefresh',
38-
});
39-
40-
const collaborators = [
41-
{
42-
name: 'Keerthi',
43-
src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
44-
},
45-
{
46-
name: 'Alberto',
47-
src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
48-
},
49-
...new Array(10),
50-
];
51-
52-
const collaboratorsVR = [
53-
{
54-
name: 'Fatima',
55-
src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
56-
},
57-
{
58-
name: 'Ayesha',
59-
src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
60-
},
61-
...new Array(10),
62-
];
63-
64-
const names = isInVRExperiment ? 'Fatima, Ayesha,' : 'Keerthi, Alberto,';
65-
66-
return isInVRExperiment ? (
6714
<Flex height="100%" width="100%">
6815
<Box height="200" marginTop={6} padding={2}>
6916
<AvatarGroup
7017
ref={anchorRef}
7118
accessibilityExpanded={open}
72-
accessibilityLabel={`Collaborators: ${names} and 10 more. Add collaborators to this board.`}
19+
accessibilityLabel={`Collaborators: 'Fatima, Ayesha,' and 10 more. Add collaborators to this board.`}
7320
addCollaborators
74-
collaborators={collaboratorsVR}
21+
collaborators={[
22+
{
23+
name: 'Fatima',
24+
src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
25+
},
26+
{
27+
name: 'Ayesha',
28+
src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
29+
},
30+
...new Array(10),
31+
]}
7532
onClick={() => setOpen((value) => !value)}
7633
role="button"
7734
size="md"
@@ -98,49 +55,14 @@ export default function Example() {
9855
<Text align="center" color="default" weight="bold">
9956
Invite collaborators
10057
</Text>
101-
<SearchCollaboratorsField />
102-
</Flex>
103-
</Box>
104-
</Popover>
105-
</Layer>
106-
)}
107-
</Flex>
108-
) : (
109-
<Flex height="100%" width="100%">
110-
<Box height="200" marginTop={6} padding={2}>
111-
<AvatarGroup
112-
ref={anchorRef}
113-
accessibilityExpanded={open}
114-
accessibilityLabel={`Collaborators: ${names} and 10 more. Add collaborators to this board.`}
115-
addCollaborators
116-
collaborators={isInVRExperiment ? collaboratorsVR : collaborators}
117-
onClick={() => setOpen((value) => !value)}
118-
role="button"
119-
size="md"
120-
/>
121-
</Box>
122-
{open && (
123-
<Layer>
124-
<Popover
125-
anchor={anchorRef.current}
126-
idealDirection="down"
127-
onDismiss={() => setOpen(false)}
128-
positionRelativeToAnchor={false}
129-
size="xl"
130-
>
131-
<Box
132-
flex="grow"
133-
marginBottom={8}
134-
marginEnd={4}
135-
marginStart={4}
136-
marginTop={6}
137-
width={360}
138-
>
139-
<Flex direction="column" gap={{ column: 6, row: 0 }}>
140-
<Text align="center" color="default" weight="bold">
141-
Invite collaborators
142-
</Text>
143-
<SearchCollaboratorsField />
58+
<SearchField
59+
ref={ref}
60+
accessibilityLabel="Search other users"
61+
id="searchField"
62+
onChange={() => {}}
63+
placeholder="Search by name or email"
64+
size="lg"
65+
/>
14466
</Flex>
14567
</Box>
14668
</Popover>

‎docs/examples/avatarGroup/ideas.tsx‎

Lines changed: 15 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,24 @@
1-
import { AvatarGroup, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
1+
import { AvatarGroup, Flex } from 'gestalt';
22

33
export default function Example() {
4-
const isInVRExperiment = useDangerouslyInGestaltExperiment({
5-
webExperimentName: 'web_gestalt_visualrefresh',
6-
mwebExperimentName: 'web_gestalt_visualrefresh',
7-
});
8-
9-
const collaborators = [
10-
{
11-
name: 'Art 1',
12-
src: 'https://i.ibb.co/d0pQsJz/stock3.jpg',
13-
},
14-
{
15-
name: 'Art 2',
16-
src: 'https://i.ibb.co/SB0pXgS/stock4.jpg',
17-
},
18-
{
19-
name: 'Art 3',
20-
src: 'https://i.ibb.co/jVR29XV/stock5.jpg',
21-
},
22-
];
23-
24-
const collaboratorsVR = [
25-
{
26-
name: 'Artwork 1',
27-
src: 'https://i.pinimg.com/564x/2e/f4/80/2ef48048ccdb68439ef6a6ef1d842e4f.jpg',
28-
},
29-
{
30-
name: 'Artwork 2',
31-
src: 'https://i.pinimg.com/564x/2a/37/68/2a3768dd4640aebfe93537ec37b016a6.jpg',
32-
},
33-
{
34-
name: 'Artwork 3',
35-
src: 'https://i.pinimg.com/564x/49/20/5d/49205d231674daf0ddaadd606dd0f60e.jpg',
36-
},
37-
];
38-
394
return (
405
<Flex alignItems="center" height="100%" justifyContent="center" width="100%">
416
<AvatarGroup
427
accessibilityLabel="Collaborators: Keerthi, Alberto, Shanice."
43-
collaborators={isInVRExperiment ? collaboratorsVR : collaborators}
8+
collaborators={[
9+
{
10+
name: 'Artwork 1',
11+
src: 'https://i.pinimg.com/564x/2e/f4/80/2ef48048ccdb68439ef6a6ef1d842e4f.jpg',
12+
},
13+
{
14+
name: 'Artwork 2',
15+
src: 'https://i.pinimg.com/564x/2a/37/68/2a3768dd4640aebfe93537ec37b016a6.jpg',
16+
},
17+
{
18+
name: 'Artwork 3',
19+
src: 'https://i.pinimg.com/564x/49/20/5d/49205d231674daf0ddaadd606dd0f60e.jpg',
20+
},
21+
]}
4422
size="md"
4523
/>
4624
</Flex>

‎docs/examples/avatarGroup/main.tsx‎

Lines changed: 15 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,6 @@
1-
import { AvatarGroup, Box, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
1+
import { AvatarGroup, Box, Flex } from 'gestalt';
22

33
export default function Example() {
4-
const isInVRExperiment = useDangerouslyInGestaltExperiment({
5-
webExperimentName: 'web_gestalt_visualrefresh',
6-
mwebExperimentName: 'web_gestalt_visualrefresh',
7-
});
8-
9-
const collaborators = [
10-
{
11-
name: 'Keerthi',
12-
src: 'https://i.ibb.co/ZfCZrY8/keerthi.jpg',
13-
},
14-
{
15-
name: 'Alberto',
16-
src: 'https://i.ibb.co/NsK2w5y/Alberto.jpg',
17-
},
18-
{
19-
name: 'Shanice',
20-
src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
21-
},
22-
];
23-
24-
const collaboratorsVR = [
25-
{
26-
name: 'Fatima',
27-
src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
28-
},
29-
{
30-
name: 'Sora',
31-
src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
32-
},
33-
{
34-
name: 'Ayesha',
35-
src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
36-
},
37-
];
38-
394
return (
405
<Flex
416
alignContent="center"
@@ -47,7 +12,20 @@ export default function Example() {
4712
<Box height={125} width={300}>
4813
<AvatarGroup
4914
accessibilityLabel="Collaborators: Keerthi, Alberto, Shanice."
50-
collaborators={isInVRExperiment ? collaboratorsVR : collaborators}
15+
collaborators={[
16+
{
17+
name: 'Fatima',
18+
src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
19+
},
20+
{
21+
name: 'Sora',
22+
src: 'https://i.pinimg.com/originals/ab/c5/4a/abc54abd85df131e90ca6b372368b738.jpg',
23+
},
24+
{
25+
name: 'Ayesha',
26+
src: 'https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg',
27+
},
28+
]}
5129
size="fit"
5230
/>
5331
</Box>

‎docs/examples/avatarGroup/noEmoji.tsx‎

Lines changed: 16 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,24 @@
1-
import { AvatarGroup, Flex, useDangerouslyInGestaltExperiment } from 'gestalt';
1+
import { AvatarGroup, Flex } from 'gestalt';
22

33
export default function Example() {
4-
const isInVRExperiment = useDangerouslyInGestaltExperiment({
5-
webExperimentName: 'web_gestalt_visualrefresh',
6-
mwebExperimentName: 'web_gestalt_visualrefresh',
7-
});
8-
9-
const collaborators = [
10-
{
11-
name: 'Keerthi',
12-
},
13-
{
14-
name: '🎉',
15-
},
16-
{
17-
name: 'Shanice',
18-
src: 'https://i.ibb.co/7tGKGvb/shanice.jpg',
19-
},
20-
];
21-
22-
const collaboratorsVR = [
23-
{
24-
color: 10,
25-
name: 'Sora',
26-
},
27-
{
28-
color: 4,
29-
name: '🙏🏾',
30-
},
31-
{
32-
name: 'Fatima',
33-
src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
34-
},
35-
];
36-
37-
const accessibilityLabel = isInVRExperiment
38-
? 'Collaborators: Fatima, Sora, Ayesha.'
39-
: 'Collaborators: Keerthi, Alberto, Shanice.';
40-
414
return (
425
<Flex alignItems="center" height="100%" justifyContent="center" width="100%">
436
<AvatarGroup
44-
accessibilityLabel={accessibilityLabel}
45-
collaborators={isInVRExperiment ? collaboratorsVR : collaborators}
7+
accessibilityLabel="Collaborators: Fatima, Sora, Ayesha."
8+
collaborators={[
9+
{
10+
color: 10,
11+
name: 'Sora',
12+
},
13+
{
14+
color: 4,
15+
name: '🙏🏾',
16+
},
17+
{
18+
name: 'Fatima',
19+
src: 'https://i.pinimg.com/originals/bf/bc/27/bfbc27685d81eb9a8f65c201ea661f0e.jpg',
20+
},
21+
]}
4622
size="md"
4723
/>
4824
</Flex>

0 commit comments

Comments
 (0)