Skip to content

Conversation

@pixelflips
Copy link
Member

Description

Added a CSS part attribute to the icon element in the pds-accordion component to allow external styling via the ::part() pseudo-element.

This change exposes the accordion's chevron icon as accordion-icon, enabling developers to customize the icon's appearance from outside the shadow DOM using standard CSS parts syntax.

The component now exposes three parts for styling:

  • accordion-button - The summary/trigger button
  • accordion-body - The expandable content area
  • accordion-icon - The chevron icon (newly added)

Fixes: https://kajabi.atlassian.net/browse/DSS-1566

Type of change

  • New feature (non-breaking change which adds functionality)

How Has This Been Tested?

  • unit tests - Updated all existing unit test snapshots to include the new part="accordion-icon" attribute
  • tested manually

Test Configuration:

  • Pine versions:
  • OS:
  • Browsers:
  • Screen readers:
  • Misc:

Checklist:

If not applicable, leave options unchecked.

  • 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

@pixelflips pixelflips self-assigned this Oct 29, 2025
@netlify
Copy link

netlify bot commented Oct 29, 2025

Deploy Preview for pine-design-system ready!

Name Link
🔨 Latest commit 3d3581b
🔍 Latest deploy log https://app.netlify.com/projects/pine-design-system/deploys/690272f848beaa0008f6d64e
😎 Deploy Preview https://deploy-preview-572--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 bug Something isn't working package: core Changes have been made to the Core package labels Oct 29, 2025
@pixelflips pixelflips marked this pull request as ready for review October 29, 2025 20:18
Copy link
Member

@teenwolfblitzer teenwolfblitzer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Looks good, thanks for this!

@pixelflips pixelflips merged commit c95c21c into main Oct 30, 2025
24 of 27 checks passed
@pixelflips pixelflips deleted the fix/accordion-icon-part branch October 30, 2025 18:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working package: core Changes have been made to the Core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants