feat(react-sdk): migrate call recording list to new token design system

[jdimovska]

💡 Overview

Migrates CallRecordingList onto the design tokens and aligns it with Video Calling / Settings Modal / Recordings.

The list was drawn for a single dark theme: a grey rule under every row, a rem font size that tracked the consumer's root font size, and a white empty-state icon that was invisible in light mode. Per the spec the table header is now a filled pill, rows have no separator, and the download action is a 24×24 button with a 16px glyph instead of a bare 32px one.

📝 Implementation notes

• Three equal 120px columns replace 200 / 100 / 100. They shrink below that basis where the spec says shrink-0 — applied literally a row needs 432px and clips the download button in react-dogfood, which caps this list at 400px.
• The download column has a shared non-shrinking 24px basis so the header and rows shrink identically; without it the columns drifted 8px/16px apart under 440px.
• Download hover is now a background-utility-hover overlay on the button, not a brand-blue glyph — the spec makes it a Core / Web / Button.
• Row height is 48px: the button sets the content height, not the text.
• Left for follow-ups: the misspelled CallRecodingList directory, the two dead rules holding the last legacy variables (__toggle-button--active, __refresh-button), and the empty state's second copy line, which needs i18n.

🎫 Ticket: https://linear.app/stream/issue/REACT-1146/migrate-callrecordinglist-to-design-tokens

📑 Docs: https://github.com/GetStream/docs-content/pull/

Summary by CodeRabbit

• Style
  • Updated the call recording list with refreshed typography, colors, spacing, and rounded item styling.
  • Improved responsive sizing for filename and time columns.
  • Redesigned the download action with a full button and interactive states.
  • Added a styled empty state with updated icon and messaging layout.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: a28bc4c7-a61d-4299-9c49-78a5dabbdc39

📥 Commits

Reviewing files that changed from the base of the PR and between 624bd3d and eb1e18c.

📒 Files selected for processing (2)

• packages/styling/src/CallRecodingList/CallRecordingList-layout.scss
• packages/styling/src/CallRecodingList/CallRecordingList-theme.scss

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.

---

📝 Walkthrough

Walkthrough

The call recording list styling now uses design tokens for its header, title, rows, download action, and empty state. Row sizing is flexible, and the download button has distinct hover and active states.

Changes

Call recording list styling

Layer / File(s)	Summary
List header and item surfaces packages/styling/src/CallRecodingList/CallRecordingList-layout.scss, packages/styling/src/CallRecodingList/CallRecordingList-theme.scss	Adds a flex header and applies token-based typography, colors, spacing, and card styling to the title and list items.
Row sizing and download action packages/styling/src/CallRecodingList/CallRecordingList-layout.scss	Replaces fixed content widths with flexible sizing and redesigns the download button with token-based dimensions, hover styling, and active styling.
Empty-state presentation packages/styling/src/CallRecodingList/CallRecordingList-theme.scss	Centers the empty state and applies token-based icon sizing, colors, spacing, and text styling.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to eb1e1

This styling-only update modernizes the call recording list without changing its API or behavior; no merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely describes the main change: migrating the React SDK call recording list to the new token design system.
Description check	✅ Passed	The description includes the required Overview and Implementation notes sections. It explains the design changes, implementation details, follow-ups, ticket, and documentation reference. The documenta…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch migrate-recording-list

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Bundle size

Built package output. Sizes in KB; delta vs migrate-participant-view@624bd3d.

No main baseline available yet - showing absolute sizes only.

Package	Unminified	Minified	Δ min vs main
@stream-io/video-client	782.4 KB	275.3 KB	n/a
@stream-io/video-react-bindings	32.9 KB	12.0 KB	n/a
@stream-io/video-react-sdk	378.5 KB	232.6 KB	n/a
↳ install total (+ client + react-bindings)	1193.8 KB	519.9 KB	n/a
@stream-io/video-react-sdk (embedded) (cjs)	211.4 KB	126.5 KB	n/a
@stream-io/video-react-native-sdk	414.5 KB	196.9 KB	n/a
↳ install total (+ client + react-bindings)	1229.8 KB	484.2 KB	n/a
@stream-io/audio-filters-web (cjs)	4867.0 KB	4822.4 KB	n/a
@stream-io/noise-cancellation-react-native	3.8 KB	1.2 KB	n/a
@stream-io/react-native-callingx	15.5 KB	7.1 KB	n/a
@stream-io/video-filters-react-native	2.1 KB	0.8 KB	n/a
@stream-io/video-filters-web	122.4 KB	68.6 KB	n/a