radio button: remove MDC dependency #3642

Kiarokh · 2025-08-12T14:08:53Z

Summary by CodeRabbit

New Features
- Unified styling for checkboxes and radio buttons with consistent sizing, hover, focus, disabled, checked, and indeterminate states.
- Refreshed visuals with animated checkmark and radio fill, plus clearer focus ring for improved accessibility.
Refactor
- Replaced legacy UI structures with lighter markup for better performance and visual consistency.
Documentation
- Added guidance on importing checkbox/radio styles and preventing style leakage for consumers.

Review:

Commits are atomic
Commits have the correct type for the changes made
Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

Chrome
Edge
Firefox

Linux:

Chrome
Firefox

macOS:

Chrome
Firefox
Safari

Mobile:

Chrome on Android
iOS

Copilot

Pull Request Overview

This PR refactors checkbox and radio button components to use a shared boolean input styling system, consolidating duplicated styles and improving maintainability.

Key changes:

Creates a new shared boolean input style file (boolean-input.scss) to consolidate common styling patterns
Updates checkbox and radio button components to use the shared styling system
Removes Material Design Component (MDC) dependencies from radio buttons in favor of custom styling

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`src/style/internal/boolean-input.scss`	New shared style file defining common boolean input patterns and variables
`src/components/list/radio-button/radio-button.template.tsx`	Updated template structure to use new boolean input classes instead of MDC classes
`src/components/list/radio-button/radio-button.scss`	Replaced MDC imports with shared boolean input styles and custom radio-specific styling
`src/components/checkbox/checkbox.template.tsx`	Added boolean input class and updated label class name for consistency
`src/components/checkbox/checkbox.scss`	Refactored to use shared boolean input styles, removing duplicated code

github-actions · 2025-08-12T14:11:28Z

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3642/

coderabbitai · 2025-08-12T14:16:49Z

📝 Walkthrough

Walkthrough

Refactors checkbox and radio button components to use a shared boolean-input SCSS module. Rewrites component SCSS and templates to remove MDC dependencies and centralize styling via CSS variables and a new .boolean-input/.box structure with inline SVG (checkbox). Adds @forward exports of the shared module and introduces the new internal stylesheet.

Changes

Cohort / File(s)	Summary of Changes
Checkbox refactor `src/components/checkbox/checkbox.scss`, `src/components/checkbox/checkbox.template.tsx`	SCSS rewritten to use boolean-input module; legacy box/label rules removed; state visuals via svg.check-mark; sizing via CSS variables; added `@forward '../../style/internal/boolean-input.scss'`. Template updated to use boolean-input classes and inline SVG class; no prop/logic changes.
Radio-button refactor `src/components/list/radio-button/radio-button.scss`, `src/components/list/radio-button/radio-button.template.tsx`	Removed MDC styles/markup; added boolean-input-based styling with `.radio-button` and `.box`; state via :has(...) selectors; exported shared styles with `@forward '../../style/internal/boolean-input.scss'`. Template replaced MDC structure with boolean-input classes, simplified DOM; behavior bindings unchanged.
Shared boolean-input module `src/style/internal/boolean-input.scss`	New SCSS module defining `.boolean-input`, `.boolean-input-label`, and `.box` with CSS variables, focus/hover/active, disabled/required/invalid, and indeterminate/checked visuals using pseudo-elements; uses :has() and theme tokens.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Refactor checkbox component to remove MDC dependencies and update styles #3634: Similar refactor of checkbox component to non-MDC structure with SVG/box visuals.
Remove lime-theme + brand-colors SCSS imports from component stylesheets, and remove obsolete files #3601: Also modifies checkbox.scss, touching related theming/import behavior.

Suggested reviewers

LucyChyzhova
adrianschmidt
jgroth

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 15720ce and cc27214.

📒 Files selected for processing (5)

src/components/checkbox/checkbox.scss (1 hunks)
src/components/checkbox/checkbox.template.tsx (2 hunks)
src/components/list/radio-button/radio-button.scss (1 hunks)
src/components/list/radio-button/radio-button.template.tsx (1 hunks)
src/style/internal/boolean-input.scss (1 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{tsx,scss}

⚙️ CodeRabbit Configuration File

**/*.{tsx,scss}: Almost all our components use shadow-DOM. Therefore, we have no need of BEM-style class names in our CSS.

Files:

src/style/internal/boolean-input.scss
src/components/checkbox/checkbox.template.tsx
src/components/list/radio-button/radio-button.template.tsx
src/components/list/radio-button/radio-button.scss
src/components/checkbox/checkbox.scss

**/*.tsx

📄 CodeRabbit Inference Engine (.cursor/rules/wrap-multiple-jsx-elements-in-host-not-in-array.mdc)

When returning multiple JSX elements from the render method, never wrap them in an array literal. Instead, always wrap them in the special <Host> element. When there is already a single top-level element, it does not have to be wrapped in <Host>.

Files:

src/components/checkbox/checkbox.template.tsx
src/components/list/radio-button/radio-button.template.tsx

⚙️ CodeRabbit Configuration File

**/*.tsx: Our .tsx files are typically using StencilJS, not React. When a developer wants to return multiple top-level JSX elements from the render method, they will sometimes wrap them in an array literal. In these cases, rather than recommending they add key properties to the elements, recommend removing the hardcoded array literal. Recommend wrapping the elements in StencilJS's special <Host> element.

Files:

src/components/checkbox/checkbox.template.tsx
src/components/list/radio-button/radio-button.template.tsx

**/*.{ts,tsx}

⚙️ CodeRabbit Configuration File

**/*.{ts,tsx}: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

Files:

src/components/checkbox/checkbox.template.tsx
src/components/list/radio-button/radio-button.template.tsx

src/components/**/*.tsx

⚙️ CodeRabbit Configuration File

src/components/**/*.tsx: When contributors add new props to existing components in the lime-elements repository, they should always add documentation examples that demonstrate the new prop's usage and explain how it works. This helps with user adoption, feature discoverability, and maintains comprehensive documentation.

Files:

src/components/checkbox/checkbox.template.tsx
src/components/list/radio-button/radio-button.template.tsx

src/components/**/*.scss

📄 CodeRabbit Inference Engine (.cursor/rules/css-class-names-in-components-using-shadow-dom.mdc)

Do not use BEM-style class names in CSS for components, as components use shadow-DOM.

Files:

src/components/list/radio-button/radio-button.scss
src/components/checkbox/checkbox.scss

🧠 Learnings (2)

📚 Learning: 2025-08-07T14:39:00.045Z

Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3638
File: src/components/radio-button-group/radio-button-group.tsx:32-32
Timestamp: 2025-08-07T14:39:00.045Z
Learning: The `limel-radio-button-group` component uses `shadow: false` because it's a pure wrapper around `limel-list` with no component-specific styles, following the pattern of other wrapper components like `limel-action-bar-overflow-menu`.

Applied to files:

src/style/internal/boolean-input.scss
src/components/list/radio-button/radio-button.scss

📚 Learning: 2025-08-12T14:01:27.827Z

Learnt from: Kiarokh
PR: Lundalogik/lime-elements#3638
File: src/components/radio-button-group/radio-button-group.tsx:91-91
Timestamp: 2025-08-12T14:01:27.827Z
Learning: The `limel-radio-button-group` component allows deselection of radio buttons (unlike native radio buttons), which improves UX by letting users leave questions unanswered, but diverges from standard radio button behavior expectations.

Applied to files:

src/style/internal/boolean-input.scss
src/components/list/radio-button/radio-button.scss

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Docs / Publish Docs
GitHub Check: Build
GitHub Check: Test

🔇 Additional comments (18)

src/components/checkbox/checkbox.template.tsx (2)

80-87: LGTM: Clean SVG implementation for boolean-input system.

The inline SVG with proper accessibility attributes (aria-hidden, focusable="false") and the check-mark class aligns well with the new boolean-input styling approach. The path coordinates and viewBox are appropriate for the checkmark visual.

89-91: LGTM: Proper label implementation with boolean-input styling.

The label correctly uses the boolean-input-label class and htmlFor attribute for proper accessibility and integration with the boolean-input styling system.

src/components/list/radio-button/radio-button.template.tsx (3)

17-22: LGTM: Clean boolean-input class binding.

The class object correctly applies the new boolean-input and radio-button classes along with conditional state classes (checked, disabled). This aligns well with the boolean-input styling system.

31-31: LGTM: Simple box element for radio styling.

The <div class="box" /> provides a clean, semantic element for the radio button's visual styling, replacing the more complex MDC-based structure.

32-34: LGTM: Proper label integration with boolean-input system.

The label correctly uses the boolean-input-label class and htmlFor attribute for accessibility, consistent with the checkbox implementation.

src/components/list/radio-button/radio-button.scss (4)

1-24: LGTM: Comprehensive documentation for shared component usage.

The docblock clearly explains the important considerations when the RadioButtonTemplate is used by other components, including the need to import the SCSS file and potential styling conflicts. This is crucial documentation for maintainability.

28-28: LGTM: Clean modular approach with boolean-input forwarding.

The @forward directive properly exposes the shared boolean-input styles to consumers, enabling the modular styling approach described in the AI summary.

30-34: LGTM: Appropriate border-radius customization for radio buttons.

Setting --limel-boolean-input-box-border-radius to match --limel-boolean-input-box-size creates the circular appearance expected for radio buttons, while leveraging the shared boolean-input system.

36-48: LGTM: Modern CSS with proper radio button styling.

The implementation effectively uses modern CSS features:

:has() selector for state-based styling

Proper transitions for smooth interactions

Circular styling for the radio button indicator

Appropriate visual feedback with opacity, transform, and box-shadow

src/style/internal/boolean-input.scss (5)

3-7: LGTM: Essential box-sizing reset for consistent layout.

The universal box-sizing reset ensures predictable sizing behavior across all elements within the boolean-input components, preventing layout issues.

9-32: LGTM: Well-structured boolean-input container.

The .boolean-input class provides:

Appropriate CSS custom properties for theming

Flexible layout with proper alignment

Consistent minimum height for form alignment

Proper accessibility handling for native inputs

The visually-hidden mixin maintains accessibility while hiding the native controls.

34-81: LGTM: Comprehensive label styling with accessibility features.

The label.boolean-input-label implementation covers:

Proper sizing and positioning with CSS custom properties

Comprehensive state handling (disabled, required, invalid)

Theme integration with CSS variables

Accessibility features including the hide-label functionality for screen readers

Proper cursor states

83-178: LGTM: Sophisticated box styling with modern CSS features.

The .box implementation provides:

Proper positioning and visual styling

Smooth transitions for interactive states

Modern CSS features (:has(), :focus-visible)

Comprehensive state handling for checked/disabled states

Well-structured pseudo-elements for focus rings and state indicators

148-154: Verify :focus-visible browser support
The new focus styles use the modern :focus-visible pseudo-class in src/style/internal/boolean-input.scss (lines 148–154). This selector isn’t supported in older browsers (for example, IE11 and older Safari versions). Please confirm our official browser support matrix covers it, or add a fallback (e.g. a :focus rule or the WICG [focus-visible polyfill]) to ensure consistent focus styling across all target environments.

src/components/checkbox/checkbox.scss (4)

1-24: LGTM: Updated documentation reflects SVG-specific concerns.

The enhanced documentation now mentions potential <svg> element inheritance issues, which is appropriate given the new inline SVG approach in the template.

32-32: LGTM: Clean modular approach with boolean-input integration.

The @forward directive properly exposes the shared boolean-input styles, enabling the modular architecture described in the AI summary.

52-91: LGTM: Clean SVG-based checkbox implementation.

The refactored checkbox styling effectively:

Sets appropriate border-radius for rectangular appearance

Uses modern :has() selectors for state-based styling

Implements smooth SVG animations with stroke-dash properties

Properly positions and styles the inline SVG check-mark

Maintains the indeterminate state functionality

82-90: Ensure :has() pseudo-class compatibility

I’ve confirmed this is the only use of :has() in the codebase (no other .scss or .css files reference it). Before merging, please:

Verify your browser support policy covers the CSS relational pseudo-class :has() (supported in Chrome ≥ 105, Safari ≥ 15.4, Edge ≥ 105, Opera ≥ 91; not supported in IE11 or older Firefox without flags).

If you need to support browsers without :has(), add a fallback (for example, toggle a class via JavaScript instead of relying on :has()).

Consider documenting this requirement in your theming/docs (e.g., update src/theming.md) so future contributors are aware of the dependency.

File:

src/components/checkbox/checkbox.scss (lines 82–90)

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch radio-button-no-MDC

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

‼️ IMPORTANT
Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.

Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

The checkbox styles are good, but only when the component has `shadow: true`, and styles are encapsulated. However, since the `CheckboxTemplate` is designed to be imported to other consumer components, and such components are expected to import `checkbox.scss` into their own styles file. We need to ensure that the consumer's styles are not affected by the styles within the `checkbox.scss`, as much as possible without jeopardizing readability of the code.

Previously, the styles were specifically written for a checkbox element. However, the plan is to share a part of the styles with the radio button element, which also is going to lose its dependency to MDC. Therefore, adding instead of styling based on a `.checkbox` class, we now style things based on a more generic class name called `.boolean-input`, which can cover both radio and checkboxes

Since the plan is to refactor radio buttons and remove their MDC dependency, we need a shared file to style both checkbox and radio buttons.

LucyChyzhova

love it! great job Kia! 🚀

lime-opensource · 2025-08-14T07:58:08Z

🎉 This PR is included in version 38.21.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

Kiarokh self-assigned this Aug 12, 2025

Copilot AI review requested due to automatic review settings August 12, 2025 14:08

Kiarokh added 3rd-party Bugs or missing features in 3rd-party dependencies visual design Visual styling that may or may not affect usability maintenance Things that are important but not urgent, and not directly related to any specific bug or feature labels Aug 12, 2025

Copilot AI reviewed Aug 12, 2025

View reviewed changes

Kiarokh mentioned this pull request Aug 12, 2025

Radio button group: add new component #1437

Closed

coderabbitai bot changed the title ~~@coderabbitai~~ Refactor checkbox and radio to shared boolean-input styles Aug 12, 2025

Kiarokh added 4 commits August 12, 2025 16:20

refactor(checkbox): move a part of the styles to a shared file

abe0b79

Since the plan is to refactor radio buttons and remove their MDC dependency, we need a shared file to style both checkbox and radio buttons.

refactor(radio-button): remove MDC dependency

cc27214

Kiarokh force-pushed the radio-button-no-MDC branch from d4fd093 to cc27214 Compare August 12, 2025 14:20

Lundalogik deleted a comment from Copilot AI Aug 12, 2025

Kiarokh changed the title ~~Refactor checkbox and radio to shared boolean-input styles~~ radio button: remove MDC dependency Aug 13, 2025

LucyChyzhova self-requested a review August 13, 2025 09:06

LucyChyzhova approved these changes Aug 13, 2025

View reviewed changes

Kiarokh merged commit a060abc into main Aug 13, 2025
11 checks passed

Kiarokh deleted the radio-button-no-MDC branch August 13, 2025 11:49

coderabbitai bot mentioned this pull request Aug 13, 2025

chore(radio-button): remove last MDC leftover #3643

Merged

13 tasks

lime-opensource added the released label Aug 14, 2025

coderabbitai bot mentioned this pull request Oct 6, 2025

fix(checkbox): ensure correct rendering on iOS & macOS 26 #3698

Merged

13 tasks

coderabbitai bot mentioned this pull request Oct 24, 2025

refactor(radio-button): replace RadioButtonTemplate with a private component instead #3711

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

radio button: remove MDC dependency #3642

radio button: remove MDC dependency #3642

Uh oh!

Kiarokh commented Aug 12, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions bot commented Aug 12, 2025

Uh oh!

coderabbitai bot commented Aug 12, 2025 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

Status, Documentation and Community

Uh oh!

LucyChyzhova left a comment

Uh oh!

Uh oh!

lime-opensource commented Aug 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

radio button: remove MDC dependency #3642

radio button: remove MDC dependency #3642

Uh oh!

Conversation

Kiarokh commented Aug 12, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Review:

Browsers tested:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

github-actions bot commented Aug 12, 2025

Uh oh!

coderabbitai bot commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

Status, Documentation and Community

Uh oh!

LucyChyzhova left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lime-opensource commented Aug 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Kiarokh commented Aug 12, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Aug 12, 2025 •

edited

Loading