-
Notifications
You must be signed in to change notification settings - Fork 21
feat(components, docs, eslint): update component ::part names to use post- prefix
#6806
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
🦋 Changeset detectedLatest commit: b759b4a The changes in this PR will be included in the next version bump. This PR includes changesets to release 14 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
post- prefix::part names to use post- prefix
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 PR enforces a new naming convention requiring all CSS Shadow Parts in Stencil components to use the post- prefix to prevent naming collisions with third-party styling. The changes include renaming existing Shadow Parts in post-menu and post-tabs components, implementing a new ESLint rule to enforce this convention going forward, and updating all associated documentation, tests, and styling references.
Key Changes
- Added new ESLint rule
stencil-component-part-namingto enforcepost-prefix on all Shadow Parts - Renamed Shadow Parts in components:
menu→post-menu,tabs→post-tabs,content→post-tabs-content - Updated all references across components, documentation, tests, and styles
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/eslint/src/rules/stencil-component-part-naming.ts | New ESLint rule implementation to enforce post- prefix on Shadow Parts |
| packages/eslint/test/rules/stencil-component-part-naming.spec.ts | Comprehensive test coverage for the new ESLint rule |
| packages/eslint/src/rules/index.ts | Exports the new ESLint rule |
| packages/eslint/src/configs/stencil/recommended.ts | Enables the new rule in recommended configuration |
| packages/components/src/components/post-tabs/post-tabs.tsx | Updates Shadow Part names and JSDoc comments for post-tabs component |
| packages/components/src/components/post-menu/post-menu.tsx | Updates Shadow Part names and JSDoc comments for post-menu component |
| packages/components/src/components/post-menu/post-menu.scss | Updates CSS selector to target renamed part |
| packages/components/src/components/post-language-menu/post-language-menu.scss | Updates CSS selector to target renamed part |
| packages/documentation/src/stories/components/tabs/tabs.stories.ts | Updates Storybook story to reflect renamed parts |
| packages/documentation/.storybook/styles/components/tabs.scss | Updates documentation-specific styling for renamed parts |
| packages/components/cypress/e2e/tabs.cy.ts | Updates E2E tests to reference renamed parts |
| .changeset/purple-carpets-laugh.md | Changeset documenting post-menu breaking changes |
| .changeset/dark-monkeys-shave.md | Changeset documenting post-tabs breaking changes |
Comments suppressed due to low confidence (1)
.changeset/purple-carpets-laugh.md:9
- A changeset entry is missing for the
@swisspost/design-system-eslintpackage. Since a new ESLint rule has been added (stencil-component-part-naming), a changeset should be created for this package with an appropriate version bump (likelyminorsince it's a new feature).
---
'@swisspost/design-system-components': major
'@swisspost/design-system-documentation': patch
---
Renamed `post-menu` parts to avoid naming confusions with other components.
- `::part(menu)` is now `::part(post-menu)`.
|



📄 Description
This PR enforces a new naming convention requiring all CSS Shadow Parts in Stencil components to use the
post-prefix to prevent naming collisions with third-party styling.Key Changes
🚀 Demo
🔮 Design review
📝 Checklist