DESIGN COMPLETE IMPLEMENTED
A button that contains the userβs Avatar.
Contributors
@Ange Romanska (Deactivated) @Adam Butterworth (Deactivated)
Relate Jira Tickets
https://openedx.atlassian.net/browse/PAR-137 https://openedx.atlassian.net/browse/PAR-132 https://openedx.atlassian.net/browse/PAR-137
Β
Resources
Use cases
The Avatar Button is used for the user account dropdown menu button in the global navigation.
Variants
Property | Β |
|---|---|
Avatar Only (Boolean) |
|
Size |
|
Best Practices
Related Components
https://openedx.atlassian.net/wiki/spaces/BPL/pages/2103083206 https://openedx.atlassian.net/wiki/spaces/BPL/pages/2026865458
https://openedx.atlassian.net/wiki/spaces/BPL/pages/2097250669 (Dimensions of the avatar only variant match
Specification
What does an engineer need to know in order to build this component?
Anatomy
Legend Uses a Default Avatar Component and a arrow_drop_down icon. | Β
|
Avatar-only variant | Β
|
Behaviors
Any behaviors of this component should be inherited from the Button component.
Accessibility
Focus Management Expectations | β¨ |
Semantics | Β |
Β | Β |
Β
Comments
The avatar only button has been updated to contain the caret
@Adam Butterworth (Deactivated) We need a dark variant
@Adam Butterworth (Deactivated) I can take a stab at updating the Figma library!
@Ben Warzeski (Deactivated) Raised a concern that with the Avatar Only variant not having a dropdown arrow that itβs difficult to know that this is a button or dropdown menu. We should address this in the future.