chore(docs, styles): add `.form-check-sm` class to htmlcss radio button and add size variant on stories #6805

bucknatt · 2025-12-05T15:23:25Z

📄 Description

The CSS .form-check-sm class is added to the Form Radio Button component. The variant Size has been added on the component's documentation.

🚀 Demo

For Radio Button

For Radio Group

🔮 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

…`.form-check-sm` css class to styles

changeset-bot · 2025-12-05T15:23:30Z

🦋 Changeset detected

Latest commit: 2f3add2

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-documentation	Minor
@swisspost/design-system-styles	Minor
@swisspost/design-system-components-angular-workspace	Minor
@swisspost/design-system-components	Minor
@swisspost/internet-header	Minor
@swisspost/design-system-nextjs-integration	Minor
@swisspost/design-system-styles-primeng-workspace	Minor
@swisspost/design-system-styles-primeng	Minor
@swisspost/design-system-components-react	Minor
@swisspost/design-system-components-angular	Minor
@swisspost/design-system-changelog-github	Minor
@swisspost/design-system-eslint	Minor
@swisspost/design-system-icons	Minor
@swisspost/design-system-tokens	Minor

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

swisspost-bot · 2025-12-05T15:28:06Z

Related Previews

https://preview-6805--swisspost-design-system-next.netlify.app?devModeEnabled=true

leagrdv

You can see in the screenshot (desktop) that the small version has the radio misaligned with the text.

You can go through the checklist of the ticket to make sure you've not forgotten any task. The last element "Design review" should be done by a designer: Once you've reviewed the design yourself to make sure what you've implemented looks the same as on figma, you can contact Sandra and ask her to review the small version of the component.

packages/styles/src/components/radio-button.scss

…cal (default) and horizontal (inline)

…zontal default, vertical default, horizontal small, vertical small)

…ontal

sandra-post · 2025-12-10T13:27:51Z

Design Review
All looks good, except font size:

IS: 16 / 14 / 14
SHOULD: 14 / 14 / 14

I see that this has been missed to tokenize. I will therefore add the missing token.

…ment in #6805

packages/documentation/src/stories/components/radio/radio.stories.ts

…ecure randomness

Change of reviewer

packages/documentation/src/stories/components/radio/radio.snapshot.stories.ts

leagrdv · 2025-12-12T14:46:46Z

packages/styles/src/components/radio-button.scss

