Jc/update avatar component#2508
Conversation
|
Warning Review limit reached
Next review available in: 29 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe user profile avatar edit UI is refactored: the template loads ChangesAvatar UI State Refactor
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Poem
🚥 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
left a comment
ycanales
left a comment
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> |
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> |
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
left a comment
herzog0
left a comment
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.
3 participants
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