refactoing radio input

ui/src/components/radio-group/item.js

@@ -43,10 +43,6 @@ const RadioItem = styled.div`
   }
 `;
 
-const ItemContent = styled.div`
-  display: block;
-  float: left;
-`;
 
 const Item = ({
   children,
@@ -65,9 +61,6 @@ const Item = ({
       tabIndex={tabIndex}
     >
       {children}
-      <ItemContent>
-        {itemContent}
-      </ItemContent>
     </RadioItem>
   );
 };

ui/src/components/radio/index.js

@@ -10,59 +10,61 @@ const {
   default: styled,
 } = Styled;
 
-const StyledInput = styled.input`
+let top;
-  visibility: hidden;
+const left = top = 5;
 
-  &:checked + label::after {
+const CustomInputCircle = `
-    opacity: 1;
-  }
-  &:disabled + label {
-    background-color: rgb(249, 249, 249);
-  }
-  &:disabled + label::after {
-    opacity: 0.3;
-  }
-`;
-
-const border = 1;
-const StyledLabel = styled.label`
-  color: rgb(100, 100, 100);
-  position: absolute;
-  width: ${24 - border}px;
-  height: ${24 - border}px;
-  top: 0;
-  border-radius: 100%;
-  background-color: rgb(255, 255, 255);
-  box-shadow: ${boxes.insetShaddow};
-  border: ${boxes.border.unchecked};
-
-  &::after {
-    opacity: 0;
   content: '';
   position: absolute;
   width: 8px;
   height: 8px;
   background: rgb(100, 100, 100);
-    top: ${(23 / 2) - 4}px;
+  top: ${top * 2}px;
-    left: ${(23 / 2) - 4}px;
+  left: ${left * 2}px;
   border-radius: 100%;
-    transform: rotate(-45deg);
+`;
-  }
 
-  &:hover {
+const StyledInput = styled.input`
+  visibility: hidden;
+  display: none;
+
+  &:checked + span::after {
+    ${CustomInputCircle}
+  }
+  &:disabled + span {
+    background-color: rgb(249, 249, 249);
+  }
+  &:disabled + span::after {
+    opacity: 0.3;
+    ${CustomInputCircle}
+  }
+`;
+
+const StyledLabel = styled.label`
+`;
+
+const StyledSpan = styled.span`
+color: rgb(100, 100, 100);
+position: relative;
+
+&::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: rgb(255, 255, 255);
+  box-shadow: ${boxes.insetShaddow};
+  border: ${boxes.border.unchecked};
+  top: ${top}px;
+  left: ${left}px;
+  border-radius: 100%;
+}
+
+&:hover {
   &::after {
     opacity: 0.3;
   }
-  }
+}
-`;
-
-const StyledDiv = styled.div`
-  width: 24px;
-  height: 24px;
-  position: relative;
-`;
-
-const TextLabel = styled.label`
 `;
 
 const Radio = ({
@@ -83,11 +85,11 @@ const Radio = ({
   tabIndex,
   value
 }) => {
-  const _children = label && children ? children : null;
+  // debugger
+  // const _children = label && children ? children : null;
 
   return (
-    <TextLabel>
+    <StyledLabel>
-      <StyledDiv>
       <StyledInput
         checked={checked}
         defaultChecked={defaultChecked}
@@ -103,12 +105,10 @@ const Radio = ({
         type='radio'
         value={value}
       />
-        <StyledLabel />
+      <StyledSpan>
-      </StyledDiv>
+        {children}
-      <span>
+      </StyledSpan>
-        {_children}
+    </StyledLabel>
-      </span>
-    </TextLabel>
   );
 };