Radio group themes #1223
Radio group themes #1223
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThe RadioGroup UI component was refactored to introduce new subcomponents (Indicator and Label), simplify context usage, and update the root API with new props for variant, size, and color. The CSS was restructured with new class names and modular styles. Story and fragment implementations were updated to match the new structure. Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant RadioGroup.Root
participant RadioGroup.Item
participant RadioGroup.Indicator
participant RadioGroup.Label
ParentComponent->>RadioGroup.Root: Render with variant, size, color
RadioGroup.Root->>RadioGroupContext: Provide rootClass
loop For each option
RadioGroup.Root->>RadioGroup.Label: Render label for item
RadioGroup.Label->>RadioGroup.Item: Render radio item
RadioGroup.Item->>RadioGroup.Indicator: Render indicator if selected
end
Estimated code review effort3 (90–240 minutes) Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
src/core/primitives/RadioGroup/RadioGroupPrimitive.stories.tsx (1)
15-26: Remove unused code and propsThe
RadioButtoncomponent has unused state, handler, and props that should be removed for cleanliness.-const RadioButton = (args: RadioButtonProps) => { +const RadioButton = () => { const options: Option[] = [ { id: 'html', value: 'html', label: 'HTML' }, { id: 'css', value: 'css', label: 'CSS' }, { id: 'javascript', value: 'javascript', label: 'JavaScript' } ]; - const [language, setLanguage] = useState<string>('css'); - - const handleChange = (item: string) => { - setLanguage(item); - };Also update the render function:
- render: (args: RadioButtonProps) => <RadioButton {...args}/> + render: () => <RadioButton />
🧹 Nitpick comments (4)
src/components/ui/RadioGroup/fragments/RadioGroupLabel.tsx (1)
14-14: Remove redundant rootClass in className computation.The
classNamecomputation includes both${rootClass}-labelandrootClass, which appears redundant. TherootClassalone doesn't seem necessary if you're already using${rootClass}-label.Consider this refactor:
- return <Primitive.label {...props} className={clsx(`${rootClass}-label`, rootClass, className)} asChild={asChild}> {children} </Primitive.label>; + return <Primitive.label {...props} className={clsx(`${rootClass}-label`, className)} asChild={asChild}> {children} </Primitive.label>;src/components/ui/RadioGroup/stories/RadioGroup.stories.tsx (1)
13-13: Consider adding a default selection to RadioGroup.RootThe previous implementation had a default selection (language state initialized to 'css'). Without
defaultValueorvalueprop onRadioGroup.Root, no radio button will be selected by default.- <RadioGroup.Root > + <RadioGroup.Root defaultValue="css">styles/themes/components/radio-group.scss (2)
1-8: Prefer relative units for top-level spacing to improve scalabilityHard-coded pixel values (
margin-top: 20px;,gap: 32px) do not scale with the root font size and can look inconsistent under user zoom or large-text accessibility settings. Converting these toremkeeps spacing proportional across different environments.- margin-top: 20px; - gap: 32px; + margin-top: 1.25rem; /* 20px / 16 */ + gap: 2rem; /* 32px / 16 */
48-62: Redundant left margin & minor syntax / readability nits
margin-left: 8px;is redundant because the flex container already setsgap: 8px;.- For consistency with the rest of the file, add a space after the colon in
width:max-content;.- margin-left: 8px; - width:max-content; + /* margin-left removed – gap already provides spacing */ + width: max-content;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
src/components/ui/RadioGroup/RadioGroup.tsx(2 hunks)src/components/ui/RadioGroup/context/RadioGroupContext.tsx(1 hunks)src/components/ui/RadioGroup/fragments/RadioGroupIndicator.tsx(1 hunks)src/components/ui/RadioGroup/fragments/RadioGroupItem.tsx(1 hunks)src/components/ui/RadioGroup/fragments/RadioGroupLabel.tsx(1 hunks)src/components/ui/RadioGroup/fragments/RadioGroupRoot.tsx(1 hunks)src/components/ui/RadioGroup/stories/RadioGroup.stories.tsx(2 hunks)src/core/primitives/Primitive/index.tsx(1 hunks)src/core/primitives/RadioGroup/RadioGroupPrimitive.stories.tsx(2 hunks)src/core/primitives/RadioGroup/RadioGroupPrimitive.tsx(2 hunks)src/core/primitives/RadioGroup/context/RadioGroupContext.tsx(0 hunks)src/core/primitives/RadioGroup/context/RadioGroupPrimitiveItemContext.tsx(1 hunks)src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveIndicator.tsx(1 hunks)src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveItem.tsx(1 hunks)src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveRoot.tsx(1 hunks)src/core/primitives/RadioGroup/tests/RadioGroupPrimtive.test.tsx(1 hunks)styles/themes/components/radio-group.scss(1 hunks)
💤 Files with no reviewable changes (1)
- src/core/primitives/RadioGroup/context/RadioGroupContext.tsx
🧰 Additional context used
🧠 Learnings (13)
src/core/primitives/RadioGroup/RadioGroupPrimitive.tsx (1)
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
src/components/ui/RadioGroup/RadioGroup.tsx (1)
Learnt from: decipher-cs
PR: rad-ui/ui#417
File: src/components/ui/Dropdown/Dropdown.stories.tsx:43-50
Timestamp: 2024-12-12T08:34:33.079Z
Learning: Ensure to verify existing ARIA attributes in components before suggesting additions during code reviews, especially in the `Dropdown.Trigger` component in `src/components/ui/Dropdown/Dropdown.stories.tsx`.
src/core/primitives/Primitive/index.tsx (2)
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
Learnt from: krau5
PR: rad-ui/ui#609
File: src/components/ui/Text/Text.tsx:19-22
Timestamp: 2024-12-06T14:30:05.834Z
Learning: When the keys and values for the `as` prop are the same, we should define the type directly using string literals (e.g., `'div' | 'span' | 'p' | 'label'`) and eliminate extra mappings like `tagMap` to simplify the code.
src/components/ui/RadioGroup/context/RadioGroupContext.tsx (2)
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
Learnt from: kotAPI
PR: rad-ui/ui#1031
File: src/components/ui/Accordion/fragments/AccordionRoot.tsx:41-44
Timestamp: 2025-04-07T04:38:34.864Z
Learning: The Accordion component in rad-ui/ui supports both controlled and uncontrolled modes through props like `value`, `defaultValue`, and `onValueChange`. When implementing controlled components, remember to: 1) Initialize state from defaultValue, 2) Update internal state when value changes (controlled mode), 3) Call onValueChange callback, and 4) Prevent internal state updates when in controlled mode.
src/core/primitives/RadioGroup/context/RadioGroupPrimitiveItemContext.tsx (1)
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveIndicator.tsx (1)
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
src/components/ui/RadioGroup/fragments/RadioGroupItem.tsx (1)
Learnt from: kotAPI
PR: rad-ui/ui#1031
File: src/components/ui/Accordion/fragments/AccordionRoot.tsx:41-44
Timestamp: 2025-04-07T04:38:34.864Z
Learning: The Accordion component in rad-ui/ui supports both controlled and uncontrolled modes through props like `value`, `defaultValue`, and `onValueChange`. When implementing controlled components, remember to: 1) Initialize state from defaultValue, 2) Update internal state when value changes (controlled mode), 3) Call onValueChange callback, and 4) Prevent internal state updates when in controlled mode.
src/core/primitives/RadioGroup/RadioGroupPrimitive.stories.tsx (3)
Learnt from: decipher-cs
PR: rad-ui/ui#417
File: src/components/ui/Dropdown/Dropdown.stories.tsx:43-50
Timestamp: 2024-12-12T08:34:33.079Z
Learning: Ensure to verify existing ARIA attributes in components before suggesting additions during code reviews, especially in the `Dropdown.Trigger` component in `src/components/ui/Dropdown/Dropdown.stories.tsx`.
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
Learnt from: kotAPI
PR: rad-ui/ui#1031
File: src/components/ui/Accordion/fragments/AccordionRoot.tsx:41-44
Timestamp: 2025-04-07T04:38:34.864Z
Learning: The Accordion component in rad-ui/ui supports both controlled and uncontrolled modes through props like `value`, `defaultValue`, and `onValueChange`. When implementing controlled components, remember to: 1) Initialize state from defaultValue, 2) Update internal state when value changes (controlled mode), 3) Call onValueChange callback, and 4) Prevent internal state updates when in controlled mode.
src/components/ui/RadioGroup/stories/RadioGroup.stories.tsx (3)
Learnt from: decipher-cs
PR: rad-ui/ui#417
File: src/components/ui/Dropdown/Dropdown.stories.tsx:43-50
Timestamp: 2024-12-12T08:34:33.079Z
Learning: Ensure to verify existing ARIA attributes in components before suggesting additions during code reviews, especially in the `Dropdown.Trigger` component in `src/components/ui/Dropdown/Dropdown.stories.tsx`.
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
Learnt from: kotAPI
PR: rad-ui/ui#1031
File: src/components/ui/Accordion/fragments/AccordionRoot.tsx:41-44
Timestamp: 2025-04-07T04:38:34.864Z
Learning: The Accordion component in rad-ui/ui supports both controlled and uncontrolled modes through props like `value`, `defaultValue`, and `onValueChange`. When implementing controlled components, remember to: 1) Initialize state from defaultValue, 2) Update internal state when value changes (controlled mode), 3) Call onValueChange callback, and 4) Prevent internal state updates when in controlled mode.
src/core/primitives/RadioGroup/tests/RadioGroupPrimtive.test.tsx (2)
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
Learnt from: decipher-cs
PR: rad-ui/ui#417
File: src/components/ui/Dropdown/Dropdown.stories.tsx:43-50
Timestamp: 2024-12-12T08:34:33.079Z
Learning: Ensure to verify existing ARIA attributes in components before suggesting additions during code reviews, especially in the `Dropdown.Trigger` component in `src/components/ui/Dropdown/Dropdown.stories.tsx`.
src/components/ui/RadioGroup/fragments/RadioGroupRoot.tsx (4)
Learnt from: decipher-cs
PR: rad-ui/ui#417
File: src/components/ui/Dropdown/Dropdown.stories.tsx:43-50
Timestamp: 2024-12-12T08:34:33.079Z
Learning: Ensure to verify existing ARIA attributes in components before suggesting additions during code reviews, especially in the `Dropdown.Trigger` component in `src/components/ui/Dropdown/Dropdown.stories.tsx`.
Learnt from: kotAPI
PR: rad-ui/ui#1031
File: src/components/ui/Accordion/fragments/AccordionRoot.tsx:41-44
Timestamp: 2025-04-07T04:38:34.864Z
Learning: The Accordion component in rad-ui/ui supports both controlled and uncontrolled modes through props like `value`, `defaultValue`, and `onValueChange`. When implementing controlled components, remember to: 1) Initialize state from defaultValue, 2) Update internal state when value changes (controlled mode), 3) Call onValueChange callback, and 4) Prevent internal state updates when in controlled mode.
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
Learnt from: decipher-cs
PR: rad-ui/ui#417
File: src/components/ui/Dropdown/Dropdown.tsx:0-0
Timestamp: 2024-12-12T08:22:59.375Z
Learning: The `Dropdown.Trigger` component is customizable and needs to be used with `Dropdown.Root`.
src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveItem.tsx (2)
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
Learnt from: decipher-cs
PR: rad-ui/ui#417
File: src/components/ui/Dropdown/Dropdown.stories.tsx:43-50
Timestamp: 2024-12-12T08:34:33.079Z
Learning: Ensure to verify existing ARIA attributes in components before suggesting additions during code reviews, especially in the `Dropdown.Trigger` component in `src/components/ui/Dropdown/Dropdown.stories.tsx`.
src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveRoot.tsx (1)
Learnt from: kotAPI
PR: rad-ui/ui#576
File: src/core/primitives/Toggle/index.tsx:15-22
Timestamp: 2024-11-24T06:43:42.194Z
Learning: In the `TogglePrimitive` component (`src/core/primitives/Toggle/index.tsx`), when the component becomes controlled, it's acceptable to not sync the internal `isPressed` state with the external `pressed` prop.
🧬 Code Graph Analysis (2)
src/components/ui/RadioGroup/fragments/RadioGroupLabel.tsx (1)
src/components/ui/RadioGroup/context/RadioGroupContext.tsx (1)
RadioGroupContext(3-5)
src/components/ui/RadioGroup/fragments/RadioGroupItem.tsx (1)
src/components/ui/RadioGroup/context/RadioGroupContext.tsx (1)
RadioGroupContext(3-5)
⏰ 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). (1)
- GitHub Check: build
🔇 Additional comments (11)
src/core/primitives/Primitive/index.tsx (1)
4-4: LGTM! Clean extension of primitive support.The addition of 'label' to the supported HTML elements is straightforward and enables the new RadioGroupLabel component functionality without breaking existing code.
src/core/primitives/RadioGroup/context/RadioGroupPrimitiveItemContext.tsx (1)
1-14: LGTM! Well-structured context implementation.The context follows React best practices with proper typing, sensible defaults, and clean export pattern. The
itemSelectedboolean effectively manages selection state for radio group items.src/core/primitives/RadioGroup/RadioGroupPrimitive.tsx (1)
5-5: LGTM! Consistent compound component pattern.The addition of the Indicator fragment follows the established pattern of importing from fragments and attaching as a static property, maintaining consistency with the existing Root and Item components.
Also applies to: 19-19
src/components/ui/RadioGroup/RadioGroup.tsx (1)
4-5: LGTM! Proper extension of compound component API.The addition of Indicator and Label fragments maintains the established compound component pattern, providing consistent API structure across the RadioGroup component hierarchy.
Also applies to: 21-22
src/components/ui/RadioGroup/context/RadioGroupContext.tsx (1)
3-5: Approve RadioGroupContext simplificationThe new
RadioGroupContextonly provides arootClassfor styling, and all functional props (defaultChecked/defaultValue,onChange/onValueChange, etc.) continue to flow directly intoRadioGroupPrimitive.Rootvia...props. No UI components consume the removed context keys:
src/components/ui/RadioGroup/context/RadioGroupContext.tsxnow exports{ rootClass }only.src/components/ui/RadioGroup/fragments/RadioGroupRoot.tsxspreads...propsinto the primitive, sodefaultChecked/onChangestill work.- A global search shows no remaining references to
defaultChecked,onChangeorcustomRootClassin the UI RadioGroup context.This refactor safely narrows the context API to styling concerns without breaking existing functionality.
src/components/ui/RadioGroup/fragments/RadioGroupIndicator.tsx (1)
11-18: LGTM! Clean implementation of the indicator component.The component structure is well-designed with proper context usage and class name computation. The implementation follows React best practices.
src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveRoot.tsx (1)
35-46: LGTM! Excellent architectural improvement.The restructuring to wrap components in a
Primitive.divwith proper ARIA attributes and the addition of a hidden radio input is a smart approach. This maintains native form behavior while allowing for more flexible UI composition with ARIA-enabled buttons.src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveIndicator.tsx (1)
10-15: LGTM! Well-implemented conditional rendering component.The conditional rendering logic based on
itemSelectedcontext is clean and efficient. The early return pattern and proper context usage make this component easy to understand and maintain.src/components/ui/RadioGroup/fragments/RadioGroupItem.tsx (1)
6-14: LGTM! Excellent refactoring to explicit props.The change from intersection types to explicit
RadioGroupItemPropsgreatly improves code clarity and maintainability. The explicit forwarding of thevalueprop ensures proper integration with the primitive component.src/core/primitives/RadioGroup/tests/RadioGroupPrimtive.test.tsx (1)
1-88: Test updates align perfectly with component refactoring!The test suite has been properly updated to reflect the new component structure:
- Correctly uses the new
RadioGroupPrimitive.Rootand.ItemAPI- Appropriately queries button elements instead of inputs
- Properly checks ARIA attributes instead of native properties
- Maintains comprehensive coverage of all scenarios
src/core/primitives/RadioGroup/fragments/RadioGroupPrimitiveItem.tsx (1)
1-51: Excellent accessibility implementation!The refactored component properly implements ARIA patterns for radio buttons:
- Correct use of
role="radio"on the button element- Appropriate ARIA attributes (aria-checked, aria-disabled, aria-required)
- Proper keyboard navigation with both onClick and onFocus handlers
- Clean context pattern for sharing selected state with child components
| .rad-ui-radio-group-item { | ||
| height: 24px; | ||
| width: 24px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 24px; | ||
| color: var(--rad-ui-color-accent-900); | ||
|
|
||
| .rad-ui-radio-group-item{ | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 12px; | ||
| align-items: center; | ||
| justify-content: center; | ||
| border-radius: 50%; | ||
| background-color: var(--rad-ui-color-accent-100); | ||
| border: 2px solid var(--rad-ui-color-accent-400); | ||
| box-shadow: 0 1px 4px rgba(0,0,0,0.06); | ||
| cursor: pointer; | ||
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | ||
| position: relative; | ||
|
|
||
| input{ | ||
| width: 20px; | ||
| height: 20px; | ||
| position:relative; | ||
| display:inline-flex; | ||
| align-items:center; | ||
| justify-content:center; | ||
| flex-shrink:0; | ||
| outline:none; | ||
| margin:0; | ||
| border:none; | ||
| &:hover { | ||
| border-color: var(--rad-ui-color-accent-600); | ||
| background-color: var(--rad-ui-color-accent-200); | ||
| } | ||
|
|
||
| &::before{ | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 20px; | ||
| height: 20px; | ||
| border-radius: 50%; | ||
| background-color: var(--rad-ui-color-accent-900); | ||
| } | ||
| &:focus { | ||
| outline: 2px solid var(--rad-ui-color-accent-700); | ||
| outline-offset: 2px; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Swap :focus for :focus-visible to avoid distracting focus rings on mouse clicks
The current rule shows the outline on every click, which is unnecessary for mouse users and fails the WCAG “focus indication only on keyboard” best practice. Using :focus-visible retains the outline for keyboard navigation while keeping mouse interactions visually clean.
- &:focus {
+ &:focus-visible {
outline: 2px solid var(--rad-ui-color-accent-700);
outline-offset: 2px;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .rad-ui-radio-group-item { | |
| height: 24px; | |
| width: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| color: var(--rad-ui-color-accent-900); | |
| .rad-ui-radio-group-item{ | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background-color: var(--rad-ui-color-accent-100); | |
| border: 2px solid var(--rad-ui-color-accent-400); | |
| box-shadow: 0 1px 4px rgba(0,0,0,0.06); | |
| cursor: pointer; | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | |
| position: relative; | |
| input{ | |
| width: 20px; | |
| height: 20px; | |
| position:relative; | |
| display:inline-flex; | |
| align-items:center; | |
| justify-content:center; | |
| flex-shrink:0; | |
| outline:none; | |
| margin:0; | |
| border:none; | |
| &:hover { | |
| border-color: var(--rad-ui-color-accent-600); | |
| background-color: var(--rad-ui-color-accent-200); | |
| } | |
| &::before{ | |
| content: ''; | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background-color: var(--rad-ui-color-accent-900); | |
| } | |
| &:focus { | |
| outline: 2px solid var(--rad-ui-color-accent-700); | |
| outline-offset: 2px; | |
| } | |
| .rad-ui-radio-group-item { | |
| height: 24px; | |
| width: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background-color: var(--rad-ui-color-accent-100); | |
| border: 2px solid var(--rad-ui-color-accent-400); | |
| box-shadow: 0 1px 4px rgba(0,0,0,0.06); | |
| cursor: pointer; | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | |
| position: relative; | |
| &:hover { | |
| border-color: var(--rad-ui-color-accent-600); | |
| background-color: var(--rad-ui-color-accent-200); | |
| } | |
| &:focus-visible { | |
| outline: 2px solid var(--rad-ui-color-accent-700); | |
| outline-offset: 2px; | |
| } | |
| } |
🤖 Prompt for AI Agents
In styles/themes/components/radio-group.scss between lines 9 and 31, replace the
:focus pseudo-class with :focus-visible on the .rad-ui-radio-group-item selector
to ensure the focus outline only appears during keyboard navigation, preventing
distracting outlines on mouse clicks and improving accessibility.
kotAPI
added
the
automerge
kodiakhq
bot
removed
the
automerge
|
This PR currently has a merge conflict. Please resolve this and then re-add the |
GoldGroove06
added
the
automerge
Screen.Recording.2025-07-18.144530.mp4
Summary by CodeRabbit
New Features
Refactor
Style
Documentation