[Tabs] Responsive Layout

[brittneytewks]

Description

Responsiveness across Calcite Design System, focused on web (traditionally desktop sized web browser), tablet, phone screen sizes, and large monitors.

Acceptance Criteria

1. Consider breaking changes for folks. Consultation should occur on both the design and development teams.
2. Components need to be designed for the following breakpoints:

• [ ] Small (s), 476px
• [ ] Medium (m), 768px
• [ ] Large (l), 1152px
• [ ] Extra larger (xl), 1440px

Relevant Info

Part of epic https://github.com/Esri/calcite-components/issues/6670

Which Component

tabs

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

Calcite (design)

[SkyeSeitz]

Update from team discussion today: @jacqueskeet presented iterations for Tabs on smaller screen sizes and mobile devices. Below is the solution we landed on, which Jacques will refine with matching scale Actions and UX interactions notes.

https://user-images.githubusercontent.com/29716057/231278532-02058fe7-c5d9-4d72-bea4-ed7458cfdb6a.mov

[SkyeSeitz]

Final specs available here

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍬 Verified