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 tabs #16628

Merged
merged 5 commits into from
Jul 24, 2019
Merged

[Tabs] Support vertical tabs #16628

merged 5 commits into from
Jul 24, 2019

Conversation

jpung
Copy link
Contributor

@jpung jpung commented Jul 18, 2019

Closes #8662
Closes #16697

I've been working with the sidebar alternative for a while, while at the same time keeping track of the progress of vertical tabs (im aware it a proper version is probably coming more towards v5). This is something I have been working on as a solution, not sure if it would be viable as an official change but i have applied the modifications to the Simple Tabs demo.

Edit @eps1lon:

material-ui.com: vertical tabs

@jpung jpung changed the title added changes for vertical tab [Tabs] Vertical tab possible use case Jul 18, 2019
@oliviertassinari oliviertassinari self-assigned this Jul 19, 2019
@oliviertassinari oliviertassinari added component: tabs This is the name of the generic UI component, not the React module! new feature New feature or request labels Jul 19, 2019
@oliviertassinari oliviertassinari force-pushed the vertical-tabs-demo branch 3 times, most recently from d0ae7f0 to c378d2c Compare July 21, 2019 14:28
@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 21, 2019

@josephpung Thanks for starting this effort! I have pushed the effort one step further:

Jul-21-2019 16-29-04

<Tabs orientation="vertical" variant="scrollable" />

@mui-pr-bot
Copy link

mui-pr-bot commented Jul 21, 2019

@material-ui/core: parsed: +0.20% , gzip: +0.29%

Details of bundle changes.

