feat: add Tabs component

jaredcwhite commented 1 year ago

This PR addresses #7

Description

This PR adds a Tabs component which can be used to toggle between several content panels. This does not navigate between "pages" however, that would be served by the separate Menu component (upcoming).

How Can This Be Tested/Reviewed?

Storybook: https://deploy-preview-30--storybook-ui-seeds.netlify.app/?path=/story/navigation-tabs--default Docs page: https://deploy-preview-30--storybook-ui-seeds.netlify.app/?path=/docs/navigation-tabs--default

Checklist:

[ ] I have added QA notes to the issue with applicable URLs
[x] I have performed a self-review of my own code
[x] I have reviewed the changes in a desktop view
[x] I have reviewed the changes in a mobile view
[x] I have made corresponding changes to the documentation
[x] My changes generate no new warnings
[x] I have added tests that prove my fix is effective or that my feature works
[x] I have exported any new components
[x] My commit message(s) and PR title are polished in the conventional commit format, and any breaking changes are indicated in the message and are well-described

netlify[bot] commented 1 year ago

Deploy Preview for storybook-ui-seeds ready!

Name	Link
Latest commit	493eb7f1f94382b3107aacf1c158b7f31b95a2d8
Latest deploy log	https://app.netlify.com/sites/storybook-ui-seeds/deploys/6490fc546161a20008acd961
Deploy Preview	https://deploy-preview-30--storybook-ui-seeds.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

jaredcwhite commented 1 year ago

@emilyjablonski

In the horizontal / desktop flavor, there's a gray border underneath the active item that I'm not seeing in the Figma, and it's not flush w the border:

Yeah, good point. I think because the tab panel is separate from the tabs, we're just seeing its border untouched regardless of the tab above it. I'll see if I can play with negative margin/z-index in some way to avoid that.

In the vertical / mobile version I would have expected that the active item would still remain rounded, but not sure if that's actually expected behavior @slowbot

So this was something I had experimented with and then forgot to document, my apologies. Basically I'm trying to figure out how to handle the that left border on the top and bottom items which have a radius…the active colored border curving up into the radius looks kind of goofy, but un-rounding the border also isn't great. Maybe we need to figure out an alternative approach where the indicator only covers part of the edge and doesn't go up/down into the corner?

jaredcwhite commented 1 year ago

I believe I've addressed the feedback regarding styling, so it's ready to review now.

slowbot commented 1 year ago

@jaredcwhite hover state here does not match design hover state

https://www.figma.com/file/SsYt5YsgbmOPbwr5Qk2RKB/bloom-core-library?type=design&node-id=4013%3A20143&t=l8fhXwrSbJMYe50j-1

jaredcwhite commented 1 year ago

@slowbot oh yeah! 🤦🏻‍♂️ I didn't notice the difference from the old UIC tabs hover state. Will fix.

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 1.7.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

bloom-housing / ui-seeds