From d4d90dafdc7318afd176728fc1dd2b8575a1347c Mon Sep 17 00:00:00 2001 From: mariohamann Date: Thu, 23 Apr 2026 10:37:01 +0200 Subject: [PATCH 1/5] fix: add 'icon' to components for versioning in make-versioning script --- packages/styles/package.json | 1 + packages/styles/scripts/make-versioning.js | 9 ++++++- packages/styles/scripts/test.js | 28 ++++++++++++++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 packages/styles/scripts/test.js diff --git a/packages/styles/package.json b/packages/styles/package.json index e65b56c646..0e81a5f35e 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -9,6 +9,7 @@ "build": "node scripts/build.js", "verify": "pnpm build", "plop": "plop --plopfile scripts/plop/plopfile.js", + "test": "pnpm build && node --test scripts/test.js", "postversion": "pnpm build" }, "publishConfig": { diff --git a/packages/styles/scripts/make-versioning.js b/packages/styles/scripts/make-versioning.js index bde3ea27b1..077e50ce4b 100644 --- a/packages/styles/scripts/make-versioning.js +++ b/packages/styles/scripts/make-versioning.js @@ -10,9 +10,16 @@ import { globbySync } from 'globby'; import { versionComponents } from '@solid-design-system/versioning'; -const components = globbySync('./src/**/*.css') +let components = globbySync('./src/**/*.css') .map(file => file.split('/').pop().replace('.css', '')) .filter(file => file !== 'index'); +// sd-icon is used as a descendant selector inside styles (e.g. sd-status-badge) +// but has no dedicated CSS file in this package, so it must be added explicitly. +// +// If there are more elements needed in the future, we should make it dynamically +// based on the components package. +components = [...components, 'icon']; + versionComponents({ source: './cdn', destination: './cdn-versioned', components }); versionComponents({ source: './dist', destination: './dist-versioned', components }); diff --git a/packages/styles/scripts/test.js b/packages/styles/scripts/test.js new file mode 100644 index 0000000000..248082c872 --- /dev/null +++ b/packages/styles/scripts/test.js @@ -0,0 +1,28 @@ +import { test } from 'node:test'; +import assert from 'node:assert'; +import fs from 'fs'; +import path from 'path'; + +const distVersioned = path.resolve('./dist-versioned/solid-styles.css'); + +test('dist-versioned should exist', () => { + assert.ok(fs.existsSync(distVersioned), 'dist-versioned/solid-styles.css does not exist — run pnpm build first'); +}); + +test('sd-icon element selector should be versioned inside sd-status-badge rules', () => { + const css = fs.readFileSync(distVersioned, 'utf-8'); + + // Unversioned sd-icon must not appear as a descendant selector (only allowed in --docs URLs etc.) + const unversionedIconSelector = /\.sd-[\w-]+ sd-icon[\s{,]/; + assert.ok( + !unversionedIconSelector.test(css), + 'Found unversioned "sd-icon" as a CSS descendant selector in dist-versioned output' + ); + + // Versioned sd-icon must appear (e.g. sd-6-15-1-icon) + const versionedIconSelector = /sd-\d+-\d+-\d+-icon/; + assert.ok( + versionedIconSelector.test(css), + 'Expected to find a versioned "sd--icon" selector in dist-versioned output' + ); +}); From 629b91351ae72c970407c5e52c438d0c2d632208 Mon Sep 17 00:00:00 2001 From: mariohamann Date: Thu, 23 Apr 2026 10:52:49 +0200 Subject: [PATCH 2/5] fix: add changeset and improve changeset guidelines --- .changeset/fix-versioned-icon-in-styles.md | 5 ++ CONTRIBUTING.md | 74 +++++++++++++++++++++- 2 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 .changeset/fix-versioned-icon-in-styles.md diff --git a/.changeset/fix-versioned-icon-in-styles.md b/.changeset/fix-versioned-icon-in-styles.md new file mode 100644 index 0000000000..1a512affa8 --- /dev/null +++ b/.changeset/fix-versioned-icon-in-styles.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/styles': patch +--- + +Fixed `sd-icon` not being versioned when used as a descendant selector inside style components (e.g. `sd-status-badge`). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 170615e457..cb20fbd711 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -26,6 +26,7 @@ - [Feature-Check-In Meeting to Prepare Pull Requests](#feature-check-in-meeting-to-prepare-pull-requests) - [Assignees and Reviewers](#assignees-and-reviewers) - [Review Comments](#review-comments) + - [Pull Request Status](#pull-request-status) - [Changesets](#changesets) - [Special commands/suffixes](#special-commandssuffixes) - [Squash and Merge Your Changes](#squash-and-merge-your-changes) @@ -240,9 +241,78 @@ To create a changeset you should navigate to the root of the project and execute Once this is done, a temporary changeset file is created on the `.changeset` folder. You can edit this file to include more detailed information about the work done. Afterwards, this file should be committed together with the remaining changes. When the pull request is created, the changesets bot will analyse the files and inform if a changeset is included or not. If you forgot to include one, you can do it and the bot will pick it up. -In case your changes are not meant to trigger a release or version bump, you can commit an empty changeset, created with the command `pnpm changeset --empty`. +In case your changes are not meant to trigger a release or version bump, you can commit an empty changeset, created with the command `pnpm changeset --empty`. They are automatically created in `.changeset`, get a random name like `happy-trees-fall.md` and will be removed automatically after merging to `main`. -Please make sure to always provide detailed information in the changeset since this will be present in the package changelog. +Please make sure to always provide useful information in the changeset since this will be present in the package changelog. + +Changesets should always focus the value for consumers of the Design System, less how things were done. For example, instead of writing "Added a new function to handle the click event", you should write "Added a click event to the button component". This way, the changeset is more focused on the value for the consumer and less on the technical details of how it was implemented. + +**Don't:** + +```md +--- +'@solid-design-system/styles': patch +--- + +Fixes and improvements for multi-theming: + +- `sd-container`: fixed the triangle variable by changing the selector to target the correct element for multi-theming +- `sd-copyright`: fixed shadow styling by switching from `box-shadow` to `text-shadow` and adjusting the values +- `sd-footnotes`: fixed text colors by removing an unnecessary selector and adjusting the color values +``` + +**Do:** + +```md +--- +'@solid-design-system/styles': patch +--- + +Fixes and improvements for multi-theming: + +- `sd-container`: fixed the triangle variable for multi-theming +- `sd-copyright`: fixed shadow styling +- `sd-footnotes`: fixed text colors +``` + +Split changesets into multiple files if there are multiple changes that are not related to each other. + +**Don't:** + +```md +--- +'@solid-design-system/components': minor +'@solid-design-system/docs': minor +--- + +Extended `sd-brandshape` with new transparent variants to be used on image backgrounds: + +- `primary|80` +- `white|80` + +Added new templates showcasing usage of transparent variant `primary|80` and variant `image` together with `sd-copyright`. +``` + +**Do:** + +```md +--- +'@solid-design-system/components': minor +--- + +Extended `sd-brandshape` with new transparent variants to be used on image backgrounds: + +- `primary|80` +- `white|80` +``` + +```md +--- +'@solid-design-system/docs': minor +--- + +Added new templates showcasing usage of transparent variant `primary|80` and variant `image` together with `sd-copyright`. +``` #### Special commands/suffixes From 0ff6d575dd6ec3484829d99db9f217c2728ba7d2 Mon Sep 17 00:00:00 2001 From: mariohamann Date: Thu, 23 Apr 2026 10:58:08 +0200 Subject: [PATCH 3/5] fix: update verify script to run tests instead of build --- packages/styles/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/package.json b/packages/styles/package.json index 0e81a5f35e..bb801c030c 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -7,7 +7,7 @@ "scripts": { "start": "pnpm build", "build": "node scripts/build.js", - "verify": "pnpm build", + "verify": "pnpm test", "plop": "plop --plopfile scripts/plop/plopfile.js", "test": "pnpm build && node --test scripts/test.js", "postversion": "pnpm build" From 8ef648144911c76a8f85039c05b5218047179106 Mon Sep 17 00:00:00 2001 From: auroraVasconcelos Date: Sat, 25 Apr 2026 08:33:26 +0100 Subject: [PATCH 4/5] chore: add dependency update changeset to documentation --- CONTRIBUTING.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index cb20fbd711..39c4aa3d46 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -247,6 +247,8 @@ Please make sure to always provide useful information in the changeset since thi Changesets should always focus the value for consumers of the Design System, less how things were done. For example, instead of writing "Added a new function to handle the click event", you should write "Added a click event to the button component". This way, the changeset is more focused on the value for the consumer and less on the technical details of how it was implemented. +When the changeset corresponds to a **dependency update** task, the entry should consist of a single line: "Dependencies updated. For further details, please refer to the associated Pull Request". + **Don't:** ```md From 07a2cd1882c56771bab835292341b5716553606c Mon Sep 17 00:00:00 2001 From: Mario Hamann Date: Wed, 29 Apr 2026 10:04:52 +0200 Subject: [PATCH 5/5] Update CONTRIBUTING.md --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 39c4aa3d46..81f03f4d3a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -313,7 +313,7 @@ Extended `sd-brandshape` with new transparent variants to be used on image backg '@solid-design-system/docs': minor --- -Added new templates showcasing usage of transparent variant `primary|80` and variant `image` together with `sd-copyright`. +Added new templates showcasing usage new variants of `sd-brandshape` together with images and `sd-copyright`. ``` #### Special commands/suffixes