Feat(core/avatar)- Added new prop to wrap username when necessary instead of wrapping by default - #2686
Feat(core/avatar)- Added new prop to wrap username when necessary instead of wrapping by default#26861307-Dev wants to merge 3 commits into
Conversation
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
📝 WalkthroughWalkthroughThe avatar component adds an opt-in ChangesAvatar username wrapping
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
1307-Dev
changed the title
|
![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 `@packages/core/src/components.d.ts`:
- Around line 280-285: Add a changeset for the affected package describing the
new public ix-avatar wrapUsername property and its behavior of wrapping username
and extra text instead of truncating them. Ensure the changeset uses the
appropriate release level; only omit it if you can establish that the change is
internal-only and document that rationale.
In `@packages/core/src/components/avatar/test/avatar.ct.ts`:
- Around line 123-210: Add a hydration assertion immediately after mounting the
Avatar fixture and before interacting with it, verifying the mounted component
is hydrated. In the wrapped dropdown test using wrap-username, run
makeAxeBuilder() against the expanded state and assert there are no
accessibility violations, while preserving the existing class and layout
assertions.
- Around line 167-210: Update the regression test around the avatar popup and
.user-info to validate the visible ix-dropdown panel rather than only the inner
element metrics. Supply a long extra value alongside the long username, then
assert the dropdown expands or that the complete username and extra content
remain visible after the update.
🪄 Autofix
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: c971f80f-fb16-465d-afdf-7c8a24788a50
⛔ Files ignored due to path filters (3)
packages/angular/standalone/src/components.tsis excluded by!packages/angular/standalone/src/components.tspackages/react/src/components/components.server.tsis excluded by!packages/react/src/components/**packages/vue/src/components/ix-avatar.tsis excluded by!packages/vue/src/components/**
📒 Files selected for processing (5)
packages/angular/src/components.tspackages/core/src/components.d.tspackages/core/src/components/avatar/avatar.scsspackages/core/src/components/avatar/avatar.tsxpackages/core/src/components/avatar/test/avatar.ct.ts
| /** | ||
| * If `true`, the username and extra text will wrap to multiple lines instead of being truncated with an ellipsis. Note: Only working if avatar is part of the ix-application-header | ||
| * @since 5.2.0 | ||
| * @default false | ||
| */ | ||
| "wrapUsername": boolean; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Add a changeset for this public API change.
wrapUsername adds a public ix-avatar property and changes username and extra-text rendering. Add a changeset for the affected package with the consumer-facing behavior. If no changeset is intended, state why the change is internal-only.
As per path instructions, “Changesets are required for public API updates and behavior changes.”
Also applies to: 7052-7057, 12014-12014
🤖 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 `@packages/core/src/components.d.ts` around lines 280 - 285, Add a changeset
for the affected package describing the new public ix-avatar wrapUsername
property and its behavior of wrapping username and extra text instead of
truncating them. Ensure the changeset uses the appropriate release level; only
omit it if you can establish that the change is internal-only and document that
rationale.
Source: Path instructions
| regressionTest( | ||
| 'should apply no-truncate class when wrapUsername is true', | ||
| async ({ page, mount }) => { | ||
| await page.setViewportSize(viewPorts.lg); | ||
| await mount( | ||
| ` | ||
| <ix-application-header name="Test"> | ||
| <ix-avatar username="foo" wrap-username> | ||
| </ix-avatar> | ||
| </ix-application-header> | ||
| ` | ||
| ); | ||
|
|
||
| const avatar = page.locator('ix-avatar'); | ||
| await avatar.click(); | ||
|
|
||
| await expect(avatar.locator('.user-info')).toHaveClass( | ||
| /\buser-info--no-truncate\b/ | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| regressionTest( | ||
| 'should not apply no-truncate class when wrapUsername is false', | ||
| async ({ page, mount }) => { | ||
| await page.setViewportSize(viewPorts.lg); | ||
| await mount( | ||
| ` | ||
| <ix-application-header name="Test"> | ||
| <ix-avatar username="foo"> | ||
| </ix-avatar> | ||
| </ix-application-header> | ||
| ` | ||
| ); | ||
|
|
||
| const avatar = page.locator('ix-avatar'); | ||
| await avatar.click(); | ||
|
|
||
| await expect(avatar.locator('.user-info')).not.toHaveClass( | ||
| /\buser-info--no-truncate\b/ | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| regressionTest( | ||
| 'should keep the popup width fixed and wrap long usernames when wrapUsername is true', | ||
| async ({ page, mount }) => { | ||
| await page.setViewportSize(viewPorts.lg); | ||
| await mount( | ||
| ` | ||
| <ix-application-header name="Test"> | ||
| <ix-avatar username="foo" wrap-username> | ||
| </ix-avatar> | ||
| </ix-application-header> | ||
| ` | ||
| ); | ||
|
|
||
| const avatar = page.locator('ix-avatar'); | ||
| await avatar.click(); | ||
|
|
||
| const userInfo = avatar.locator('.user-info'); | ||
|
|
||
| const initialMetrics = await userInfo.evaluate((element) => { | ||
| const rect = element.getBoundingClientRect(); | ||
| return { | ||
| width: Math.round(rect.width), | ||
| height: Math.round(rect.height), | ||
| }; | ||
| }); | ||
|
|
||
| const longUsername = 'verylongstringthatisnotfullydisplayed'; | ||
| await avatar.evaluate((element, value) => { | ||
| element.setAttribute('username', value); | ||
| }, longUsername); | ||
|
|
||
| await expect(userInfo).toHaveText(new RegExp(longUsername)); | ||
|
|
||
| const updatedMetrics = await userInfo.evaluate((element) => { | ||
| const rect = element.getBoundingClientRect(); | ||
| return { | ||
| width: Math.round(rect.width), | ||
| height: Math.round(rect.height), | ||
| }; | ||
| }); | ||
|
|
||
| expect(updatedMetrics.width).toBe(initialMetrics.width); | ||
| expect(updatedMetrics.height).toBeGreaterThan(initialMetrics.height); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Add the required accessibility and hydration coverage.
Add a makeAxeBuilder() assertion for the wrapped dropdown state. Add a basic assertion that the mounted Avatar is hydrated before interaction.
As per coding guidelines, “Include accessibility coverage using makeAxeBuilder and a basic hydration/render test in component test files.” As per path instructions, “Ensure tests include both: accessibility test using makeAxeBuilder() and renders test verifying hydration.”
🧰 Tools
🪛 ast-grep (0.45.0)
[warning] 197-197: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(longUsername)
Note: [CWE-1333] Inefficient Regular Expression Complexity
(regexp-from-variable)
[warning] 197-197: Do not use variable for regular expressions
Context: new RegExp(longUsername)
Note: [CWE-1333] Inefficient Regular Expression Complexity. Security best practice.
(regexp-non-literal-typescript)
🤖 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 `@packages/core/src/components/avatar/test/avatar.ct.ts` around lines 123 -
210, Add a hydration assertion immediately after mounting the Avatar fixture and
before interacting with it, verifying the mounted component is hydrated. In the
wrapped dropdown test using wrap-username, run makeAxeBuilder() against the
expanded state and assert there are no accessibility violations, while
preserving the existing class and layout assertions.
Sources: Coding guidelines, Path instructions
| regressionTest( | ||
| 'should keep the popup width fixed and wrap long usernames when wrapUsername is true', | ||
| async ({ page, mount }) => { | ||
| await page.setViewportSize(viewPorts.lg); | ||
| await mount( | ||
| ` | ||
| <ix-application-header name="Test"> | ||
| <ix-avatar username="foo" wrap-username> | ||
| </ix-avatar> | ||
| </ix-application-header> | ||
| ` | ||
| ); | ||
|
|
||
| const avatar = page.locator('ix-avatar'); | ||
| await avatar.click(); | ||
|
|
||
| const userInfo = avatar.locator('.user-info'); | ||
|
|
||
| const initialMetrics = await userInfo.evaluate((element) => { | ||
| const rect = element.getBoundingClientRect(); | ||
| return { | ||
| width: Math.round(rect.width), | ||
| height: Math.round(rect.height), | ||
| }; | ||
| }); | ||
|
|
||
| const longUsername = 'verylongstringthatisnotfullydisplayed'; | ||
| await avatar.evaluate((element, value) => { | ||
| element.setAttribute('username', value); | ||
| }, longUsername); | ||
|
|
||
| await expect(userInfo).toHaveText(new RegExp(longUsername)); | ||
|
|
||
| const updatedMetrics = await userInfo.evaluate((element) => { | ||
| const rect = element.getBoundingClientRect(); | ||
| return { | ||
| width: Math.round(rect.width), | ||
| height: Math.round(rect.height), | ||
| }; | ||
| }); | ||
|
|
||
| expect(updatedMetrics.width).toBe(initialMetrics.width); | ||
| expect(updatedMetrics.height).toBeGreaterThan(initialMetrics.height); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Test the visible dropdown result.
The test measures only .user-info. It can pass if ix-dropdown clips the expanded content. Assert that the dropdown panel expands or that the complete long content remains visible. Include a long extra value because wrapUsername changes both user-information fields.
As per coding guidelines, “Update tests ... when user-facing behavior ... changes.”
🧰 Tools
🪛 ast-grep (0.45.0)
[warning] 197-197: Regular expression constructed from variable input detected. This can lead to Regular Expression Denial of Service (ReDoS) attacks if the variable contains malicious patterns. Use libraries like 'recheck' to validate regex safety or use static patterns.
Context: new RegExp(longUsername)
Note: [CWE-1333] Inefficient Regular Expression Complexity
(regexp-from-variable)
[warning] 197-197: Do not use variable for regular expressions
Context: new RegExp(longUsername)
Note: [CWE-1333] Inefficient Regular Expression Complexity. Security best practice.
(regexp-non-literal-typescript)
🤖 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 `@packages/core/src/components/avatar/test/avatar.ct.ts` around lines 167 -
210, Update the regression test around the avatar popup and .user-info to
validate the visible ix-dropdown panel rather than only the inner element
metrics. Supply a long extra value alongside the long username, then assert the
dropdown expands or that the complete username and extra content remain visible
after the update.
Source: Coding guidelines
1 participant
💡 What is the current behavior?
Long usernames passed to ix-avatar via the username prop are always truncated with an ellipsis inside the dropdown of ix-application-header, with no way to display the full text.
GitHub Issue Number: #1583
🆕 What is the new behavior?
Added a new prop- wrapUsername-
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support
Summary by CodeRabbit
New Features
Bug Fixes
Tests