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

feat(Tag): add pointer on hover if component is interactive #7839

Merged
merged 8 commits into from
Mar 3, 2021
Merged

feat(Tag): add pointer on hover if component is interactive #7839

merged 8 commits into from
Mar 3, 2021

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Feb 18, 2021

Closes #7592

This PR adds a pointer cursor on hover when an onClick handler is supplied to the Tag component

Testing / Reviewing

Ensure that the interactive tag example changes cursor on hover

@emyarod emyarod requested a review from a team as a code owner February 18, 2021 18:40
@emyarod emyarod requested review from jnm2377 and dakahn February 18, 2021 18:40
@netlify
Copy link

netlify bot commented Feb 18, 2021 •
edited
Loading

Deploy preview for carbon-elements ready!

Built with commit 6922f53

https://deploy-preview-7839--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Feb 18, 2021 •
edited
Loading

Deploy preview for carbon-components-react ready!

Built with commit 6922f53

https://deploy-preview-7839--carbon-components-react.netlify.app

jnm2377
jnm2377 suggested changes Feb 24, 2021
View reviewed changes
Copy link
Contributor

@jnm2377 jnm2377 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also add a bg hover color, and maybe focus state for interactive as well? Since it'll be clickable/keyboard accessible. We have a bg hover color for the x in the filterable tag, I would expect it to be the same color for interactive tag.

@emyarod
Copy link
Member Author

emyarod commented Feb 24, 2021

this is only restoring a reported regression in pointer styles (the tags remain keyboard inaccessible, keeping the current behavior). I don't have the context from the Slack conversation referenced in the original ticket but from what I understand, those style changes have not been specced out yet. but if we want to roll in the regression fix and the interactive style updates together I will need a spec from design. is that how we should proceed?

@tw15egan
Copy link
Collaborator

cc @aagonzales

#7592 (comment)

@emyarod
Copy link
Member Author

emyarod commented Feb 24, 2021

yeah I reached out to her about this and I'm watching the thread. not sure if this means this regression fix needs to be blocked

@tw15egan
Copy link
Collaborator

tw15egan commented Mar 2, 2021

@emyarod Looks like @aagonzales has given this the go-ahead. Hover looks good, but doesn't seem to be focusable via keyboard. Should we forward any onClick handlers to an internal onKeyDown / add a tabindex?

@emyarod
Copy link
Member Author

emyarod commented Mar 2, 2021

yeah I'm currently discussing potential hover/active states for interactive tags with her. this PR was initially to restore the reported regression for hover state but depending on the discussions then more style and functionality will need to be introduced

@emyarod emyarod force-pushed the 7592-tag-interactive branch from d81cf95 to 248029e Compare March 2, 2021 20:50
@emyarod emyarod requested a review from jnm2377 March 2, 2021 20:50
@emyarod emyarod requested a review from aagonzales March 2, 2021 20:50
aagonzales
aagonzales approved these changes Mar 2, 2021
View reviewed changes
Copy link
Member

@aagonzales aagonzales left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect, I think the hovers are a nice addition. Thanks for adding those!

jnm2377
jnm2377 approved these changes Mar 2, 2021
View reviewed changes
Copy link
Contributor

@jnm2377 jnm2377 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! 🔥

@emyarod emyarod force-pushed the 7592-tag-interactive branch from 248029e to ad2da9d Compare March 2, 2021 21:56
tw15egan
tw15egan approved these changes Mar 2, 2021
View reviewed changes
Copy link
Collaborator

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 ✅

@emyarod emyarod force-pushed the 7592-tag-interactive branch from ad2da9d to 6922f53 Compare March 3, 2021 15:06
@kodiakhq kodiakhq bot merged commit d944ac5 into carbon-design-system:master Mar 3, 2021
@dakahn dakahn mentioned this pull request Mar 4, 2021
Merged
@emyarod emyarod deleted the 7592-tag-interactive branch March 5, 2021 17:19
@emyarod emyarod mentioned this pull request Mar 8, 2021
Closed
60 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@aagonzales aagonzales aagonzales approved these changes

@dakahn dakahn dakahn approved these changes

@jnm2377 jnm2377 jnm2377 approved these changes

@tw15egan tw15egan tw15egan approved these changes

Assignees
No one assigned
Labels
status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Tag: when a Tag is actionable(has an onClick), the pointer icon does not change
5 participants
@emyarod @tw15egan @aagonzales @jnm2377 @dakahn