From f00b643774f85b1b24b8d7f4548d2eb5b86eea72 Mon Sep 17 00:00:00 2001
From: Skye Elliot <actuallyori@gmail.com>
Date: Mon, 1 Dec 2025 11:44:12 +0000
Subject: [PATCH] `<Banner/>`: Hide `Dismiss` button if `onClose` handler is
 not provided. (#31362)

* feat: Hide `Dismiss` button if `onClose` handler is not provided.

* tests: Update snapshots for `packages/shared-components`.
---
 .../room-banner--without-close-linux.png         | Bin 0 -> 8529 bytes
 .../src/composer/Banner/Banner.stories.tsx       |   6 ++++++
 .../src/composer/Banner/Banner.tsx               |  10 ++++++----
 3 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png

diff --git a/packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png b/packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..9645bd1d8ab162a2fbb12c9c9954363109d56ce6
GIT binary patch
literal 8529
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

literal 0
HcmV?d00001

diff --git a/packages/shared-components/src/composer/Banner/Banner.stories.tsx b/packages/shared-components/src/composer/Banner/Banner.stories.tsx
index b813eeb398..53d3941621 100644
--- a/packages/shared-components/src/composer/Banner/Banner.stories.tsx
+++ b/packages/shared-components/src/composer/Banner/Banner.stories.tsx
@@ -65,3 +65,9 @@ export const WithAvatarImage: Story = {
         avatar: <img alt="Example" src="https://picsum.photos/32/32" />,
     },
 };
+
+export const WithoutClose: Story = {
+    args: {
+        onClose: undefined,
+    },
+};
diff --git a/packages/shared-components/src/composer/Banner/Banner.tsx b/packages/shared-components/src/composer/Banner/Banner.tsx
index a1622dd1dc..392b2a2610 100644
--- a/packages/shared-components/src/composer/Banner/Banner.tsx
+++ b/packages/shared-components/src/composer/Banner/Banner.tsx
@@ -41,7 +41,7 @@ interface BannerProps {
     /**
      * Called when the user presses the "dismiss" button.
      */
-    onClose: MouseEventHandler<HTMLButtonElement>;
+    onClose?: MouseEventHandler<HTMLButtonElement>;
 }
 
 /**
@@ -82,9 +82,11 @@ export function Banner({
             <span className={styles.content}>{children}</span>
             <div className={styles.actions}>
                 {actions}
-                <Button kind="secondary" size="sm" onClick={onClose}>
-                    {_t("action|dismiss")}
-                </Button>
+                {onClose && (
+                    <Button kind="secondary" size="sm" onClick={onClose}>
+                        {_t("action|dismiss")}
+                    </Button>
+                )}
             </div>
         </div>
     );