-
Notifications
You must be signed in to change notification settings - Fork 17
Conversation
With refactors to DropdownV2, Select, and Input
Deploy preview for hsds-react ready! Built with commit 011f92d |
@digitaldesigner + @ryan-mulrooney Direct link to deploy previewhttps://deploy-preview-621--hsds-react.netlify.com/iframe.html?id=actionselect--default |
Pull Request Test Coverage Report for Build 2173
💛 - Coveralls |
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.
This is really nice attention to detail, thanks @ItsJonQ
Separate to this, I had a general animation principle which would apply to this component, but also pretty much anywhere else we do expand/collapse elements like accordions, menu children etc:
When an expand or collapse shows or hides new elements, can those elements be queued to fade in or out once the height animation is complete, so that we avoid cropping (see http://c.hlp.sc/212767232da6). I think that'd lead to a much cleaner overall animation :)
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.
LGTM for the implementation. Looks straight forward.
Like a rocket ship. 🚀😄
@digitaldesigner You bet!! Thanks for the suggestion! Check it out: The fade animation timing syncs with the resizing timing. Both can be controlled BTW. Example of it being slowed down to Actual speed ( Bonus! Improved accessibility support (for Dropdowns as a whole). |
🍐 'ed with @ryan-mulrooney . Discussed some UX improvements for this component. The main one being visual clarity for when the Select is open. We tried this idea, where we fade the content a bit when it's open. |
From @ryan-mulrooney
|
Will merge this up and release!! We can definitely iterate if needed 💪 |
Oh wow yeah these are great enhancements. Thanks @ItsJonQ and @ryan-mulrooney |
ActionSelect: Add component
This update adds a new
ActionSelect
component to HSDS: React! This component renders extends the UI of a SelectDropdown, allowing it to render contextual content within, based on the selected item.Bonus! Improved accessibility support (for Dropdowns as a whole).
Added an announcer to declare when the menu is opened/closed (with ability to provide custom label). And also for screen reader to be aware of option count (e.g.
Open Beacon (2/3)
)For additional context, check out this screencast!
https://www.loom.com/share/bb315900af704b94844bf850ca833c32