No prop to change Nav Item icon to ChevronDisclosureIcon

[johannaweintraub]

Hi DSYS folks,
Prady is trying to address some visual feedback from DSYS on Console.zen:
" Product menus are using the wrong expand/collapse icon (should use ChevronDisclosureIcon) "

However, he is saying there is no prop in the disclosure component to change this. Can you advise how you were able to use ChevronDisclosureIcon in the paste website nav? And what instruction you have to achieve this?

cc: @[email protected]

[richbachman]

Hi @johannaweintraub

For the navigation, we suggest using the Disclosure Primitive. We ended up going that route for the sidebar navigation on the Paste docs site. You can see a code example for that here: https://github.com/twilio-labs/paste/blob/main/packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx#L143

Let us know if you need anything else.

[johannaweintraub]

Thank you!

[johannaweintraub]

@katieporter adding you to this conversation since it was called out in DSYS feedback to change the disclosure icon in the nav.

Looks like because the console zen nav was built with the standard disclosure component, it would be quite a big job to refactor it with the disclosure primitive in order to change the icon. Is it possible to add a prop to the disclosure component in order to allow this change more easily? If not, we may not be able to change this.

In addition, some of the padding changes requested would require a prop to change default padding.

[pradyuk]

We need the icon prop and min-height prop for the disclosure heading component. The min height prop is needed for the disclosure text to wrap, attaching a screenshot for the same.

These are blockers for our pilot so would appreciate it if we can get the props added asap. Adding @cjcodes @johannaweintraub

[cjcodes]

This conversation is making me wonder if we should consider navigation primitives. Given that we expect to be building many more systems in the future that perhaps will have the same navigation design, it seems like that'd be a good thing to get onto the roadmap?

[SiTaggart]

Hi folks

Unfortunately we won't be adding any props to the Disclosure that modifies it's style. It's simply not designed for that purpose.

As @richbachman correctly suggested, the Disclosure Primitive is provided specifically for when you need styles that don't match those that are provided by the styled Disclosure Component. We even use it in our own navigation on the Paste website.

Please use the Disclosure Primitive to compose this UI.

On the subject of navigation primitives/patterns/components, I've long assumed we'd build something for a common sidebar and masthead as part of the Design System. After all, Paste is the "way you build Twilio products" and our goal is to unify our products around a single design language. It makes sense. I'm just not sure in what format that comes in yet, or when we'll get to it. But I would like us to do it.

[johannaweintraub]

Ok, thanks. We will have to see what is involved with refactoring our code to use the primitive since it has since been built with the component.