-
Notifications
You must be signed in to change notification settings - Fork 345
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
author Sarah Alli <[email protected]> 1726758738 -0400 committer Sarah Alli <[email protected]> 1727819323 -0400 avatar vr changes separated css from avatargroup and avatar avatar group prop drilling updated snapshots added internal props fixed avatar group props added avatarColorIndex updated example changed keys fixed typing colors working text ui working replaced original foundation layer for classic fixed fixed colors prettier fixed focus outline git adfixed container fixing docs fixed prop naming working on docs building examples added more VR examples changed colors on examples updated images fixed pressed state cleanup examples fixed removed focus from regular avatar updated AvatarGroup examples prettier small fixes snapshot snapshots snapshots dark mode support for temp color values
- Loading branch information
1 parent
aefcd4c
commit f3c25b0
Showing
40 changed files
with
3,588 additions
and
879 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { Avatar, Box, Flex } from 'gestalt'; | ||
|
|
||
| type AvatarColorIndex = '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10'; | ||
|
|
||
| interface AvatarProps { | ||
| name: string; | ||
| avatarColorIndex: AvatarColorIndex; | ||
| } | ||
|
|
||
| const avatars: AvatarProps[] = [ | ||
| { name: 'Alberto', avatarColorIndex: '01' }, | ||
| { name: 'Andy', avatarColorIndex: '02' }, | ||
| { name: 'Alexandra', avatarColorIndex: '03' }, | ||
| { name: 'Alexi', avatarColorIndex: '04' }, | ||
| { name: 'Alonso', avatarColorIndex: '05' }, | ||
| { name: 'Arturo', avatarColorIndex: '06' }, | ||
| { name: 'Amanda', avatarColorIndex: '07' }, | ||
| { name: 'Angelina', avatarColorIndex: '08' }, | ||
| { name: 'Adrian', avatarColorIndex: '09' }, | ||
| { name: 'Amelia', avatarColorIndex: '10' }, | ||
| ]; | ||
|
|
||
| export default function Example() { | ||
| return ( | ||
| <Box maxWidth={900} width="100%"> | ||
| <Flex alignItems="center" height="50%" justifyContent="evenly" width="100%"> | ||
| {avatars.map(({ name, avatarColorIndex }) => ( | ||
| <Box key={name} width={40}> | ||
| <Avatar avatarColor={avatarColorIndex} name={name} outline /> | ||
| </Box> | ||
| ))} | ||
| </Flex> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,18 @@ | ||
| import { Avatar, Flex } from 'gestalt'; | ||
| import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt'; | ||
|
|
||
| export default function Example() { | ||
| const isInVRExperiment = useDangerouslyInGestaltExperiment({ | ||
| webExperimentName: 'web_gestalt_visualRefresh', | ||
| mwebExperimentName: 'web_gestalt_visualRefresh', | ||
| }); | ||
|
|
||
| return ( | ||
| <Flex alignItems="center" height="100%" justifyContent="center" width="100%"> | ||
| <Avatar name="😀" size="lg" /> | ||
| <Avatar | ||
| avatarColor={isInVRExperiment ? '01' : undefined} | ||
| name={isInVRExperiment ? '🌹' : '😀'} | ||
| size="lg" | ||
| /> | ||
| </Flex> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,18 @@ | ||
| import { Avatar, Flex } from 'gestalt'; | ||
| import { Avatar, Flex, useDangerouslyInGestaltExperiment } from 'gestalt'; | ||
|
|
||
| export default function Example() { | ||
| const isInVRExperiment = useDangerouslyInGestaltExperiment({ | ||
| webExperimentName: 'web_gestalt_visualRefresh', | ||
| mwebExperimentName: 'web_gestalt_visualRefresh', | ||
| }); | ||
|
|
||
| return ( | ||
| <Flex alignItems="center" height="100%" justifyContent="center" width="100%"> | ||
| <Avatar name="Keerthi" size="lg" /> | ||
| <Avatar | ||
| avatarColor={isInVRExperiment ? '01' : undefined} | ||
| name={isInVRExperiment ? 'Rosa' : 'Keerthi'} | ||
| size="lg" | ||
| /> | ||
| </Flex> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.