fix(cloud-nav): smooth label fade on side-nav collapse/expand by bilal-karim · Pull Request #3628 · temporalio/ui

bilal-karim · 2026-07-02T17:47:19Z

Follow-up to #3606.

Problem

The Cloud side-nav item labels used a plain symmetric opacity transition. On collapse they stayed opaque while the panel narrowed over them (a visible "chop"), and expand/collapse felt abrupt (see Standalone Activities and Namespace Settings as an example).

Change

Direction-aware label motion, paired with the nav's existing 150ms transition-width, scoped to the Cloud nav only (OSS unchanged). The panel width moves continuously in both directions (no stall); the label transitions on the roomy side of the width change:

Collapse — the label leads: a fast 75ms ease-out fade so it clears before the shrinking panel reaches it.
Expand — the label lags: waits 75ms for the panel to open, then fades in linearly over 150ms.

Before	After
Before.mp4	After.mp4

Implementation

Adds a data-cloud attribute on the nav container — mirrors the existing data-nav pattern the labels already read via group-data-[nav=…].
Timing is a few Tailwind utilities on the label in navigation-item.svelte, each scoped to Cloud + nav state; the OSS nav resolves to its original opacity-only transition.
No keyframes, plugin, or design-system changes.

Diff: 2 files, +2/−1.

Testing

Verified against the real cloud-ui CSS bundle:

Cloud collapse: 75ms ease-out; label ≈ 0.04 opacity by the time the panel edge reaches it (no chop).
Cloud expand: panel opens 0–150ms, label fades in 75–225ms.
OSS nav: 150ms opacity-only fade, default easing — unchanged.

🤖 Generated with Claude Code

vercel · 2026-07-02T17:47:25Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jul 7, 2026 12:14am

Follow-up to #3606. The nav item labels used a plain symmetric opacity transition, so on collapse they stayed opaque as the panel narrowed over them (a visible "chop") and expand/collapse felt abrupt. Make the label motion direction-aware and paired with the nav's 150ms transition-width, scoped to the Cloud nav via a new data-cloud attribute (OSS unchanged): - Collapse: the label leads — a fast 75ms ease-out fade so it clears before the shrinking panel reaches it. - Expand: the label lags — waits 75ms for the panel to open, then fades in linearly over 150ms. Co-Authored-By: Claude Opus 4.8 <[email protected]>

