-
Notifications
You must be signed in to change notification settings - Fork 211
feat: Add custom item renderer for button dropdown #4156
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
061392a to
a8b031b
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4156 +/- ##
=======================================
Coverage 97.15% 97.16%
=======================================
Files 878 878
Lines 25719 25750 +31
Branches 9299 9325 +26
=======================================
+ Hits 24988 25019 +31
+ Misses 725 684 -41
- Partials 6 47 +41 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
232623d to
b28f675
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This pull request adds custom rendering support for dropdown items in the ButtonDropdown component through a new renderItem prop. This feature allows consumers to provide custom render functions for all item types (actions, checkboxes, and groups), supporting both desktop and mobile variants.
Changes:
- Added
renderItemprop to ButtonDropdown component with comprehensive TypeScript type definitions for different item types - Implemented prop threading through the component hierarchy to support custom rendering at all levels
- Added
no-content-stylingCSS classes to remove default styling when custom rendering is used - Added
indexprop to track item positions for custom renderers - Included comprehensive test coverage and demo page
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/button-dropdown/interfaces.ts | Added TypeScript interfaces for RenderItem types and ItemRenderer function signature |
| src/button-dropdown/index.tsx | Added renderItem prop to component entry point |
| src/button-dropdown/internal.tsx | Threaded renderItem prop through internal implementation |
| src/button-dropdown/items-list.tsx | Added index and renderItem/parentProps prop threading to list rendering |
| src/button-dropdown/item-element/index.tsx | Implemented custom rendering logic for individual items with proper prop construction |
| src/button-dropdown/item-element/styles.scss | Added no-content-styling class to remove default item padding/styling |
| src/button-dropdown/category-elements/*.tsx | Implemented custom rendering for all category element variants (standard, expandable, mobile) |
| src/button-dropdown/category-elements/styles.scss | Added no-content-styling class for category headers |
| src/button-dropdown/tests/render-item.test.tsx | Comprehensive test suite covering all item types and custom rendering scenarios |
| src/button-dropdown/tests/mobile-expandable-category.test.tsx | Added test for mobile expandable category custom rendering |
| pages/button-dropdown/custom-render-item.page.tsx | Demo page showing usage examples |
| src/tests/snapshot-tests/snapshots/documenter.test.ts.snap | Updated snapshot with new prop documentation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/button-dropdown/category-elements/mobile-expandable-category-element.tsx
Outdated
Show resolved
Hide resolved
src/button-dropdown/category-elements/expandable-category-element.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
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 14 out of 14 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
5f9fd89 to
82e290d
Compare
82e290d to
76446c1
Compare
…render item dev page
Description
This pull request introduces support for custom rendering of dropdown items in the
ButtonDropdowncomponent by adding a newrenderItemprop. This allows consumers to provide a custom function to render dropdown options, including group headers and checkboxes, for both desktop and mobile variants. The implementation ensures that custom content replaces the default rendering and removes styling.Related links, issue #, if available: [ZgQTAB1aCSIF], [aFSEAgRVeHSz], [D349419275]
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.