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

Combobox: update chevron colors #7711

Closed
2 of 3 tasks
Tracked by #7703
ashetland opened this issue Sep 8, 2023 · 11 comments
Closed
2 of 3 tasks
Tracked by #7703

Combobox: update chevron colors #7711

ashetland opened this issue Sep 8, 2023 · 11 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Web Analysis Issues logged by ArcGIS Web Analysis team members bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. good first issue Issues that can be worked on by contributors new to calcite-components. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Milestone
2024-04-30 - Apr ...

Comments

@ashetland
Copy link

ashetland commented Sep 8, 2023 •
edited by geospatialem
Loading

Check existing issues

Actual Behavior

Combobox's chevrons are ui-text-1 in all states.

image

Expected Behavior

For system consistency, chevrons should be ui-text-3 when idle and ui-text-1 when hovered or pressed.

image

Reproduction Sample

https://codepen.io/ashetland/pen/MWZpgRd

Reproduction Steps

Interact with Combobox.

Reproduction Version

v1.8.0

Relevant Info

Figma designs for Combobox here.

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react

Esri team

ArcGIS Web Analysis
@ashetland ashetland added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Sep 8, 2023
@github-actions github-actions bot added impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive calcite-components Issues specific to the @esri/calcite-components package. labels Sep 8, 2023
@ashetland ashetland mentioned this issue Sep 8, 2023
Closed
5 tasks
@github-actions github-actions bot added the ArcGIS Web Analysis Issues logged by ArcGIS Web Analysis team members label Sep 8, 2023
@ashetland ashetland added design Issues that need design consultation prior to development. ready for dev Issues ready for development implementation. labels Sep 8, 2023
@github-actions github-actions bot added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Sep 8, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Sep 8, 2023

cc @geospatialem, @brittneytewks

@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Sep 8, 2023
@brittneytewks brittneytewks added the figma changes Issues that require additions or updates to the Figma UI Kit label Sep 12, 2023
@geospatialem geospatialem added the good first issue Issues that can be worked on by contributors new to calcite-components. label Sep 21, 2023
@geospatialem geospatialem added this to the 2024 March Priorities milestone Nov 22, 2023
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Nov 22, 2023
@brittneytewks brittneytewks removed the figma changes Issues that require additions or updates to the Figma UI Kit label Dec 11, 2023
@brittneytewks
Copy link

Removed Figma changes label as this will be tracked in monday.com

@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 Apr 24, 2024
@geospatialem geospatialem removed this from the 2024-07-30 - Jul Release milestone Apr 24, 2024
aPreciado88 added a commit that referenced this issue Apr 24, 2024
@aPreciado88
fix(combo-box): update the focus and hover chevron icon color (#9187)
a1317da 
**Related Issue:**
[#7711](#7711)

### Summary
This updates `combo-box` chevron colors to be `--calcite-color-text-3`
when idle and `--calcite-color-text-1` when hovered or pressed.
@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 Apr 24, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned aPreciado88 Apr 24, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Apr 25, 2024

When the combobox is expanded, the color of the chevron is not ui-text-3 except for the split second when you press on an option. You can hold the mouse down on an option to see the color change. It looks like its because it's in a focused state and not really "idle". In the pen below you can see what I'm talking about, the input-time-picker works because it's not actually focused after press, and I'm not sure about select because it's covered by options when expanded

@ashetland Thoughts on this? Depending on what you think I might have to reopen the issue for date picker chevron colors as well.

@aPreciado88 for 👀

https://codepen.io/Ditwan-Price/pen/JjVzKWp?editors=1000

@ashetland
Copy link
Author

ashetland commented Apr 25, 2024 •
edited
Loading

Nice catch! I think this may just be an issue with Combobox because two things are focused at the same time. I'd consider this dual focus to be a bug, fwiw. I'm not sure I understand the need for this dual focus state.

That said, if there's no other way around this, I'd suggest we leave the chevron text.3 at all times. What I may see as a bug, others may feel is a feature 😁.

@aPreciado88
Copy link
Contributor

@DitwanP @ashetland I confirmed with @jcfranco that the double focus is intentional. I can update the chevron's color to always be ui-text-3 like Aaron suggested. Or I can change it to only be ui-text-1 when the combobox is being hovered or clicked. Please let me know which option you like better.

@ashetland
Copy link
Author

That might be a better compromise, @aPreciado88. I like that at least the hover state would match across components even if the focus state is slightly off on Combobox. Let's try it!

@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Apr 26, 2024
@aPreciado88 aPreciado88 mentioned this issue Apr 26, 2024
Merged
@aPreciado88
Copy link
Contributor

@ashetland The changes are up!

@ashetland
Copy link
Author

Looks good!

aPreciado88 added a commit that referenced this issue Apr 26, 2024
@aPreciado88
fix(combobox): update the focused chevron icon color (#9202)
27ac02d 
**Related Issue:**
[#7711](#7711)

### Summary
This updates `combobox` chevron colors to be --calcite-color-text-3 when
idle or focused, and `--calcite-color-text-1` when hovered.
@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 Apr 26, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned aPreciado88 Apr 26, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Apr 26, 2024

🍠 Verified on 2.8.0-next.14

@DitwanP DitwanP closed this as completed Apr 26, 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 Apr 26, 2024
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 Web Analysis Issues logged by ArcGIS Web Analysis team members bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. good first issue Issues that can be worked on by contributors new to calcite-components. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2024-04-30 - Apr Release
Development

No branches or pull requests
5 participants
@geospatialem @DitwanP @ashetland @brittneytewks @aPreciado88