[DCUBESDQLR-2356] Add file info bar with fileName and fileSize support by mparramont · Pull Request #1097 · LifeSG/react-design-system

mparramont · 2026-04-15T05:38:36Z

Type of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing apis or functionality to change)

Description of changes

Link to ticket
Link to Figma
Added fileName and fileSize optional props to FullscreenCarouselItemProps
- filename fallback when only fileSize is set
Added a top bar with dark background (bg-inverse) matching the thumbnails strip, showing file name (BodyBL, semibold) and file size (BodyMD) per slide
Action buttons (magnifier, delete, close) are now inside the top bar
When no items have file info, buttons float as absolute-positioned overlay (previous behaviour)

Checklist

Changes follow the project guidelines in CONTRIBUTING.md and CONVENTIONS.md
Looks good on mobile and tablet
Updated documentation
Added/updated tests

Screenshots

Video showing the different item variations in mobile (smallest viewport to show ellipsis):

with file name and file size,
with very long file name and file size,
with only file name
with only file size
with no file name and file size;
and also showing a carousel with no items with file name or file size: previous behaviour with no top bar.

Screen.Recording.2026-04-15.at.2.00.54.PM.mov

Copilot

Pull request overview

Adds per-slide file metadata display to FullscreenImageCarousel by introducing an optional top “file info” bar and updating docs/stories/tests accordingly.

Changes:

Extend FullscreenCarouselItemProps with optional fileName and fileSize.
Render a top bar (when any item has file info) that shows filename/filesize and contains the magnifier/delete/close actions; otherwise preserve the previous floating overlay actions.
Add Storybook docs/stories and unit tests covering the new file info behaviors.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tests/fullscreen-image-carousel/fullscreen-image-carousel.spec.tsx	Adds tests for file info rendering, fallback, and updates on navigation.
stories/fullscreen-image-carousel/props-table.tsx	Documents new `fileName`/`fileSize` item props in the API table.
stories/fullscreen-image-carousel/fullscreen-image-carousel.stories.tsx	Adds a `WithFileInfo` story showcasing multiple file info combinations and truncation.
stories/fullscreen-image-carousel/fullscreen-image-carousel.mdx	Includes the new story in the docs page.
src/fullscreen-image-carousel/types.ts	Adds `fileName` and `fileSize` to `FullscreenCarouselItemProps`.
src/fullscreen-image-carousel/fullscreen-image-carousel.tsx	Implements file info bar rendering and relocates action buttons into the top bar.
src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx	Updates layout to support the top bar; adds styling for file info text elements.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

mparramont · 2026-04-16T08:32:36Z

Edit: push failed, give me a moment
Hi @qroll! Addressed your comments :)

Some small extra changes after a desk check with Xin Yun and Kerri:

When file size is not passed, we render the filename centered horizontally:

File size is now required when file name is provided
If any item in the carousel has a file name, all must have

Can I have a final review please? 🙏

qroll

just one more thing, otherwise lgtm

…upport - Add fileName and fileSize props to FullscreenCarouselItemProps - Top bar shows file name and size when at least one item has file info, otherwise reverts to floating absolute-positioned action buttons - File name falls back to '-' when only fileSize is provided - Action buttons (magnifier, delete, close) moved into the top bar - Fix ImageGalleryContainer height to use flex:1/min-height:0 to prevent vertical scroll when top bar is present - Add WithFileInfo story, update props-table and MDX docs - Add tests covering all new file info bar behaviour

… story item

- trim fileName before using in hasFileInfo and displayName - move aria-live/aria-atomic from TopActionButtons to FileInfoTextWrapper - rename misleading test name to match actual assertion

…ated O(n) computation on every render

… center filename vertically - disallow fileSize without fileName via discriminated union - enforce all-or-none fileName across items via union of arrays - vertically center filename in file info bar when fileSize is absent - update stories and tests for new type constraints

…antically

…hout filename

…age carousel item types directly

mparramont changed the title ~~[DCUBESDQLR-2356] feat(fullscreen-image-carousel): add file info bar with fileName and fileSize support~~ [DCUBESDQLR-2356] Add file info bar with fileName and fileSize support Apr 15, 2026

mparramont requested review from Copilot and qroll April 15, 2026 06:06

mparramont marked this pull request as ready for review April 15, 2026 06:06

Copilot started reviewing on behalf of mparramont April 15, 2026 06:07 View session

Copilot AI reviewed Apr 15, 2026

View reviewed changes

mparramont marked this pull request as draft April 15, 2026 06:10

mparramont requested a review from Copilot April 15, 2026 08:06

Copilot started reviewing on behalf of mparramont April 15, 2026 08:07 View session

Copilot AI reviewed Apr 15, 2026

View reviewed changes

Comment thread src/fullscreen-image-carousel/fullscreen-image-carousel.tsx

Copilot started work on behalf of mparramont April 15, 2026 08:14 View session

Copilot finished work on behalf of mparramont April 15, 2026 08:28

qroll requested changes Apr 15, 2026

View reviewed changes

qroll added the type: enhancement New feature or request label Apr 15, 2026

mparramont force-pushed the add-top-bar-with-file-name-and-size branch from f6ebf6b to c069770 Compare April 15, 2026 09:52

mparramont requested a review from qroll April 16, 2026 08:37

mparramont marked this pull request as ready for review April 16, 2026 09:11

qroll requested changes Apr 16, 2026

View reviewed changes

Comment thread tests/fullscreen-image-carousel/fullscreen-image-carousel.spec.tsx Outdated

qroll added this to the v3.4.0-canary.1 milestone Apr 17, 2026

mparramont and others added 10 commits April 17, 2026 10:19

[DCUBESDQLR-2356][MPT] truncate fileSize with ellipsis; add long-name…

b7d4e04

… story item

[DCUBESDQLR-2356][MPT] remove redundant story item from WithFileInfo

89ceceb

[DCUBESDQLR-2356][MPT] address Copilot review comments

3a4ad99

- trim fileName before using in hasFileInfo and displayName - move aria-live/aria-atomic from TopActionButtons to FileInfoTextWrapper - rename misleading test name to match actual assertion

[DCUBESDQLR-2356][MPT] trim fileSize before rendering file info

8d0ac8e

[DCUBESDQLR-2356][MPT] use font tokens for file info min-height

f81934d

[DCUBESDQLR-2356][MPT] memoize hasFileInfo with useMemo to avoid repe…

ab0f069

…ated O(n) computation on every render

[DCUBESDQLR-2356][MPT] Address qroll PR comments

c9d3058

[DCUBESDQLR-2356][MPT] change order of stories to make more sense sem…

9239016

…antically

[DCUBESDQLR-2356][MPT] remove unneeded test

9f20cc3

mparramont force-pushed the add-top-bar-with-file-name-and-size branch from e30f1d7 to 9f20cc3 Compare April 17, 2026 05:31

[DCUBESDQLR-2356][MPT] allow for a carousel having items with and wit…

2dfece0

…hout filename

qroll reviewed Apr 17, 2026

View reviewed changes

Comment thread src/fullscreen-image-carousel/types.ts Outdated

[DCUBESDQLR-2356][MPT] let consumers use the standalone fullscreen im…

dae54d0

…age carousel item types directly

qroll approved these changes Apr 17, 2026

View reviewed changes

qroll merged commit d5f41bc into master Apr 17, 2026
1 check passed

qroll deleted the add-top-bar-with-file-name-and-size branch April 17, 2026 10:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DCUBESDQLR-2356] Add file info bar with fileName and fileSize support#1097

[DCUBESDQLR-2356] Add file info bar with fileName and fileSize support#1097
qroll merged 13 commits intomasterfrom
add-top-bar-with-file-name-and-size

mparramont commented Apr 15, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mparramont commented Apr 16, 2026 •

edited

Loading

Uh oh!

qroll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mparramont commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mparramont commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

qroll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mparramont commented Apr 15, 2026 •

edited

Loading

mparramont commented Apr 16, 2026 •

edited

Loading