<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`.
This commit is contained in:
Skye Elliot
2025-12-01 11:44:12 +00:00
committed by GitHub
parent f46869e114
commit f00b643774
3 changed files with 12 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

View File

@@ -65,3 +65,9 @@ export const WithAvatarImage: Story = {
avatar: <img alt="Example" src="https://picsum.photos/32/32" />, avatar: <img alt="Example" src="https://picsum.photos/32/32" />,
}, },
}; };
export const WithoutClose: Story = {
args: {
onClose: undefined,
},
};

View File

@@ -41,7 +41,7 @@ interface BannerProps {
/** /**
* Called when the user presses the "dismiss" button. * 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> <span className={styles.content}>{children}</span>
<div className={styles.actions}> <div className={styles.actions}>
{actions} {actions}
<Button kind="secondary" size="sm" onClick={onClose}> {onClose && (
{_t("action|dismiss")} <Button kind="secondary" size="sm" onClick={onClose}>
</Button> {_t("action|dismiss")}
</Button>
)}
</div> </div>
</div> </div>
); );