bloom-housing / ui-seeds

Shared user interface components for Bloom affordable housing system
Apache License 2.0
1 stars 1 forks source link

Split Seeds Tabs component into two different components #73

Closed emilyjablonski closed 1 month ago

emilyjablonski commented 6 months ago

The Tabs component should be split into two components representing the horizontal and vertical views - we can remove the mobile queries.

For the most part, this should be a file structure change in terms of splitting the component into two separate components. There may need to be changes to the variables / names in which case we would need to update the Storybook variables table. If there are a lot of shared styles between the horizontal and vertical versions it may be useful to follow a pattern similar to Alert / Message / Toast, but that may be overcomplicated.

jaredcwhite commented 6 months ago

@emilyjablonski I'm confused by this. What would happen to the tabs on a narrow screen size? I don't see any way this example could fit on mobile unless the tabs stack (or we switch to horizontal swiping on tabs to scroll them left/right?)

https://exygy.zeroheight.com/styleguide/s/100882/p/99dc98-tabs/b/93a6d7

emilyjablonski commented 6 months ago

@jaredcwhite This is related to this Slack convo here - a consumer could switch between the views if they want, but we have a new use case where we want the vertical view and never the tabbed view, so we need to be able to consume that separately.

jaredcwhite commented 6 months ago

@emilyjablonski Hmm, I'm still confused because I thought the vertical Menu component was always a separate component and doesn't use React Tabs…maybe we can go over in the design huddle.

jaredcwhite commented 5 months ago

In talking more with @ColinBuyck, it sounds like the best path forward would be to revert #75 and add a boolean prop that would make tabs always be vertical. We also have a separate but related component ready to develop called Menu #77 which similarly can have a vertical prop. So if that makes sense to you @emilyjablonski, I think we can close this.

jaredcwhite commented 1 month ago

Closing in favor of the solution in #79