Improve invite dialog ui - Part 2 (#30836)

* feat: add `Pill` component

* chore: add `react-merge-refs` lib

* feat: add `PillInput` component

* feat: use new pills component in invite dialog

* test: update invite dialog selector

* test(e2e): update test locators

* test(e2e): update screenshot
This commit is contained in:
Florian Duros
2025-10-01 09:03:43 +00:00
committed by GitHub
parent 3d5749bfc7
commit 9cecd52477
29 changed files with 520 additions and 151 deletions
+1 -3
View File
@@ -25,9 +25,7 @@ const startDMWithBob = async (page: Page, bob: Bot) => {
await page.getByRole("menuitem", { name: "Start chat" }).click();
await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
await page.getByRole("option", { name: bob.credentials.displayName }).click();
await expect(
page.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText("Bob"),
).toBeVisible();
await expect(page.getByTestId("invite-dialog-input-wrapper").getByText("Bob")).toBeVisible();
await page.getByRole("button", { name: "Go" }).click();
};
+2 -6
View File
@@ -54,9 +54,7 @@ test.describe("Invite dialog", function () {
await other.getByRole("option", { name: botName }).click();
await expect(
other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
).toBeVisible();
await expect(other.getByTestId("invite-dialog-input-wrapper").getByText(botName)).toBeVisible();
// Take a snapshot of the invite dialog with a user pill
await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-room-with-user-pill.png");
@@ -95,9 +93,7 @@ test.describe("Invite dialog", function () {
await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
await other.getByRole("option", { name: botName }).click();
await expect(
other.locator(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").getByText(botName),
).toBeVisible();
await expect(other.getByTestId("invite-dialog-input-wrapper").getByText(botName)).toBeVisible();
// Take a snapshot of the invite dialog with a user pill
await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-with-user-pill.png");