Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tabs: New Vertical Variants #570

Open
2 of 8 tasks
francisrupert opened this issue Feb 15, 2022 · 2 comments
Open
2 of 8 tasks

Tabs: New Vertical Variants #570

francisrupert opened this issue Feb 15, 2022 · 2 comments
Labels
kind: component P3 source: internal FBCSS type: design type: exploration type: feature request

Comments

@francisrupert
Copy link
Contributor

francisrupert commented Feb 15, 2022 •
edited
Loading

Proposal

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

Sub-tasks

  • Design
  • Prototype (Initially on feature/tabs-vertical branch.)
    • 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

image
@francisrupert francisrupert self-assigned this Feb 15, 2022
@francisrupert
Copy link
Contributor Author

francisrupert commented Feb 15, 2022 •
edited
Loading

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

francisrupert added a commit that referenced this issue Feb 15, 2022
@francisrupert
Demo of Vertical Tabs attached to all current variants [amends #570]
c5e71ee
francisrupert added a commit that referenced this issue Feb 15, 2022
@francisrupert
Demo of Vertical Tabs attached to all current variants [amends #570]
c94b997
francisrupert added a commit that referenced this issue Feb 15, 2022
@francisrupert
Vertical Tabs: Sass variable namespace [amends #570]
cedc3fd
francisrupert added a commit that referenced this issue Feb 15, 2022
@francisrupert
Vertical Tabs: Stable RWD sans --horizontal override [amends #570]
22abdc1
@francisrupert francisrupert removed their assignment Mar 10, 2022
@francisrupert
Copy link
Contributor Author

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
kind: component P3 source: internal FBCSS type: design type: exploration type: feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@francisrupert