Repository navigation
fix(avatar-button): Keep the default button frame around avatars - #130893
Draft
priscilawebdev wants to merge 6 commits into
Draft
priscilawebdev wants to merge 6 commits into
priscilawebdev wants to merge 6 commits into
Conversation
The button's border and raised edge took a color sampled from the avatar, and the container drew a transparent border over the button's own when there was none. The Settings v3 design uses the default neutral button frame for every avatar, so draw the container border in the button's edge color and stop sampling a frame color. Logos that don't fill the frame are still inset. Refs DE-1832
github-actions
Bot
added
the
Scope: Frontend
Nothing reads chonk now that the button keeps its default frame. Remove it from useAvatarColors and the image analysis, along with the contrast tuning that only served it. The sampling still returns the dominant color for the menu header gradient and whether a logo should be inset. Refs DE-1832
Contributor
Story previewsPreview the stories changed in this PR on the Vercel deployment: Preview deployment: https://sentry-5um3hqub6.sentry.dev |
This reverts commit 93610d6.
…tons Only the organization and user buttons in the primary navigation should drop the avatar-colored frame. Add frame="neutral" to AvatarButton, which keeps the default button frame and redraws its border around the avatar, and use it for those buttons. Every other AvatarButton keeps the frame sampled from the avatar. Refs DE-1832
…user buttons" This reverts commit aa7edc3.
This reverts commit 45227f1.
This branch was successfully deployed
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.
AvatarButtonno longer colors its frame from the avatar. The border and raised edge used a color sampled from the image (or derived from the letter-avatar swatch); every avatar button now uses the default neutral button frame, as in the Settings v3 design. This affects everyAvatarButtonin the app, including the primary navigation and assignee pickers.The avatar container also used to draw a
transparentborder on top of the button's own border whenever there was no sampled color, so the button lost its outline. It now draws that border in the button's edge color (interactive.chonky.embossed.neutral.chonk), so avatar buttons have the same outline as other buttons.Unchanged: logos that don't fill the frame are still inset with padding, and suggested assignees keep their dashed neutral border.
With the frame color gone,
useAvatarColorsand the image analysis no longer compute it, and the 3:1 contrast tuning that only served it (darkenUntilContrasts) is removed. The sampling still returns the avatar's dominant color, which the menu header gradient uses, and whether a logo should be inset.The menu header gradient is handled separately in #130236.
Refs DE-1832