Skip to content

feat(pds-dropdown-menu-item): add http-method and data attribute support#660

Closed
pixelflips wants to merge 3 commits intomainfrom
feat/dropdown-menu-item-http-method
Closed

feat(pds-dropdown-menu-item): add http-method and data attribute support#660
pixelflips wants to merge 3 commits intomainfrom
feat/dropdown-menu-item-http-method

Conversation

@pixelflips
Copy link
Member

@pixelflips pixelflips commented Feb 4, 2026

Problem

When using pds-dropdown for action columns in consuming applications (e.g., Rails DataTableComponent), developers need to support features like method: :delete, remote: true, and custom data attributes for confirmations and modals. Currently, this requires using raw link_to helpers which generate <a> tags directly in the dropdown menu.

This triggers console errors because pds-dropdown-menu strictly validates its children and only accepts pds-dropdown-menu-item and pds-dropdown-menu-separator elements:

Uncaught Error: pds-dropdown-menu only accepts pds-dropdown-menu-item and pds-dropdown-menu-separator elements

Additionally, due to Shadow DOM encapsulation, external JavaScript frameworks cannot intercept click events on elements inside the shadow root, making it impossible for framework-specific handlers to process non-GET requests.

Solution

Enhance pds-dropdown-menu-item to natively support HTTP methods and framework data attributes, allowing consuming applications to use the proper component instead of raw <a> tags.

New Props:

  • http-method: Specifies HTTP method (get, post, put, patch, delete) - handles form submission internally with CSRF token
  • turbo-frame: Sets target frame for SPA navigation
  • turbo: Controls SPA-style navigation behavior (boolean)

New Event:

  • pdsBeforeSubmit: Cancellable event emitted before form submission for non-GET methods, allowing custom handling (e.g., confirmation dialogs)

This is fully backward compatible - existing implementations are unaffected.

Fixes DSS-131

Type of change

  • New feature (non-breaking change which adds functionality)
  • This change requires a documentation update

How Has This Been Tested?

  • unit tests
  • tested manually

Test Configuration:

  • Pine versions: 3.15.3
  • OS: macOS
  • Browsers: Chrome

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes
  • Design has QA'ed and approved this PR

@netlify
Copy link

netlify bot commented Feb 4, 2026

Deploy Preview for pine-design-system ready!

Name Link
🔨 Latest commit 41a8059
🔍 Latest deploy log https://app.netlify.com/projects/pine-design-system/deploys/69839408f440d000089b26a4
😎 Deploy Preview https://deploy-preview-660--pine-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@github-actions github-actions bot added the package: core Changes have been made to the Core package label Feb 4, 2026
@pixelflips pixelflips changed the title Feat/dropdown menu item http method feat(pds-dropdown-menu-item): add http-method and data attribute support Feb 4, 2026
@pixelflips pixelflips self-assigned this Feb 4, 2026
@pixelflips pixelflips marked this pull request as ready for review February 4, 2026 19:15
@pixelflips
Copy link
Member Author

This is too heavy handed for now. Will close in favor or a different approach.

@pixelflips pixelflips closed this Feb 5, 2026
@pixelflips pixelflips deleted the feat/dropdown-menu-item-http-method branch February 5, 2026 01:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core Changes have been made to the Core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant