Skip to content

Conversation

@alionazherdetska
Copy link
Contributor

@alionazherdetska alionazherdetska commented Dec 5, 2025

📄 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

  • Added new ESLint rule stencil-component-part-naming to enforce post- 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

🚀 Demo


🔮 Design review

  • Design review done
  • No design review needed

📝 Checklist

  • ✅ My code follows the style guidelines of this project
  • 🛠️ I have performed a self-review of my own code
  • 📄 I have made corresponding changes to the documentation
  • ⚠️ My changes generate no new warnings or errors
  • 🧪 I have added tests that prove my fix is effective or that my feature works
  • ✔️ New and existing unit tests pass locally with my changes

Copilot AI review requested due to automatic review settings December 5, 2025 18:56
@alionazherdetska alionazherdetska requested review from a team as code owners December 5, 2025 18:56
@alionazherdetska alionazherdetska linked an issue Dec 5, 2025 that may be closed by this pull request
5 tasks
@changeset-bot
Copy link

changeset-bot bot commented Dec 5, 2025

🦋 Changeset detected

Latest commit: b759b4a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages
Name Type
@swisspost/design-system-components Major
@swisspost/design-system-documentation Patch
@swisspost/design-system-components-angular-workspace Major
@swisspost/design-system-components-react Major
@swisspost/design-system-nextjs-integration Major
@swisspost/design-system-components-angular Major
@swisspost/design-system-changelog-github Major
@swisspost/design-system-eslint Major
@swisspost/design-system-icons Major
@swisspost/internet-header Major
@swisspost/design-system-styles Major
@swisspost/design-system-styles-primeng-workspace Major
@swisspost/design-system-styles-primeng Major
@swisspost/design-system-tokens Major

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

@alionazherdetska alionazherdetska changed the title feat(components, docs, eslint): update component part names to use post- prefix feat(components, docs, eslint): update component ::part names to use post- prefix Dec 5, 2025
@swisspost-bot
Copy link
Contributor

swisspost-bot commented Dec 5, 2025

Related Previews

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 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-naming to enforce post- prefix on all Shadow Parts
  • Renamed Shadow Parts in components: menupost-menu, tabspost-tabs, contentpost-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-eslint package. 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 (likely minor since 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)`.

@sonarqubecloud
Copy link

sonarqubecloud bot commented Dec 5, 2025

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.

Update the component part names

3 participants