Jc/update avatar component#2508
Open
jlchilders11 wants to merge 5 commits into
Open
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe avatar edit UI now uses revised checkbox and label controls, optional file-field IDs, consolidated CSS state selectors, and a full-screen overlay cover. The template adds a return icon and removes obsolete close-button reset handling. ChangesAvatar editing controls and template support
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@static/css/v3/user-profile-page.css`:
- Around line 207-214: The delete-state selector in user-profile__avatar-row
only hides the avatar image and action buttons, so if the replace panel is
already open it can remain visible when both checkboxes are checked. Update the
delete-state rule in the avatar delete-checkbox branch to also hide the
replacement panel/card that is controlled by the replace flow, using the
existing avatar row and replacement panel selectors so delete always wins over
replace.
In `@templates/v3/user_profile_edit.html`:
- Line 108: The accessible name on the Undo Changes control is incorrect because
the `label` for `user-profile__avatar-delete-checkbox` uses `aria-label="Delete
Avatar"` and overrides the visible text. Update the `label` in the
`user_profile_edit` template so its accessible name matches the displayed
action, or remove the conflicting aria-label entirely if the visible text is
sufficient. Make sure the `Undo Changes` control announced by assistive tech
matches its actual purpose.
- Around line 103-112: The avatar upload section is rendering two file inputs
through the same `_field_file.html` partial with the same generated id, so the
“Replace Image” label can target the wrong control. Update the
`user_profile_edit.html` usage of `_field_file.html` so each avatar file input
gets a distinct id (for example by adding an explicit id parameter to the
partial or making the empty-state field non-labelable), and ensure the labels in
the avatar controls continue to point to the intended input.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 76905191-5c22-43fc-a6ad-fbc03f0759fb
📒 Files selected for processing (3)
static/css/v3/user-profile-page.csstemplates/includes/icon.htmltemplates/v3/user_profile_edit.html
ycanales
approved these changes
Jul 2, 2026
ycanales
left a comment
ycanales
left a comment
Collaborator
There was a problem hiding this comment.
Worked as intended and persisting the changes is out of scope for this ticket. Have wo comments but they're not blockers. Approving :)
| <input type="checkbox" id="user-profile__avatar-row-checkbox" name="avatar-row-checkbox" class="badge-button__radio" /> | ||
| {% include 'v3/includes/_field_file.html' with name=user_profile_form.avatar.name extra_class='user-profile__empty-avatar-input' accept='image/png,image/jpeg' only %} | ||
| <div class="user-profile__default-space-col user-profile__default-avatar-buttons"> | ||
| <label for="user-profile__avatar-row-checkbox" class="btn btn-primary">Replace Avatar<span class="btn-icon" aria-hidden>{% include 'includes/icon.html' with icon_name='pixel-pencil' icon_size=16 icon_viewbox='0 0 16 16' only %}</span></label> |
Collaborator
There was a problem hiding this comment.
In Figma the Replace Avatar button has a white background, and both buttons are a bit wider (seems to have more horizontal padding).
| <div class="user-profile__default-space-col user-profile__activated-avatar-buttons"> | ||
| <div class="user-profile__avatar-edit-button-row"> | ||
| <label aria-label="Save Avatar Change" id="avatar-row__save-button" for="user-profile__avatar-row-checkbox" class="btn btn-primary"><span class="btn-icon" aria-hidden>{% include 'includes/icon.html' with icon_name='pixel-pencil' icon_size=16 icon_viewbox='0 0 16 16' only %}</span></label> | ||
| <label aria-label="Reset Avatar Change" id="avatar-row__close-button" for="user-profile__avatar-row-checkbox" class="btn btn-primary"><span class="btn-icon" aria-hidden>{% include 'includes/icon.html' with icon_name='pixel-trash' icon_size=16 icon_viewbox='0 0 16 16' only %}</span></label> |
Collaborator
There was a problem hiding this comment.
Since the mechanism changed, do we need to clean up the avatarRowClose lines in v3/user_profile_edit.html ?
herzog0
approved these changes
Jul 2, 2026
herzog0
left a comment
herzog0
left a comment
Collaborator
There was a problem hiding this comment.
Looks good, thanks!!
I'm pre-approving, as I only have one small nit to consider:
the img and container radii seem to not be matching, creating this small gap in the corners.
Not a must-do from my pov, and you can only notice it in dark mode.
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
4 participants
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.
Issue: #2496
Summary & Context
Updates the Avatar Component to match with the updated design and styling.
Changes
Please list any potential risks or areas that need extra attention during review/testing
Screenshots
Empty State:
Filled State:
Edit State:
Delete State:
Self-review Checklist
Frontend
Summary by CodeRabbit
New Features
pixel-arrow-returnicon.idvalue.UI Improvements