New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(avatar): add avatar group #3218
Conversation
🦋 Changeset detectedLatest commit: 7d2b0ee The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for paste-theme-designer ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 7d2b0ee. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch ✅ Successfully ran 3 targetsSent with 💌 from NxCloud. |
✅ Deploy Preview for paste-docs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 7d2b0ee:
|
Passing run #5986 ↗︎
Details:
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. |
Size Change: +327 B (0%) Total Size: 983 kB
ℹ️ View Unchanged
|
31fd84e
to
05142ee
Compare
d4405f9
to
f9fc925
Compare
expect(getGroupSpacing('sizeIcon30', 'entity')).toEqual('spaceNegative10'); | ||
expect(getGroupSpacing('sizeIcon100', 'entity')).toEqual('spaceNegative20'); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
praise: nice to see tests!
<Avatar size="sizeIcon80" name="Twilio Flex" variant="entity" icon={ProductFlexIcon} /> | ||
<Avatar size="sizeIcon90" name="Twilio Voice" variant="entity" icon={ProductVoiceIcon} /> | ||
<Avatar size="sizeIcon100" name="Twilio Studio" variant="entity" icon={ProductStudioIcon} /> | ||
<Avatar size="sizeIcon110" name="Twilio Interconnect" variant="entity" icon={ProductInterconnectIcon} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
|
||
### Accessibility | ||
|
||
The `name` prop is required on all instances of the Avatar component. This ensures that whether your Avatar is displaying initials, an image, or an icon, the user will be able to access information about what object is being represented by the Avatar. The full string passed to `name` appears as a title upon hovering the Avatar, and is useful to assistive technology users. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
praise: excellent
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1
|
||
### Accessibility | ||
|
||
The `name` prop is required on all instances of the Avatar component. This ensures that whether your Avatar is displaying initials, an image, or an icon, the user will be able to access information about what object is being represented by the Avatar. The full string passed to `name` appears as a title upon hovering the Avatar, and is useful to assistive technology users. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1
Adds Avatar Group component to
@twilio-paste/avatar