fix(pds-avatar): add initials props

[QuintonJason]

Description

• Adds initials prop to the Avatar component

Fixes DSS-71

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Visit the Avatar page -> Initials

• unit tests
• tested manually

Test Configuration:

• Pine versions:
• OS:
• Browsers:
• Screen readers:
• Misc:

Checklist:

If not applicable, leave options unchecked.

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	f6863e1
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6966eacb182c9b0008677ba9
😎 Deploy Preview	https://deploy-preview-635--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[QuintonJason]

@coderabbitai review this pr

[coderabbitai]

@QuintonJason: I'll review the changes in this PR for you.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

This change introduces a new optional initials property to the PdsAvatar component. The property accepts a string or null value and enables rendering user initials as SVG content when no image is provided. Updates include modifications to the component declaration, TypeScript definitions, styling rules for the .pds-avatar__initials selector, and the rendering logic in the component implementation. Supporting additions include documentation sections, storybook stories demonstrating the feature, and test cases validating initials rendering with various prop combinations including badges.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete; critical sections lack detail. The checklist has most items unchecked, motivation/context is minimal, and test configuration details are missing.	Expand the description with context about why initials are needed, detail the testing approach, fill in test configuration, and check applicable checklist items to confirm standards compliance.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding an initials property to the pds-avatar component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

libs/core/src/components/pds-avatar/stories/pds-avatar.stories.js (1)

20-30: Potential issue: null value renders as string "null" in Lit templates.

When args.initials is null, the template interpolation initials="${args.initials}" will render as the literal attribute initials="null", which the component may interpret as the string "null" rather than a null value. This could cause "null" to display as initials text.

Consider using Lit's ifDefined directive or a conditional to avoid passing null values:

🐛 Suggested fix using ifDefined

+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import imgFile from '../assets/demi_wilkinson.jpg';

 const BaseTemplate = (args) => html`<pds-avatar
 	alt="${args.alt}"
 	badge="${args.badge}"
 	dropdown="${args.dropdown}"
 	component-id="${args.componentId}"
 	image="${args.image}"
-	initials="${args.initials}"
+	initials="${ifDefined(args.initials)}"
 	size="${args.size}"
 	variant="${args.variant}"
 >
 </pds-avatar>`;

Note: The same issue may exist for other nullable props like alt and image. Consider applying ifDefined consistently across all nullable attributes.

🧹 Nitpick comments (2)

libs/core/src/components/pds-avatar/test/pds-avatar.spec.tsx (1)

188-239: LGTM - Test coverage for initials feature is solid.

The tests appropriately cover:

1. Basic initials rendering with SVG structure
2. Image precedence over initials (correct priority behavior)
3. Initials combined with badge functionality

The assertions verify both the DOM structure and CSS class application.

Consider adding edge case tests for:

• Empty string initials (initials="")
• Single character initials (initials="J")
• Long initials to verify no overflow issues

These can be deferred to a follow-up if needed.

libs/core/src/components/pds-avatar/pds-avatar.tsx (1)

122-128: Add dominant-baseline="central" to the text element for proper vertical centering.

The text-anchor: middle is already handled in SCSS, so the text is horizontally centered. However, vertical centering needs dominant-baseline="central" on the text element; the current y="20" is a hardcoded approximation. Additionally, consider validating the initials length to prevent overflow if long strings are passed.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f45a43c and f6863e1.

📒 Files selected for processing (7)

• libs/core/src/components.d.ts
• libs/core/src/components/pds-avatar/docs/pds-avatar.mdx
• libs/core/src/components/pds-avatar/pds-avatar.scss
• libs/core/src/components/pds-avatar/pds-avatar.tsx
• libs/core/src/components/pds-avatar/readme.md
• libs/core/src/components/pds-avatar/stories/pds-avatar.stories.js
• libs/core/src/components/pds-avatar/test/pds-avatar.spec.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

libs/core/src/components/pds-avatar/test/pds-avatar.spec.tsx (1)

libs/react/src/components/proxies.ts (1)

• PdsAvatar (59-59)

🔇 Additional comments (8)

libs/core/src/components/pds-avatar/pds-avatar.scss (1)

64-77: LGTM - Initials styling is well-structured.

The styling correctly uses design tokens for brand consistency and ensures the SVG fills the container. The text-anchor: middle handles horizontal centering appropriately.

One optional consideration: adding dominant-baseline: central or dominant-baseline: middle to the text element could improve vertical text alignment consistency across browsers, though the current y="20" approach in the SVG works for the fixed viewBox.

libs/core/src/components/pds-avatar/readme.md (1)

17-17: LGTM - Documentation properly reflects the new prop.

The initials property is documented consistently with the existing properties table format.

libs/core/src/components/pds-avatar/docs/pds-avatar.mdx (1)

106-128: LGTM - Documentation examples are clear and comprehensive.

The new sections follow the established documentation pattern, providing both React and Web Component examples with proper descriptions for each use case.

libs/core/src/components.d.ts (2)

129-133: LGTM - Type definitions correctly reflect the new prop.

The autogenerated type definitions properly include the initials property in both the Components and LocalJSX namespaces with consistent typing (string | null) and documentation.

---

2878-2882: Type definition mirrors Components namespace correctly.

The LocalJSX namespace definition is consistent with the Components namespace, ensuring proper TypeScript support for both imperative and declarative usage patterns.

libs/core/src/components/pds-avatar/pds-avatar.tsx (2)

43-47: LGTM!

The prop declaration follows the established pattern of other optional props in the component with consistent typing and default value.

---

136-143: LGTM!

The class name logic follows the established pattern and correctly handles both empty string and null cases.

libs/core/src/components/pds-avatar/stories/pds-avatar.stories.js (1)

67-78: LGTM!

Good story coverage demonstrating both standalone initials and the combination with badge. This provides clear documentation of the new feature.

[pixelflips]

not a blocker but should maybe be a feat, but otherwise lgtm!