Merge pull request #49 from make-software/task/adjust-checkbox-and-radiobutton-to-design

update inactive styles for checkbox and radio button

Author: eugenebelov

dist/cspr-design.es.js

@@ -35734,7 +35734,7 @@ const k8 = (e, o) => ({
       fill: o && !g ? e.styleguideColors.backgroundPrimary : o && g ? e.styleguideColors.contentQuaternary : "none"
     },
     rect: {
-      stroke: g ? e.styleguideColors.contentQuaternary : A || e.styleguideColors.contentBlue
+      stroke: g ? e.styleguideColors.contentQuaternary : A || e.styleguideColors.contentQuaternary
     }
   },
   span: {
@@ -39693,15 +39693,16 @@ const Iv = be.div.withConfig({
   componentId: "sc-1c62lye-1"
 })(({
   theme: e,
-  disabled: o,
-  size: g,
-  color: C = "contentBlue"
+  unselected: o,
+  disabled: g,
+  size: C,
+  color: A = "contentBlue"
 }) => ({
-  width: g,
-  height: g,
-  minWidth: g,
-  minHeight: g,
-  border: o ? `2px solid ${e.styleguideColors.contentQuaternary}` : `2px solid ${e.styleguideColors[C]}`,
+  width: C,
+  height: C,
+  minWidth: C,
+  minHeight: C,
+  border: g || o ? `2px solid ${e.styleguideColors.contentQuaternary}` : `2px solid ${e.styleguideColors[A]}`,
   borderRadius: "50%",
   display: "flex",
   justifyContent: "center",
@@ -39731,7 +39732,7 @@ const Iv = be.div.withConfig({
 }) => /* @__PURE__ */ Pe(Nv, { onClick: () => {
   o && o(C);
 }, children: [
-  /* @__PURE__ */ $(Lv, { disabled: A, color: x, size: r, children: /* @__PURE__ */ $(Rv, { unslected: C !== e, disabled: A, color: x }) }),
+  /* @__PURE__ */ $(Lv, { disabled: A, unselected: C !== e, color: x, size: r, children: /* @__PURE__ */ $(Rv, { unslected: C !== e, disabled: A, color: x }) }),
   g
 ] }), Bv = {
   keybase: Jf,

dist/cspr-design.umd.js

@@ -22,6 +22,11 @@ const Template: StoryFn<typeof Checkbox> = (args) => (
     <FlexColumn itemsSpacing={10}>
       <Checkbox checked disabled label="disabled" />
     </FlexColumn>
+    <FlexColumn itemsSpacing={10}>
+      <Checkbox checked={false} label="case 1" />
+      <Checkbox checked={true} label="case 2" />
+      <Checkbox checked={false} label="case 3" />
+    </FlexColumn>
   </FlexRow>
 );
 

dist/lib/components/radio-button/radio-button.d.ts.map

@@ -26,30 +26,30 @@ const StyledFlexRow = styled(FlexRow)<{
         checked && !disabled && customCheckedColor
           ? customCheckedColor
           : checked && !disabled
-          ? theme.styleguideColors.contentBlue
-          : 'none',
+            ? theme.styleguideColors.contentBlue
+            : 'none',
       path: {
         fill:
           checked && !disabled
             ? theme.styleguideColors.backgroundPrimary
             : checked && disabled
-            ? theme.styleguideColors.contentQuaternary
-            : 'none',
+              ? theme.styleguideColors.contentQuaternary
+              : 'none',
       },
       rect: {
         stroke: disabled
           ? theme.styleguideColors.contentQuaternary
           : customUncheckedColor
-          ? customUncheckedColor
-          : theme.styleguideColors.contentBlue,
+            ? customUncheckedColor
+            : theme.styleguideColors.contentQuaternary,
       },
     },
     span: {
       color: disabled
         ? theme.styleguideColors.contentQuaternary
         : theme.styleguideColors.contentPrimary,
     },
-  })
+  }),
 );
 
 export enum CheckboxFontSize {
@@ -107,16 +107,16 @@ export function Checkbox({
       disabled={disabled}
       onClick={handleClick}
       onKeyDown={(ev) => {
-        if(ev.key === 'Enter'){
-          handleClick(ev)
+        if (ev.key === 'Enter') {
+          handleClick(ev);
         }
       }}
       customCheckedColor={customCheckedColor}
       customUncheckedColor={customUncheckedColor}
       role="checkbox"
       aria-checked={checked}
       aria-disabled={disabled}
-      aria-label={checked ? "Checked" : "Not checked"}
+      aria-label={checked ? 'Checked' : 'Not checked'}
       tabIndex={0}
     >
       <SvgIcon src={iconSrc} />

src/lib/components/checkbox/checkbox.stories.tsx

@@ -31,6 +31,23 @@ const Template: StoryFn<typeof RadioButton> = (args) => (
     <FlexColumn itemsSpacing={20}>
       <RadioButton {...args} />
       <RadioButton {...args} label={'Mainnet'} size={12} />
+      <RadioButton {...args} label={'Mainnet'} size={12} disabled />
+    </FlexColumn>
+    <FlexColumn>
+      <RadioButton
+        value={'1'}
+        selected={'2'}
+        disabled={false}
+        label={'case 1'}
+        size={12}
+      />
+      <RadioButton
+        value={'2'}
+        selected={'2'}
+        disabled={false}
+        label={'case 2'}
+        size={12}
+      />
     </FlexColumn>
   </FlexRow>
 );

src/lib/components/checkbox/checkbox.tsx

@@ -23,14 +23,16 @@ const OuterCircle = styled.div<{
   disabled?: boolean;
   color?: string;
   size: number;
-}>(({ theme, disabled, size, color = 'contentBlue' }) => ({
+  unselected?: boolean;
+}>(({ theme, unselected, disabled, size, color = 'contentBlue' }) => ({
   width: size,
   height: size,
   minWidth: size,
   minHeight: size,
-  border: disabled
-    ? `2px solid ${theme.styleguideColors.contentQuaternary}`
-    : `2px solid ${theme.styleguideColors[color]}`,
+  border:
+    disabled || unselected
+      ? `2px solid ${theme.styleguideColors.contentQuaternary}`
+      : `2px solid ${theme.styleguideColors[color]}`,
   borderRadius: '50%',
   display: 'flex',
   justifyContent: 'center',
@@ -66,7 +68,12 @@ export const RadioButton = ({
         onChange && onChange(value);
       }}
     >
-      <OuterCircle disabled={disabled} color={color} size={size}>
+      <OuterCircle
+        disabled={disabled}
+        unselected={value !== selected}
+        color={color}
+        size={size}
+      >
         <InnerCircle
           unslected={value !== selected}
           disabled={disabled}