Skip to content

feat(VerticalNavigation): update to latest PD specs#5182

Open
plagoa wants to merge 1 commit into
masterfrom
feat/vert_nav_squash
Open

feat(VerticalNavigation): update to latest PD specs#5182
plagoa wants to merge 1 commit into
masterfrom
feat/vert_nav_squash

Conversation

@plagoa

@plagoa plagoa commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

No description provided.

Copilot AI review requested due to automatic review settings June 2, 2026 10:29
@plagoa plagoa requested a review from a team as a code owner June 2, 2026 10:29

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates HvVerticalNavigation to align with the latest Product Design specs. It introduces a new HvVerticalNavigationSection component, adds optional search functionality to the navigation tree, lifts open and selected state into the parent (with onOpenChange / onSelectedChange callbacks shared via context), and reworks several styles (group wrapper with grid-row transitions, level padding via CSS variables, theme tweaks for Pentaho, etc.).

Changes:

  • New HvVerticalNavigationSection (with "See All / See Less" affordance) and updated index.ts exports.
  • HvVerticalNavigation now propagates open/selected plus setters via context; HvVerticalNavigationTree gains a search prop with collapsed/expanded UX.
  • Style refactor of VerticalNavigation/TreeViewItem (sibling separators with * + *, groupWrapper grid animation, level padding via CSS variables) and Pentaho theme adjustments.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 9 comments.

Show a summary per file
File Description
packages/core/src/VerticalNavigation/VerticalNavigation.tsx Adds onOpenChange, selected, defaultSelected, onSelectedChange; mirrors props into local state and exposes setters via context.
packages/core/src/VerticalNavigation/VerticalNavigationContext.tsx Adds setOpen, selected, setSelected to the context value.
packages/core/src/VerticalNavigation/VerticalNavigation.styles.tsx Replaces :not(nav:first-of-type) selectors with * + * and simplifies first/collapsed paddings.
packages/core/src/VerticalNavigation/Navigation/Navigation.tsx Adds search prop (input when open, icon button when collapsed), filtered leaves view, and integrates context-driven selection.
packages/core/src/VerticalNavigation/Navigation/Navigation.styles.tsx Adds searchContainer, searchIcon, noResults styles.
packages/core/src/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx Wires useDefaultProps("HvVerticalNavigationPopup", …) for theme overrides.
packages/core/src/VerticalNavigation/Section/NavigationSection.tsx New section component with mouse-enter popup and "See All/Less" pagination.
packages/core/src/VerticalNavigation/Section/NavigationSection.styles.tsx Styles for the new section.
packages/core/src/VerticalNavigation/Section/index.ts Re-exports the new section.
packages/core/src/VerticalNavigation/TreeView/TreeViewItem.tsx Wraps icons in HvIconContainer, adds groupWrapper, exposes level padding via CSS var, repositions caret.
packages/core/src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx Adds groupWrapper grid-rows transition and gap/icon spacing changes.
packages/core/src/VerticalNavigation/index.ts Exports the new Section and NavigationPopup modules.
packages/core/src/themes/pentaho.ts Theme adjustments for new structure (* + * separators, popup container variable, expandable font weight, group offsets).
apps/docs/src/content/components/vertical-navigation.mdx Adds a docs example demonstrating sections + search.

Comment thread packages/core/src/VerticalNavigation/VerticalNavigation.tsx Outdated
Comment thread packages/core/src/VerticalNavigation/VerticalNavigation.tsx Outdated
Comment thread packages/core/src/VerticalNavigation/Section/NavigationSection.tsx Outdated
Comment thread packages/core/src/VerticalNavigation/Navigation/Navigation.tsx Outdated
Comment thread packages/core/src/VerticalNavigation/Navigation/Navigation.tsx Outdated
Comment thread packages/core/src/VerticalNavigation/Section/NavigationSection.tsx
Comment thread packages/core/src/VerticalNavigation/TreeView/TreeViewItem.tsx
Comment thread apps/docs/src/content/components/vertical-navigation.mdx Outdated
Comment thread packages/core/src/VerticalNavigation/Section/NavigationSection.tsx Outdated
@github-actions github-actions Bot temporarily deployed to uikit-docs/pr-5182 June 2, 2026 10:33 Destroyed
@plagoa plagoa force-pushed the feat/vert_nav_squash branch from 5e85037 to f6615f4 Compare June 2, 2026 10:41
@github-actions github-actions Bot temporarily deployed to uikit-docs/pr-5182 June 2, 2026 10:45 Destroyed
@plagoa plagoa force-pushed the feat/vert_nav_squash branch from f6615f4 to 64b1227 Compare June 2, 2026 14:07
@github-actions github-actions Bot temporarily deployed to uikit-docs/pr-5182 June 2, 2026 14:11 Destroyed
@plagoa plagoa force-pushed the feat/vert_nav_squash branch 2 times, most recently from 679bc7a to 3e4432a Compare June 2, 2026 14:25
@github-actions github-actions Bot temporarily deployed to uikit-docs/pr-5182 June 2, 2026 14:29 Destroyed
@plagoa plagoa force-pushed the feat/vert_nav_squash branch from 3e4432a to 3d309d8 Compare June 3, 2026 09:16
@github-actions github-actions Bot temporarily deployed to uikit-docs/pr-5182 June 3, 2026 09:21 Destroyed
@plagoa plagoa force-pushed the feat/vert_nav_squash branch from 3d309d8 to 1982839 Compare June 9, 2026 13:04
@github-actions github-actions Bot temporarily deployed to uikit-docs/pr-5182 June 9, 2026 13:08 Destroyed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants