From 77a4c1e98ab742adeb2318dbcab0187d65391fca Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 12 Sep 2025 10:11:50 +0200 Subject: [PATCH] fix lint Signed-off-by: Timo K --- ...vatar-avatarwithdetails--default-linux.png | Bin 0 -> 9740 bytes .../AvatarWithDetails.module.css | 11 ++----- .../AvatarWithDetails.test.tsx | 21 +++++++++++++ .../AvatarWithDetails/AvatarWithDetails.tsx | 5 ++-- .../AvatarWithDetails.test.tsx.snap | 28 ++++++++++++++++++ src/toasts/IncomingCallToast.tsx | 2 +- 6 files changed, 55 insertions(+), 12 deletions(-) create mode 100644 playwright/shared-component-snapshots/avatar-avatarwithdetails--default-linux.png create mode 100644 src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.test.tsx create mode 100644 src/shared-components/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap diff --git a/playwright/shared-component-snapshots/avatar-avatarwithdetails--default-linux.png b/playwright/shared-component-snapshots/avatar-avatarwithdetails--default-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ae339219e5fc38694670aa89b9513923e75835ff GIT binary patch literal 9740 zcmeHNX;_ojwvJ-aBO+}rqEeu(3@Sp(BtitL)*>=h5D-F$%BTT?Oc6+kiqNA7D98}P zP-IeuAcQGE5)hdoks(Be5M~TR!Wak%$^AIbbN=_-+vmCGhd=V=+iMSN@BOWJuXnG# zpZ;!RE_?9AK@bQeYjO2gI}qqA;C1iE1ABqLUsSH`0fD{-S^RqO#)FJS7AC-94l};e z92=sfF=_>6SrPj}qi#W;xSyOnMzVLS>*|UR;~Z;_cSjtRLVzDk?n(H^gMmlq;~XOH z;hy(AXuHKb*8N;(?1T>@!0W}R^}bA(53=w5zv(ZX&UEge@rx{i7She{y5t7s67u6UcC$R6AJY+~e{(XiE690I24Rc;y-7MCZ%lU54V+${Xij`| z;sHp-By{mjG#rq}d~E;b3y_sdF6

4osK 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 ZKz-P&x!*4BwE-j`iz_z25-#0({6E4Do_+uT literal 0 HcmV?d00001 diff --git a/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.module.css b/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.module.css index e03767c112..8659131ba2 100644 --- a/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.module.css +++ b/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.module.css @@ -9,22 +9,16 @@ display: flex; align-items: center; - border-radius: var(--cpd-space-3x); + border-radius: 12px; background-color: var(--cpd-color-gray-200); padding: var(--cpd-space-2x); - - div { - margin-left: var(--cpd-space-2x); - display: flex; - flex-direction: column; - } + gap: var(--cpd-space-2x); .room { display: inline-block; font-weight: var(--cpd-font-weight-semibold); font-size: var(--cpd-font-size-body-md); - line-height: var(--cpd-font-size-heading-md); overflow: hidden; text-overflow: ellipsis; @@ -33,6 +27,5 @@ .details { font-size: var(--cpd-font-size-body-sm); - line-height: var(--cpd-font-size-body-md); } } diff --git a/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.test.tsx b/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.test.tsx new file mode 100644 index 0000000000..f5d482613f --- /dev/null +++ b/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.test.tsx @@ -0,0 +1,21 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { composeStories } from "@storybook/react-vite"; +import { render } from "jest-matrix-react"; +import React from "react"; + +import * as stories from "./AvatarWithDetails.stories.tsx"; + +const { Default } = composeStories(stories); + +describe("AvatarWithDetails", () => { + it("renders a textual event", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.tsx b/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.tsx index 0ae0679251..e8186695e5 100644 --- a/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.tsx +++ b/src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.tsx @@ -10,6 +10,7 @@ import React from "react"; import classNames from "classnames"; import styles from "./AvatarWithDetails.module.css"; +import { Flex } from "../../utils/Flex"; export type AvatarWithDetailsProps = { /** @@ -48,10 +49,10 @@ export function AvatarWithDetails({ return ( {avatar} -

+ {roomName} {details} -
+ ); } diff --git a/src/shared-components/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap b/src/shared-components/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap new file mode 100644 index 0000000000..b676c729a6 --- /dev/null +++ b/src/shared-components/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AvatarWithDetails renders a textual event 1`] = ` +
+
+
+
+ + Room Name + + + Details about the avatar go here + +
+
+
+`; diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx index c99bca0761..4bad61b9f7 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { type JSX, useCallback, useEffect, useState } from "react"; import { type Room, type MatrixEvent, type RoomMember, RoomEvent, EventType } from "matrix-js-sdk/src/matrix"; -import { Button, Label, ToggleInput, Tooltip, TooltipProvider } from "@vector-im/compound-web"; +import { Button, ToggleInput, Tooltip, TooltipProvider } from "@vector-im/compound-web"; import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid"; import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";