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] Improve UX of overflow affordance #10177

Open
2 of 6 tasks
macandcheese opened this issue Aug 28, 2024 · 5 comments
Open
2 of 6 tasks

[Tabs] Improve UX of overflow affordance #10177

macandcheese opened this issue Aug 28, 2024 · 5 comments
Assignees
@jcfranco
Labels
1 - assigned Issues that are assigned to a sprint and a team member. blocked This issue is blocked by another issue. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Milestone
2025-02-25 - Feb ...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Aug 28, 2024 •
edited by ashetland
Loading

Check existing issues

Description

Currently when the Tab Titles overflow horizontally, it is very easy to accidentally dismiss a closable Tab Title in the last position while moving through Tab Titles via the pagination arrows:

Screen.Recording.2024-08-28.at.10.48.29.AM.mov

Blocked issues: #10324

Acceptance Criteria

I would expect the pagination arrow affordances to persist, and perhaps have a disabled state when the area is at an extent. Many examples in the wild have these "together" at the beginning or end, and this could be something to explore here as well.

Before/after example:
CleanShot 2024-12-09 at 10 04 00@2x

Figma file

Relevant Info

No response

Which Component

Tabs

Example Use Case

As a user, it is frustrating and destructive to accidentally dismiss a Tab Title I did not intend to, as I am using the pagination arrows to navigate the overflowed Titles.

Priority impact

impact - p1 - need for current milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)
@macandcheese macandcheese 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 Aug 28, 2024
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Aug 28, 2024
@macandcheese macandcheese changed the title Tabs - Improve UX of pagination affordance Tabs - Improve UX of overflow affordance Aug 28, 2024
@macandcheese macandcheese changed the title Tabs - Improve UX of overflow affordance [Tabs] Improve UX of overflow affordance Aug 28, 2024
@macandcheese macandcheese mentioned this issue Sep 17, 2024
Open
6 tasks
@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality estimate - 5 A few days of work, definitely requires updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Sep 17, 2024
@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 Sep 17, 2024
@ashetland ashetland added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Sep 20, 2024
@geospatialem
Copy link
Member

The work above is dependent on #10532 landing.

Acceptance Criteria

I would expect the pagination arrow affordances to persist, and perhaps have a disabled state when the area is at an extent. Many examples in the wild have these "together" at the beginning or end, and this could be something to explore here as well.

@ashetland @SkyeSeitz For the overflow affordance in the "Acceptance Criteria" above, is the intent to have the affordance persist only at the end of the component? cc @macandcheese

@ashetland
Copy link
Contributor

That's correct. I added a before/after example to the issue description for clarity.

@geospatialem geospatialem added the visual changes Issues with visual changes that are added for consistency, but are not backwards compatible. label Oct 28, 2024
@macandcheese
Copy link
Contributor Author

@ashetland is there an example of the default appearance type, not bordered?

@ashetland
Copy link
Contributor

Updated the image in the description to include that and added the Figma link.

@jcfranco
Copy link
Member

jcfranco commented Dec 2, 2024

Blocking based on #10177 (comment).

@jcfranco jcfranco added the blocked This issue is blocked by another issue. label Dec 2, 2024
@geospatialem geospatialem assigned jcfranco and unassigned macandcheese Dec 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jcfranco jcfranco

Labels
1 - assigned Issues that are assigned to a sprint and a team member. blocked This issue is blocked by another issue. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Projects
None yet
Milestone
2025-02-25 - Feb Milestone
Development

No branches or pull requests
4 participants
@jcfranco @macandcheese @geospatialem @ashetland