From 374a073af57defc9918da639ecce2e194fc6a39d Mon Sep 17 00:00:00 2001
From: Robin Wijnant <robin@wijnant.me>
Date: Mon, 13 Jul 2020 13:46:29 +0200
Subject: [PATCH 1/2] fix(button): use value instead of defaultValue

---
 src/components/Radio/Radio.test.tsx            | 10 +++++-----
 src/components/Radio/RadioGroup/RadioGroup.tsx | 13 ++++++-------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/Radio/Radio.test.tsx b/src/components/Radio/Radio.test.tsx
index 98ca75d0..bc6aec34 100644
--- a/src/components/Radio/Radio.test.tsx
+++ b/src/components/Radio/Radio.test.tsx
@@ -6,7 +6,7 @@ import Radio from './Radio';
 describe('Radio', () => {
   test('default snapshot', () => {
     const component = (
-      <Radio.Group name="default" defaultValue="test1">
+      <Radio.Group name="default" value="test1">
         <Radio.Item value="test1" label="Test option 1" />
         <Radio.Item value="test2" label="Test option 2" />
         <Radio.Item value="test3" label="Test option 3" />
@@ -18,7 +18,7 @@ describe('Radio', () => {
 
   test('description snapshot', () => {
     const component = (
-      <Radio.Group name="default" defaultValue="test1">
+      <Radio.Group name="default" value="test1">
         <Radio.Item value="test1" label="Test option 1" description="Lalalalalalala" />
         <Radio.Item value="test2" label="Test option 2" description="Lololololololo" />
         <Radio.Item value="test3" label="Test option 3" description="Lelelelelelele" />
@@ -32,7 +32,7 @@ describe('Radio', () => {
     const onChangeFn = jest.fn();
 
     const component = (
-      <Radio.Group name="default" defaultValue="test1" onChange={onChangeFn}>
+      <Radio.Group name="default" value="test1" onChange={onChangeFn}>
         <Radio.Item value="test1" label="Test option 1" />
         <Radio.Item value="test2" label="Test option 2" />
         <Radio.Item value="test3" label="Test option 3" />
@@ -57,7 +57,7 @@ describe('Radio', () => {
     const onChangeFn = jest.fn();
 
     const component = (
-      <Radio.Group name="default" defaultValue="test1" onChange={onChangeFn}>
+      <Radio.Group name="default" value="test1" onChange={onChangeFn}>
         <Radio.Item isDisabled value="test1" label="Test option 1" />
         <Radio.Item isDisabled value="test2" label="Test option 2" />
         <Radio.Item isDisabled value="test3" label="Test option 3" />
@@ -78,7 +78,7 @@ describe('Radio', () => {
   test('className prop', () => {
     const className = 'center';
     const component = (
-      <Radio.Group name="default" defaultValue="test1">
+      <Radio.Group name="default" value="test1">
         <Radio.Item className={className} value="test1" label="Test option 1" />
         <Radio.Item value="test2" label="Test option 2" />
         <Radio.Item value="test3" label="Test option 3" />
diff --git a/src/components/Radio/RadioGroup/RadioGroup.tsx b/src/components/Radio/RadioGroup/RadioGroup.tsx
index f27aec07..3a8ca326 100644
--- a/src/components/Radio/RadioGroup/RadioGroup.tsx
+++ b/src/components/Radio/RadioGroup/RadioGroup.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 
 import cssReset from '../../../css-reset.module.css';
@@ -13,7 +13,7 @@ export interface RadioContext {
 
 export interface Props {
   children: React.ReactNode;
-  defaultValue?: RadioContext['selectedValue'];
+  value?: RadioContext['selectedValue'];
   name: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   groupRef?: React.Ref<HTMLInputElement>;
@@ -24,16 +24,13 @@ export const radioContext = React.createContext<RadioContext | null>(null);
 
 const RadioGroup: React.FC<Props> = ({
   children,
-  defaultValue,
+  value,
   onChange,
   name,
   groupRef,
   className,
 }: Props) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
-
   const onRadioItemChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedValue(e.target.value);
     if (onChange) {
       onChange(e);
     }
@@ -41,8 +38,10 @@ const RadioGroup: React.FC<Props> = ({
 
   const mergedClassNames = classNames(cssReset.ventura, styles.group, className);
 
+  const radioContextValues = { selectedValue: value, onChange: onRadioItemChange, name, groupRef };
+
   return (
-    <radioContext.Provider value={{ selectedValue, onChange: onRadioItemChange, name, groupRef }}>
+    <radioContext.Provider value={radioContextValues}>
       <div className={mergedClassNames}>{children}</div>
     </radioContext.Provider>
   );

From b1a1724728644e9bae7b4ef666f88726ceb835bd Mon Sep 17 00:00:00 2001
From: Robin Wijnant <robin@wijnant.me>
Date: Mon, 13 Jul 2020 21:50:27 +0200
Subject: [PATCH 2/2] update radio docs with value

---
 src/components/Radio/Radio.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Radio/Radio.mdx b/src/components/Radio/Radio.mdx
index b90bd16f..79ea0288 100644
--- a/src/components/Radio/Radio.mdx
+++ b/src/components/Radio/Radio.mdx
@@ -19,12 +19,12 @@ import pythonImage from './docAssets/python.png'
 
 Radio buttons are made up of two components working together. The `Radio.Group` and `Radio.Item` component.
 
-The `Radio.Group` component controls the name of the radio buttons and the onChange event. Each `Radio.Group` name property should be unique. The `Radio.Item` componet contains the value and label of the radio buttons. You add one `Radio.Item` per option.
+The `Radio.Group` component controls the name of the radio buttons and the onChange event. Each `Radio.Group` name property should be unique. The `Radio.Item` component contains the value and label of the radio buttons. You add one `Radio.Item` per option.
 
 The `Radio.Item` component must be wrapped in a `Radio.Group` component to function properly.
 
 <Playground>
-  <Radio.Group name="classes1" defaultValue="react">
+  <Radio.Group name="classes1" value="react">
     <Radio.Item value="react" label="Introduction To React" />
     <Radio.Item value="docker" label="Introduction To Docker" />
     <Radio.Item value="python" label="Introduction To Python" />
@@ -36,7 +36,7 @@ The `Radio.Item` component must be wrapped in a `Radio.Group` component to funct
 The label property on the button component also accepts JSX. This allows you to display custom components in the radio button label, like icons.
 
 <Playground>
-  <Radio.Group name="classes2" defaultValue="react">
+  <Radio.Group name="classes2" value="react">
     <Radio.Item value="react" label={<React.Fragment><img src={reactImage} style={{ height: '20px', marginRight: '6px'}} />Introduction To React</React.Fragment>} />
     <Radio.Item value="docker" label={<React.Fragment><img src={dockerImage} style={{ height: '20px', marginRight: '6px'}} />Introduction To Docker</React.Fragment>}/>
     <Radio.Item value="python" label={<React.Fragment><img src={pythonImage} style={{ height: '20px', marginRight: '6px'}} />Introduction To Python</React.Fragment>} />
@@ -46,7 +46,7 @@ The label property on the button component also accepts JSX. This allows you to
 ### Radio item with description
 
 <Playground>
-  <Radio.Group name="classes3" defaultValue="react">
+  <Radio.Group name="classes3" value="react">
     <Radio.Item value="react" label="Introduction To React" description="This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web applications in React right away."/>
     <Radio.Item value="docker" label="Introduction To Docker" description="In this course we will take a simple Node.js app that connects to a MongoDB database and uses an Express web server, and how to properly “Dockerize” the app."/>
     <Radio.Item value="python" label="Introduction To Python" description="At the end of this course, you’ll have a great working knowledge of Python, fully capable of creating your own Python projects from scratch or jumping into an existing application."/>
@@ -56,7 +56,7 @@ The label property on the button component also accepts JSX. This allows you to
 ### Disabled radio items
 
 <Playground>
-  <Radio.Group name="classes4" defaultValue="react">
+  <Radio.Group name="classes4" value="react">
     <Radio.Item isDisabled value="react" label="Introduction To React" description="This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web applications in React right away."/>
     <Radio.Item isDisabled value="docker" label="Introduction To Docker" description="In this course we will take a simple Node.js app that connects to a MongoDB database and uses an Express web server, and how to properly “Dockerize” the app."/>
     <Radio.Item isDisabled value="python" label="Introduction To Python" description="At the end of this course, you’ll have a great working knowledge of Python, fully capable of creating your own Python projects from scratch or jumping into an existing application."/>