multi select checkbox

primer · Nov 21, 2024 · 3840230 · 3840230
1 parent 6014cbb
commit 3840230
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 67 deletions.
diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css
@@ -326,6 +326,90 @@
       }
     }
   }
+
+  /*
+  * checkbox item [aria-checked]
+  * listbox [aria-selected]
+  */
+
+  /* multiselect checkmark */
+  & .MultiSelectCheckbox {
+    position: relative;
+    display: grid;
+    width: var(--base-size-16);
+    height: var(--base-size-16);
+    margin: 0;
+    margin-top: var(--base-size-2); /* 2px to center align with label (20px line-height) */
+    cursor: pointer;
+    background-color: var(--bgColor-default);
+    border: var(--borderWidth-thin) solid var(--control-borderColor-emphasis);
+    border-radius: var(--borderRadius-small);
+    transition:
+      background-color,
+      border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
+
+    place-content: center;
+
+    &::before {
+      width: var(--base-size-16);
+      height: var(--base-size-16);
+      content: '';
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--control-checked-fgColor-rest);
+      transition: visibility 0s linear 230ms;
+      clip-path: inset(var(--base-size-16) 0 0 0);
+
+      /* octicon checkmark image */
+      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
+      mask-size: 75%;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1); /*  forwards;  slightly snappier animation out */
+    }
+  }
+
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
+    /* multiselect checkmark */
+
+    & .MultiSelectCheckbox {
+      background-color: var(--control-checked-bgColor-rest);
+      border-color: var(--control-checked-borderColor-rest);
+      transition:
+        background-color,
+        border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
+
+      &::before {
+        visibility: visible;
+        transition: visibility 0s linear 0s;
+        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+      }
+    }
+
+    /* singleselect checkmark */
+    & .ActionListItem-singleSelectCheckmark {
+      visibility: visible;
+    }
+
+    /* checkbox */
+  }
+
+  &[aria-checked='false'],
+  &[aria-selected='false'] {
+    /* multiselect checkmark */
+
+    & .MultiSelectCheckbox {
+      &::before {
+        visibility: hidden;
+      }
+    }
+
+    /* singleselect checkmark */
+    & .ActionListItem-singleSelectCheckmark {
+      visibility: hidden;
+      transition: visibility 0s linear 200ms;
+    }
+  }
 }
 
 /* button or a href */
@@ -476,72 +560,6 @@
     }
   }
 
-  /*
-  * checkbox item [aria-checked]
-  * listbox [aria-selected]
-  */
-  &[aria-checked='true'],
-  &[aria-selected='true'] {
-    /* multiselect checkmark */
-    & .ActionListItem-multiSelectCheckmark {
-      visibility: visible;
-      opacity: 1;
-      transition:
-        visibility 0 linear 0,
-        opacity 50ms;
-    }
-
-    /* singleselect checkmark */
-    & .ActionListItem-singleSelectCheckmark {
-      visibility: visible;
-    }
-
-    /* checkbox */
-    & .ActionListItem-multiSelectIcon {
-      & .ActionListItem-multiSelectIconRect {
-        fill: var(--control-checked-bgColor-rest);
-        stroke: var(--control-checked-bgColor-rest);
-        stroke-width: var(--borderWidth-thin, 1px);
-      }
-
-      & .ActionListItem-multiSelectCheckmark {
-        fill: var(--fgColor-onEmphasis);
-      }
-    }
-  }
-
-  &[aria-checked='false'],
-  &[aria-selected='false'] {
-    /* multiselect checkmark */
-    & .ActionListItem-multiSelectCheckmark {
-      visibility: hidden;
-      opacity: 0;
-      transition:
-        visibility 0 linear 50ms,
-        opacity 50ms;
-    }
-
-    /* singleselect checkmark */
-    & .ActionListItem-singleSelectCheckmark {
-      visibility: hidden;
-      transition: visibility 0s linear 200ms;
-    }
-
-    /* checkbox */
-    & .ActionListItem-multiSelectIcon {
-      & .ActionListItem-multiSelectIconRect {
-        fill: var(--bgColor-default);
-        stroke: var(--control-borderColor-rest);
-        stroke-width: var(--borderWidth-thin, 1px);
-      }
-    }
-
-    & .ActionListItem-multiSelectIconRect {
-      fill: var(--bgColor-default);
-      border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
-    }
-  }
-
   /* sizes */
 
   &.ActionListContent--blockDescription {
@@ -698,3 +716,23 @@
   background: none;
   border: none;
 }
+
+@keyframes checkmarkIn {
+  from {
+    clip-path: inset(var(--base-size-16) 0 0 0);
+  }
+
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+@keyframes checkmarkOut {
+  from {
+    clip-path: inset(0 0 0 0);
+  }
+
+  to {
+    clip-path: inset(var(--base-size-16) 0 0 0);
+  }
+}
diff --git a/packages/react/src/ActionList/Selection.tsx b/packages/react/src/ActionList/Selection.tsx
@@ -71,7 +71,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
   if (enabled) {
     return (
       <VisualContainer className={className}>
-        <div data-component="ActionList.Checkbox" />
+        <div className={classes.MultiSelectCheckbox} />
       </VisualContainer>
     )
   }