Merge pull request #46 from make-software/bugfix/fix-aligment-in-radio-button

fix aligment and add custom size in radio button

Author: eugenebelov

dist/cspr-design.es.js

@@ -39685,6 +39685,7 @@ const Iv = be.div.withConfig({
   theme: e
 }) => ({
   display: "flex",
+  alignItems: "center",
   cursor: "pointer",
   userSelect: "none"
 })), Lv = be.div.withConfig({
@@ -39693,13 +39694,14 @@ const Iv = be.div.withConfig({
 })(({
   theme: e,
   disabled: o,
-  color: g = "contentBlue"
+  size: g,
+  color: C = "contentBlue"
 }) => ({
-  width: 24,
-  height: 24,
-  minWidth: 24,
-  minHeight: 24,
-  border: o ? `2px solid ${e.styleguideColors.contentQuaternary}` : `2px solid ${e.styleguideColors[g]}`,
+  width: g,
+  height: g,
+  minWidth: g,
+  minHeight: g,
+  border: o ? `2px solid ${e.styleguideColors.contentQuaternary}` : `2px solid ${e.styleguideColors[C]}`,
   borderRadius: "50%",
   display: "flex",
   justifyContent: "center",
@@ -39715,20 +39717,21 @@ const Iv = be.div.withConfig({
   color: C = "contentBlue"
 }) => ({
   borderRadius: "50%",
-  width: o ? 0 : 12,
-  height: o ? 0 : 12,
+  width: o ? 0 : "70%",
+  height: o ? 0 : "70%",
   backgroundColor: g ? e.styleguideColors.contentQuaternary : e.styleguideColors[C]
 })), R_ = ({
   selected: e,
   onChange: o,
   label: g,
   value: C,
   disabled: A,
-  color: x
+  color: x,
+  size: r = 24
 }) => /* @__PURE__ */ Pe(Nv, { onClick: () => {
   o && o(C);
 }, children: [
-  /* @__PURE__ */ $(Lv, { disabled: A, color: x, children: /* @__PURE__ */ $(Rv, { unslected: C !== e, disabled: A, color: x }) }),
+  /* @__PURE__ */ $(Lv, { disabled: A, color: x, size: r, children: /* @__PURE__ */ $(Rv, { unslected: C !== e, disabled: A, color: x }) }),
   g
 ] }), Bv = {
   keybase: Jf,

dist/cspr-design.umd.js

@@ -30,6 +30,7 @@ const Template: StoryFn<typeof RadioButton> = (args) => (
   <FlexRow itemsSpacing={30}>
     <FlexColumn itemsSpacing={20}>
       <RadioButton {...args} />
+      <RadioButton {...args} label={'Mainnet'} size={12} />
     </FlexColumn>
   </FlexRow>
 );

dist/lib/components/confirmation-window/confirmation-window.d.ts.map

@@ -9,39 +9,43 @@ export interface RadioButtonProps extends BaseProps {
   value: string;
   color?: string;
   disabled?: boolean;
+  size: number;
 }
 
 const Container = styled.div(({ theme }) => ({
   display: 'flex',
+  alignItems: 'center',
   cursor: 'pointer',
   userSelect: 'none',
 }));
 
-const OuterCircle = styled.div<{ disabled?: boolean; color?: string }>(
-  ({ theme, disabled, color = 'contentBlue' }) => ({
-    width: 24,
-    height: 24,
-    minWidth: 24,
-    minHeight: 24,
-    border: disabled
-      ? `2px solid ${theme.styleguideColors.contentQuaternary}`
-      : `2px solid ${theme.styleguideColors[color]}`,
-    borderRadius: '50%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  }),
-);
+const OuterCircle = styled.div<{
+  disabled?: boolean;
+  color?: string;
+  size: number;
+}>(({ theme, disabled, size, color = 'contentBlue' }) => ({
+  width: size,
+  height: size,
+  minWidth: size,
+  minHeight: size,
+  border: disabled
+    ? `2px solid ${theme.styleguideColors.contentQuaternary}`
+    : `2px solid ${theme.styleguideColors[color]}`,
+  borderRadius: '50%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginRight: 12,
+}));
 
 const InnerCircle = styled.div<{
   unslected: boolean;
   disabled?: boolean;
   color?: string;
 }>(({ theme, unslected, disabled, color = 'contentBlue' }) => ({
   borderRadius: '50%',
-  width: unslected ? 0 : 12,
-  height: unslected ? 0 : 12,
+  width: unslected ? 0 : '70%',
+  height: unslected ? 0 : '70%',
   backgroundColor: disabled
     ? theme.styleguideColors.contentQuaternary
     : theme.styleguideColors[color],
@@ -54,14 +58,15 @@ export const RadioButton = ({
   value,
   disabled,
   color,
+  size = 24,
 }: RadioButtonProps) => {
   return (
     <Container
       onClick={() => {
         onChange && onChange(value);
       }}
     >
-      <OuterCircle disabled={disabled} color={color}>
+      <OuterCircle disabled={disabled} color={color} size={size}>
         <InnerCircle
           unslected={value !== selected}
           disabled={disabled}