-
Notifications
You must be signed in to change notification settings - Fork 89
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(avatarGroup): update avatar group popover list design
- Loading branch information
1 parent
7975d7e
commit 2de75c4
Showing
11 changed files
with
267 additions
and
49 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
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
84 changes: 84 additions & 0 deletions
84
core/components/atoms/avatarGroup/__stories__/OverflowBehavior.story.jsx
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,84 @@ | ||
| import * as React from 'react'; | ||
| import { AvatarGroup, Text } from '@/index'; | ||
| import { list } from './AvatarList'; | ||
|
|
||
| export const OverflowBehavior = () => { | ||
| return ( | ||
| <div className="d-flex"> | ||
| <div className="flex-column mr-9 "> | ||
| <Text weight="strong">Dynamic Width</Text> | ||
| <div className="mt-4"> | ||
| <AvatarGroup list={list} popoverOptions={{ width: 200 }} /> | ||
| </div> | ||
| </div> | ||
| <div className="flex-column"> | ||
| <Text weight="strong">Truncate</Text> | ||
| <div className="mt-4"> | ||
| <AvatarGroup list={list} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const customCode = `() => { | ||
| const list = [ | ||
| { | ||
| firstName: 'John', | ||
| lastName: 'Doe', | ||
| }, | ||
| { | ||
| firstName: 'Steven', | ||
| lastName: 'Packton', | ||
| }, | ||
| { | ||
| firstName: 'Nancy', | ||
| lastName: 'Wheeler' | ||
| }, | ||
| { | ||
| firstName: 'Monica', | ||
| lastName: 'Geller' | ||
| }, | ||
| { | ||
| firstName: 'Arya', | ||
| lastName: 'Stark', | ||
| }, | ||
| { | ||
| firstName: 'Rachel', | ||
| lastName: 'Green', | ||
| }, | ||
| { | ||
| firstName: 'Walter Paxton', | ||
| lastName: 'Wheeler' | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div className="d-flex"> | ||
| <div className="flex-column mr-9 "> | ||
| <Text weight="strong">Dynamic Width</Text> | ||
| <div className="mt-4"> | ||
| <AvatarGroup list={list} popoverOptions={{ width: 200 }} /> | ||
| </div> | ||
| </div> | ||
| <div className="flex-column"> | ||
| <Text weight="strong">Truncate</Text> | ||
| <div className="mt-4"> | ||
| <AvatarGroup list={list} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }`; | ||
|
|
||
| export default { | ||
| title: 'Components/Avatar/AvatarGroup/Overflow Behavior', | ||
| component: AvatarGroup, | ||
| parameters: { | ||
| docs: { | ||
| docPage: { | ||
| customCode, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
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
72 changes: 72 additions & 0 deletions
72
core/components/atoms/avatarGroup/__stories__/variants/Trigger.story.jsx
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,72 @@ | ||
| import * as React from 'react'; | ||
| import { AvatarGroup, Text } from '@/index'; | ||
| import { list } from '../AvatarList'; | ||
|
|
||
| export const Trigger = () => { | ||
| return ( | ||
| <div className="d-flex"> | ||
| <div className="flex-column mr-9 "> | ||
| <Text weight="strong">Hover</Text> | ||
| <div className="mt-4"> | ||
| <AvatarGroup size="regular" list={list.slice(0, 4)} popoverOptions={{ on: 'hover' }} /> | ||
| </div> | ||
| </div> | ||
| <div className="flex-column"> | ||
| <Text weight="strong">Click</Text> | ||
| <div className="mt-4"> | ||
| <AvatarGroup list={list.slice(0, 4)} popoverOptions={{ on: 'click' }} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const customCode = `() => { | ||
| const list = [ | ||
| { | ||
| firstName: 'John', | ||
| lastName: 'Doe', | ||
| }, | ||
| { | ||
| firstName: 'Steven', | ||
| lastName: 'Packton', | ||
| }, | ||
| { | ||
| firstName: 'Nancy', | ||
| lastName: 'Wheeler' | ||
| }, | ||
| { | ||
| firstName: 'Monica', | ||
| lastName: 'Geller' | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div className="d-flex"> | ||
| <div className="flex-column mr-9 "> | ||
| <Text weight="strong">Hover</Text> | ||
| <div className="mt-4"> | ||
| <AvatarGroup list={list.slice(0, 4)} popoverOptions={{ on: 'hover' }} /> | ||
| </div> | ||
| </div> | ||
| <div className="flex-column"> | ||
| <Text weight="strong">Click</Text> | ||
| <div className="mt-4"> | ||
| <AvatarGroup list={list.slice(0, 4)} popoverOptions={{ on: 'click' }} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }`; | ||
|
|
||
| export default { | ||
| title: 'Components/Avatar/AvatarGroup/Variants/Trigger', | ||
| component: AvatarGroup, | ||
| parameters: { | ||
| docs: { | ||
| docPage: { | ||
| customCode, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
Oops, something went wrong.