V3 Checkbox and Radio button updated (#216)

* Checkbox updated * Radio button updated
stellar · Jan 26, 2024 · a7e960f · a7e960f
1 parent 73b5ab1
commit a7e960f
Show file tree

Hide file tree

Showing 15 changed files with 183 additions and 86 deletions.
diff --git a/@stellar/design-system-website/docs/components/inputs/checkbox.mdx b/@stellar/design-system-website/docs/components/inputs/checkbox.mdx
@@ -11,7 +11,7 @@ description: "Form input for single and multiple selections."
 
 ```tsx live
 <PreviewBlock componentName="Checkbox">
-  <Checkbox fieldSize="md" id="checkbox" />
+  <Checkbox fieldSize="sm" id="checkbox" />
 </PreviewBlock>
 ```
 

diff --git a/@stellar/design-system-website/docs/components/inputs/radio-button.mdx b/@stellar/design-system-website/docs/components/inputs/radio-button.mdx
@@ -11,7 +11,7 @@ description: "Form input for a single selection."
 
 ```tsx live
 <PreviewBlock componentName="RadioButton">
-  <RadioButton fieldSize="md" id="radio" label="Label" />
+  <RadioButton fieldSize="sm" id="radio" label="Label" />
 </PreviewBlock>
 ```
 

diff --git a/@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx b/@stellar/design-system-website/src/componentPreview/checkboxPreview.tsx
@@ -21,17 +21,17 @@ export const checkboxPreview: ComponentPreview = {
       type: "select",
       prop: "fieldSize",
       options: [
-        {
-          value: "md",
-          label: "MD",
-        },
         {
           value: "sm",
           label: "SM",
         },
         {
-          value: "xs",
-          label: "XS",
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
         },
       ],
     },

diff --git a/@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx b/@stellar/design-system-website/src/componentPreview/radioButtonPreview.tsx
@@ -6,17 +6,17 @@ export const radioButtonPreview: ComponentPreview = {
       type: "select",
       prop: "fieldSize",
       options: [
-        {
-          value: "md",
-          label: "MD",
-        },
         {
           value: "sm",
           label: "SM",
         },
         {
-          value: "xs",
-          label: "XS",
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
         },
       ],
     },

diff --git a/@stellar/design-system-website/src/components/PreviewBlock/styles.css b/@stellar/design-system-website/src/components/PreviewBlock/styles.css
@@ -100,7 +100,7 @@
   max-width: 24rem;
 }
 
