mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(editor): Update design system Avatar component to show initials also when only firstName or lastName is given (#10308)

Browse source
This commit is contained in:
Csaba Tuncsik 2024-08-06 15:31:03 +02:00 committed by GitHub
parent 557a76ec23
commit 46bbf09bea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/design-system/src/components/N8nAvatar/Avatar.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<span :class="['n8n-avatar', $style.container]" v-bind="$attrs"> <span :class="['n8n-avatar', $style.container]" v-bind="$attrs">
<Avatar <Avatar
v-if="firstName" v-if="name"
:size="getSize(size)" :size="getSize(size)"
:name="firstName + ' ' + lastName" :name="name"
variant="marble" variant="marble"
:colors="getColors(colors)" :colors="getColors(colors)"
/> />
<div v-else :class="[$style.empty, $style[size]]"></div> <span v-else :class="[$style.empty, $style[size]]" />
<span v-if="firstName" :class="$style.initials">{{ initials }}</span> <span v-if="name" :class="$style.initials">{{ initials }}</span>
</span> </span>
</template> </template>
@ -38,7 +38,8 @@ const props = withDefaults(defineProps<AvatarProps>(), {
], ],
}); });
const initials = computed(() => getInitials(`${props.firstName} ${props.lastName}`)); const name = computed(() => `${props.firstName} ${props.lastName}`.trim());
const initials = computed(() => getInitials(name.value));
const getColors = (colors: string[]): string[] => { const getColors = (colors: string[]): string[] => {
const style = getComputedStyle(document.body); const style = getComputedStyle(document.body);
@ -62,6 +63,7 @@ const getSize = (size: string): number => sizes[size];
} }
.empty { .empty {
display: block;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-foreground-dark); background-color: var(--color-foreground-dark);
opacity: 0.3; opacity: 0.3;
@ -72,7 +74,8 @@ const getSize = (size: string): number => sizes[size];
font-size: var(--font-size-2xs); font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-avatar-font); color: var(--color-avatar-font);
text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.3); text-shadow: 0 1px 6px rgba(25, 11, 9, 0.3);
text-transform: uppercase;
} }
.small { .small {

25
packages/design-system/src/components/N8nAvatar/__tests__/Avatar.test.ts Normal file
View file

@ -0,0 +1,25 @@
import { render } from '@testing-library/vue';
import N8nAvatar from '../Avatar.vue';
describe('components', () => {
describe('N8nAlert', () => {
test.each([
['Firstname', 'Lastname', 'FL'],
['Firstname', undefined, 'Fi'],
[undefined, 'Lastname', 'La'],
[undefined, undefined, ''],
['', '', ''],
])('should render initials for name "%s %s" as %s', (firstName, lastName, initials) => {
const { container, getByText } = render(N8nAvatar, {
props: { firstName, lastName },
});
if (firstName || lastName) {
expect(container.querySelector('svg')).toBeVisible();
expect(getByText(initials)).toBeVisible();
} else {
expect(container.querySelector('svg')).not.toBeInTheDocument();
}
});
});
});