diff --git a/lib/src/components/personSearch/PersonSearch.tsx b/lib/src/components/personSearch/PersonSearch.tsx
index ad536808c..1caf64dbb 100644
--- a/lib/src/components/personSearch/PersonSearch.tsx
+++ b/lib/src/components/personSearch/PersonSearch.tsx
@@ -73,6 +73,7 @@ export function PersonSearch({
highlightText={searchValue}
colour={person.colour}
key={person.email}
+ pending={person.pending}
/>
))}
diff --git a/lib/src/modules/person/Person.tsx b/lib/src/modules/person/Person.tsx
index ff30b3c1f..85d6256b8 100644
--- a/lib/src/modules/person/Person.tsx
+++ b/lib/src/modules/person/Person.tsx
@@ -18,6 +18,7 @@ export function Person({
colour,
locked,
lockedTooltipText,
+ pending,
}: any) {
const classes = cx("gui-person", className, {
"gui-person-selected": selected,
@@ -44,6 +45,11 @@ export function Person({
{!!subtitle && (
+ {pending && (
+ <>
+ Pending •{" "}
+ >
+ )}
{shouldHighlightSubtitle ? (
) : (
@@ -81,4 +87,5 @@ Person.defaultProps = {
highlightText: "",
locked: false,
lockedTooltipText: "",
+ pending: false,
};
diff --git a/lib/src/modules/person/person.scss b/lib/src/modules/person/person.scss
index 5c0df1d98..1adc73c8f 100644
--- a/lib/src/modules/person/person.scss
+++ b/lib/src/modules/person/person.scss
@@ -61,3 +61,7 @@
.gui-person-bordered {
@apply border border-t-0 border-l-0 border-r-0 border-solid border-neutral-90;
}
+
+.gui-person-pending {
+ @apply text-purple-primary;
+}
diff --git a/lib/src/prefabs/assigneeDropdown/AssigneeDropdown.stories.tsx b/lib/src/prefabs/assigneeDropdown/AssigneeDropdown.stories.tsx
index 7ae29c52f..cc28d6b55 100644
--- a/lib/src/prefabs/assigneeDropdown/AssigneeDropdown.stories.tsx
+++ b/lib/src/prefabs/assigneeDropdown/AssigneeDropdown.stories.tsx
@@ -1,8 +1,8 @@
import React from "react";
import {
AssigneeDropdown as AssigneeDropdownComponent,
- Person,
DropdownContent,
+ Person,
} from "lib";
// @ts-expect-error TS(2307): Cannot find module 'stories/styleguide/StoryItem' ... Remove this comment to see the full error message
import StoryItem from "stories/styleguide/StoryItem";
@@ -23,10 +23,21 @@ export function AssigneeDropdown(args: any) {
subtitle: faker.internet.email(),
avatarUrl: faker.image.avatar(),
selected: faker.random.boolean(),
+ pending: false,
});
- const assigned = [getPerson(), getPerson()];
- const unassigned = [getPerson(), getPerson(), getPerson(), getPerson()];
+ const assigned = [
+ { ...getPerson(), pending: true },
+ getPerson(),
+ getPerson(),
+ ];
+ const unassigned = [
+ { ...getPerson(), pending: true },
+ getPerson(),
+ getPerson(),
+ getPerson(),
+ getPerson(),
+ ];
return (
@@ -58,6 +70,7 @@ export function AssigneeDropdown(args: any) {
subtitle={unassignee.subtitle}
avatarUrl={unassignee.avatarUrl}
selected={unassignee.selected}
+ pending={unassignee.pending}
interactive
bordered
/>