Notes: reveal the add-reaction trigger on hover instead of reserving a row - #82313
Notes: reveal the add-reaction trigger on hover instead of reserving a row#82313adamsilverstein wants to merge 2 commits into
Conversation
…a row
The trigger sat on a row of its own below every selected note, so a note
nobody had reacted to still paid a full row of vertical space for the
option. Move it in among the note's other icon actions and keep it faded
until the note is hovered or the trigger is focused, matching how Google
Docs surfaces the same affordance.
The reveal hangs off the trigger rather than the thread: the thread is
`tabIndex={ 0 }`, so a thread-level `:focus-within` would hold for as
long as the note is selected and the fade would never take effect. The
whole treatment is scoped to `@media (hover: hover)`, so a touch device
keeps a trigger it can actually see.
The pill row now renders only when the note has reactions, and it no
longer depends on selection - reactions are information about the note,
so they survive being deselected rather than disappearing with the
note's actions.
🤖 PR meta 🤖🏷️ LabelsThis pull request needs exactly one label indicating its type, and has 0.
Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +352 B (0%) Total Size: 7.93 MB 📦 View Changed
|
|
Nice work. Taking it for a spin: 
For me, the focus handling works, focus isn't transferred, nor is it lost when you remove a reaction. This follows an earlier sketch, by the way, putting the emoji button in this location. Whether we put it here or below, I'm happy to defer to anyone with an opinion. It is a little tight, but it works: 
The hover to reveal, however, feels unnecessary to me, honestly. The text from the author has the same amount of reserved space whether the button is shown or not, and since the button is shown whenever the note itself is focused, there's not much to gain: 
It only begs the question: why is this button hidden unless I hover, and not the others? Not a strong opinion, but I think we should just remove the hover effect. I'm also curious about the hover style—a square grey backdrop. There's nothing wrong with it, but why does only the emoji button have it, and not the others? I would think all three buttons in that space should be the same variant. Let me know if this makes sense, happy to ✅ depending on how you all feel! |
2 participants
Stacked on #78176, and opened for testing rather than merging as-is.
In #78176 (comment) @annezazu pointed out that the add-reaction button takes up a lot of real estate, and asked whether it could appear on hover the way Google Docs does. This is a try at that.
The trigger moves in among the note's other icon actions, up beside Resolve and the actions menu, and stays faded until the note is hovered or the trigger itself is focused. A note nobody has reacted to now costs no vertical space at all for the option. The reaction pills keep their own row, but only when there are actually reactions to show.
Two things fell out of the change that are worth calling out:
tabIndex={ 0 }, so a thread-level:focus-withinholds for as long as the note is selected and the fade would never take effect.@media (hover: hover). A touch device has no hover, so there it keeps a trigger it can actually see.The pills also no longer disappear when you deselect a note. Reactions are information about the note rather than one of its actions, so they now stay put - otherwise you could react on hover and watch the reaction vanish.
Screenshots
How has this been tested
Existing
Emoji Reactionse2e specs all pass, plus two new ones covering the fade and the deselected pills.Types of changes
minimalvariant so it sits with the other icon buttons instead of shouting over them.Open questions
AI Use
Claude Code did the typing here, I did the asking. I will review and test.