Tab design (update)

[ulde01]

Design update 2019-10-25

The design of the tab component has been adjusted:

• States for hover and focused have been updated
• Overflow tab is left-aligned (used to be right-aligned)

Mobile version

• The arrow is moved into the tab and a tiny line is added to look like a tab
• Instruction is clarified: Feel free to display more than one tab in a mobile. If there are too many tabs for the width that calls for an overflow menu, then only the active tab is presented (with arrow).

See the specification to get the correct details: https://designlibrary.sebgroup.com/components/tab/#specification

Original discussion https://github.com/sebgroup/design-library/issues/66

Thank you @TheresaHedlund for working on this!

Follow-up on development:

• [x] Updated design
• [x] Updated Design Library-descriptions
• [ ] Vanilla https://github.com/sebgroup/vanilla-pattern-library/issues/161
• [x] Bootstrap https://github.com/sebgroup/bootstrap/issues/149
• [ ] Angular https://github.com/sebgroup/ng-components/issues/47
• [x] AngularMaterial https://github.com/sebgroup/seb-angular-material/issues/79
• [ ] React https://github.com/sebgroup/react-components/issues/83

Original issue

Bootstrap-sync, July 2019

The examples in DL makes it look like many examples are for mobile, change content in the tabs. Make sure the examples are varied in width so readers understand that the width is flexible according to content. Clarify how it should work in mobile.

• Add new examples to DL
• update symbols
• double check hover-effects, should be blue like buttons

[ulde01]

To clarify Design library image description: @theresahedlund

• Remove second desc in image
• Move in overflow to normal
• Change mobile to one tab with overflow

[TheresaHedlund]

To clarify Design library image description: @TheresaHedlund

• Remove second desc in image
• Move in overflow to normal
• Change mobile to one tab with overflow

I have added a Tabs file in SEB Components_ALL in Abstract: https://share.goabstract.com/39e93242-724e-4f4c-b0b7-faa983b82a37?sha=8e4c4b9df29e2fb19f8b0399cb8e189701b76783 My suggestion is to keep the possibility to have at least 2 tabs also for mobile, when there's enough space. What do you think @JessiNygrenWalhed @conandx @ulde01? Have not removed the old Tabs page from the mixed file yet.

[ulde01]

Design update 2019-10-25

The design of the tab component has been adjusted:

• States for hover and focused have been updated
• Overflow tab is left-aligned (used to be right-aligned)

Mobile version

• The arrow is moved into the tab and a tiny line is added to look like a tab
• Instruction is clarified: Feel free to display more than one tab in a mobile. If there are too many tabs for the width that calls for an overflow menu, then only the active tab is presented (with arrow).

See the specification to get the correct details: https://designlibrary.sebgroup.com/components/tab/#specification

Thank you @TheresaHedlund for working on this!

Any feedback? Do contact designlibrary@seb.se Ulrika, Design Management