-.PreviewBlock .Checkbox__container label {
+.PreviewBlock .PreviewBlock__checkboxes label {
   font-weight: var(--sds-fw-regular);
 }
 

diff --git a/@stellar/design-system/src/components/Checkbox/index.tsx b/@stellar/design-system/src/components/Checkbox/index.tsx
@@ -9,7 +9,7 @@ export interface CheckboxProps {
   id: string;
   // Note: cannot use "size" here because it's input's native property
   /** Size of the checkbox */
-  fieldSize: "md" | "sm" | "xs";
+  fieldSize: "sm" | "md" | "lg";
   /** Label of the checkbox */
   label?: string | React.ReactNode;
   /** Note message of the checkbox */
@@ -61,8 +61,12 @@ export const Checkbox: React.FC<Props> = ({
         </label>
       </div>
 
-      {note && <FieldNote>{note}</FieldNote>}
-      {error && <FieldNote variant="error">{error}</FieldNote>}
+      {note && <FieldNote size={fieldSize}>{note}</FieldNote>}
+      {error && (
+        <FieldNote size={fieldSize} variant="error">
+          {error}
+        </FieldNote>
+      )}
     </div>
   );
 };

diff --git a/@stellar/design-system/src/components/Checkbox/styles.scss b/@stellar/design-system/src/components/Checkbox/styles.scss
@@ -1,18 +1,19 @@
 @use "../../utils.scss" as *;
 
 .Checkbox {
-  // Color
-  --Checkbox-color-background: var(--sds-clr-gray-01);
-  --Checkbox-color-border: var(--sds-clr-gray-06);
+  --Checkbox-color-background: var(--sds-input-color-background-default);
+  --Checkbox-color-border: var(--sds-input-color-border-default);
   --Checkbox-color-icon: var(--sds-clr-base-00);
 
-  // Size
-  --Checkbox-size: #{pxToRem(16px)};
-  --Checkbox-icon-size: #{pxToRem(12px)};
-  --Checkbox-vertical-gap: #{pxToRem(8px)};
+  --Checkbox-size: #{pxToRem(14px)};
+  --Checkbox-icon-size: #{pxToRem(10px)};
+  --Checkbox-vertical-gap: #{pxToRem(2px)};
   --Checkbox-horizontal-gap: #{pxToRem(8px)};
-  --Checkbox-font-size: #{pxToRem(14px)};
-  --Checkbox-line-height: #{pxToRem(22px)};
+  --Checkbox-font-size: #{pxToRem(12px)};
+  --Checkbox-line-height: #{pxToRem(18px)};
+
+  --Checkbox-box-shadow-size: 0;
+  --Checkbox-box-shadow-color: var(--sds-input-box-shadow-color-default);
 
   display: flex;
   flex-direction: column;
@@ -22,30 +23,30 @@
     &:hover {
       input[type="checkbox"] {
         & + label {
-          --Checkbox-color-border: var(--sds-clr-gray-06);
+          --Checkbox-color-border: var(--sds-input-color-border-default);
         }
       }
     }
   }
 
-  &--md {
-    --Checkbox-size: #{pxToRem(18px)};
-    --Checkbox-icon-size: #{pxToRem(14px)};
-    --Checkbox-font-size: #{pxToRem(16px)};
-    --Checkbox-line-height: #{pxToRem(24px)};
+  &--sm {
+    --Checkbox-size: #{pxToRem(14px)};
+    --Checkbox-icon-size: #{pxToRem(10px)};
+    --Checkbox-font-size: #{pxToRem(12px)};
+    --Checkbox-line-height: #{pxToRem(18px)};
   }
 
-  &--sm {
+  &--md {
     --Checkbox-size: #{pxToRem(16px)};
     --Checkbox-icon-size: #{pxToRem(12px)};
-    --Checkbox-font-size: #{pxToRem(14px)};
-    --Checkbox-line-height: #{pxToRem(22px)};
+    --Checkbox-font-size: #{pxToRem(12px)};
+    --Checkbox-line-height: #{pxToRem(18px)};
   }
 
-  &--xs {
-    --Checkbox-size: #{pxToRem(14px)};
-    --Checkbox-icon-size: #{pxToRem(10px)};
-    --Checkbox-font-size: #{pxToRem(12px)};
+  &--lg {
+    --Checkbox-size: #{pxToRem(18px)};
+    --Checkbox-icon-size: #{pxToRem(14px)};
+    --Checkbox-font-size: #{pxToRem(14px)};
     --Checkbox-line-height: #{pxToRem(20px)};
   }
 
@@ -68,15 +69,19 @@
         }
       }
 
+      &:focus + label {
+        --Checkbox-box-shadow-size: #{pxToRem(2px)};
+      }
+
       &:disabled + label {
-        --Checkbox-color-background: var(--sds-clr-gray-01);
-        --Checkbox-color-border: var(--sds-clr-gray-06);
+        --Checkbox-color-background: var(--sds-clr-gray-02);
+        --Checkbox-color-border: var(--sds-input-color-border-disabled);
         cursor: not-allowed;
       }
 
       &:checked:disabled + label {
         --Checkbox-color-background: var(--sds-clr-gray-04);
-        --Checkbox-color-border: var(--sds-clr-gray-06);
+        --Checkbox-color-border: var(--sds-input-color-border-disabled);
         --Checkbox-color-icon: var(--sds-clr-gray-09);
         cursor: not-allowed;
       }
@@ -101,8 +106,11 @@
         border: 1px solid var(--Checkbox-color-border);
         background-color: var(--Checkbox-color-background);
         border-radius: pxToRem(4px);
+        box-shadow: 0 0 0 var(--Checkbox-box-shadow-size)
+          var(--Checkbox-box-shadow-color);
         transition: background-color var(--sds-anim-transition-default),
-          border-color var(--sds-anim-transition-default);
+          border-color var(--sds-anim-transition-default),
+          box-shadow var(--sds-anim-transition-default);
 
         &[data-has-label="true"] {
           margin-top: calc(
@@ -124,19 +132,27 @@
   &--error {
     input[type="checkbox"] {
       & + label {
-        --Checkbox-color-background: var(--sds-clr-red-09);
-        --Checkbox-color-border: var(--sds-clr-red-09);
+        --Checkbox-color-background: var(--sds-input-color-background-error);
+        --Checkbox-color-border: var(--sds-input-color-border-error);
+      }
+
+      &:focus + label {
+        --Checkbox-box-shadow-color: var(--sds-input-box-shadow-color-error);
       }
     }
 
     @media (hover: hover) {
       &:hover {
         input[type="checkbox"]:not(:checked) {
           & + label {
-            --Checkbox-color-border: var(--sds-clr-gray-06);
+            --Checkbox-color-border: var(--sds-input-color-border-error-hover);
           }
         }
       }
     }
   }
+
+  .FieldNote {
+    margin-left: calc(var(--Checkbox-size) + var(--Checkbox-horizontal-gap));
+  }
 }
diff --git a/@stellar/design-system/src/components/Input/index.tsx b/@stellar/design-system/src/components/Input/index.tsx
@@ -140,8 +140,12 @@ export const Input: React.FC<Props> = ({
         )}
       </div>
 
-      {note && <FieldNote>{note}</FieldNote>}
-      {error && <FieldNote variant="error">{error}</FieldNote>}
+      {note && <FieldNote size={fieldSize}>{note}</FieldNote>}
+      {error && (
+        <FieldNote size={fieldSize} variant="error">
+          {error}
+        </FieldNote>
+      )}
     </div>
   );
 };

diff --git a/@stellar/design-system/src/components/RadioButton/index.tsx b/@stellar/design-system/src/components/RadioButton/index.tsx
@@ -9,7 +9,7 @@ export interface RadioButtonProps {
   label: string | React.ReactNode;
   // Note: cannot use "size" here because it's input's native property
   /** Size of the radio button */
-  fieldSize: "md" | "sm" | "xs";
+  fieldSize: "sm" | "md" | "lg";
 }
 
 interface Props

diff --git a/@stellar/design-system/src/components/RadioButton/styles.scss b/@stellar/design-system/src/components/RadioButton/styles.scss
@@ -1,17 +1,18 @@
 @use "../../utils.scss" as *;
 
 .RadioButton {
-  // Color
-  --RadioButton-color-background: var(--sds-clr-gray-01);
-  --RadioButton-color-border: var(--sds-clr-gray-06);
-  --RadioButton-color-icon: var(--sds-clr-gray-01);
-
-  // Size
-  --RadioButton-size: #{pxToRem(16px)};
-  --RadioButton-icon-size: #{pxToRem(8px)};
+  --RadioButton-color-background: var(--sds-input-color-background-default);
+  --RadioButton-color-border: var(--sds-input-color-border-default);
+  --RadioButton-color-icon: var(--sds-input-color-background-default);
+
+  --RadioButton-size: #{pxToRem(14px)};
+  --RadioButton-icon-size: #{pxToRem(6px)};
   --RadioButton-horizontal-gap: #{pxToRem(8px)};
-  --RadioButton-font-size: #{pxToRem(14px)};
-  --RadioButton-line-height: #{pxToRem(22px)};
+  --RadioButton-font-size: #{pxToRem(12px)};
+  --RadioButton-line-height: #{pxToRem(18px)};
+
+  --RadioButton-box-shadow-size: 0;
+  --RadioButton-box-shadow-color: var(--sds-input-box-shadow-color-default);
 
   display: flex;
   align-items: center;
@@ -22,30 +23,32 @@
     &:hover {
       input[type="radio"] {
         & + label {
-          --RadioButton-color-border: var(--sds-clr-gray-06);
+          --RadioButton-color-border: var(
+            --sds-input-color-border-default-hover
+          );
         }
       }
     }
   }
 
-  &--md {
-    --RadioButton-size: #{pxToRem(18px)};
-    --RadioButton-icon-size: #{pxToRem(10px)};
-    --RadioButton-font-size: #{pxToRem(16px)};
-    --RadioButton-line-height: #{pxToRem(24px)};
+  &--sm {
+    --RadioButton-size: #{pxToRem(14px)};
+    --RadioButton-icon-size: #{pxToRem(6px)};
+    --RadioButton-font-size: #{pxToRem(12px)};
+    --RadioButton-line-height: #{pxToRem(18px)};
   }
 
-  &--sm {
+  &--md {
     --RadioButton-size: #{pxToRem(16px)};
     --RadioButton-icon-size: #{pxToRem(8px)};
-    --RadioButton-font-size: #{pxToRem(14px)};
-    --RadioButton-line-height: #{pxToRem(22px)};
+    --RadioButton-font-size: #{pxToRem(12px)};
+    --RadioButton-line-height: #{pxToRem(18px)};
   }
 
-  &--xs {
-    --RadioButton-size: #{pxToRem(14px)};
-    --RadioButton-icon-size: #{pxToRem(6px)};
-    --RadioButton-font-size: #{pxToRem(12px)};
+  &--lg {
+    --RadioButton-size: #{pxToRem(18px)};
+    --RadioButton-icon-size: #{pxToRem(10px)};
+    --RadioButton-font-size: #{pxToRem(14px)};
     --RadioButton-line-height: #{pxToRem(20px)};
   }
 
@@ -63,15 +66,21 @@
       }
     }
 
+    &:focus + label {
+      --RadioButton-box-shadow-size: #{pxToRem(2px)};
+    }
+
     &:disabled + label {
-      --RadioButton-color-background: var(--sds-clr-gray-04);
-      --RadioButton-color-border: var(--sds-clr-gray-06);
+      --RadioButton-color-background: var(
+        --sds-input-color-background-disabled
+      );
+      --RadioButton-color-border: var(--sds-input-color-border-disabled);
       cursor: not-allowed;
     }
 
     &:checked:disabled + label {
       --RadioButton-color-background: var(--sds-clr-gray-04);
-      --RadioButton-color-border: var(--sds-clr-gray-06);
+      --RadioButton-color-border: var(--sds-input-color-border-disabled);
       --RadioButton-color-icon: var(--sds-clr-gray-09);
       cursor: not-allowed;
     }
@@ -85,6 +94,7 @@
     position: relative;
     display: flex;
     gap: var(--RadioButton-horizontal-gap);
+    color: var(--sds-clr-gray-12);
 
     & > span {
       display: flex;
@@ -96,11 +106,14 @@
       border: 1px solid var(--RadioButton-color-border);
       background-color: var(--RadioButton-color-background);
       border-radius: calc(var(--RadioButton-size) / 2);
+      box-shadow: 0 0 0 var(--RadioButton-box-shadow-size)
+        var(--RadioButton-box-shadow-color);
       margin-top: calc(
         (var(--RadioButton-line-height) - var(--RadioButton-size)) / 2
       );
       transition: background-color var(--sds-anim-transition-default),
-        border-color var(--sds-anim-transition-default);
+        border-color var(--sds-anim-transition-default),
+        box-shadow var(--sds-anim-transition-default);
 
       &::before {
         display: block;