Skip to content

Conversation

@SpyZzey
Copy link
Member

@SpyZzey SpyZzey commented Jan 5, 2026

Description

This pull request introduces support for custom rendering of dropdown items in the ButtonDropdown component by adding a new renderItem prop. 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?

  • Manual testing
  • Unit testing
Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov
Copy link

codecov bot commented Jan 5, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.16%. Comparing base (0051fe9) to head (71eab9b).
⚠️ Report is 1 commits behind head on main.

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.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link

Copilot AI left a 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 renderItem prop 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-styling CSS classes to remove default styling when custom rendering is used
  • Added index prop 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.

@SpyZzey SpyZzey removed the request for review from gethinwebster January 20, 2026 10:59
@SpyZzey SpyZzey marked this pull request as draft January 20, 2026 10:59
@SpyZzey SpyZzey requested a review from Copilot January 20, 2026 11:36
Copy link

Copilot AI left a 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.

This comment was marked as off-topic.

@SpyZzey SpyZzey marked this pull request as ready for review January 20, 2026 15:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants