feat(radio): rollback radio (#1014)

pluralsight · May 19, 2020 · 648fc8d · 648fc8d
1 parent 5ad76dd
commit 648fc8d
Show file tree

Hide file tree

Showing 7 changed files with 496 additions and 358 deletions.
diff --git a/packages/form/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/form/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -906,13 +906,16 @@ exports[`Storyshots Sample Form sample 1`] = `
         >
           <div
             data-css-1a26704=""
+            onFocus={[Function]}
+            onKeyDown={[Function]}
             role="radiogroup"
             style={
               Object {
                 "maxWidth": "none",
                 "width": "100%",
               }
             }
+            tabIndex={0}
           >
             <div
               data-css-xp79s5=""
@@ -921,7 +924,7 @@ exports[`Storyshots Sample Form sample 1`] = `
                 data-css-kn3wr0=""
               >
                 <div
-                  data-css-1lxv0yd=""
+                  data-css-1gbdc34=""
                 >
                   <div
                     data-css-1lu7sfl=""
@@ -930,18 +933,19 @@ exports[`Storyshots Sample Form sample 1`] = `
                     <div
                       aria-checked={false}
                       data-css-1wbxh41=""
+                      onFocus={[Function]}
                       role="radio"
                       tabIndex="-1"
                     />
                   </div>
                 </div>
                 <input
-                  data-css-fplhjw=""
+                  checked={false}
+                  data-css-gyrv08=""
                   name="sample"
-                  onBlur={[Function]}
                   onClick={[Function]}
-                  onFocus={[Function]}
                   readOnly={true}
+                  tabIndex="-1"
                   type="radio"
                   value="full"
                 />
@@ -951,11 +955,15 @@ exports[`Storyshots Sample Form sample 1`] = `
                   Full-time employement
                 </div>
               </label>
+            </div>
+            <div
+              data-css-xp79s5=""
+            >
               <label
                 data-css-kn3wr0=""
               >
                 <div
-                  data-css-1lxv0yd=""
+                  data-css-1gbdc34=""
                 >
                   <div
                     data-css-1lu7sfl=""
@@ -964,18 +972,19 @@ exports[`Storyshots Sample Form sample 1`] = `
                     <div
                       aria-checked={false}
                       data-css-1wbxh41=""
+                      onFocus={[Function]}
                       role="radio"
                       tabIndex="-1"
                     />
                   </div>
                 </div>
                 <input
-                  data-css-fplhjw=""
+                  checked={false}
+                  data-css-gyrv08=""
                   name="sample"
-                  onBlur={[Function]}
                   onClick={[Function]}
-                  onFocus={[Function]}
                   readOnly={true}
+                  tabIndex="-1"
                   type="radio"
                   value="part"
                 />

diff --git a/packages/radio/src/css/index.js b/packages/radio/src/css/index.js
@@ -54,8 +54,7 @@ export default {
 
   '.psds-radio-button__circle-outer': {
     width: '16px',
-    marginRight: layout.spacingSmall,
-    pointerEvents: 'none'
+    marginRight: layout.spacingSmall
   },
 
   '.psds-radio-button__circle': {
@@ -88,12 +87,7 @@ export default {
   },
 
   '.psds-radio-button__input': {
-    opacity: 0,
-    width: 0,
-    height: 0,
-    '&:focus': {
-      outline: 'none'
-    }
+    display: 'none'
   },
 
   '.psds-radio-button__label': {