laurakwhit · 2026-07-07T00:03:37Z

 <nav
  class={merge(
-    'group grid min-h-full grid-cols-[2rem] grid-rows-[fit-content(1.5rem)] gap-2 border-r border-subtle px-2 py-4 transition-width data-[nav=open]:w-auto data-[nav=open]:grid-cols-[100%] motion-reduce:transition-none',
+    'group grid min-h-full grid-cols-[2rem] grid-rows-[fit-content(1.5rem)] gap-2 border-r border-subtle px-2 py-4 transition-width data-[nav=closed]:w-[calc(3rem_+_1px)] data-[nav=open]:w-[13.125rem] data-[nav=open]:grid-cols-[100%] motion-reduce:transition-none',


@bilal-karim any objection to making the transition apply for OSS as well?

Screen.Recording.2026-07-06.at.5.11.56.PM.mov

Let's do it!

Auto-generated version bump from 2.51.1 to 2.52.0 Bump type: minor Changes included: - [`9c6fcd54`](9c6fcd5) Add direct SSO redirect and backend logout (#3590) - [`feab0d90`](feab0d9) a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics (#3560) - [`d7bbfb01`](d7bbfb0) a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) (#3553) - [`4efd6ab6`](4efd6ab) a11y(3.3.1): Holocene input primitives — add aria-invalid, aria-describedby, and uniform live-region error announcement (#3554) - [`0600b700`](0600b70) Use green only (#3599) - [`94107549`](9410754) Clarify activity pause timeout behavior (#3600) - [`9f88d5a8`](9f88d5a) Bump node version to 22.23.1 or newer to fix issue from previous security release (#3604) - [`ca4104ae`](ca4104a) Update reason copy and inputs (#3588) - [`51db73fa`](51db73f) Update batch operation reason input hint (#3605) - [`836d7c55`](836d7c5) a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll (#3538) - [`4ee95696`](4ee9569) Improve re-renders for large encoded event histories (#3592) - [`fa5e7aa1`](fa5e7aa) feature/schedules (#3603) - [`0d9467fd`](0d9467f) Default includeHeartbeatDetails and includeLastFailure to true for getActivityExecution and pollActivityExecution (#3521) - [`e5bc514e`](e5bc514) fix schedules: duplicate key (#3612) - [`f1eb489f`](f1eb489) Remove preview badge (#3581) - [`1e5173b4`](1e5173b) Add existing versions to worker create deployment version form (#3601) - [`a8552bae`](a8552ba) fix schedules -e.trim not a function (#3613) - [`0442f847`](0442f84) Fix width of ComputeBadge in VersionTableRow (#3615) - [`ddbeb54f`](ddbeb54) fix(cloud-nav): animate and stabilize side-nav collapse (#3606) - [`3cfc684b`](3cfc684) fix - schedules recent/upcoming runs - sort issue (#3616) - [`92b8875b`](92b8875) Move timestamp out of translate (#3617) - [`901258af`](901258a) Fix SAA and WF consistency (#3614) - [`99593d97`](99593d9) DT-4001 - standalone nexus operations (#3496) - [`f10d1bf1`](f10d1bf) Clamp codeblock to container width (#3621) - [`0a9d93ce`](0a9d93c) Remove unnecessary bottom-0 (#3623) - [`9dabb522`](9dabb52) chore(deps-dev): bump vite from 6.4.2 to 6.4.3 (#3610) - [`5c1854d3`](5c1854d) News Feed (#3596) - [`340da30f`](340da30) a11y(2.1.1): guard global r/R keydown so text inputs can receive the letter (#3589) - [`dd97a9d1`](dd97a9d) fix(markdown-editor): disable chromatic snapshot for preview story (#3631) - [`7db61ab9`](7db61ab) a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions (#3555) - [`d2111ecf`](d2111ec) a11y(4.1.3): Add live-region wrappers for workflow status, event count, filter counts, and Banner (#3561) - [`24eabaec`](24eabae) a11y(2.4.6): guard DrawerContent against empty <h2> when title is omitted (#3595) - [`3552e307`](3552e30) Fix CodeMirror Lezer dependency mismatch (#3632) - [`7ac37199`](7ac3719) Update defaults to match workflow defaults (#3634) - [`c1f02865`](c1f0286) Draft fix for link variant handling (#3620) - [`bbbf2b8c`](bbbf2b8) Add connection status and optional Latest Version column to deployments (DT-4174) (#3618) - [`76f266f4`](76f266f) DurationInput updates (#3633) - [`07da53c5`](07da53c) COM-191 - prefill CloudFormation template params in Launch Stack link (#3619) - [`90946e0b`](90946e0) Schedules - Timeout empty defaults (#3637) - [`97f9ad39`](97f9ad3) fix(cloud-nav): smooth label fade on side-nav collapse/expand (#3628) - [`a399ed35`](a399ed3) Improve Search Attribute deletion messaging (#3629) - [`ad976d94`](ad976d9) Pass through source prop for News Feed Widget (#3638) - [`6ef84fe3`](6ef84fe) Restrict select-all to exclude workflow status (#3639) - [`4c3729f8`](4c3729f) Reduce news feed markdown whitespace (#3642) - [`aa04a9b6`](aa04a9b) feat(nexus-operations): add loading state to standalone nexus operations list page header (#3643) - [`dce2f804`](dce2f80) chore: remove unused generate-holocene-props script (#3644) - [`760bc7bc`](760bc7b) Make megaphone icon bigger (#3645) - [`c047384a`](c047384) refactor(nexus): replace hand-rolled types with @temporalio/proto (#3646)

Auto-generated version bump from 2.51.1 to 2.52.0 Bump type: minor Changes included: - [`9c6fcd54`](9c6fcd5) Add direct SSO redirect and backend logout (#3590) - [`feab0d90`](feab0d9) a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics (#3560) - [`d7bbfb01`](d7bbfb0) a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) (#3553) - [`4efd6ab6`](4efd6ab) a11y(3.3.1): Holocene input primitives — add aria-invalid, aria-describedby, and uniform live-region error announcement (#3554) - [`0600b700`](0600b70) Use green only (#3599) - [`94107549`](9410754) Clarify activity pause timeout behavior (#3600) - [`9f88d5a8`](9f88d5a) Bump node version to 22.23.1 or newer to fix issue from previous security release (#3604) - [`ca4104ae`](ca4104a) Update reason copy and inputs (#3588) - [`51db73fa`](51db73f) Update batch operation reason input hint (#3605) - [`836d7c55`](836d7c5) a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll (#3538) - [`4ee95696`](4ee9569) Improve re-renders for large encoded event histories (#3592) - [`fa5e7aa1`](fa5e7aa) feature/schedules (#3603) - [`0d9467fd`](0d9467f) Default includeHeartbeatDetails and includeLastFailure to true for getActivityExecution and pollActivityExecution (#3521) - [`e5bc514e`](e5bc514) fix schedules: duplicate key (#3612) - [`f1eb489f`](f1eb489) Remove preview badge (#3581) - [`1e5173b4`](1e5173b) Add existing versions to worker create deployment version form (#3601) - [`a8552bae`](a8552ba) fix schedules -e.trim not a function (#3613) - [`0442f847`](0442f84) Fix width of ComputeBadge in VersionTableRow (#3615) - [`ddbeb54f`](ddbeb54) fix(cloud-nav): animate and stabilize side-nav collapse (#3606) - [`3cfc684b`](3cfc684) fix - schedules recent/upcoming runs - sort issue (#3616) - [`92b8875b`](92b8875) Move timestamp out of translate (#3617) - [`901258af`](901258a) Fix SAA and WF consistency (#3614) - [`99593d97`](99593d9) DT-4001 - standalone nexus operations (#3496) - [`f10d1bf1`](f10d1bf) Clamp codeblock to container width (#3621) - [`0a9d93ce`](0a9d93c) Remove unnecessary bottom-0 (#3623) - [`9dabb522`](9dabb52) chore(deps-dev): bump vite from 6.4.2 to 6.4.3 (#3610) - [`5c1854d3`](5c1854d) News Feed (#3596) - [`340da30f`](340da30) a11y(2.1.1): guard global r/R keydown so text inputs can receive the letter (#3589) - [`dd97a9d1`](dd97a9d) fix(markdown-editor): disable chromatic snapshot for preview story (#3631) - [`7db61ab9`](7db61ab) a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions (#3555) - [`d2111ecf`](d2111ec) a11y(4.1.3): Add live-region wrappers for workflow status, event count, filter counts, and Banner (#3561) - [`24eabaec`](24eabae) a11y(2.4.6): guard DrawerContent against empty <h2> when title is omitted (#3595) - [`3552e307`](3552e30) Fix CodeMirror Lezer dependency mismatch (#3632) - [`7ac37199`](7ac3719) Update defaults to match workflow defaults (#3634) - [`c1f02865`](c1f0286) Draft fix for link variant handling (#3620) - [`bbbf2b8c`](bbbf2b8) Add connection status and optional Latest Version column to deployments (DT-4174) (#3618) - [`76f266f4`](76f266f) DurationInput updates (#3633) - [`07da53c5`](07da53c) COM-191 - prefill CloudFormation template params in Launch Stack link (#3619) - [`90946e0b`](90946e0) Schedules - Timeout empty defaults (#3637) - [`97f9ad39`](97f9ad3) fix(cloud-nav): smooth label fade on side-nav collapse/expand (#3628) - [`a399ed35`](a399ed3) Improve Search Attribute deletion messaging (#3629) - [`ad976d94`](ad976d9) Pass through source prop for News Feed Widget (#3638) - [`6ef84fe3`](6ef84fe) Restrict select-all to exclude workflow status (#3639) - [`4c3729f8`](4c3729f) Reduce news feed markdown whitespace (#3642) - [`aa04a9b6`](aa04a9b) feat(nexus-operations): add loading state to standalone nexus operations list page header (#3643) - [`dce2f804`](dce2f80) chore: remove unused generate-holocene-props script (#3644) - [`760bc7bc`](760bc7b) Make megaphone icon bigger (#3645) - [`c047384a`](c047384) refactor(nexus): replace hand-rolled types with @temporalio/proto (#3646) Co-authored-by: rossedfort <[email protected]>

vercel Bot deployed to Preview July 2, 2026 17:48 View deployment

bilal-karim force-pushed the cloud-nav-label-fade branch from 2cbcc5f to abf6a03 Compare July 2, 2026 17:55

vercel Bot deployed to Preview July 2, 2026 17:56 View deployment

bilal-karim force-pushed the cloud-nav-label-fade branch from abf6a03 to 2c549ca Compare July 2, 2026 18:11

vercel Bot deployed to Preview July 2, 2026 18:13 View deployment

bilal-karim marked this pull request as ready for review July 2, 2026 18:15

bilal-karim requested a review from a team as a code owner July 2, 2026 18:15

bilal-karim requested a review from laurakwhit July 2, 2026 18:19

laurakwhit added 2 commits July 6, 2026 16:58

Make transition apply to OSS and Cloud

31be7fb

Gate label transition to motion-reduce

8cb307b

vercel Bot deployed to Preview July 7, 2026 00:03 View deployment

laurakwhit reviewed Jul 7, 2026

View reviewed changes

Merge branch 'main' into cloud-nav-label-fade

f220e8a

vercel Bot deployed to Preview July 7, 2026 00:14 View deployment

laurakwhit approved these changes Jul 7, 2026

View reviewed changes

bilal-karim merged commit 97f9ad3 into main Jul 7, 2026
20 checks passed

bilal-karim deleted the cloud-nav-label-fade branch July 7, 2026 19:40

temporal-cicd Bot mentioned this pull request Jul 8, 2026

chore: bump version to 2.52.0 #3647

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(cloud-nav): smooth label fade on side-nav collapse/expand#3628

fix(cloud-nav): smooth label fade on side-nav collapse/expand#3628
bilal-karim merged 4 commits into
mainfrom
cloud-nav-label-fade

bilal-karim commented Jul 2, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 2, 2026 •

edited

Loading

Uh oh!

laurakwhit Jul 7, 2026 •

edited

Loading

Uh oh!

bilal-karim Jul 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

bilal-karim commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Change

Implementation

Testing

Uh oh!

vercel Bot commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

laurakwhit Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bilal-karim Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bilal-karim commented Jul 2, 2026 •

edited

Loading

vercel Bot commented Jul 2, 2026 •

edited

Loading

laurakwhit Jul 7, 2026 •

edited

Loading