Skip to content

Add props to AvatarCodePage and add example #2321

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jialecl merged 3 commits into from
Oct 30, 2025
Merged

Add props to AvatarCodePage and add example #2321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be55135
Add primary and secondary text props to AvatarCodePage and to basicUs…
PelayoFelgueroso Oct 30, 2025
71ff2c6
Merge branch 'master' into PelayoFelgueroso/avatar-props
PelayoFelgueroso Oct 30, 2025
a06a6f1
Fix tabIndex description and functionality on Avatar and AvatarCodePage
PelayoFelgueroso Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion apps/website/screens/components/avatar/code/AvatarCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,22 @@ const sections = [
<td>This function will be called when the user clicks the avatar. Makes it behave as a button.</td>
<td>-</td>
</tr>
<tr>
<td>primaryText</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Text to be displayed as label next to the avatar.</td>
<td>-</td>
</tr>
<tr>
<td>secondaryText</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Text to be displayed as sublabel next to the avatar.</td>
<td>-</td>
</tr>
<tr>
<td>shape</td>
<td>
Expand Down Expand Up @@ -128,7 +144,9 @@ const sections = [
<td>
<TableCode>number</TableCode>
</td>
<td>Value of the tabindex attribute. It will only apply when the onClick property is passed.</td>
<td>
Value of the tabindex attribute. It will only apply when the onClick or linkHref property is passed.
</td>
<td>
<TableCode>0</TableCode>
</td>
Expand Down
4 changes: 3 additions & 1 deletion apps/website/screens/components/avatar/code/examples/basicUsage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ const code = `() => {
return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcAvatar
label="John Doe"
label="Michael Ramirez"
color="success"
primaryText="Michael Ramirez"
secondaryText="m.ramirez@insurance.com"
/>
</DxcInset>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/lib/src/avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const DxcAvatar = memo(
shape={shape}
size={size}
status={status}
tabIndex={tabIndex}
tabIndex={onClick || linkHref ? tabIndex : undefined}
title={title}
/>
</LabelWrapper>
Expand Down