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.

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

Tabs: Support vertical mode #1907

Open
8 tasks
benjamincharity opened this issue Jan 10, 2020 · 1 comment
Open
8 tasks

Tabs: Support vertical mode #1907

benjamincharity opened this issue Jan 10, 2020 · 1 comment
Labels
Focus: component Issues concerning a specific component Project: Tactic Details Status: on hold Issues we will not address in the immediate future Target: latest Issues related to the latest version of the library (master) Type: feature Functionality that doesn't currently exist

Comments

@benjamincharity
Copy link
Contributor

benjamincharity commented Jan 10, 2020

  • Implement vertical mode via an @input layout: 'vertical' | 'horizontal'
    • Default to 'horizontal' layout.
  • Content areas should still move horizontally regardless of the layout
  • Width of vertical tab should default to spacing(large, 6) (96px)
  • All vertical tab heights should match
    • For height: we check height of all tabs and find the tallest; then set the height of all vertical tabs to that height.
  • Expose public method that a consumer can call to trigger an update to the tab heights
  • Vertical tabs will not make use of the ink bar
  • Selected tab is indicated by a white background and left edge colored primary.

Example design:
Screen Shot 2020-01-10 at 1.03.48 PM.png

@benjamincharity benjamincharity added Focus: component Issues concerning a specific component Target: latest Issues related to the latest version of the library (master) Type: feature Functionality that doesn't currently exist Project: Tactic Details labels Jan 10, 2020
@benjamincharity
Copy link
Contributor Author

This has a bespoke implementation within an app. Bumping to backlog until another use-case is defined.

@benjamincharity benjamincharity added the Status: on hold Issues we will not address in the immediate future label Jan 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Focus: component Issues concerning a specific component Project: Tactic Details Status: on hold Issues we will not address in the immediate future Target: latest Issues related to the latest version of the library (master) Type: feature Functionality that doesn't currently exist
Projects
None yet
Development

No branches or pull requests

1 participant