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] Responsive Layout #6689

Closed
4 tasks
brittneytewks opened this issue Mar 28, 2023 · 5 comments
Closed
4 tasks

[Tabs] Responsive Layout #6689

brittneytewks opened this issue Mar 28, 2023 · 5 comments
Assignees
@DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Milestone
2024-03-26 - Mar ...

Comments

@brittneytewks
Copy link

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 #6670

Which Component

tabs

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

Calcite (design)
@brittneytewks brittneytewks added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Mar 28, 2023
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Mar 28, 2023
@brittneytewks brittneytewks added p - high Issue should be addressed in the current milestone, impacts component or core functionality needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. design Issues that need design consultation prior to development. and removed needs triage Planning workflow - pending design/dev review. labels Mar 28, 2023
@brittneytewks brittneytewks mentioned this issue Mar 28, 2023
Closed
27 tasks
@brittneytewks brittneytewks added the estimate - 8 Requires input from team, consider smaller steps. label Mar 28, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Mar 30, 2023
@brittneytewks brittneytewks added 0 - new New issues that need assignment. and removed 1 - assigned Issues that are assigned to a sprint and a team member. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Mar 31, 2023
@SkyeSeitz
Copy link

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.

Screen.Recording.2023-04-11.at.1.12.00.PM.mov

@SkyeSeitz SkyeSeitz self-assigned this Apr 11, 2023
@ashetland ashetland added this to the Design Sprint Planning milestone May 30, 2023
@ashetland ashetland removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label May 30, 2023
@SkyeSeitz
Copy link

Final specs available here

@SkyeSeitz SkyeSeitz added the ready for dev Issues ready for development implementation. label Jul 18, 2023
@github-actions github-actions bot added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jul 18, 2023
@github-actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@github-actions github-actions bot removed this from the Design Backlog milestone Jul 18, 2023
@jcfranco jcfranco self-assigned this Nov 7, 2023
@jcfranco jcfranco removed their assignment Dec 1, 2023
@brittneytewks brittneytewks removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Dec 12, 2023
@jcfranco jcfranco mentioned this issue Jan 16, 2024
Merged
@geospatialem geospatialem modified the milestones: 2024-01-17 - Jan Main Release, 2024-01-19 - Jan Maintenance Release, 2024-02-27 - Feb Maintenance Release Jan 17, 2024
@geospatialem geospatialem mentioned this issue Jan 29, 2024
Closed
@jcfranco jcfranco added the visual changes Issues with visual changes that are added for consistency, but are not backwards compatible label Feb 1, 2024
@Elijbet Elijbet removed their assignment Feb 26, 2024
jcfranco added a commit that referenced this issue Feb 27, 2024
@jcfranco @Elijbet
feat(tabs): make component responsive (#8616)
83a2ef4 
**Related Issue:** #6689 

## Summary

This improves how `tabs` works at narrow widths where `tab-title`s can't
be displayed entirely.

### Notable changes

* overflowing `tab-title`s will be clipped
* affordances to scroll clipped `tab-titles` forward/backward will be
displayed accordingly
* selecting a `tab-title` that is partially clipped will be scrolled
into view
* `tab-title`s can be scrolled via wheel or drag

See [design
spec](https://www.figma.com/file/JAINbGHSykI8JQCVzOHiSz/Tabs---responsive-design-%5B6689%5D?node-id=862%3A13837&mode=dev)
for more details.

---------

Co-authored-by: eliza <eli97736@esri.com>
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 27, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned DitwanP and unassigned jcfranco Feb 27, 2024
@geospatialem geospatialem removed their assignment Mar 6, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Mar 8, 2024

🍬 Verified

@DitwanP DitwanP closed this as completed Mar 8, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Mar 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible
Projects
None yet
Milestone
2024-03-26 - Mar Release
Development

No branches or pull requests
8 participants
@jcfranco @geospatialem @Elijbet @SkyeSeitz @DitwanP @ashetland @brittneytewks @jacqueskeet