feat(holocene): add VerticalNav component#2924
Merged
Merged
Conversation
Implements a new vertical navigation component for Holocene design system with: - Dual background system (static active, animated hover) - Smart debouncing for smooth transitions - Full accessibility support with ARIA attributes - Svelte 5 reactive patterns using runes - TypeScript strict typing throughout - Comprehensive Storybook documentation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replaced usage with .by() for calculating background positions and styles. This eliminates side effects in favor of reactive derived state, following team preferences. Only 2 effects remain: - Prop sync (unavoidable for activeItemId sync) - Cleanup (unavoidable for timeout cleanup on unmount)
Enhanced transition reset logic for consistent fade-in animations: - Resets when hovering active item (no hover background shown) - Resets after clicking any item - Resets when mouse leaves navigation - Ensures smooth fade-in whenever starting to hover non-active items
rossnelson
marked this pull request as ready for review
September 24, 2025 16:49
rossnelson
marked this pull request as draft
September 24, 2025 16:54
- Use functional patterns with guard statements (no nested if/else) - Hide hover background completely on click (remove from DOM) - Show fresh without animation on first hover after click - Enable smooth transitions only between subsequent hovers - Conditionally render hover element to ensure clean state
- Separate opacity control from position animations - Fade-in on first hover (opacity transition only) - Full animation (position + opacity) on subsequent hovers - Reset and fade fresh after clicking items
rossnelson
marked this pull request as ready for review
September 24, 2025 18:15
Alex-Tideman
approved these changes
Sep 24, 2025
temporal-cicd Bot
pushed a commit
that referenced
this pull request
Oct 8, 2025
Auto-generated version bump from 2.40.1 to 2.41.0 Bump type: minor Changes included: - [`904ca347`](904ca34) fix(workflows): add GitHub App token to version bump PR creation (#2910) - [`bd50889e`](bd50889) fix(workflows): fix changelog generation and PR body formatting in version bump (#2912) - [`ce91ecf6`](ce91ecf) style: fix formatting in version-bump workflow (#2914) - [`352e9f66`](352e9f6) ci(workflows): add path filter to trigger-downstream-updates (#2916) - [`9e39fa81`](9e39fa8) Add test sentence in README. - [`68f75a20`](68f75a2) Remove test sentence - [`73c83894`](73c8389) Start Delay UI improvements (#2907) - [`f7924cd0`](f7924cd) Fix issue with localActivity decoding with Java sdk (#2921) - [`474091aa`](474091a) add switch icon (#2895) - [`a6ec2611`](a6ec261) remove monaco in favor of codemirror (#2920) - [`b0042390`](b004239) Add quotes around allowOrigins (#2923) - [`b809fb51`](b809fb5) feat(holocene): add VerticalNav component (#2924) - [`e72ca8ac`](e72ca8a) Try adding overflow css to codemirror (#2929) - [`9c472385`](9c47238) add change event to dark mode in top nav (#2930) - [`bb750c9c`](bb750c9) fix(security): remediate command injection vulnerabilities in GitHub Actions (#2932) - [`e54f3dc9`](e54f3dc) Add try catch around decodeForSvelte on bad params (#2934) - [`cfc4998c`](cfc4998) replace v5 with crypto.randomuuid (#2927) - [`a47970e9`](a47970e) Fix NaN in Batch Operations results (#2938) - [`6cb24dec`](6cb24de) Migrate layout files to Svelte 5 (#2937) - [`f424f03d`](f424f03) Bump tar-fs from 3.0.9 to 3.1.1 (#2926) - [`3255f31d`](3255f31) Saved Workflow Query Views (#2931)
Alex-Tideman
added a commit
that referenced
this pull request
Oct 8, 2025
Auto-generated version bump from 2.40.1 to 2.41.0 Bump type: minor Changes included: - [`904ca347`](904ca34) fix(workflows): add GitHub App token to version bump PR creation (#2910) - [`bd50889e`](bd50889) fix(workflows): fix changelog generation and PR body formatting in version bump (#2912) - [`ce91ecf6`](ce91ecf) style: fix formatting in version-bump workflow (#2914) - [`352e9f66`](352e9f6) ci(workflows): add path filter to trigger-downstream-updates (#2916) - [`9e39fa81`](9e39fa8) Add test sentence in README. - [`68f75a20`](68f75a2) Remove test sentence - [`73c83894`](73c8389) Start Delay UI improvements (#2907) - [`f7924cd0`](f7924cd) Fix issue with localActivity decoding with Java sdk (#2921) - [`474091aa`](474091a) add switch icon (#2895) - [`a6ec2611`](a6ec261) remove monaco in favor of codemirror (#2920) - [`b0042390`](b004239) Add quotes around allowOrigins (#2923) - [`b809fb51`](b809fb5) feat(holocene): add VerticalNav component (#2924) - [`e72ca8ac`](e72ca8a) Try adding overflow css to codemirror (#2929) - [`9c472385`](9c47238) add change event to dark mode in top nav (#2930) - [`bb750c9c`](bb750c9) fix(security): remediate command injection vulnerabilities in GitHub Actions (#2932) - [`e54f3dc9`](e54f3dc) Add try catch around decodeForSvelte on bad params (#2934) - [`cfc4998c`](cfc4998) replace v5 with crypto.randomuuid (#2927) - [`a47970e9`](a47970e) Fix NaN in Batch Operations results (#2938) - [`6cb24dec`](6cb24de) Migrate layout files to Svelte 5 (#2937) - [`f424f03d`](f424f03) Bump tar-fs from 3.0.9 to 3.1.1 (#2926) - [`3255f31d`](3255f31) Saved Workflow Query Views (#2931) Co-authored-by: Alex-Tideman <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Add a VerticalNav component to the Holocene design system for use in settings layouts and other navigation contexts.
Behavioral Details
Active Item Background
bg-interactive-secondary-activecolorHover Background
bg-interactive-secondary-hoveron non-active itemsAnimation States
hideHoverBackground: Removes hover element from DOM after clicksenableTransitions: Controls whether position animations are appliedhoverTimeout: Manages delayed hide on mouse leaveImplementation Notes
$state,$derived.by, minimal$effect)Component Structure
vertical-nav.svelte: Container managing backgrounds and statevertical-nav-item.svelte: Individual nav items with click/hover handlersvertical-nav.stories.svelte: Storybook examples including interactive demoTesting
Test the component in Storybook with various scenarios: