SideNavigation: SideNavigationGroupItem with link

[diyorbek]

Summary

GroupItem subcomponent now can have links. The example is added in the Subcomponent composability section of SideNaivgation docs page.

What changed?

[!NOTE] Refactored and moved things around to make the implementation less DRY.

SideNavigation.Group and SideNavigation.NestedGroup now have following new props:

• href?: string
• active?: 'page' | 'section'
• onClick?: ClickEventHandler

Links

• Jira
• Figma

Checklist

• [ ] Added unit tests
• [ ] Added documentation + accessibility tests
• [ ] Verified accessibility: keyboard & screen reader interaction
• [ ] Checked dark mode, responsiveness, and right-to-left support
• [ ] Checked stakeholder feedback (e.g. Gestalt designers, relevant feature teams)

[netlify[bot]]

✅ Deploy Preview for gestalt ready!

Name	Link
🔨 Latest commit	40c0bc8bdc93e0f0fd3a3b9b831c454efa5b77be
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/6682c8e30bae75000824148b
😎 Deploy Preview	https://deploy-preview-3642--gestalt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[AlbertCarreras]

I think this PR is doing too much.

You're changing several components APIs beyond your SideNavigation changes.

I'd say we need onMouseEnter, onMouseLeave in all components if we decide we want to make them accessible, But All components not just 1.

Here we are opening the door to something that only TapArea was doing.

I'd suggest,

1. Going TapArea rather than changing IconButton
2. Proposing consistency onMouseEnter, onMouseLeave props for all Button like components... But it's a bigger discussion

[diyorbek]

@hectoid @AlbertCarreras I made a change that when nested item is selected, ots parent will always have border. This is how i understood the specs. If it's not something intended, i'll remove

[AlbertCarreras]

@hectoid @AlbertCarreras I made a change that when nested item is selected, ots parent will always have border. This is how i understood the specs. If it's not something intended, i'll remove

This prob a design spec. Whatever Hector says.

[AlbertCarreras]

@hectoid @AlbertCarreras I made a change that when nested item is selected, ots parent will always have border. This is how i understood the specs. If it's not something intended, i'll remove

This prob a design spec. Whatever Hector says.

I think for simplicity I'd leave as it was. If you play around, there's time you can get 3 selected items... not sure what's going on.

[AlbertCarreras]

Can we create an example to just this? I cant test it on Subcomponent compoasabiltiy, dont see any link behavior.

[AlbertCarreras]

Can you document in description chnages in API?

We are adding 3 props? it's hard to track among the whole changes.

[hectoid]

@hectoid @AlbertCarreras I made a change that when nested item is selected, ots parent will always have border. This is how i understood the specs. If it's not something intended, i'll remove

very nice work @diyorbek ! Sorry if this wasn't clear in the spec, but:

• For the groups that have a parent link, the parent does not need the border; it will look like the children with the reversed background when selected, and no background or border when unselected.
• For groups that don't have a parent link, then it needs the border when selected

[hectoid]

Examples look good! One tweak to the subgroup with links session if possible. can be a follow up ticket instead depending on time.

When the entire link group is collapsed, show the parent link as selected with the border. The way we do in the collapsed icon-only version.

Otherwise, users lose track of where in the nav they are:

Sorry, you had the border selected before and I wasn't clear. Continue to show it when it's completely collapsed.

[hectoid]

hey again @diyorbek ! sorry, a couple of nits/questions.

1. I'm seeing the icon shift slightly when selecting the parent link (see attached)
2. Is there a reason why the Group Display example doesn't show any selected states for the parent or children? https://deploy-preview-3642--gestalt.netlify.app/web/sidenavigation#Group-display

https://github.com/pinterest/gestalt/assets/96082362/39c23711-3814-4970-9548-93d2a1999496

[diyorbek]

@hectoid I have been planning to make follow up PR for icon shift and other nits I found. This is PR is already big so I didn't want to rush it. Speaking of rushing, this PR is hanging for 2 weeks :D

Regarding the examples, none of the examples work if you pay attention. Except the ones I created (Collapsible, Group link). If we want to fix the examples, we should consider that is not a small work. I would actually go ahead and fix all of the component examples in the docs site if I had the capacity. Because, honestly, they are very, very poorly done.

[hectoid]

@diyorbek from my end, this is approved! sorry, I can never find where to approve on github.