fix: Update getInitialsFromName to sanitize name by mannycarrera4 · Pull Request #3743 · Workday/canvas-kit

mannycarrera4 · 2026-02-04T20:35:56Z

Summary

Fixes: #3740

Release Category

Components

Checklist

MDX documentation adheres to Canvas Kit's Documentation Guidelines
Label ready for review has been added to PR

For the Reviewer

PR title is short and descriptive
PR summary describes the change (Fixes/Resolves linked correctly)
PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

Areas for Feedback? (optional)

Code
Documentation
Testing
Codemods

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

cypress · 2026-02-04T20:45:48Z

Workday/canvas-kit Run #10362

Run Properties: Passed #10362 • 4b017de31f ℹ️: Merge e5ee43ed4c5c56d530046c32210a372c3d17b192 into 4dfa021c4798122cacd6b18b660d...

Project	`Workday/canvas-kit`
Branch Review	`mc-fix-avatar-initials-sanitize`
Run status	`Passed #10362`
Run duration	`02m 24s`
Commit	`4b017de31f ℹ️: Merge e5ee43ed4c5c56d530046c32210a372c3d17b192 into 4dfa021c4798122cacd6b18b660d...`
Committer	`Manuel Carrera`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`1`
Pending	`86`
Skipped	`0`
Passing	`862`
View all changes introduced in this branch ↗︎

UI Coverage `19.36%`
Untested elements	`1539`
Tested elements	`367`

Accessibility `99.33%`
Failed rules	`6 critical` `5 serious` `0 moderate` `2 minor`
Failed elements	`77`

modules/preview-react/avatar/spec/getInitialsFromName.spec.tsx

Copilot

Pull request overview

This PR fixes a bug where getInitialsFromName didn't handle names with parenthetical content (like titles or departments). The implementation now sanitizes names by removing parenthetical content and filtering out numeric and Roman numeral suffixes before extracting initials.

Changes:

Updated getInitialsFromName to remove parenthetical content using regex
Added filtering for numeric suffixes and Roman numeral suffixes (III, IV, etc.)
Added comprehensive test suite with 14 test cases covering various edge cases

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 8 comments.

File	Description
modules/preview-react/avatar/lib/getInitialsFromName.ts	Enhanced sanitization logic to handle parenthetical content and suffix filtering
modules/preview-react/avatar/spec/getInitialsFromName.spec.tsx	New comprehensive test suite covering various name formats and edge cases

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

modules/preview-react/avatar/lib/getInitialsFromName.ts

Copilot · 2026-02-10T23:46:23Z

modules/preview-react/avatar/spec/getInitialsFromName.spec.tsx

+    expect(getInitialsFromName('Mohammed Al-Rashid')).toBe('MA');
+  });


The function doesn't handle hyphenated names or names with apostrophes consistently. For example:

"Mary-Jane Smith" would produce "MS" (treating "Mary-Jane" as one word)

"O'Brien" would be treated as one word

"Jean-Luc Picard" would produce "JP"

While the current behavior may be acceptable, consider whether hyphenated first/last names should be split or kept together. The test case for "Mohammed Al-Rashid" expects "MA", which suggests the current behavior is intentional, but this should be explicitly tested for various hyphenation scenarios to ensure consistency.

Copilot · 2026-02-10T23:46:23Z

modules/preview-react/avatar/spec/getInitialsFromName.spec.tsx

+    expect(getInitialsFromName('Logan McNeil iii')).toBe('LM');
+    expect(getInitialsFromName('Logan McNeil Iii')).toBe('LM');
+  });
+});


Missing test coverage for edge case where someone has a single-letter name that happens to be I, V, or X (e.g., "X Æ A-12" or "Malcolm X"). Due to the overly broad Roman numeral regex /^[IVX]+$/i, these valid name parts would be incorrectly filtered out.

Add test cases like:

getInitialsFromName('Malcolm X') should return 'MX', not 'M'

getInitialsFromName('X Smith') should return 'XS', not 'S'

This edge case will be resolved when the Roman numeral regex is fixed to match only valid Roman numeral suffixes.

Copilot · 2026-02-10T23:46:24Z

modules/preview-react/avatar/lib/getInitialsFromName.ts

+  // Filter out parts that are purely numeric or Roman numerals (suffixes like III, IV)
+  const filteredParts = nameParts.filter(part => {
+    const isNumeric = /^\d+$/.test(part);
+    const isRomanNumeral = /^[IVX]+$/i.test(part);


The Roman numeral regex pattern is too broad and will incorrectly match valid name parts. For example, it will match "Vin" (contains only I, V, X), "Vivi" (contains only I, V, X), or any word composed solely of the letters I, V, and X in any combination. This could incorrectly filter out legitimate names or parts of names.

Consider using a more precise pattern that matches only valid Roman numerals like: /^M{0,3}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/i or a simpler whitelist approach that matches common suffixes: /^(I|II|III|IV|V|VI|VII|VIII|IX|X|XI|XII|XIII|XIV|XV)$/i

Suggested change

const isRomanNumeral = /^[IVX]+$/i.test(part);

const isRomanNumeral = /^(I|II|III|IV|V|VI|VII|VIII|IX|X|XI|XII|XIII|XIV|XV)$/i.test(part);

Yeah, I don't think we need to test for roman numerals like LX. Low odds of running into Alan Smith the 60th, but let's say Pope Leo XIV is on Workday. We should probably accommodate his Holiness.

Copilot · 2026-02-10T23:46:24Z

modules/preview-react/avatar/spec/getInitialsFromName.spec.tsx

+  it('should handle mixed case Roman numerals', () => {
+    expect(getInitialsFromName('Logan McNeil iii')).toBe('LM');
+    expect(getInitialsFromName('Logan McNeil Iii')).toBe('LM');


These test cases expose a flaw in the implementation. "Iii" and "iii" are not valid Roman numerals (the valid form is "III"), yet the implementation's regex /^[IVX]+$/i will match them. This test passes because it validates the current buggy behavior.

When the Roman numeral regex is fixed to only match valid Roman numerals, these tests should be updated to either:

Expect "LI" as the result (treating "Iii" as a name part, not a suffix), or

Use valid Roman numerals like "III" if the intent is to test suffix filtering

Suggested change

it('should handle mixed case Roman numerals', () => {

expect(getInitialsFromName('Logan McNeil iii')).toBe('LM');

expect(getInitialsFromName('Logan McNeil Iii')).toBe('LM');

it('should filter valid Roman numeral suffixes', () => {

expect(getInitialsFromName('Logan McNeil III')).toBe('LM');

expect(getInitialsFromName('Logan McNeil II')).toBe('LM');

Copilot · 2026-02-10T23:46:24Z

modules/preview-react/avatar/spec/getInitialsFromName.spec.tsx

+    expect(getInitialsFromName('Logan McNeil iii')).toBe('LM');
+    expect(getInitialsFromName('Logan McNeil Iii')).toBe('LM');
+  });
+});


The function does not handle unmatched parentheses or other bracket types (e.g., square brackets, curly braces). Consider adding test cases for edge cases like:

Unmatched opening parenthesis: "John Smith ("

Unmatched closing parenthesis: "John Smith )"

Square brackets: "John Smith [Department]"

Nested parentheses: "John Smith ((nested))"

The current regex /$[^)]*$/g only handles matched parentheses, which could leave orphaned opening parentheses in the sanitized string.

Copilot · 2026-02-10T23:46:24Z

modules/preview-react/avatar/lib/getInitialsFromName.ts

-  // Trim and split by one or more whitespace characters
-  const nameParts = name.trim().split(/\s+/).filter(Boolean);
+  // Remove parenthetical content (e.g., titles, departments) and trim
+  const sanitized = name.replace(/\([^)]*\)/g, '').trim();


The parenthetical content removal only handles round parentheses (). If the intent is to sanitize titles, departments, or similar metadata, you should also consider removing content in other bracket types like square brackets [] or curly braces {}, which are also commonly used for similar purposes.

For example, the current implementation won't sanitize "John Smith [Engineering]" or "John Smith {CEO}". Consider using a pattern like /[$\[\{][^$\]\}]*[\)\]\}]/g if you want to handle all bracket types.

Suggested change

const sanitized = name.replace(/$[^)]*$/g, '').trim();

const sanitized = name.replace(/[$\[\{][^$\]\}]*[\)\]\}]/g, '').trim();

Copilot · 2026-02-10T23:46:24Z

modules/preview-react/avatar/lib/getInitialsFromName.ts

@@ -1,10 +1,20 @@
 export const getInitialsFromName = (name: string) => {


The function lacks JSDoc documentation. Based on the codebase convention (see modules/preview-react/select/lib/utils.ts and modules/preview-react/select/lib/scrolling.ts), exported utility functions should have JSDoc comments that describe their purpose, parameters, and return values.

Consider adding JSDoc documentation like:
/**

Extracts initials from a person's name by taking the first letter of the first and last name parts.

Removes parenthetical content (e.g., titles, departments) and filters out numeric and Roman numeral suffixes.

@param name - The full name to extract initials from

@returns A string containing the extracted initials in uppercase, or an empty string if no valid name parts are found
*/

modules/preview-react/avatar/lib/getInitialsFromName.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Alan B Smith <a.bax.smith@gmail.com>

mannycarrera4 · 2026-02-18T23:22:32Z

I'm gonna close this PR, there's too many edge cases, unless we come up with a standard to handle all of these, this is just going to cause more confusion, teams should use preferredInitials

fix: Update getInitialsFromName to sanitize name

3abde31

mannycarrera4 commented Feb 8, 2026

View reviewed changes

modules/preview-react/avatar/spec/getInitialsFromName.spec.tsx Outdated Show resolved Hide resolved

Update modules/preview-react/avatar/spec/getInitialsFromName.spec.tsx

e19e584

mannycarrera4 added the ready for review Code is ready for review label Feb 9, 2026

mannycarrera4 added this to Canvas Kit Feb 9, 2026

mannycarrera4 marked this pull request as ready for review February 9, 2026 22:59

Merge branch 'master' into mc-fix-avatar-initials-sanitize

aee4431

RayRedGoose requested a review from Copilot February 10, 2026 23:42

Copilot started reviewing on behalf of RayRedGoose February 10, 2026 23:42 View session

Copilot AI reviewed Feb 10, 2026

View reviewed changes

alanbsmith reviewed Feb 12, 2026

View reviewed changes

modules/preview-react/avatar/lib/getInitialsFromName.ts Show resolved Hide resolved

mannycarrera4 and others added 2 commits February 18, 2026 15:10

Update modules/preview-react/avatar/lib/getInitialsFromName.ts

471a194

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update modules/preview-react/avatar/lib/getInitialsFromName.ts

e5ee43e

Co-authored-by: Alan B Smith <a.bax.smith@gmail.com>

mannycarrera4 closed this Feb 18, 2026

github-project-automation bot moved this to ✅ Done in Canvas Kit Feb 18, 2026

		expect(getInitialsFromName('Mohammed Al-Rashid')).toBe('MA');
		});

	const isRomanNumeral = /^[IVX]+$/i.test(part);
	const isRomanNumeral = /^(I\|II\|III\|IV\|V\|VI\|VII\|VIII\|IX\|X\|XI\|XII\|XIII\|XIV\|XV)$/i.test(part);

	const sanitized = name.replace(/\([^)]*\)/g, '').trim();
	const sanitized = name.replace(/[\(\[\{][^\)\]\}]*[\)\]\}]/g, '').trim();

		@@ -1,10 +1,20 @@
		export const getInitialsFromName = (name: string) => {

Conversation

mannycarrera4 commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Release Category

Checklist

For the Reviewer

Where Should the Reviewer Start?

Areas for Feedback? (optional)

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

Uh oh!

cypress bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Workday/canvas-kit Run #10362

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

alanbsmith Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mannycarrera4 commented Feb 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

mannycarrera4 commented Feb 4, 2026 •

edited

Loading

cypress bot commented Feb 4, 2026 •

edited

Loading