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

[Button] Enhance component's interactive states #9246

Open
2 of 20 tasks
abigailmbravo-uxuidev opened this issue May 2, 2024 · 2 comments
Open
2 of 20 tasks

[Button] Enhance component's interactive states #9246

abigailmbravo-uxuidev opened this issue May 2, 2024 · 2 comments
Labels
0 - new New issues that need assignment. ArcGIS Online Issues logged by ArcGIS Online team members. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - design - sm Small design effort; 1-4 days of design work estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - medium Issue is non core or affecting less that 60% of people using the library p2 - want for current milestone User set priority status of p2 - want for current milestone ready for dev Issues ready for development implementation.
Milestone
2025-02-25 - Feb ...

Comments

@abigailmbravo-uxuidev
Copy link

abigailmbravo-uxuidev commented May 2, 2024 •
edited by geospatialem
Loading

Check existing issues

Description

A stronger and more noticeable hover state for calcite-neutral outline and outline-fill buttons.

2024-05-02_13-15-56 (1)

This giphy is showing and comparing the new hover to state to the old hover state (while one is brand and one is neutral), the drastic hover state difference is creating a weird and unexpected interaction.

Part of epic #9299

Acceptance Criteria

  • 1. Neutral and solid:

    • Update :hover background color to border.3
    • Update :press background color to border.2

  • 2. Neutral and outline-fill & outline:

    • Update all :hover outline colors to border.input
    • Update all :press outline colors to text.3

  • 3. Outline-fill and outline:

    • Update :hover to foreground.2 background change instead of a stroke width change
    • Update :press to a foreground.3 background change instead of a stroke width change

  • 4. Transparent variants:

    • Update :hover background color to foreground.2
    • Update :press background color to foreground.3
    • For inverse transparent, update :hover background color to inverse.hover
    • For inverse transparent, update :press background color to inverse.press

image

Relevant Info

The neutral outline buttons are being added to the groups item details pages at R2. So if any type of enhancement can be made before then to make this a more clear experience, that would be great.

Which Component

Calcite-button

https://codepen.io/geospatialem/pen/dyLBvPm

Example Use Case

In this example, I am hovering on 'Add items to groups' - if you look closers, you can tell there is a very subtle difference.

Screenshot 2024-05-02 at 1 21 17 PM

Priority impact

p2 - want 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

ArcGIS Online
@abigailmbravo-uxuidev abigailmbravo-uxuidev added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels May 2, 2024
@github-actions github-actions bot added impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone ArcGIS Online Issues logged by ArcGIS Online team members. calcite-components Issues specific to the @esri/calcite-components package. labels May 2, 2024
@geospatialem geospatialem added the design Issues that need design consultation prior to development. label May 2, 2024
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - design - sm Small design effort; 1-4 days of design work labels May 9, 2024
@geospatialem geospatialem added this to the Design Backlog milestone May 9, 2024
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label May 9, 2024
@geospatialem geospatialem mentioned this issue May 9, 2024
Open
27 tasks
@DitwanP DitwanP removed this from the Design Backlog milestone Jul 11, 2024
@geospatialem geospatialem added the estimate - 5 A few days of work, definitely requires updates to tests. label Aug 7, 2024
@github-actions github-actions bot added the p2 - want for current milestone User set priority status of p2 - want for current milestone label Aug 7, 2024
@geospatialem
Copy link
Member

Updating the context and title above for consistent interactive states across the design system. ✨

@geospatialem geospatialem changed the title Hover state on neutral-outline button [Button] Enhance component's interactive states Aug 8, 2024
@geospatialem geospatialem added the ready for dev Issues ready for development implementation. label Aug 8, 2024
@github-actions github-actions bot added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Aug 8, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 8, 2024

cc @geospatialem, @brittneytewks

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Aug 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
0 - new New issues that need assignment. ArcGIS Online Issues logged by ArcGIS Online team members. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - design - sm Small design effort; 1-4 days of design work estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - medium Issue is non core or affecting less that 60% of people using the library p2 - want for current milestone User set priority status of p2 - want for current milestone ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2025-02-25 - Feb Milestone
Development

No branches or pull requests
3 participants
@geospatialem @DitwanP @abigailmbravo-uxuidev