Alignment on arrow-icons in components

[zeroedin]

Currently we have several components and other areas that use arrow icons to show open/closed state:

1. Accordion
2. Navigation Secondary
3. Navigation Primary (Eventually coming)
4. Table (Coming Soon)
5. listbox elements, dropdown, etc (Coming Soon)
6. ux. Navigation

Should we align all these components on arrow usage? Maybe we should break this functionality out to a new component?

<rh-arrow direction="up|down|left|right" animate="spin|fiip|none"></rh-arrow>

Thoughts?

[nikkimk]

I like the idea of shared utility styles that can be imported into components. This can include the arrow, offscreen accessibility styling, and other things we always end up doing.

[zeroedin]

Yes, definitely things like visually-hidden which are definitely useful to be easily reused.

[zeroedin]

Am interested to see the performance package size outcomes of both a pureCSS (which is how secondary nav currently works) and a component / shared code implementation?

[bennypowers]

i dont think this necessarily needs an element

maybe a directive for animations

[marionnegp]

It's also in disclosure and filter.

Will we need to get the arrow icon in primary nav aligned with the other components? Maybe that's a question for me and Corey too.