Comparing: 20b3ab9...2e7e487

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core +0.20% 🔺 +0.29% 🔺 325,780 326,437 89,850 90,115
@material-ui/core/Paper 0.00% 0.00% 67,971 67,971 20,322 20,322
@material-ui/core/Paper.esm 0.00% 0.00% 61,770 61,770 19,160 19,160
@material-ui/core/Popper 0.00% 0.00% 28,896 28,896 10,401 10,401
@material-ui/core/Textarea 0.00% 0.00% 5,534 5,534 2,370 2,370
@material-ui/core/TrapFocus 0.00% 0.00% 3,808 3,808 1,602 1,602
@material-ui/core/styles/createMuiTheme 0.00% 0.00% 16,156 16,156 5,813 5,813
@material-ui/core/useMediaQuery 0.00% 0.00% 3,098 3,098 1,314 1,314
@material-ui/lab 0.00% 0.00% 141,684 141,684 43,585 43,585
@material-ui/styles 0.00% 0.00% 51,387 51,387 15,306 15,306
@material-ui/system 0.00% 0.00% 15,574 15,574 4,439 4,439
Button 0.00% 0.00% 79,776 79,776 24,359 24,359
Modal 0.00% 0.00% 14,613 14,613 5,227 5,227
Portal 0.00% 0.00% 3,471 3,471 1,572 1,572
Rating 0.00% 0.00% 70,334 70,334 22,067 22,067
Slider 0.00% 0.00% 75,105 75,105 23,310 23,310
colorManipulator 0.00% 0.00% 3,904 3,904 1,543 1,543
docs.landing 0.00% 0.00% 51,259 51,259 13,537 13,537
docs.main 0.00% 0.00% 580,256 580,256 190,313 190,313
packages/material-ui/build/umd/material-ui.production.min.js +0.22% 🔺 +0.27% 🔺 299,949 300,600 86,208 86,437
docs: / 0.00% 0.00% 55,200 55,200 -1 -1
docs: /_app 0.00% 0.00% 133,000 133,000 -1 -1
docs: /_error 0.00% 0.00% 2,110 2,110 -1 -1
docs: /blog/2019-developer-survey-results 0.00% 0.00% 13,600 13,600 -1 -1
docs: /blog/april-2019-update 0.00% 0.00% 4,620 4,620 -1 -1
docs: /blog/june-2019-update 0.00% 0.00% 2,200 2,200 -1 -1
docs: /blog/march-2019-update 0.00% 0.00% 3,180 3,180 -1 -1
docs: /blog/material-ui-v4-is-out 0.00% 0.00% 22,500 22,500 -1 -1
docs: /blog/may-2019-update 0.00% 0.00% 2,750 2,750 -1 -1
docs: /components/about-the-lab 0.00% 0.00% 6,370 6,370 -1 -1
docs: /components/app-bar 0.00% 0.00% 132,000 132,000 -1 -1
docs: /components/autocomplete 0.00% 0.00% 304,000 304,000 -1 -1
docs: /components/avatars 0.00% 0.00% 25,900 25,900 -1 -1
docs: /components/badges +1.02% 🔺 0.00% 58,800 59,400 -1 -1
docs: /components/bottom-navigation 0.00% 0.00% 25,800 25,800 -1 -1
docs: /components/box 0.00% 0.00% 32,900 32,900 -1 -1
docs: /components/breadcrumbs 0.00% 0.00% 98,200 98,200 -1 -1
docs: /components/buttons 0.00% 0.00% 233,000 233,000 -1 -1
docs: /components/cards 0.00% 0.00% 72,400 72,400 -1 -1
docs: /components/checkboxes 0.00% 0.00% 65,000 65,000 -1 -1
docs: /components/chips 0.00% 0.00% 113,000 113,000 -1 -1
docs: /components/click-away-listener 0.00% 0.00% 13,300 13,300 -1 -1
docs: /components/container 0.00% 0.00% 12,500 12,500 -1 -1
docs: /components/css-baseline 0.00% 0.00% 19,200 19,200 -1 -1
docs: /components/dialogs 0.00% 0.00% 218,000 218,000 -1 -1
docs: /components/dividers 0.00% 0.00% 50,500 50,500 -1 -1
docs: /components/drawers 0.00% 0.00% 225,000 225,000 -1 -1
docs: /components/expansion-panels 0.00% 0.00% 83,300 83,300 -1 -1
docs: /components/grid 0.00% 0.00% 152,000 152,000 -1 -1
docs: /components/grid-list 0.00% 0.00% 56,800 56,800 -1 -1
docs: /components/hidden 0.00% 0.00% 54,700 54,700 -1 -1
docs: /components/icons 0.00% 0.00% 145,000 145,000 -1 -1
docs: /components/links 0.00% 0.00% 52,500 52,500 -1 -1
docs: /components/lists 0.00% 0.00% 155,000 155,000 -1 -1
docs: /components/menus 0.00% 0.00% 88,200 88,200 -1 -1
docs: /components/modal 0.00% 0.00% 37,600 37,600 -1 -1
docs: /components/no-ssr 0.00% 0.00% 15,800 15,800 -1 -1
docs: /components/paper 0.00% 0.00% 9,510 9,510 -1 -1
docs: /components/pickers 0.00% 0.00% 188,000 188,000 -1 -1
docs: /components/popover 0.00% 0.00% 67,700 67,700 -1 -1
docs: /components/popper 0.00% 0.00% 111,000 111,000 -1 -1
docs: /components/portal 0.00% 0.00% 12,100 12,100 -1 -1
docs: /components/progress 0.00% 0.00% 102,000 102,000 -1 -1
docs: /components/radio-buttons 0.00% 0.00% 56,500 56,500 -1 -1
docs: /components/rating 0.00% 0.00% 36,100 36,100 -1 -1
docs: /components/selects 0.00% 0.00% 163,000 163,000 -1 -1
docs: /components/slider 0.00% 0.00% 77,900 77,900 -1 -1
docs: /components/snackbars 0.00% 0.00% 117,000 117,000 -1 -1
docs: /components/speed-dial 0.00% 0.00% 53,500 53,500 -1 -1
docs: /components/steppers 0.00% 0.00% 206,000 206,000 -1 -1
docs: /components/switches 0.00% 0.00% 71,700 71,700 -1 -1
docs: /components/tables +0.14% 🔺 0.00% 730,000 731,000 -1 -1
docs: /components/tabs +6.45% 🔺 0.00% 155,000 165,000 -1 -1
docs: /components/text-fields 0.00% 0.00% 294,000 294,000 -1 -1
docs: /components/textarea-autosize 0.00% 0.00% 5,660 5,660 -1 -1
docs: /components/toggle-button 0.00% 0.00% 21,800 21,800 -1 -1
docs: /components/tooltips 0.00% 0.00% 94,500 94,500 -1 -1
docs: /components/transfer-list 0.00% 0.00% 47,800 47,800 -1 -1
docs: /components/transitions 0.00% 0.00% 58,000 58,000 -1 -1
docs: /components/typography 0.00% 0.00% 38,500 38,500 -1 -1
docs: /components/use-media-query 0.00% 0.00% 54,800 54,800 -1 -1
docs: /customization/breakpoints 0.00% 0.00% 80,700 80,700 -1 -1
docs: /customization/color 0.00% 0.00% 97,700 97,700 -1 -1
docs: /customization/components 0.00% 0.00% 164,000 164,000 -1 -1
docs: /customization/default-theme 0.00% 0.00% 75,700 75,700 -1 -1
docs: /customization/density 0.00% 0.00% 18,600 18,600 -1 -1
docs: /customization/globals 0.00% 0.00% 19,800 19,800 -1 -1
docs: /customization/palette 0.00% 0.00% 57,500 57,500 -1 -1
docs: /customization/spacing 0.00% 0.00% 12,600 12,600 -1 -1
docs: /customization/themes 0.00% 0.00% 61,300 61,300 -1 -1
docs: /customization/typography 0.00% 0.00% 430,000 430,000 -1 -1
docs: /customization/z-index 0.00% 0.00% 9,730 9,730 -1 -1
docs: /discover-more/backers 0.00% 0.00% 6,780 6,780 -1 -1
docs: /discover-more/changelog 0.00% 0.00% 3,560 3,560 -1 -1
docs: /discover-more/community 0.00% 0.00% 5,440 5,440 -1 -1
docs: /discover-more/governance 0.00% 0.00% 6,800 6,800 -1 -1
docs: /discover-more/languages 0.00% 0.00% 10,100 10,100 -1 -1
docs: /discover-more/related-projects 0.00% 0.00% 18,800 18,800 -1 -1
docs: /discover-more/roadmap 0.00% 0.00% 6,610 6,610 -1 -1
docs: /discover-more/showcase 0.00% 0.00% 70,300 70,300 -1 -1
docs: /discover-more/team 0.00% 0.00% 21,800 21,800 -1 -1
docs: /discover-more/vision 0.00% 0.00% 19,100 19,100 -1 -1
docs: /getting-started/example-projects 0.00% 0.00% 24,200 24,200 -1 -1
docs: /getting-started/faq 0.00% 0.00% 154,000 154,000 -1 -1
docs: /getting-started/installation 0.00% 0.00% 31,300 31,300 -1 -1
docs: /getting-started/learn 0.00% 0.00% 34,500 34,500 -1 -1
docs: /getting-started/page-layout-examples 0.00% 0.00% 28,800 28,800 -1 -1
docs: /getting-started/page-layout-examples/album 0.00% 0.00% 9,850 9,850 -1 -1
docs: /getting-started/page-layout-examples/blog 0.00% 0.00% 31,900 31,900 -1 -1
docs: /getting-started/page-layout-examples/checkout 0.00% 0.00% 46,300 46,300 -1 -1
docs: /getting-started/page-layout-examples/dashboard 0.00% 0.00% 393,000 393,000 -1 -1
docs: /getting-started/page-layout-examples/pricing 0.00% 0.00% 20,300 20,300 -1 -1
docs: /getting-started/page-layout-examples/sign-in 0.00% 0.00% 43,000 43,000 -1 -1
docs: /getting-started/page-layout-examples/sign-in-side 0.00% 0.00% 43,200 43,200 -1 -1
docs: /getting-started/page-layout-examples/sign-up 0.00% 0.00% 43,400 43,400 -1 -1
docs: /getting-started/page-layout-examples/sticky-footer 0.00% 0.00% 2,090 2,090 -1 -1
docs: /getting-started/supported-components 0.00% 0.00% 73,800 73,800 -1 -1
docs: /getting-started/supported-platforms 0.00% 0.00% 23,800 23,800 -1 -1
docs: /getting-started/usage 0.00% 0.00% 32,000 32,000 -1 -1
docs: /guides/api 0.00% 0.00% 62,100 62,100 -1 -1
docs: /guides/composition 0.00% 0.00% 106,000 106,000 -1 -1
docs: /guides/flow 0.00% 0.00% 5,630 5,630 -1 -1
docs: /guides/interoperability 0.00% 0.00% 185,000 185,000 -1 -1
docs: /guides/migration-v0x 0.00% 0.00% 52,300 52,300 -1 -1
docs: /guides/migration-v3 0.00% 0.00% 129,000 129,000 -1 -1
docs: /guides/minimizing-bundle-size 0.00% 0.00% 45,600 45,600 -1 -1
docs: /guides/responsive-ui 0.00% 0.00% 14,300 14,300 -1 -1
docs: /guides/right-to-left 0.00% 0.00% 46,100 46,100 -1 -1
docs: /guides/server-rendering 0.00% 0.00% 58,500 58,500 -1 -1
docs: /guides/testing 0.00% 0.00% 50,200 50,200 -1 -1
docs: /guides/typescript 0.00% 0.00% 79,100 79,100 -1 -1
docs: /performance/table-component 0.00% 0.00% 1,340 1,340 -1 -1
docs: /performance/table-emotion 0.00% 0.00% 25,200 25,200 -1 -1
docs: /performance/table-hook 0.00% 0.00% 1,420 1,420 -1 -1
docs: /performance/table-mui 0.00% 0.00% 6,280 6,280 -1 -1
docs: /performance/table-raw 0.00% 0.00% 1,110 1,110 -1 -1
docs: /performance/table-styled-components 0.00% 0.00% 43,200 43,200 -1 -1
docs: /premium-themes/instapaper +0.80% 🔺 0.00% 87,800 88,500 -1 -1
docs: /premium-themes/onepirate 0.00% 0.00% 50,400 50,400 -1 -1
docs: /premium-themes/onepirate/forgot-password 0.00% 0.00% 75,800 75,800 -1 -1
docs: /premium-themes/onepirate/privacy 0.00% 0.00% 69,300 69,300 -1 -1
docs: /premium-themes/onepirate/sign-in 0.00% 0.00% 76,200 76,200 -1 -1
docs: /premium-themes/onepirate/sign-up 0.00% 0.00% 76,400 76,400 -1 -1
docs: /premium-themes/onepirate/terms 0.00% 0.00% 92,100 92,100 -1 -1
docs: /premium-themes/paperbase +1.31% 🔺 0.00% 53,300 54,000 -1 -1
docs: /premium-themes/tweeper +0.74% 🔺 0.00% 95,200 95,900 -1 -1
docs: /styles/advanced 0.00% 0.00% 235,000 235,000 -1 -1
docs: /styles/api 0.00% 0.00% 126,000 126,000 -1 -1
docs: /styles/basics 0.00% 0.00% 89,300 89,300 -1 -1
docs: /system/api 0.00% 0.00% 77,700 77,700 -1 -1
docs: /system/basics 0.00% 0.00% 187,000 187,000 -1 -1
docs: /system/borders 0.00% 0.00% 37,800 37,800 -1 -1
docs: /system/display 0.00% 0.00% 58,000 58,000 -1 -1
docs: /system/flexbox 0.00% 0.00% 68,400 68,400 -1 -1
docs: /system/palette 0.00% 0.00% 27,600 27,600 -1 -1
docs: /system/positions 0.00% 0.00% 22,000 22,000 -1 -1
docs: /system/shadows 0.00% 0.00% 21,100 21,100 -1 -1
docs: /system/sizing 0.00% 0.00% 29,900 29,900 -1 -1
docs: /system/spacing 0.00% 0.00% 49,700 49,700 -1 -1
docs: /system/typography 0.00% 0.00% 45,100 45,100 -1 -1
docs: /versions 0.00% 0.00% 76,700 76,700 -1 -1

