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

Closed
15 of 19 tasks
abigailmbravo-uxuidev opened this issue May 2, 2024 · 6 comments
Closed
15 of 19 tasks

[Button] Enhance component's interactive states #9246

abigailmbravo-uxuidev opened this issue May 2, 2024 · 6 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. 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 DitwanP
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

  • Remove hover styling from all :focus states

  • 1. kind="neutral" appearance="solid":

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

  • 2. kind="neutral" appearance="outline-fill | outline":

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

  • 3. appearance="outline-fill":

    • 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. appearance="outline":

    • Update :hover to transparent.hover background change instead of a stroke width change
    • Update :press to a transparent.press background change instead of a stroke width change

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
28 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
@allyshah
Copy link

+1 this will be useful for the ArcGIS Dashboards team.
A button is hovered in this view. Hover state for buttons is low very contrast in some scenarios and invisible in others.

3e16a95b-f5d4-492e-bcd9-c1b13d7fe78f 256b6e67-79e9-4cab-9ba2-5eaa17635cd9

@geospatialem geospatialem added the ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. label Jan 14, 2025
@aPreciado88 aPreciado88 self-assigned this Feb 13, 2025
@aPreciado88 aPreciado88 added 1 - assigned Issues that are assigned to a sprint and a team member. 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. 1 - assigned Issues that are assigned to a sprint and a team member. labels Feb 13, 2025
@ashetland ashetland mentioned this issue Feb 14, 2025
Open
12 tasks
@aPreciado88
Copy link
Contributor

@geospatialem We're splitting some of the requirements to be worked on in a later milestone in #11576.

cc @ashetland @alisonailea

@aPreciado88 aPreciado88 mentioned this issue Feb 19, 2025
Merged
aPreciado88 added a commit that referenced this issue Feb 21, 2025
@aPreciado88
feat(button): enhance component's interactivity states (#11590)
146bb63 
**Related Issue:**
[#9246](#9246)

## Summary

- Remove `hover` styling from all `focus` states.

- Update `button` demos page `outline-fill` section to use
`appearance="outline-fill"` instead of `appearance="outline"`.

- `kind="neutral" appearance="solid"`:
  - Update `hover` `background-color` to `--calcite-color-border-3`.
  - Update `active` `background-color` to `--calcite-color-border-2`.

- `kind="neutral" appearance="outline-fill | outline"`:
  - Update all `hover` stroke colors to `--calcite-color-border-input`.
  - Update all `active` stroke colors to `--calcite-color-text-3`.

- `appearance="outline-fill"`:
- Update `hover` to a `--calcite-color-foreground-2` `background` change
instead of a stroke width change.
- Update `active` to a `--calcite-color-foreground-3` `background`
change instead of a stroke width change.

- `appearance="outline"`:
- Update `hover` to a `--calcite-color-transparent-hover` `background`
change instead of a stroke width change.
- Update `active` to a `--calcite-color-transparent-press` `background`
change instead of a stroke width change.
@aPreciado88 aPreciado88 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 21, 2025
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned aPreciado88 Feb 21, 2025
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Feb 21, 2025

🍡 Verified locally on dev

@DitwanP DitwanP closed this as completed Feb 21, 2025
@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 Feb 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. 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
5 participants
@geospatialem @DitwanP @abigailmbravo-uxuidev @allyshah @aPreciado88