[1.1.1] Fix controlled input props for Radio component (#22)

* Pass through control props for Radio component.

* Typo fix.

Author: colinhemphill

packages/strum-react/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.1] - 2022-08-19
+
+## Fixed
+
+- `onChange` prop not being correctly passed through to `<RadioGroup />` primitive
+
 ## [1.1.0] - 2022-08-19
 
 ## Added

packages/strum-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strum/react",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A React design system built with Vanilla Extract",
   "license": "MIT",
   "repository": {
@@ -91,4 +91,4 @@
     "react": ">=17",
     "react-dom": ">=17"
   }
-}
+}

packages/strum-react/src/components/Checkbox/Checkbox.test.tsx

@@ -12,6 +12,13 @@ describe('<Checkbox />', () => {
     expect(screen.getByRole('label', { name })).toBeVisible();
   });
 
+  it('passing checked controls the input', async () => {
+    render(<Checkbox checked id="test-id" label={name} />);
+
+    const checkbox = screen.getByRole('checkbox', { checked: true });
+    expect(checkbox).toBeVisible();
+  });
+
   it('toggles checked state', async () => {
     const user = userEvent.setup();
     render(<Checkbox id="test-id" label={name} />);

packages/strum-react/src/components/Radio/Radio.docs.mdx

@@ -54,3 +54,15 @@ Radio groups take an optional `label` prop which will display text to describe t
   <RadioItem id="error-piano" label="Piano" value="piano" />
 </RadioGroup>
 ```
+
+## Controlled input
+
+To control your radio group with React, simply include a `value` boolean prop and a `onChange` function prop.
+
+```tsx live name="controlled radio input" value="guitar" onChange={(value) => {alert(value)}}
+<RadioGroup onChange={onChange} value={value}>
+  <RadioItem id="controlled-clarinet" label="Clarinet" value="clarinet" />
+  <RadioItem id="controlled-guitar" label="Guitar" value="guitar" />
+  <RadioItem id="controlled-piano" label="Piano" value="piano" />
+</RadioGroup>
+```

packages/strum-react/src/components/Radio/Radio.test.tsx

@@ -1,13 +1,13 @@
-import { cleanup, render, screen } from '../../../test';
+import { cleanup, render, screen, userEvent } from '../../../test';
 import { RadioGroup, RadioItem } from './Radio';
 
+const label = 'Test item 1';
+const value = 'test-item-1';
+
 describe('<Radio />', () => {
   afterEach(cleanup);
 
   it('renders', () => {
-    const label = 'Test item 1';
-    const value = 'test-item-1';
-
     render(
       <>
         <RadioGroup>
@@ -19,4 +19,57 @@ describe('<Radio />', () => {
     expect(screen.getByRole('radio', { name: label })).toBeVisible();
     expect(screen.getByRole('label', { name: label })).toBeVisible();
   });
+
+  it('passing value controls the input', async () => {
+    const label1 = 'radio-1';
+    const label2 = 'radio-2';
+    const value1 = 'value-1';
+    const value2 = 'value-2';
+
+    render(
+      <RadioGroup value={value2}>
+        <RadioItem label={label1} value={value1} />
+        <RadioItem label={label2} value={value2} />
+      </RadioGroup>,
+    );
+
+    const radio1 = screen.getByRole('radio', { name: label1 });
+    const radio2 = screen.getByRole('radio', { name: label2 });
+    expect(radio1).not.toBeChecked();
+    expect(radio2).toBeChecked();
+  });
+
+  it('changes selected radio item', async () => {
+    const user = userEvent.setup();
+    const label1 = 'radio-1';
+    const label2 = 'radio-2';
+    const value1 = 'value-1';
+    const value2 = 'value-2';
+
+    render(
+      <RadioGroup>
+        <RadioItem label={label1} value={value1} />
+        <RadioItem label={label2} value={value2} />
+      </RadioGroup>,
+    );
+
+    const radio1 = screen.getByRole('radio', { name: label1 });
+    const radio2 = screen.getByRole('radio', { name: label2 });
+
+    await user.click(radio2);
+
+    expect(radio1).not.toBeChecked();
+    expect(radio2).toBeChecked();
+  });
+
+  it('sets the disabled state of the input', () => {
+    render(
+      <RadioGroup>
+        <RadioItem disabled label={label} value={value} />
+      </RadioGroup>,
+    );
+    expect(screen.getByRole('radio', { name: label })).toHaveAttribute(
+      'disabled',
+    );
+  });
 });

packages/strum-react/src/components/Radio/Radio.tsx

@@ -18,14 +18,16 @@ type RadioGroupProps = {
 } & RadixRadio.RadioGroupProps;
 
 export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
-  ({ children, error, label, ...primitiveProps }, ref) => {
+  ({ children, error, label, onChange, value, ...primitiveProps }, ref) => {
     const errorId = error ? `${label}-error` : undefined;
 
     return (
       <>
         <RadixRadio.Root
           className={error ? styles.radioGroupWithErrorStyle : undefined}
+          onValueChange={onChange}
           ref={ref}
+          value={value}
           {...primitiveProps}
         >
           {label && (

packages/strum-react/src/components/Select/Select.test.tsx

@@ -9,6 +9,28 @@ describe('<Select />', () => {
     expect(screen.getByRole('combobox')).toBeVisible();
   });
 
+  it('passing value controls the input', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Select placeholder="Select an instrument" value="piano">
+        <SelectItem text="Guitar" value="guitar" />
+        <SelectItem text="Piano" value="piano" />
+      </Select>,
+    );
+
+    await user.click(screen.getByRole('combobox'));
+
+    expect(screen.getByRole('option', { name: 'Guitar' })).toHaveAttribute(
+      'aria-selected',
+      'false',
+    );
+    expect(screen.getByRole('option', { name: 'Piano' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    );
+  });
+
   it('clicking the select shows options', async () => {
     const user = userEvent.setup();
 
@@ -34,26 +56,4 @@ describe('<Select />', () => {
     expect(screen.getByText('Violin')).toBeVisible();
     expect(screen.getByText('Clarinet')).toBeVisible();
   });
-
-  it('passing value controls the input', async () => {
-    const user = userEvent.setup();
-
-    render(
-      <Select placeholder="Select an instrument" value="piano">
-        <SelectItem text="Guitar" value="guitar" />
-        <SelectItem text="Piano" value="piano" />
-      </Select>,
-    );
-
-    await user.click(screen.getByRole('combobox'));
-
-    expect(screen.getByRole('option', { name: 'Guitar' })).toHaveAttribute(
-      'aria-selected',
-      'false',
-    );
-    expect(screen.getByRole('option', { name: 'Piano' })).toHaveAttribute(
-      'aria-selected',
-      'true',
-    );
-  });
 });