ActionSelect: Add component

[ItsJonQ]

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

[netlify]

Deploy preview for hsds-react ready!

Built with commit 011f92d

https://deploy-preview-621--hsds-react.netlify.com

[ItsJonQ]

@digitaldesigner + @ryan-mulrooney

Direct link to deploy preview

https://deploy-preview-621--hsds-react.netlify.com/iframe.html?id=actionselect--default

[coveralls]

Pull Request Test Coverage Report for Build 2173

• 171 of 171 (100.0%) changed or added relevant lines in 16 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 2165:	0.0%
Covered Lines:	10770
Relevant Lines:	10770

---

💛 - Coveralls

[digitaldesigner]

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 :)

[tjbo]

LGTM for the implementation. Looks straight forward.

Like a rocket ship. 🚀😄

[ItsJonQ]

@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 3000 (ms)

Actual speed (160)

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))

[ItsJonQ]

🍐 '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.

[ItsJonQ]

From @ryan-mulrooney

👏
beautiful homie

[ItsJonQ]

Will merge this up and release!! We can definitely iterate if needed 💪

[digitaldesigner]

Oh wow yeah these are great enhancements. Thanks @ItsJonQ and @ryan-mulrooney