Tabs: New Vertical Variants

USDA-FSA / fsa-style

CSS Implementation of USDA's FPAC Design System

http://usda-fsa.github.io/fsa-style/

Other

11 stars 8 forks source link

Tabs: New Vertical Variants #570

Open francisrupert opened 2 years ago

francisrupert commented 2 years ago

Proposal

Add Vertical variants of the Content Tabs component, which are currently limited to a horizontal listing of tabs.

Sub-tasks

[x] Design
[ ] Prototype (Initially on feature/tabs-vertical branch.)
- [x] Default
- [ ] Responsive
[ ] Production Build
- [ ] Default
- [ ] Responsive
[ ] Test

Presumed naming

fsa-content-tabs (current default)
fsa-content-tabs--horizontal[@BP] (default/override)
fsa-content-tabs--vertical-left[@BP]
fsa-content-tabs--vertical-right[@BP]

Speculative Design

francisrupert commented 2 years ago

Listing initial Prototype Commits on Branch feature/tabs-vertical to link to this issue.

20f91b734f4fb5d43733f4fd297c79b22855bd92
5de0586766b0893faf49ed2dd67b9742ebdb80b3
0aada0dbdc422b15bb8cbc22f5f0e3159f09595c
7b53ee1b91616088d2870aed6690e588e01e60af

francisrupert commented 2 years ago

Status

Pretty much ready for use... however... the last attempt at making it Responsive using the expected .fsa-content-tabs--[variant]@[breakpoint] naming convention doesn't hold up due to CSS specificity conflicts.

Possibilities

Launch as-is without the Responsive Namespacing, and document that absence.
Rebuild the attempted SCSS function that attempts to make it responsive.
Make Vertical Tabs its own component rather than a variant of fsa-content-tabs.
Abandon outright the notion of vertical tabs at all, or at least shelve it to the parking lot.