Move PinnedMessageBadge To Shared Components (#32768)

* refactor: move pinned message badge into shared-components * Update lint errors * Fix for Vitest issue with CI on shared components * Update related to the pr comments and requests * Prettier Fix * Update, remove view since it was just moved and not actually MVVMed * Removed view suffix since it was only moved and not mvvmed * Update snapshots * Removal of unused screenshots * Added Image that we need
2026-03-12 14:34:45 +01:00
parent a1939f69ee
commit 9fa8b34ebe
15 changed files with 100 additions and 55 deletions
@@ -236,7 +236,6 @@
@import "./views/messages/_MediaBody.pcss";
@import "./views/messages/_MessageActionBar.pcss";
@import "./views/messages/_MjolnirBody.pcss";
-@import "./views/messages/_PinnedMessageBadge.pcss";
@import "./views/messages/_ReactionsRow.pcss";
@import "./views/messages/_RedactedBody.pcss";
@import "./views/messages/_RoomAvatarEvent.pcss";
@@ -1,23 +0,0 @@
-/*
- * Copyright 2024 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 React, { type HTMLProps, type JSX } from "react";
-import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
-
-import { _t } from "../../../languageHandler";
-
-/**
- * A badge to indicate that a message is pinned.
- */
-export function PinnedMessageBadge(props: Readonly<HTMLProps<HTMLDivElement>>): JSX.Element {
-    return (
-        <div {...props} className="mx_PinnedMessageBadge">
-            <PinIcon width="16px" height="16px" />
-            {_t("room|pinned_message_badge")}
-        </div>
-    );
-}
@@ -52,6 +52,7 @@ import {
    useCreateAutoDisposedViewModel,
    DecryptionFailureBodyView,
    MessageTimestampView,
+    PinnedMessageBadge,
    ReactionsRowButtonView,
    ReactionsRowView,
    useViewModel,
@@ -102,7 +103,6 @@ import { EventTileThreadToolbar } from "./EventTile/EventTileThreadToolbar";
 import { getLateEventInfo } from "../../structures/grouper/LateEventGrouper";
 import { Icon as LateIcon } from "../../../../res/img/sensor.svg";
 import PinningUtils from "../../../utils/PinningUtils";
-import { PinnedMessageBadge } from "../messages/PinnedMessageBadge";
 import { EventPreview } from "./EventPreview";
 import { ElementCallEventType } from "../../../call-types";
 import { DecryptionFailureBodyViewModel } from "../../../viewmodels/message-body/DecryptionFailureBodyViewModel";
@@ -2088,7 +2088,6 @@
        "not_found_title": "This room or space does not exist.",
        "not_found_title_name": "%(roomName)s does not exist.",
        "peek_join_prompt": "You're previewing %(roomName)s. Want to join it?",
-        "pinned_message_badge": "Pinned message",
        "pinned_message_banner": {
            "button_close_list": "Close list",
            "button_view_all": "View all",
@@ -1,18 +0,0 @@
-/*
- * Copyright 2024 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 React from "react";
-import { render } from "jest-matrix-react";
-
-import { PinnedMessageBadge } from "../../../../../src/components/views/messages/PinnedMessageBadge.tsx";
-
-describe("PinnedMessageBadge", () => {
-    it("should render", () => {
-        const { asFragment } = render(<PinnedMessageBadge />);
-        expect(asFragment()).toMatchSnapshot();
-    });
-});
@@ -47,6 +47,7 @@
        "jump_to_date": "Jump to date",
        "jump_to_date_beginning": "The beginning of the room",
        "jump_to_date_prompt": "Pick a date to jump to",
+        "pinned_message_badge": "Pinned message",
        "status_bar": {
            "delete_all": "Delete all",
            "exceeded_resource_limit_description": "Please contact your service administrator to continue using the service.",
@@ -20,6 +20,7 @@ export * from "./message-body/EventContentBody";
 export * from "./message-body/MediaBody";
 export * from "./message-body/MessageTimestampView";
 export * from "./message-body/DecryptionFailureBodyView";
+export * from "./message-body/PinnedMessageBadge";
 export * from "./message-body/ReactionsRowButtonTooltip";
 export * from "./message-body/ReactionsRowButton";
 export * from "./message-body/ReactionsRow";
@@ -1,23 +1,21 @@
 /*
- * Copyright 2024 New Vector Ltd.
+ * Copyright 2026 Element Creations 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.
 */

-.mx_PinnedMessageBadge {
+.pinnedMessageBadge {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cpd-space-1x);
-
    padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
    font: var(--cpd-font-body-xs-medium);
    background-color: var(--cpd-color-bg-subtle-secondary);
    color: var(--cpd-color-text-secondary);
-
-    border-radius: 99px;
    border: 1px solid var(--cpd-color-alpha-gray-400);
+    border-radius: 99px;

    svg {
        fill: var(--cpd-color-icon-secondary);
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { PinnedMessageBadge } from "./PinnedMessageBadge";
+
+const meta = {
+    title: "Message body/PinnedMessageBadge",
+    component: PinnedMessageBadge,
+    args: {
+        "aria-describedby": "event-tile-description",
+        "tabIndex": 0,
+    },
+    tags: ["autodocs"],
+} satisfies Meta<typeof PinnedMessageBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2026 Element Creations 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 React from "react";
+import { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import { render } from "@test-utils";
+
+import * as stories from "./PinnedMessageBadge.stories";
+
+const { Default } = composeStories(stories);
+
+describe("PinnedMessageBadge", () => {
+    it("renders the default badge", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+});
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2026 Element Creations 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 React, { type HTMLAttributes, type JSX } from "react";
+import classNames from "classnames";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
+
+import styles from "./PinnedMessageBadge.module.css";
+import { _t } from "../../utils/i18n";
+
+export type PinnedMessageBadgeProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * A badge indicating that a message is pinned.
+ */
+export function PinnedMessageBadge({ className, children, ...props }: Readonly<PinnedMessageBadgeProps>): JSX.Element {
+    return (
+        <div {...props} className={classNames(styles.pinnedMessageBadge, className)}>
+            <PinIcon width="16px" height="16px" />
+            {children ?? _t("room|pinned_message_badge")}
+        </div>
+    );
+}
@@ -1,9 +1,11 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

-exports[`PinnedMessageBadge should render 1`] = `
-<DocumentFragment>
+exports[`PinnedMessageBadge > renders the default badge 1`] = `
+<div>
  <div
-    class="mx_PinnedMessageBadge"
+    aria-describedby="event-tile-description"
+    class="pinnedMessageBadge"
+    tabindex="0"
  >
    <svg
      fill="currentColor"
@@ -18,5 +20,5 @@ exports[`PinnedMessageBadge should render 1`] = `
    </svg>
    Pinned message
  </div>
-</DocumentFragment>
+</div>
 `;
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { PinnedMessageBadge, type PinnedMessageBadgeProps } from "./PinnedMessageBadge";
@@ -153,7 +153,11 @@ export default defineConfig({
        ],
    },
    optimizeDeps: {
-        include: ["vite-plugin-node-polyfills/shims/buffer", "vite-plugin-node-polyfills/shims/process"],
+        include: [
+            "vite-plugin-node-polyfills/shims/buffer",
+            "vite-plugin-node-polyfills/shims/process",
+            "react-virtuoso",
+        ],
    },
    resolve: {
        alias: {