Generated by 🚫 dangerJS against 2e7e487

@oliviertassinari oliviertassinari force-pushed the vertical-tabs-demo branch 2 times, most recently from 53a5954 to 5be2b8d Compare July 21, 2019 15:22
@oliviertassinari oliviertassinari changed the title [Tabs] Vertical tab possible use case [Tabs] Support vertical tabs Jul 21, 2019
@oliviertassinari
Copy link
Member

@josephpung Could you have a look at my changes? Thanks!

@oliviertassinari oliviertassinari removed their assignment Jul 21, 2019
@jpung
Copy link
Contributor Author

jpung commented Jul 22, 2019

@oliviertassinari this is much better! I was having trouble trying to modify the tabIndicator, its cleaner as well without the need to pass the orientation props to the Tab component 👍

@oliviertassinari
Copy link
Member

Ok cool. I will keep it open longer so we can collect more feedback.

Copy link
Member

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really slick. There some minor pixel issue where clicking on the 3rd item reveals the top scroll button:

tabs-1
tabs-3

ScrollButtonComponent?: React.ElementType;
scrollButtons?: 'auto' | 'desktop' | 'on' | 'off';
TabIndicatorProps?: Partial<TabIndicatorProps>;
TabIndicatorProps?: Partial<React.HTMLAttributes<HTMLDivElement>>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not disagreeing with this change but we should update the documentation as well:

Properties applied to the TabIndicator element.

Since this isn't a documented component we shouldn't use a proper noun here.

@oliviertassinari
Copy link
Member

@eps1lon Thanks for the review. I will fix the two reported issues.

@eps1lon
Copy link
Member

eps1lon commented Jul 24, 2019

Very nice work. Looks really slick!

@oliviertassinari
Copy link
Member

@josephpung Thanks for starting this effort. I'm very happy to see this +20 upvotes issue addressed.

@jpung
Copy link
Contributor Author

jpung commented Jul 24, 2019

@josephpung Thanks for starting this effort. I'm very happy to see this +20 upvotes issue addressed.

Happy to be able to help in any way I can! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tabs This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TabIndicatorProps is useless [Tabs] Add vertical support
4 participants