From 714def212b7759ea8fe5ebe5b26a0eb159bbe5e8 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 9 Jul 2026 18:25:57 -0300 Subject: [PATCH 1/4] refactor(fuselage): make SidebarV2Banner divider explicit Remove the built-in border-bottom from SidebarV2Banner so consumers place a SidebarV2Divider explicitly where a separator is wanted. Update the sidebar story to show the explicit divider. Co-Authored-By: Claude Opus 4.8 (1M context) --- .changeset/sidebar-banner-explicit-divider.md | 5 +++++ .../fuselage/src/components/SidebarV2/Sidebar.stories.tsx | 2 ++ .../fuselage/src/components/SidebarV2/Sidebar.styles.scss | 2 -- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/sidebar-banner-explicit-divider.md diff --git a/.changeset/sidebar-banner-explicit-divider.md b/.changeset/sidebar-banner-explicit-divider.md new file mode 100644 index 0000000000..22d2d3b31e --- /dev/null +++ b/.changeset/sidebar-banner-explicit-divider.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/fuselage': minor +--- + +Remove the built-in `border-bottom` divider from `SidebarV2Banner`. The separator is no longer forced by the component; place a `SidebarV2Divider` explicitly when a divider is needed. This lets the banner sit flush (e.g. as a bottom-pinned player) or with a divider on either side. diff --git a/packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx b/packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx index 13997675bc..988d0ca1e2 100644 --- a/packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx +++ b/packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx @@ -9,6 +9,7 @@ import { SidebarV2AccordionItem as SidebarAccordionItem, SidebarV2Banner as SidebarBanner, SidebarV2CollapseGroup as SidebarCollapseGroup, + SidebarV2Divider as SidebarDivider, SidebarV2FooterContent as SidebarFooterContent, SidebarV2ItemAction as SidebarItemAction, SidebarV2Link as SidebarLink, @@ -38,6 +39,7 @@ export const Default: StoryFn = (props) => ( onClick={action('click')} addon={} /> + } diff --git a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss index 8075ff72b0..c91328d0db 100644 --- a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss +++ b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss @@ -183,8 +183,6 @@ $sidebar-color-stroke-extra-light: theme( padding: lengths.padding(16); color: $sidebar-banner-color-default; - border-bottom: lengths.border-width(default) solid - $sidebar-accordion-border-color; background-color: $sidebar-banner-background-default; gap: lengths.padding(12); From a70d5452bfb919a65b7157a6df5314fa67547e46 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 9 Jul 2026 19:28:52 -0300 Subject: [PATCH 2/4] refactor(fuselage): elevate SidebarV2Banner default surface Change the default variant background from surface(sidebar) to surface(tint) so the banner is visually distinct from the sidebar instead of blending in, matching the legacy Sidebar banner's elevated surface. Co-Authored-By: Claude Opus 4.8 (1M context) --- .changeset/sidebar-banner-explicit-divider.md | 5 ++++- packages/fuselage/src/components/SidebarV2/variables.scss | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/.changeset/sidebar-banner-explicit-divider.md b/.changeset/sidebar-banner-explicit-divider.md index 22d2d3b31e..af969d9320 100644 --- a/.changeset/sidebar-banner-explicit-divider.md +++ b/.changeset/sidebar-banner-explicit-divider.md @@ -2,4 +2,7 @@ '@rocket.chat/fuselage': minor --- -Remove the built-in `border-bottom` divider from `SidebarV2Banner`. The separator is no longer forced by the component; place a `SidebarV2Divider` explicitly when a divider is needed. This lets the banner sit flush (e.g. as a bottom-pinned player) or with a divider on either side. +`SidebarV2Banner`: make the divider explicit and give the default variant an elevated surface. + +- Remove the built-in `border-bottom`. The separator is no longer forced by the component; place a `SidebarV2Divider` explicitly when a divider is needed. This lets the banner sit flush (e.g. as a bottom-pinned player) or with a divider on either side. +- Change the default variant background from `surface(sidebar)` to `surface(tint)`, so the banner is visually distinct from the sidebar instead of blending into it (matching the legacy `Sidebar` banner, which used an elevated surface). diff --git a/packages/fuselage/src/components/SidebarV2/variables.scss b/packages/fuselage/src/components/SidebarV2/variables.scss index 75be099dbd..d99f027cd8 100644 --- a/packages/fuselage/src/components/SidebarV2/variables.scss +++ b/packages/fuselage/src/components/SidebarV2/variables.scss @@ -28,7 +28,7 @@ $sidebar-link-color: theme('sidebar-link-color', colors.font(titles-labels)); $sidebar-banner-background-default: theme( 'sidebar-banner-background-default', - colors.surface(sidebar) + colors.surface(tint) ); $sidebar-banner-color-default: theme( 'sidebar-banner-color-default', From 8c9739aed5e5e3c964582769de2fe284f9f080c7 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 9 Jul 2026 19:33:00 -0300 Subject: [PATCH 3/4] feat(fuselage): flexible SidebarV2Banner layout + closePlacement - content column grows to full width so children span the banner - render addon/close column only when addon or onClose is provided - add closePlacement prop ('center' | 'top') to align the close button with the banner header Co-Authored-By: Claude Opus 4.8 (1M context) --- .changeset/sidebar-banner-explicit-divider.md | 5 +++- .../components/SidebarV2/Sidebar.styles.scss | 11 ++++++++ .../components/SidebarV2/SidebarBanner.tsx | 28 +++++++++++++++---- 3 files changed, 38 insertions(+), 6 deletions(-) diff --git a/.changeset/sidebar-banner-explicit-divider.md b/.changeset/sidebar-banner-explicit-divider.md index af969d9320..6b32f9aaba 100644 --- a/.changeset/sidebar-banner-explicit-divider.md +++ b/.changeset/sidebar-banner-explicit-divider.md @@ -2,7 +2,10 @@ '@rocket.chat/fuselage': minor --- -`SidebarV2Banner`: make the divider explicit and give the default variant an elevated surface. +`SidebarV2Banner`: make the divider explicit, elevate the default surface, and make the layout more flexible. - Remove the built-in `border-bottom`. The separator is no longer forced by the component; place a `SidebarV2Divider` explicitly when a divider is needed. This lets the banner sit flush (e.g. as a bottom-pinned player) or with a divider on either side. - Change the default variant background from `surface(sidebar)` to `surface(tint)`, so the banner is visually distinct from the sidebar instead of blending into it (matching the legacy `Sidebar` banner, which used an elevated surface). +- The content column now grows to fill the available width, so children (e.g. media controls) can span the full banner width. +- Render the addon/close column only when an `addon` or `onClose` is provided, so the content is full-width when there is no close button. +- Add `closePlacement?: 'center' | 'top'` (default `'center'`) to align the close button with the banner header instead of centering it vertically — useful when the banner has taller content below the title. diff --git a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss index c91328d0db..0495dd7203 100644 --- a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss +++ b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss @@ -186,8 +186,19 @@ $sidebar-color-stroke-extra-light: theme( background-color: $sidebar-banner-background-default; gap: lengths.padding(12); + &--close-top { + align-items: flex-start; + } + + &__content { + flex: 1 1 auto; + + min-width: 0; + } + &__addon { display: flex; + flex: 0 0 auto; align-items: center; } diff --git a/packages/fuselage/src/components/SidebarV2/SidebarBanner.tsx b/packages/fuselage/src/components/SidebarV2/SidebarBanner.tsx index eee31b1b94..c9511d35e3 100644 --- a/packages/fuselage/src/components/SidebarV2/SidebarBanner.tsx +++ b/packages/fuselage/src/components/SidebarV2/SidebarBanner.tsx @@ -9,6 +9,8 @@ export type SidebarV2BannerVariant = | 'warning' | 'danger'; +export type SidebarV2BannerVariantPlacement = 'center' | 'top'; + export type SidebarV2BannerProps = { title?: ReactNode; linkText?: string; @@ -16,6 +18,13 @@ export type SidebarV2BannerProps = { onClick?: () => void; variant?: SidebarV2BannerVariant; onClose?: () => void; + /** + * Vertical alignment of the close button / addon column. Use `'top'` to align + * the close button with the banner header (title) instead of centering it on + * the whole banner — useful when the banner has taller content below the title. + * @default 'center' + */ + closePlacement?: SidebarV2BannerVariantPlacement; children?: ReactNode; addon?: ReactNode; }; @@ -25,13 +34,20 @@ export const SidebarBanner = ({ linkText, linkProps, variant = 'default', + closePlacement = 'center', addon, onClose, children, ...props }: SidebarV2BannerProps) => (
@@ -50,9 +66,11 @@ export const SidebarBanner = ({ )} {children}
-
- {addon} - {onClose && } -
+ {(addon || onClose) && ( +
+ {addon} + {onClose && } +
+ )}
); From fd1443377b5e43bb03f1bede646beca6eb10361f Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 9 Jul 2026 20:46:07 -0300 Subject: [PATCH 4/4] fix(fuselage): close-top places close button absolute so content is full-width In closePlacement='top' mode, position the addon/close column absolutely (top-right) instead of as a flex column, so the content spans the full banner width below the header. Co-Authored-By: Claude Opus 4.8 (1M context) --- packages/fuselage/fuselage.api.md | 5 ++ .../components/SidebarV2/Sidebar.stories.tsx | 47 +++++++++++++++++++ .../components/SidebarV2/Sidebar.styles.scss | 9 ++++ 3 files changed, 61 insertions(+) diff --git a/packages/fuselage/fuselage.api.md b/packages/fuselage/fuselage.api.md index ec4480b7ad..5bbde752b8 100644 --- a/packages/fuselage/fuselage.api.md +++ b/packages/fuselage/fuselage.api.md @@ -2289,6 +2289,7 @@ export type SidebarV2BannerProps = { onClick?: () => void; variant?: SidebarV2BannerVariant; onClose?: () => void; + closePlacement?: SidebarV2BannerVariantPlacement; children?: ReactNode; addon?: ReactNode; }; @@ -3067,6 +3068,10 @@ show: () => void // @public (undocumented) export type VisibilityType = 'hidden' | 'visible' | 'hiding' | 'unhiding' | undefined; +// Warnings were encountered during analysis: +// +// src/components/SidebarV2/SidebarBanner.tsx:27:3 - (ae-forgotten-export) The symbol "SidebarV2BannerVariantPlacement" needs to be exported by the entry point index.d.ts + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx b/packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx index 988d0ca1e2..33de98c117 100644 --- a/packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx +++ b/packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx @@ -185,3 +185,50 @@ export const Default: StoryFn = (props) => ( ); + +export const MediaPlayerBanner: StoryFn = (props) => ( + + + + } + small + placeholder='Search' + /> + + + + + + + + Jane Doe + + + Audio record.mp3 (455.93 kB) + + + + } + > + + + + 00:00 + + + + + + + +); diff --git a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss index 0495dd7203..dbe53ff3a8 100644 --- a/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss +++ b/packages/fuselage/src/components/SidebarV2/Sidebar.styles.scss @@ -187,7 +187,16 @@ $sidebar-color-stroke-extra-light: theme( gap: lengths.padding(12); &--close-top { + position: relative; + align-items: flex-start; + + .rcx-sidebar-v2-banner__addon { + position: absolute; + + inset-block-start: lengths.padding(16); + inset-inline-end: lengths.padding(16); + } } &__content {