feat(navigation): give the You tab's photo slot an unselected state - #1383
Merged
Conversation
The photo slot wore the same 2dp solid white ring whether or not the tab was selected, so the only unselected cue was the slot's 0.5 alpha. Node 9713:664 draws the unselected ring thinner and dimmer: 1px white at 50%, which the slot alpha halves again to the 25% the frame composes to. Animate the ring width alongside the existing icon fade, and take the ring colour's alpha from that same animation so the two stay in step. The padding around the ring stays at thickBorder in both states, so the photo doesn't resize as the ring thins. The existing preview passes no avatar, so neither photo state was visible in previews. Add one per state, plus a Robolectric capture of all three states in the shape of the two screenshot tests already in this module — at mdpi, where a dp is a pixel and the ring measures against the design's px values directly.
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
1 participant
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.
The You tab's photo slot wore the same 2dp solid white ring whether or not the tab was selected, so the only unselected cue was the slot's 0.5 alpha. Node 9713:664 gives the photo an unselected state of its own: a 1px ring in white at 50%, which the slot's 50% opacity halves again to the 25% the frame composes to.
The ring width animates alongside the existing icon fade, and the ring colour's alpha comes from that same animation, so the two stay in step through a tab switch. The padding around the ring stays at
thickBorderin both states, so the photo keeps its size as the ring thins — only the inset ring changes.The glyph state (no photo) is untouched.
States
#FFFFFF(125, 117, 112)over the dimmed photo — white at 25%The rendered column is sampled from a Robolectric capture at mdpi, where a dp is a pixel, so those widths compare against the design's px values directly.
Previews and capture
The existing
NavigationBarPreviewpasses no avatar, so neither photo state showed up in previews. This adds one preview per state, and aNavigationBarAvatarScreenshotTestthat writes all three states tobuild/screenshots/— the same shape asTokenCardWatermarkScreenshotTestandBlocklistScreenshotTest. A flat fill stands in for the photo, since neither a preview nor a Robolectric test has a profile to read.