Skip to content

ECHOES-1408 Allow icon-less accordion child items in SidebarNavigation#715

Open
david-cho-lerat-sonarsource wants to merge 5 commits into
mainfrom
david/ECHOES-1408-optional-icon-for-navigation-accordion-items
Open

ECHOES-1408 Allow icon-less accordion child items in SidebarNavigation#715
david-cho-lerat-sonarsource wants to merge 5 commits into
mainfrom
david/ECHOES-1408-optional-icon-for-navigation-accordion-items

Conversation

@david-cho-lerat-sonarsource

@david-cho-lerat-sonarsource david-cho-lerat-sonarsource commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

NOTE: as we stand, with the sidebar still showing a "thin band" when collapsed, allowing no icons "breaks" the appearance, but this PR is the first in a series that will get rid of the "thin band" collapsed sidebar, and this will not be shipped on its own.

Summary

  • add Layout.SidebarNavigation.AccordionItem.Item for navigation rows inside sidebar accordion sections
  • allow accordion child rows to omit their icon through the dedicated accordion child item API
  • extract shared sidebar item logic and shared sidebar item base props
  • update stories, tests, and exports for the accordion child item API

Validation

  • yarn ts-check
  • yarn jest src/components/layout/sidebar-navigation
  • targeted ESLint on the touched sidebar navigation files
  • Sonar snippet analysis on the touched sidebar navigation files

@netlify

netlify Bot commented Jul 2, 2026

Copy link
Copy Markdown

Deploy Preview for echoes-react ready!

Name Link
🔨 Latest commit d2e33ac
🔍 Latest deploy log https://app.netlify.com/projects/echoes-react/deploys/6a4645ee6e5ff8000833611e
😎 Deploy Preview https://deploy-preview-715--echoes-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@hashicorp-vault-sonar-prod hashicorp-vault-sonar-prod Bot changed the title Allow icon-less accordion child items in SidebarNavigation ECHOES-1411 Allow icon-less accordion child items in SidebarNavigation Jul 2, 2026
@hashicorp-vault-sonar-prod

hashicorp-vault-sonar-prod Bot commented Jul 2, 2026

Copy link
Copy Markdown

ECHOES-1408

@david-cho-lerat-sonarsource david-cho-lerat-sonarsource changed the title ECHOES-1411 Allow icon-less accordion child items in SidebarNavigation ECHOES-1408 Allow icon-less accordion child items in SidebarNavigation Jul 2, 2026

Copilot AI left a comment

Copy link
Copy Markdown

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 extends Layout.SidebarNavigation to support icon-less accordion child rows and refactors shared navigation-row logic into a reusable base implementation, while also adding ariaLabel support and updating stories/tests to match the new API shape.

Changes:

  • Introduces SidebarNavigationAccordionChildItem (exposed as SidebarNavigation.AccordionItem.Item) to allow accordion children with optional icons.
  • Refactors shared row rendering into SidebarNavigationBaseItem and centralizes shared prop/types in SidebarNavigationTypes.ts.
  • Updates Storybook stories and adds/extends unit tests for the new child item + new ariaLabel coverage.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 10 comments.

Show a summary per file
File Description
stories/layout/sidebar-navigation/SidebarNavigationAccordionItem-stories.tsx Updates stories to use the new SidebarNavigation.AccordionItem.Item API and demonstrates icon-less children.
stories/layout/sidebar-navigation/SidebarNavigation-stories.tsx Migrates sidebar navigation stories to the new accordion child item API.
stories/layout/Layout-stories.tsx Updates layout story usage to the new accordion child item API.
src/components/layout/sidebar-navigation/SidebarNavigationTypes.ts Adds shared sidebar navigation item base prop/types.
src/components/layout/sidebar-navigation/SidebarNavigationItem.tsx Refactors SidebarNavigationItem to reuse the new base item.
src/components/layout/sidebar-navigation/SidebarNavigationBaseItem.tsx Adds shared implementation for sidebar navigation link rows (tooltip, active styles, icon handling).
src/components/layout/sidebar-navigation/SidebarNavigationAccordionItem.tsx Updates accordion item props (adds ariaLabel, icon type alias, and attempted ref support).
src/components/layout/sidebar-navigation/SidebarNavigationAccordionChildItem.tsx Adds new accordion child item component with optional icon support.
src/components/layout/sidebar-navigation/index.ts Exports new component/types and introduces the SidebarNavigation.AccordionItem.Item namespace.
src/components/layout/sidebar-navigation/tests/SidebarNavigationItem-test.tsx Adds tests for ariaLabel, keyboard navigation, and ref forwarding.
src/components/layout/sidebar-navigation/tests/SidebarNavigationAccordionItem-test.tsx Updates accordion tests to use SidebarNavigationAccordionChildItem and tests icon-less children.
src/components/layout/sidebar-navigation/tests/SidebarNavigationAccordionChildItem-test.tsx Adds comprehensive tests for the new accordion child item component.
src/components/layout/index.ts Re-exports the new sidebar navigation types from the top-level layout module.

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

Comment thread src/components/layout/sidebar-navigation/SidebarNavigationTypes.ts
Comment thread src/components/layout/sidebar-navigation/SidebarNavigationTypes.ts
Comment thread src/components/layout/sidebar-navigation/SidebarNavigationItem.tsx
Comment thread src/components/layout/sidebar-navigation/SidebarNavigationItem.tsx

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

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

@david-cho-lerat-sonarsource david-cho-lerat-sonarsource force-pushed the david/ECHOES-1408-optional-icon-for-navigation-accordion-items branch from 8488af9 to d2e33ac Compare July 2, 2026 11:05
@david-cho-lerat-sonarsource david-cho-lerat-sonarsource marked this pull request as ready for review July 2, 2026 11:05
@gitar-bot

gitar-bot Bot commented Jul 2, 2026

Copy link
Copy Markdown
Code Review ✅ Approved

Introduces SidebarNavigation.AccordionItem.Item to support icon-less navigation child rows while unifying base component logic. No issues found.

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Auto-apply Compact
gitar auto-apply:on         
gitar display:verbose         

Was this helpful? React with 👍 / 👎 | Gitar

@sonarqube-next

sonarqube-next Bot commented Jul 2, 2026

Copy link
Copy Markdown

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