Merge pull request #62 from kodiak-packages/radio-value

Radio: Use value instead of defaultValue

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."/>

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" />

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,25 +24,24 @@ 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);
     }
   };
 
   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>
   );