Add standard states and horizontal parity to Avatar component#90
Conversation
…component Updated the Avatar component to include missing interaction states (disabled, loading, interactive, hovered, focused, active) and the fullWidth structural variant. Changes: - src/styles/components.css: Added CSS classes for standard states, transitions, and focus ring support. - src/recipes/avatar.ts: Updated recipe to include new boolean and forced-state flags. - tests/alert-avatar-recipe.test.ts: Added unit test coverage for new Avatar states. - tests/css-contract.test.ts: Included Avatar in the exhaustive CSS parity contract. Co-authored-by: bradpotts <4887598+bradpotts@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
WalkthroughThis PR extends the avatar component recipe with boolean state flags for styling control (disabled, loading, interactive, hovered, focused, active, fullWidth), updates class generation to emit corresponding modifier classes, adds CSS rules for all avatar states and interactions, and provides test coverage validating both recipe behavior and CSS contract compliance. ChangesAvatar State Styling
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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: 1
🤖 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 `@tests/alert-avatar-recipe.test.ts`:
- Around line 127-130: The test currently asserts multi-token className with
expect(result).toContain(className) which is fragile; update the loop over
states in the test to split className on whitespace (className.split(/\s+/)) and
assert each token individually against the result (for each token call
expect(result).toContain(token)), while still calling
expectTokenizedClassString(result); locate references to states, className,
getAvatarClasses and expectTokenizedClassString to make the change.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: d0e5b4da-af5a-481f-8ec6-834067d9b09e
📒 Files selected for processing (5)
examples/avatar-verification.htmlsrc/recipes/avatar.tssrc/styles/components.csstests/alert-avatar-recipe.test.tstests/css-contract.test.ts
| states.forEach(({ key, className }) => { | ||
| const result = getAvatarClasses({ [key]: true }) | ||
| expect(result).toContain(className) | ||
| expectTokenizedClassString(result) |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Consider splitting className for individual token assertions.
The test currently uses .toContain(className) where className is a multi-token string like 'sp-avatar--hover is-hover'. This works but assumes the classes appear adjacent and in the exact order. A more robust approach would split the expected classes and assert each token individually:
- states.forEach(({ key, className }) => {
+ states.forEach(({ key, className }) => {
const result = getAvatarClasses({ [key]: true })
- expect(result).toContain(className)
+ className.split(/\s+/).forEach(cls => {
+ expect(result).toContain(cls)
+ })
expectTokenizedClassString(result)
})This approach is resilient to class reordering and remains clear about which tokens are expected.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| states.forEach(({ key, className }) => { | |
| const result = getAvatarClasses({ [key]: true }) | |
| expect(result).toContain(className) | |
| expectTokenizedClassString(result) | |
| states.forEach(({ key, className }) => { | |
| const result = getAvatarClasses({ [key]: true }) | |
| className.split(/\s+/).forEach(cls => { | |
| expect(result).toContain(cls) | |
| }) | |
| expectTokenizedClassString(result) | |
| }) |
🤖 Prompt for 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.
In `@tests/alert-avatar-recipe.test.ts` around lines 127 - 130, The test currently
asserts multi-token className with expect(result).toContain(className) which is
fragile; update the loop over states in the test to split className on
whitespace (className.split(/\s+/)) and assert each token individually against
the result (for each token call expect(result).toContain(token)), while still
calling expectTokenizedClassString(result); locate references to states,
className, getAvatarClasses and expectTokenizedClassString to make the change.
1 participant
This PR hardens the Avatar component styling contract by adding missing interaction states (disabled, loading, hover, focus, active) and the fullWidth structural variant. It ensures visual parity with other interactive components in the library and provides both pseudo-selector and forced-state class support. Includes updated unit tests and CSS contract validation.
PR created automatically by Jules for task 9336953692732881863 started by @bradpotts
Summary by CodeRabbit
New Features
Documentation