Repository: zeit-ui/react
Pull request #232 (2020-05-23 00:15:31)

refactor(radio): use CSS variable instead of Context broadcast size
## PR Checklist

- [x] Fix linting errors
- [x] Label has been added


## Change information





Patch:
diff --git a/components/radio/radio-context.ts b/components/radio/radio-context.ts
index 3f98478..b29271b 100644
--- a/components/radio/radio-context.ts
+++ b/components/radio/radio-context.ts
@@ -1,17 +1,14 @@
 import React from 'react'
-import { NormalSizes } from 'components/utils/prop-types'
 
 export interface RadioConfig {
-  updateState: (value: string) => void
+  updateState?: (value: string) => void
   disabledAll: boolean
   value?: string
-  size?: NormalSizes
   inGroup: boolean
 }
 
 const defaultContext = {
   disabledAll: false,
-  updateState: () => {},
   inGroup: false,
 }
 
diff --git a/components/radio/radio-group.tsx b/components/radio/radio-group.tsx
index 20ff2ab..af31b42 100644
--- a/components/radio/radio-group.tsx
+++ b/components/radio/radio-group.tsx
@@ -23,8 +23,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type RadioGroupProps = Props & typeof defaultProps & NativeAttrs
 
-export const getRadioSize = (selfSize: NormalSizes, groupSize?: NormalSizes): string => {
-  const size = groupSize || selfSize
+export const getRadioSize = (size: NormalSizes): string => {
   const sizes: { [key in NormalSizes]: string } = {
     mini: '.75rem',
     small: '.875rem',
@@ -56,10 +55,9 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
       updateState,
       disabledAll: disabled,
       inGroup: true,
-      size,
       value: selfVal,
     }
-  }, [disabled, selfVal, size])
+  }, [disabled, selfVal])
 
   const fontSize = useMemo(() => getRadioSize(size), [size])
   const groupGap = `calc(${fontSize} * 1)`
@@ -83,6 +81,7 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
         .radio-group :global(.radio) {
           margin-top: ${useRow ? 0 : groupGap};
           margin-left: ${useRow ? groupGap : 0};
+          --radio-size: ${fontSize};
         }
 
         .radio-group :global(.radio:first-of-type) {
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index 2037f0c..b449ad7 100644
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@@ -48,13 +48,7 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = ({
 }) => {
   const theme = useTheme()
   const [selfChecked, setSelfChecked] = useState<boolean>(!!checked)
-  const {
-    value: groupValue,
-    disabledAll,
-    inGroup,
-    updateState,
-    size: groupSize,
-  } = useRadioContext()
+  const { value: groupValue, disabledAll, inGroup, updateState } = useRadioContext()
   const [withoutDescChildren, DescChildren] = pickChild(children, RadioDescription)
 
   if (inGroup) {
@@ -69,7 +63,7 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = ({
     }, [groupValue, radioValue])
   }
 
-  const fontSize = useMemo(() => getRadioSize(size, groupSize), [size, groupSize])
+  const fontSize = useMemo(() => getRadioSize(size), [size])
   const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll])
   const changeHandler = (event: React.ChangeEvent) => {
     if (isDisabled) return
@@ -83,7 +77,7 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = ({
     }
     setSelfChecked(!selfChecked)
     if (inGroup) {
-      updateState(radioValue as string)
+      updateState && updateState(radioValue as string)
     }
     onChange && onChange(selfEvent)
   }


Test patch:
diff --git a/components/radio/__tests__/__snapshots__/group.test.tsx.snap b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
index 48a20db..2b13355 100644
--- a/components/radio/__tests__/__snapshots__/group.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
@@ -138,6 +138,7 @@ exports[`Radio Group should render correctly 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(1rem * 1);
           margin-left: 0;
+          --radio-size: 1rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -280,6 +281,7 @@ exports[`Radio Group should render correctly 1`] = `
         .radio-group :global(.radio) {
           margin-top: 0;
           margin-left: calc(1rem * 1);
+          --radio-size: 1rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -306,7 +308,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: .75rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -362,6 +364,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(.75rem * 1);
           margin-left: 0;
+          --radio-size: .75rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -384,7 +387,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: .875rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -440,6 +443,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(.875rem * 1);
           margin-left: 0;
+          --radio-size: .875rem;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -462,7 +466,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1.125rem;
+          --radio-size: 1rem;
         }
 
         label {
@@ -518,6 +522,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         .radio-group :global(.radio) {
           margin-top: calc(1.125rem * 1);
           margin-left: 0;
+          --radio-size: 1.125rem;
         }
 
         .radio-group :global(.radio:first-of-type) {