@conveyorhq/arrow-ds 1.189.0 → 1.190.0

package/src/components/Checkbox/Checkbox.stories.mdx

@@ -111,10 +111,10 @@ an indeterminate state.
   </Story>
 </Canvas>
 
-### Disabled
+### States
 
 <Canvas withSource={SourceState.OPEN}>
-  <Story name="Disabled">
+  <Story name="States">
     <Checkbox.Group>
       <Checkbox label="Unchecked" />
       <Checkbox label="Checked" checked />
@@ -124,6 +124,19 @@ an indeterminate state.
   </Story>
 </Canvas>
 
+### Blue
+
+<Canvas withSource={SourceState.OPEN}>
+  <Story name="Blue">
+    <Checkbox.Group>
+      <Checkbox color="blue" label="Unchecked" />
+      <Checkbox color="blue" label="Checked" checked />
+      <Checkbox color="blue" label="Disabled" disabled />
+      <Checkbox color="blue" label="Checked + Disabled" checked disabled />
+    </Checkbox.Group>
+  </Story>
+</Canvas>
+
 ### Group Vertical
 
 <Canvas withSource={SourceState.OPEN}>

package/src/components/Checkbox/Checkbox.tsx

@@ -36,6 +36,10 @@ export type CheckboxProps = Omit<InputProps, "checked"> & {
    * displayed by passing the string "indeterminate" instead of true/false.
    */
   checked?: boolean | "indeterminate";
+  /**
+   * Determines the background color of the checkbox when checked.
+   */
+  color?: "brandGreen" | "blue";
 };
 
 const CheckboxGroup = (props: StackProps) => {
@@ -65,6 +69,7 @@ export const Checkbox = ({
   isRequired = undefined,
   tabIndex,
   theme: themeProp,
+  color = "brandGreen",
   ...rest
 }: CheckboxProps) => {
   const { isRequired: isRequiredContext, theme: themeContext } = useContext(
@@ -110,6 +115,10 @@ export const Checkbox = ({
       updatedChecked = CheckboxState.UNCHECKED;
     } else if (checkedState === CheckboxState.UNCHECKED) {
       updatedChecked = CheckboxState.CHECKED;
+    } else if (checkedState === CheckboxState.INDETERMINATE) {
+      updatedChecked = CheckboxState.INDETERMINATE;
+    } else {
+      updatedChecked = CheckboxState.UNCHECKED;
     }
 
     setCheckedState(updatedChecked as CheckboxState);
@@ -151,22 +160,22 @@ export const Checkbox = ({
         className={classnames(
           bem(cn, { e: "Box" }),
           bem(cn, { e: "Box", m: theme }),
+          bem(cn, { e: "Box", m: color }),
           checked && bem(cn, { e: "Box", m: "checked" }),
         )}
       />
-      {checked && (
-        <Icon
-          className={classnames(
-            bem(cn, { e: "Check" }),
-            bem(cn, { e: "Check", m: theme }),
-          )}
-          icon={
-            checkedState === CheckboxState.INDETERMINATE
-              ? ICON_TYPE.MINUS
-              : ICON_TYPE.CHECK
-          }
-        />
-      )}
+      <Icon
+        className={classnames(
+          bem(cn, { e: "Check" }),
+          bem(cn, { e: "Check", m: theme }),
+          checked && bem(cn, { e: "Check", m: "checked" }),
+        )}
+        icon={
+          checkedState === CheckboxState.INDETERMINATE
+            ? ICON_TYPE.MINUS
+            : ICON_TYPE.CHECK
+        }
+      />
     </Box>
   );
 

package/src/components/Checkbox/index.css

@@ -37,10 +37,25 @@
 /* Checked */
 .ads-Checkbox-Check {
   @apply absolute
-         text-h5;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+    inset-0
+    flex
+    items-center
+    justify-center
+    text-h5
+    opacity-0
+    duration-150
+    pointer-events-none;
+
+  transition-property: opacity, transform;
+  transform: scale(0.5);
+}
+
+.ads-Checkbox-Check--checked {
+  @apply opacity-100
+    duration-150;
+
+  transition-property: opacity, transform;
+  transform: scale(1);
 }
 
 /* Focused */

package/src/components/Checkbox/product.css

@@ -4,14 +4,23 @@
 
 .ads-Checkbox-Box--product {
   @apply bg-gray-100
-         border-gray-600;
+         border-gray-600
+         duration-150;
+
+  transition-property: background-color, border-color, opacity;
 }
 
-.ads-Checkbox-Box--product.ads-Checkbox-Box--checked {
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked,
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--brandGreen {
   @apply bg-brandGreen-400
          border-brandGreen-400;
 }
 
+.ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--blue {
+  @apply bg-blue-400
+         border-blue-400;
+}
+
 .ads-Checkbox-Check--product {
   @apply text-white;
 }
@@ -22,11 +31,17 @@
 }
 
 .ads-Checkbox.is-disabled .ads-Checkbox-Box--product {
-  @apply border-gray-400;
+  @apply border-gray-400
+    duration-150;
+}
+
+.ads-Checkbox.is-disabled .ads-Checkbox-Box--product.ads-Checkbox-Box--checked,
+.ads-Checkbox.is-disabled
+  .ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--brandGreen {
+  @apply border-brandGreen-400 opacity-50;
 }
 
-.ads-Checkbox.is-disabled .ads-Checkbox-Box--product.ads-Checkbox-Box--checked {
-  @apply bg-brandGreen-200
-         border-brandGreen-200
-         opacity-50;
+.ads-Checkbox.is-disabled
+  .ads-Checkbox-Box--product.ads-Checkbox-Box--checked.ads-Checkbox-Box--blue {
+  @apply border-blue-400 opacity-50;
 }