Craftmanship/orr (#44)

* test: update checkbox * bump: update package version
mondaycom · Dec 28, 2020 · 52715e7 · 52715e7
1 parent f7d32d2
commit 52715e7
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -1,6 +1,6 @@
+import React, { useEffect, useRef } from "react";
 import NOOP from "lodash/noop";
 import isNil from "lodash/isNil";
-import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import Icon from "../Icon/Icon";
@@ -19,7 +19,12 @@ export const Checkbox = ({
   value,
   name
 }) => {
-  const checkboxClassNames = [`${BASE_CLASS_NAME}__checkbox`];
+  const iconContainerRef = useRef(null);
+
+  const checkboxClassNames = [
+    `${BASE_CLASS_NAME}__checkbox`,
+    `${BASE_CLASS_NAME}__prevent-animation`
+  ];
   let overrideDefaultChecked = defaultChecked;
 
   // If component did not receive default checked and checked props, choose default checked as
@@ -28,6 +33,15 @@ export const Checkbox = ({
     overrideDefaultChecked = false;
   }
 
+  useEffect(() => {
+    if (iconContainerRef.current) {
+      return () => {};
+    }
+    iconContainerRef.current.classList.remove(
+      `${BASE_CLASS_NAME}__prevent-animation`
+    );
+  }, [iconContainerRef]);
+
   return (
     <label className={cx(BASE_CLASS_NAME, componentClassName)}>
       <input
@@ -41,15 +55,15 @@ export const Checkbox = ({
         aria-label={label}
         checked={checked}
       />
-      <div className={cx(...checkboxClassNames)}>
+      <div className={cx(...checkboxClassNames)} ref={iconContainerRef}>
         <Icon
           className={`${BASE_CLASS_NAME}__icon`}
           iconType={Icon.type.SVG}
           icon={Check}
           iconLabel="checkbox"
           ignoreFocusStyle
           clickable
-          iconSize={11}
+          iconSize="16"
         />
       </div>
       <span className={`${BASE_CLASS_NAME}__label`}>{label}</span>

diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
@@ -20,16 +20,6 @@ $checkbox-size: 16px;
   width: fit-content;
   height: min-content;
 
-  &:active {
-    .monday-style-checkbox__checkbox {
-      transform: scale(0.8);
-      transform-origin: center;
-      transition:
-              background-color 0ms linear 50ms,
-              border-color 0ms linear 50ms;
-    }
-  }
-
   &__checkbox {
     cursor: pointer;
     visibility: visible;
@@ -46,7 +36,7 @@ $checkbox-size: 16px;
     overflow: hidden;
 
     &:after {
-      content: ' ';
+      content: " ";
       background-color: transparent;
       position: absolute;
       height: $checkbox-size;
@@ -63,14 +53,14 @@ $checkbox-size: 16px;
 
   &__icon {
     width: 100%;
-    height: 85%;
     @include theme-prop(color, text-color-on-primary);
     visibility: hidden;
   }
 
   &__label {
     @include font-input();
     cursor: pointer;
+    user-select: none;
     margin-inline-start: $spacing-small;
     @include theme-prop(color, primary-text-color);
   }
@@ -91,7 +81,7 @@ $checkbox-size: 16px;
         @include hover-unselected;
       }
 
-      &:checked + .monday-style-checkbox__checkbox{
+      &:checked + .monday-style-checkbox__checkbox {
         @include hover-selected;
       }
     }
@@ -102,6 +92,10 @@ $checkbox-size: 16px;
 
       & + .monday-style-checkbox {
         &__checkbox {
+          animation: checkbox-grow-animation 50ms;
+          &__prevent-animation {
+            animation-duration: 0ms;
+          }
           @include theme-prop(background-color, primary-color);
           border-color: transparent;
 
@@ -114,7 +108,7 @@ $checkbox-size: 16px;
           }
 
           &:after {
-            content: ' ';
+            content: " ";
             @include theme-prop(background-color, primary-color);
             height: $checkbox-size;
             transform: scaleX(0);
@@ -137,7 +131,8 @@ $checkbox-size: 16px;
     }
     &:disabled {
       & + .monday-style-checkbox {
-        &__checkbox, &__checkbox:hover {
+        &__checkbox,
+        &__checkbox:hover {
           @include theme-prop(background-color, disabled-background-color);
           @include theme-prop(border-color, ui-border-color);
 
@@ -148,4 +143,14 @@ $checkbox-size: 16px;
       }
     }
   }
-}
+}
+
+@keyframes checkbox-grow-animation {
+  0% {
+    transform: scale(0.8);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/components/Checkbox/__tests__/__snapshots__/checkbox.jest.js.snap b/src/components/Checkbox/__tests__/__snapshots__/checkbox.jest.js.snap
@@ -15,17 +15,17 @@ exports[`Checkbox Tests Snapshot Tests renders correctly 1`] = `
     value="option1"
   />
   <div
-    className="monday-style-checkbox__checkbox"
+    className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
   >
     <svg
       className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
       fill="currentColor"
-      height="11"
+      height="16"
       onClick={[Function]}
       role="button"
       tabIndex={0}
       viewBox="0 0 20 20"
-      width="11"
+      width="16"
     >
       <path
         clipRule="evenodd"
@@ -58,17 +58,17 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when checked 1`] = `
     value=""
   />
   <div
-    className="monday-style-checkbox__checkbox"
+    className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
   >
     <svg
       className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
       fill="currentColor"
-      height="11"
+      height="16"
       onClick={[Function]}
       role="button"
       tabIndex={0}
       viewBox="0 0 20 20"
-      width="11"
+      width="16"
     >
       <path
         clipRule="evenodd"
@@ -101,17 +101,17 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when disabled 1`] = `
     value=""
   />
   <div
-    className="monday-style-checkbox__checkbox"
+    className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
   >
     <svg
       className="icon_component monday-style-checkbox__icon icon_component--clickable icon_component--no-focus-style"
       fill="currentColor"
-      height="11"
+      height="16"
       onClick={[Function]}
       role="button"
       tabIndex={0}
       viewBox="0 0 20 20"
-      width="11"
+      width="16"
     >
       <path
         clipRule="evenodd"

diff --git a/src/components/Counter/__tests__/__snapshots__/counter.jest.js.snap b/src/components/Counter/__tests__/__snapshots__/counter.jest.js.snap
@@ -3,6 +3,7 @@
 exports[`Snapshots renders correctly with count above limit 1`] = `
 <span
   aria-label=" 999+"
+  aria-labelledby=""
   className=""
 >
   <div
@@ -21,6 +22,7 @@ exports[`Snapshots renders correctly with count above limit 1`] = `
 exports[`Snapshots renders correctly with count below the limit 1`] = `
 <span
   aria-label=" 1"
+  aria-labelledby=""
   className=""
 >
   <div

diff --git a/src/components/componensts-stories.js b/src/components/componensts-stories.js
@@ -3,6 +3,7 @@ export function loadComponentsStories() {
     require("./AttentionBox/__stories__/attentionBox.stories.js"),
     require("./Button/__stories__/button.stories.js"),
     require("./Counter/__stories__/counter.stories.js"),
+    require("./Checkbox/__stories__/checkbox.stories.js"),
     require("./Icon/__stories__/icon.stories"),
     require("./Label/__stories__/label.stories.js"),
     require("./Link/__stories__/link.stories.js"),
@@ -12,12 +13,10 @@ export function loadComponentsStories() {
     require("./RadioButton/__stories__/radioButton.stories.js"),
     require("./Search/__stories__/search.stories.js"),
     require("./TextField/__stories__/textField.stories.js"),
-    require("./Tooltip/__stories__/tooltip.stories.js"),
+    require("./Tooltip/__stories__/tooltip.stories.js")
   ];
 }
 
 export function loadHelpers() {
-  return [
-    require("./FormattedNumber/__stories__/formattedNumber.stories")
-  ]
+  return [require("./FormattedNumber/__stories__/formattedNumber.stories")];
 }