Merge pull request #242 from unix/radio

fix(radio): fix style imbalance caused by decimal width
geist-org · May 28, 2020 · 4b44e8b · 4b44e8b
2 parents 768a0c4 + 9bae10d
commit 4b44e8b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 29 deletions.
diff --git a/components/radio/__tests__/__snapshots__/group.test.tsx.snap b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Radio Group should render correctly 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -82,7 +82,7 @@ exports[`Radio Group should render correctly 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -136,9 +136,9 @@ exports[`Radio Group should render correctly 1`] = `
         }
 
         .radio-group :global(.radio) {
-          margin-top: calc(1rem * 1);
+          margin-top: calc(16px * 1);
           margin-left: 0;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -161,7 +161,7 @@ exports[`Radio Group should render correctly 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -225,7 +225,7 @@ exports[`Radio Group should render correctly 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -280,8 +280,8 @@ exports[`Radio Group should render correctly 1`] = `
 
         .radio-group :global(.radio) {
           margin-top: 0;
-          margin-left: calc(1rem * 1);
-          --radio-size: 1rem;
+          margin-left: calc(16px * 1);
+          --radio-size: 16px;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -308,7 +308,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -362,9 +362,9 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         }
 
         .radio-group :global(.radio) {
-          margin-top: calc(.75rem * 1);
+          margin-top: calc(12px * 1);
           margin-left: 0;
-          --radio-size: .75rem;
+          --radio-size: 12px;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -387,7 +387,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -441,9 +441,9 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         }
 
         .radio-group :global(.radio) {
-          margin-top: calc(.875rem * 1);
+          margin-top: calc(14px * 1);
           margin-left: 0;
-          --radio-size: .875rem;
+          --radio-size: 14px;
         }
 
         .radio-group :global(.radio:first-of-type) {
@@ -466,7 +466,7 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -520,9 +520,9 @@ exports[`Radio Group should work correctly with different sizes 1`] = `
         }
 
         .radio-group :global(.radio) {
-          margin-top: calc(1.125rem * 1);
+          margin-top: calc(18px * 1);
           margin-left: 0;
-          --radio-size: 1.125rem;
+          --radio-size: 18px;
         }
 
         .radio-group :global(.radio:first-of-type) {

diff --git a/components/radio/__tests__/__snapshots__/index.test.tsx.snap b/components/radio/__tests__/__snapshots__/index.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Radio should render correctly 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -86,7 +86,7 @@ exports[`Radio should support react-node in description 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -156,7 +156,7 @@ exports[`Radio should support react-node in description 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -226,7 +226,7 @@ exports[`Radio should support react-node in description 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -294,7 +294,7 @@ exports[`Radio should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: .75rem;
+          --radio-size: 12px;
         }
 
         label {
@@ -358,7 +358,7 @@ exports[`Radio should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: .875rem;
+          --radio-size: 14px;
         }
 
         label {
@@ -422,7 +422,7 @@ exports[`Radio should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1rem;
+          --radio-size: 16px;
         }
 
         label {
@@ -486,7 +486,7 @@ exports[`Radio should work correctly with different sizes 1`] = `
           width: initial;
           align-items: flex-start;
           position: relative;
-          --radio-size: 1.125rem;
+          --radio-size: 18px;
         }
 
         label {

diff --git a/components/radio/radio-group.tsx b/components/radio/radio-group.tsx
@@ -25,10 +25,10 @@ export type RadioGroupProps = Props & typeof defaultProps & NativeAttrs
 
 export const getRadioSize = (size: NormalSizes): string => {
   const sizes: { [key in NormalSizes]: string } = {
-    mini: '.75rem',
-    small: '.875rem',
-    medium: '1rem',
-    large: '1.125rem',
+    mini: '12px',
+    small: '14px',
+    medium: '16px',
+    large: '18px',
   }
   return sizes[size]
 }