Repository navigation
fix(chat): widen the back button's tap area in the chat top bar - #1543
Merged
Merged
Conversation
In a chat, back is a 40dp circle at 15-55dp and the avatar, which opens the profile, starts at 70dp. The strip between them and the corners around the circle did nothing, so a thumb that missed the arrow either did nothing or, reaching further right, opened the profile. Add Modifier.expandedTouchTarget(outset, onTap) to :ui:core. It grows an element's tap area by an outset without changing its layout: an inner layout grows by the outset so the tap handler covers it, and an outer layout reports the original size to the parent. The control's own click still takes taps inside it and consumes the up, so a tap there fires once. Compose 1.12's PointerInputModifierNode.touchBoundsExpansion looks like the tool for this, but NodeCoordinator.isInExpandedTouchBounds only honours it for stylus and eraser pointers, so a finger never reaches it. AppBarDefaults.leadingControlTouchOutset() sizes the outset for a leading control: to the bar's leading edge, its full height, and across the gap up to where the title starts. The chat bar applies it to back. The avatar keeps its own bounds, so a tap on the avatar itself still opens the profile.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
In a chat, back is a 40dp circle at 15–55dp and the avatar, which opens the profile, starts at 70dp. The strip between them and the corners around the circle did nothing, so a thumb that missed the arrow either did nothing or, reaching further right, opened the profile. Taps anywhere before the avatar now go back.
Modifier.expandedTouchTarget(outset, onTap)New in
:ui:core. It grows an element's tap area byoutsetwithout changing its layout. An innerlayoutgrows by the outset so the tap handler covers it, and an outerlayoutreports the original size to the parent and pulls the grown box back into place. The control's own click still takes taps inside it and consumes the up, so a tap there fires once.Two things to know when using it:
clipin the chain, since a clip also clips hit testing.onTap. That's harmless when both do the same thing, which is the intended use.Compose 1.12's
PointerInputModifierNode.touchBoundsExpansionlooks like the tool for this, butNodeCoordinator.isInExpandedTouchBoundsonly honours it for stylus and eraser pointers, so a finger never reaches it.Chat top bar
AppBarDefaults.leadingControlTouchOutset()sizes the outset for a leading control: to the bar's leading edge, its full height, and across the gap up to where the title starts.ConversationTitleBarapplies it to back. The bar's 56dp height and 5dp slot padding became named constants so the helper andTopAppBarBasecan't drift apart.The avatar keeps its own bounds, so a tap that lands on the avatar still opens the profile. If that remains a problem, the next step is more space between the arrow and the avatar, which is a design change.
Tests
ExpandedTouchTargetTest: taps on the control, just outside it, in the outset, past the parent's edge and past the outset, plus a check that the parent still measures the control at 40dp.ConversationTitleBarTest: a tap in the gap at 62dp goes back and doesn't open the profile, a tap near the circle's corner goes back, and a tap on the arrow goes back exactly once.