+fieldset .form-check-sm:not(.form-switch, .form-check-inline, :last-of-type) {
+  display: flex;
+  align-items: center;
+  margin-block-end: tokens.get('radio-button-small-group-items-gap-block');


If you inspect the CSS, you can see that the margin-bottom set on the .form-check in the file _form-check.scss is overriding the margin-block-end you've defined for the .form-check-sm, meaning the gap between small elements within a fieldset is not correct.

When applying a property on an element, it's always good to use the inspector to make sure it is correctly applied, especially when the difference it brings might be hard to see.

packages/documentation/src/stories/components/radio/radio.stories.ts

… counter for radio snapshots

sonarqubecloud · 2025-12-23T09:19:58Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Nattaya Buck added 2 commits December 5, 2025 15:24

chore(docs, styles): added size variant in form radio button stories

aebf926

chore(docs, styles): added size: 'null' in args for stories, added …

ee055d9

…`.form-check-sm` css class to styles

bucknatt requested review from a team as code owners December 5, 2025 15:23

bucknatt requested a review from gfellerph December 5, 2025 15:23

bucknatt linked an issue Dec 5, 2025 that may be closed by this pull request

[html/css] Radio Button (small) #6290

Open

4 tasks

added changeset

d706405

Nattaya Buck added 3 commits December 5, 2025 16:31

chore(docs, styles): fixed stylelint error

2180e38

chore(docs, styles): fixed stylelint error

b82751a

chore(docs, styles): fixed stylelint error-3

12425ba

leagrdv requested review from leagrdv and removed request for gfellerph December 8, 2025 08:55

leagrdv previously requested changes Dec 8, 2025

View reviewed changes

packages/styles/src/components/radio-button.scss Show resolved Hide resolved

bucknatt added 9 commits December 9, 2025 10:32

feat(styles): added grouped radio button gap in fieldset CSS class

789dc7a

feat(styles): added CSS class to align label with radio

dd6efcc

feat(styles): fixed label alignment with radio button for group verti…

62900e7

…cal (default) and horizontal (inline)

feat(styles): fixed gap to be like in figma for all radio group (hori…

37d33c9

…zontal default, vertical default, horizontal small, vertical small)

feat(docs): added snapshot stories for radio group vertical and horiz…

0a00949

…ontal

feat(docs): fixed import on snapshot stories

6320d9a

feat(docs): fixed group name for cypress e2e testing on snapshot stories

7c5feee

feat(docs): fixed group name for cypress e2e testing on snapshot stories

a67c6f1

feat(docs): fixed e2e and added name attribute to render-function

0495c59

sandra-post added a commit that referenced this pull request Dec 10, 2025

feat(tokens): Added label font size for radio button small as per com…

d0ac7d9

…ment in #6805

bucknatt added 4 commits December 11, 2025 09:45

Merge branch 'refs/heads/main' into 6290-htmlcss-radio-button-small

fe392d9

feat(compo, styles): added font-size for small variant on divider

d42e7d3

feat(docs): fix e2e-1

8942ba7

feat(docs): fix e2e-2 provided with unique id

0bdbe63

feat(docs): fix e2e-3 removed unused vars and type any for linting

0e273ee

github-advanced-security bot found potential problems Dec 11, 2025

View reviewed changes

packages/documentation/src/stories/components/radio/radio.stories.ts Fixed Show fixed Hide fixed

feat(docs): fix pipeline fail by replacing math.random because of ins…

fc8751e

…ecure randomness

bucknatt requested a review from leagrdv December 11, 2025 13:35

leagrdv requested review from alizedebray and removed request for leagrdv December 12, 2025 10:37

leagrdv requested changes Dec 12, 2025

View reviewed changes

bucknatt added 2 commits December 16, 2025 11:33

feat(docs): updated font-size for small label

68aa346

feat(docs): added logic to generate unique id with fallback to simple…

2f3add2

… counter for radio snapshots

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(docs, styles): add `.form-check-sm` class to htmlcss radio button and add size variant on stories #6805

chore(docs, styles): add `.form-check-sm` class to htmlcss radio button and add size variant on stories #6805

Uh oh!

bucknatt commented Dec 5, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

swisspost-bot commented Dec 5, 2025 •

edited

Loading

Uh oh!

leagrdv left a comment •

edited

Loading

Uh oh!

Uh oh!

sandra-post commented Dec 10, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

leagrdv Dec 12, 2025

Uh oh!

Uh oh!

sonarqubecloud bot commented Dec 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

chore(docs, styles): add .form-check-sm class to htmlcss radio button and add size variant on stories #6805

Are you sure you want to change the base?

chore(docs, styles): add .form-check-sm class to htmlcss radio button and add size variant on stories #6805

Uh oh!

Conversation

bucknatt commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📄 Description

🚀 Demo

🔮 Design review

📝 Checklist

Uh oh!

changeset-bot bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

swisspost-bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

leagrdv left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sandra-post commented Dec 10, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

leagrdv Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sonarqubecloud bot commented Dec 23, 2025

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

chore(docs, styles): add `.form-check-sm` class to htmlcss radio button and add size variant on stories #6805

chore(docs, styles): add `.form-check-sm` class to htmlcss radio button and add size variant on stories #6805

bucknatt commented Dec 5, 2025 •

edited

Loading

changeset-bot bot commented Dec 5, 2025 •

edited

Loading

swisspost-bot commented Dec 5, 2025 •

edited

Loading

leagrdv left a comment •

edited

Loading