feat(DropdownMenu): Adds `titleElement` to `DropdownMenu`

[TheMooseman]

Summary

Add's titleElement to props of DropdownMenu so users can add custom JSX elements to the title area above the autocomplete.

DNA Github issue: #839 Allow the title prop to accept a JSX element or a string for the dropdown menu so I can nest buttons or icons inside of it

Checklist

• [x] Default Story in Storybook
• [x] LivePreview Story in Storybook
• [x] Test Story in Storybook
• [x] Tests written
• [x] Variables from defaultTheme.ts used wherever possible
• [x] If updating an existing component, depreciate flag has been used where necessary
• [ ] Chromatic build verified by @chanzuckerberg/sds-design

[masoudmanson]

Thank you so much for the great PR, @TheMooseman!

I’d like to discuss this feature with the team in our meeting tomorrow. Could you share the use case you had in mind? Do you need to place an icon next to the title, or are you looking to change the font style? We have a few other components with similar title/subtitle sections, and I’d like to explore whether it makes sense to implement the same approach in those cases.

Again, I really appreciate your continuous contributions and valuable feedback 🎉😍✨

[TheMooseman]

Happy to help out, @masoudmanson!

The use-case for me was to add a button to the right of the title, which I added to the storybook if you wanted a visual explanation. Adding a JSX element argument seemed like the least invasive way to support a button, but I could imagine being able to put icons next to the title would be a nice-to-have as well. If there's a better way to implement button or general JSX support for the title definitely let me know, happy to revise this PR to fit.

[masoudmanson]

Hey @TheMooseman,

After discussing this feature internally, the team was aligned on the idea of offering more flexibility with the title component. However, the design team expressed some concerns about altering the default title styles, as it might impact overall consistency across the system.

We do have a similar pattern recently introduced in some components, like the Dialog component, which supports slots for custom elements. Here’s a screenshot showcasing the available slots on the Dialog:

Would it make sense to keep the current title as is and instead introduce a component slot either beside or above it? Since the title prop isn’t required, you could omit the default SDS title and use the new slot for your custom design. This approach would provide the flexibility you’re aiming for without affecting the default styles.

Please let me know what you think! The next step would be to check with @clarsen-czi and @hthomas-czi for design specs before we finalize the PR for merging.

Once again, thank you so much for your contribution, it really means a lot to us! 😊

[TheMooseman]

@masoudmanson I definitely think a separate prop for it works well, the PR has a new prop titleElement that accepts JSX that gets used instead of title if it's passed in. I think it should be ready for a look from @hthomas-czi and @clarsen-czi, happy to make adjustments if there's something we'd like renamed or done differently!

[masoudmanson]

Hi @TheMooseman,

After discussing with the design team, we’ve decided to go with a component slot to the right of the title element. This approach will help us keep the default title intact and preserve its styles.

I have a quick question about the slot: will it mainly be for buttons, or might you need other types of components there as well? If it’s just for buttons, we could add an optional SDS Button to the right of the title. But if you need more flexibility, we should keep it open for any React nodes.

Let me know what you think!

[TheMooseman]

@masoudmanson That sounds good, I think more flexibility would be best, so keeping it open for any JSX would be my preference. Right now our only use-case is a button but I could imagine wanting toggle buttons, a dropdown, icons, or some other specialty flavor thing like a colored tag. Are there specifics that your team wants to implement or would you like me to update the code so that the title and the new element to the right of the title show up?

[masoudmanson]

@masoudmanson That sounds good, I think more flexibility would be best, so keeping it open for any JSX would be my preference. Right now our only use-case is a button but I could imagine wanting toggle buttons, a dropdown, icons, or some other specialty flavor thing like a colored tag. Are there specifics that your team wants to implement or would you like me to update the code so that the title and the new element to the right of the title show up?

Thanks, that sounds perfect! We don’t have any additional specifics on our end, so it would be great if you could update the code to add a new JSX element to the right of the title. You can name it headerComponentSlot. Here’s a simple design showing how the slot will appear next to the title:

[TheMooseman]

Alright, @masoudmanson I think this should be good to go for review. The new headerComponentSlot is just placed after the title and seems pretty happy at various sizes!

[masoudmanson]

Hey @TheMooseman,

Thanks for the great work on this PR! After reviewing it with our design team, we made a few minor adjustments that I’d like to push directly to your PR if that’s alright with you. Let me know if you’re okay with that, and once I have your go-ahead, I’ll push the changes and we can get this merged and released today. 🫠🙂

[TheMooseman]

@masoudmanson Go for it, glad I was able to help!

[masoudmanson]

09/18 Release

:computer: Coded Library (@czi-sds/components@21.2.0)

:gift: New Features:

• Added new headerComponentSlot prop to DropdownMenu component (Demo)

:bug: Bug Fixes

• Added sdsStyle to doNotForwardProps on ButtonIcon