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
.form-check-sm class to htmlcss radio button and add size variant on stories#6805Conversation
…`.form-check-sm` css class to styles
🦋 Changeset detectedLatest commit: 8af14f1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 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 |
There was a problem hiding this comment.
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.
…cal (default) and horizontal (inline)
…zontal default, vertical default, horizontal small, vertical small)
|
Design Review
I see that this has been missed to tokenize. I will therefore add the missing token. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
packages/documentation/src/stories/components/radio/radio.snapshot.stories.ts
Outdated
Show resolved
Hide resolved
packages/documentation/src/stories/components/radio/radio.snapshot.stories.ts
Outdated
Show resolved
Hide resolved
| 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'); |
There was a problem hiding this comment.
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
Outdated
Show resolved
Hide resolved
… counter for radio snapshots
|
… small variant and group
…radio-button at least updating label font-size
…o 6290-htmlcss-radio-button-small # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
|
4 participants
📄 Description
The CSS
.form-check-smclass is added to the Form Radio Button component. The variantSizehas been added on the component's documentation.🚀 Demo
For Radio Button
For Radio Group
🔮 Design review
📝 Checklist