[Platforms] Implement 3rd level/tree view navigation in Carbon labs/React

[alisonjoseph]

Design issue #18292

Tasks

• Copy over other components that will need to be extended from Carbon React shell https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/UIShell into Carbon labs.
• Extend components in @carbon/labs in React to support 3rd level of nesting
• Only needs to support no icon at level 2 designs for now
• Should not introduce any breaking changes to current components
• Confirm keyboard interactions are accessible with Gower during CAG call
• Needs to follow ARIA pattern for treeview for 3rd level of navigation https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/
• Create new example Story with just isolated SideNav with 3rd level
• Update default story to include 3rd level
• Update example for Stackblitz with 3rd level

Questions

• Do we create new components or extend current components Extend current

Design Spec

Figma file

Note, there are two versions. The second adds a icon to level 2 to create more recognition with the side rail

No icon at level 2

[mattrosno]

Reference, but no direct dependency on TreeView, which isn't currently a WC.

[mattrosno]

@alisonjoseph I believe that blocker is wrong - is flyout blocking this issue? I believe no. Flyout is used with the side navigation, not in the header nav.

[mattrosno]

@IgnacioBecerra per discussion in standup today, if adding the level 2 icon is becoming more than a couple hour effort, let's chat with @alisonjoseph and split that out into a separate issue. Level 2 icons will likely not be needed for the upcoming 2/11/25 demos.