diff --git a/.changeset/ninety-numbers-study.md b/.changeset/ninety-numbers-study.md new file mode 100644 index 0000000000..e77131fab9 --- /dev/null +++ b/.changeset/ninety-numbers-study.md @@ -0,0 +1,7 @@ +--- +'@backstage/core-components': patch +--- + +Fixed compatibility with Safari <16.3 by eliminating RegEx lookbehind in `extractInitials`. + +This PR also changed how initials are generated resulting in _John Jonathan Doe_ => _JD_ instead of _JJ_. diff --git a/.github/vale/Vocab/Backstage/accept.txt b/.github/vale/Vocab/Backstage/accept.txt index e6c0aa9632..1a028d1387 100644 --- a/.github/vale/Vocab/Backstage/accept.txt +++ b/.github/vale/Vocab/Backstage/accept.txt @@ -455,3 +455,4 @@ Pulumi Lightsail PR rebasing +lookbehind diff --git a/packages/core-components/src/components/Avatar/util.test.ts b/packages/core-components/src/components/Avatar/util.test.ts index 6581df8b9a..98d0bd2550 100644 --- a/packages/core-components/src/components/Avatar/util.test.ts +++ b/packages/core-components/src/components/Avatar/util.test.ts @@ -17,25 +17,29 @@ import { extractInitials, stringToColor } from './utils'; describe('stringToColor', () => { - it('extract color', async () => { + it('extract color', () => { expect(stringToColor('Jenny Doe')).toEqual('#7809fa'); }); }); describe('extractInitials', () => { - it('extract initials', async () => { + it('extract initials', () => { expect(extractInitials('Jenny Doe')).toEqual('JD'); }); - it('extract unicode initials', async () => { + it('extract unicode initials', () => { expect(extractInitials('Petr Čech')).toEqual('PČ'); }); - it('extract single letter for short name', async () => { + it('extract single letter for short name', () => { expect(extractInitials('Doe')).toEqual('D'); }); - it('limit the initials to two letters', async () => { - expect(extractInitials('John Jonathan Doe')).toEqual('JJ'); + it('limit the initials to two letters', () => { + expect(extractInitials('John Jonathan Doe')).toEqual('JD'); + }); + + it('removes spaces from beginning or the end', () => { + expect(extractInitials(' John Jonathan Doe ')).toEqual('JD'); }); }); diff --git a/packages/core-components/src/components/Avatar/utils.ts b/packages/core-components/src/components/Avatar/utils.ts index 79627d5996..65e2be6afa 100644 --- a/packages/core-components/src/components/Avatar/utils.ts +++ b/packages/core-components/src/components/Avatar/utils.ts @@ -27,9 +27,11 @@ export function stringToColor(str: string) { return color; } -export function extractInitials(value: string) { - return value - .match(/(? 1 ? names[names.length - 1] : ''; + return firstName && lastName + ? `${firstName.charAt(0)}${lastName.charAt(0)}` + : firstName.charAt(0); }