From 887204c65da25bbfb3edfacb7ee2e97c59255749 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 14 Apr 2026 13:33:48 +0200 Subject: [PATCH 1/6] feat: added realistic radio-group template --- .changeset/five-deer-join.md | 12 ++++ .../src/stories/templates/radio-group.a11y.ts | 31 ++++++++++ .../stories/templates/radio-group.stories.ts | 59 +++++++++++++++++++ 3 files changed, 102 insertions(+) create mode 100644 .changeset/five-deer-join.md create mode 100644 packages/docs/src/stories/templates/radio-group.a11y.ts create mode 100644 packages/docs/src/stories/templates/radio-group.stories.ts diff --git a/.changeset/five-deer-join.md b/.changeset/five-deer-join.md new file mode 100644 index 0000000000..0a2b8aa646 --- /dev/null +++ b/.changeset/five-deer-join.md @@ -0,0 +1,12 @@ +--- +'@solid-design-system/components': minor +'@solid-design-system/docs': minor +'@solid-design-system/eslint-plugin': minor +'@solid-design-system/placeholders': minor +'@solid-design-system/styles': minor +'@solid-design-system/theming': minor +'@solid-design-system/tokens': minor +'@solid-design-system/versioning': minor +--- + +Added realistic template for `sd-radio-group` diff --git a/packages/docs/src/stories/templates/radio-group.a11y.ts b/packages/docs/src/stories/templates/radio-group.a11y.ts new file mode 100644 index 0000000000..8714182dac --- /dev/null +++ b/packages/docs/src/stories/templates/radio-group.a11y.ts @@ -0,0 +1,31 @@ +import { test, expect } from '@playwright/test'; + +test('Radio Group with Help text', async ({ page }) => { + await page.goto( + 'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-radio-group--radio-group-with-help-text&viewMode=story' + ); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - region "Top right notifications" + - region "Bottom center notifications" + - group "Greeting *": + - radio "Mr." [checked] + - radio "Ms." + - radio "Non-binary" + `); +}); + +test('Radio Group with Error text', async ({ page }) => { + await page.goto( + 'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-radio-group--radio-group-with-error-text&viewMode=story' + ); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - region "Top right notifications" + - region "Bottom center notifications" + - group "What is your role/function? *": + - radio "Advisor in service" + - radio "Customer advisor" + - radio "Securities specialist/Wealth advisor" + - radio "Online branch employee" + - radio "Other" + `); +}); diff --git a/packages/docs/src/stories/templates/radio-group.stories.ts b/packages/docs/src/stories/templates/radio-group.stories.ts new file mode 100644 index 0000000000..5410eb73f3 --- /dev/null +++ b/packages/docs/src/stories/templates/radio-group.stories.ts @@ -0,0 +1,59 @@ +import '../../../../components/src/solid-components'; +import { html } from 'lit-html'; + +export default { + tags: ['!dev', 'autodocs'], + title: 'Templates/Radio Group', + parameters: { + chromatic: { disableSnapshot: true }, + design: { + type: 'figma', + url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2213-9389&t=5PpAC3TA3kYF7ufX-0' + } + } +}; + +export const radioGroupWithHelpText = { + name: 'Radio Group with Help text', + render: () => html` + + Mr. + Ms. + Non-binary + + ` +}; + +export const radioGroupWithErrorText = { + name: 'Radio Group with Error text', + render: () => html` + + Advisor in service + Customer advisor + Securities specialist/Wealth advisor + Online branch employee + Other + + + + ` +}; From 9d6880dcb2300da90433190cab28d4a39803a167 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 14 Apr 2026 13:34:55 +0200 Subject: [PATCH 2/6] chore: edit the changeset --- .changeset/five-deer-join.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/.changeset/five-deer-join.md b/.changeset/five-deer-join.md index 0a2b8aa646..f512c0fdaf 100644 --- a/.changeset/five-deer-join.md +++ b/.changeset/five-deer-join.md @@ -1,12 +1,6 @@ --- -'@solid-design-system/components': minor '@solid-design-system/docs': minor -'@solid-design-system/eslint-plugin': minor -'@solid-design-system/placeholders': minor -'@solid-design-system/styles': minor -'@solid-design-system/theming': minor -'@solid-design-system/tokens': minor -'@solid-design-system/versioning': minor --- -Added realistic template for `sd-radio-group` +Created `sd-radio-group` template and test + From 78495ee409c259b542c29e970f7327d25f06d077 Mon Sep 17 00:00:00 2001 From: Blagoja Mojsoski <55854229+balco0110@users.noreply.github.com> Date: Tue, 21 Apr 2026 08:21:38 +0200 Subject: [PATCH 3/6] Update .changeset/five-deer-join.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sérgio Fonseca <42741644+smfonseca@users.noreply.github.com> --- .changeset/five-deer-join.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/five-deer-join.md b/.changeset/five-deer-join.md index f512c0fdaf..4ee6f725b4 100644 --- a/.changeset/five-deer-join.md +++ b/.changeset/five-deer-join.md @@ -2,5 +2,5 @@ '@solid-design-system/docs': minor --- -Created `sd-radio-group` template and test +Created `sd-radio-group` templates with `help-text` and `invalid` state. From 6d10daaf6b00ee66897c2097700b6fc4f8a86c65 Mon Sep 17 00:00:00 2001 From: Blagoja Mojsoski <55854229+balco0110@users.noreply.github.com> Date: Tue, 21 Apr 2026 08:21:56 +0200 Subject: [PATCH 4/6] Apply suggestion from @smfonseca MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sérgio Fonseca <42741644+smfonseca@users.noreply.github.com> --- packages/docs/src/stories/templates/radio-group.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/stories/templates/radio-group.stories.ts b/packages/docs/src/stories/templates/radio-group.stories.ts index 5410eb73f3..78fab7684b 100644 --- a/packages/docs/src/stories/templates/radio-group.stories.ts +++ b/packages/docs/src/stories/templates/radio-group.stories.ts @@ -35,7 +35,7 @@ export const radioGroupWithErrorText = { name: 'Radio Group with Error text', render: () => html` Date: Tue, 21 Apr 2026 08:22:05 +0200 Subject: [PATCH 5/6] Apply suggestion from @smfonseca MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sérgio Fonseca <42741644+smfonseca@users.noreply.github.com> --- packages/docs/src/stories/templates/radio-group.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/stories/templates/radio-group.stories.ts b/packages/docs/src/stories/templates/radio-group.stories.ts index 78fab7684b..cceb1d6a3c 100644 --- a/packages/docs/src/stories/templates/radio-group.stories.ts +++ b/packages/docs/src/stories/templates/radio-group.stories.ts @@ -51,7 +51,7 @@ export const radioGroupWithErrorText = { From c8633bde42c3e4a6ce2d84f57768285f284ecb48 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 21 Apr 2026 09:52:14 +0200 Subject: [PATCH 6/6] chore: fixed the validation error and added the template link --- packages/docs/src/stories/components/radio-group.mdx | 3 +++ packages/docs/src/stories/templates/radio-group.stories.ts | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/packages/docs/src/stories/components/radio-group.mdx b/packages/docs/src/stories/components/radio-group.mdx index 594054825d..abd4ce925b 100644 --- a/packages/docs/src/stories/components/radio-group.mdx +++ b/packages/docs/src/stories/components/radio-group.mdx @@ -27,8 +27,11 @@ Used to group multiple input radio or radio buttons so they function as a single #### Related Templates [Radio Button Group](./?path=/docs/templates-radio-button-group--docs) + [Radio Group with Tooltip](./?path=/docs/templates-tooltip--docs) +[Radio Group](./?path=/docs/templates-radio-group--docs) + ### Common Use Cases - Present options in forms where only one selection is allowed (e.g., gender selection, payment methods). diff --git a/packages/docs/src/stories/templates/radio-group.stories.ts b/packages/docs/src/stories/templates/radio-group.stories.ts index cceb1d6a3c..f42b777952 100644 --- a/packages/docs/src/stories/templates/radio-group.stories.ts +++ b/packages/docs/src/stories/templates/radio-group.stories.ts @@ -54,6 +54,11 @@ export const radioGroupWithErrorText = { const radioGroup = document.querySelector('#radio-group-error'); radioGroup.setCustomValidity('Select an option to proceed.'); radioGroup.reportValidity(); + + radioGroup.addEventListener('sd-change', () => { + radioGroup.setCustomValidity(''); + radioGroup.reportValidity(); + }); ` };