Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio: Add border to selected radio button #3808

Conversation

Fuzzy3
Copy link
Collaborator

@Fuzzy3 Fuzzy3 commented Feb 25, 2025

Which issue does this PR close?

This PR closes #3502

What is the new behavior?

Added border to selected radio buttons to comply with recent design for radio buttons. Border also added to disabled selected radio buttons.

Does this PR introduce a breaking change?

  • Yes
  • No

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Reminders

  • Make sure you have implemented tests following the guidelines in: "The good: Test".
  • Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

  • Determine if your changes are a fix, feature or breaking-change, and add the matching label to your PR. If it is tooling, dependency updates or similar, add ignore-for-release.
  • Do a self-review.
  • Request that the changes are code-reviewed
  • Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

@Fuzzy3 Fuzzy3 requested a review from jkaltoft as a code owner February 25, 2025 11:25
@Fuzzy3 Fuzzy3 linked an issue Feb 25, 2025 that may be closed by this pull request
11 tasks
@@ -4,7 +4,7 @@
@use '@kirbydesign/core/src/scss/utils';

$radio-icon-size: utils.size('m');
$radio-icon-mark-size: 60%;
$radio-icon-mark-size: 12px;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hardcoded the 12px since the 60% was no longer resulting in 12px size marker, caused from the newly added border which effectively reduced the size of the container from 20x20px to 18x18px.
Probably should be converted to rem when adding support for font-resize

@github-actions github-actions bot temporarily deployed to pr-3502-radio-buttons-selected-radio-button-shouldcould-have-a-border-to-improve-ui February 25, 2025 11:30 Inactive
@Fuzzy3 Fuzzy3 enabled auto-merge (squash) February 26, 2025 10:21
@github-actions github-actions bot temporarily deployed to pr-3502-radio-buttons-selected-radio-button-shouldcould-have-a-border-to-improve-ui February 26, 2025 10:28 Inactive
@github-actions github-actions bot temporarily deployed to pr-3502-radio-buttons-selected-radio-button-shouldcould-have-a-border-to-improve-ui February 27, 2025 08:34 Inactive
Copy link
Collaborator

@RasmusKjeldgaard RasmusKjeldgaard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Finally!!! This borders excellent work 😁

@Fuzzy3 Fuzzy3 merged commit 9a7be0d into develop Feb 27, 2025
10 of 12 checks passed
@Fuzzy3 Fuzzy3 deleted the 3502-radio-buttons-selected-radio-button-shouldcould-have-a-border-to-improve-ui branch February 27, 2025 11:11
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.

Radio buttons: Selected radio button should/could have a border to improve UI
2 participants