feat(ui): DOMA-8921 updated Checkbox (#4675)

* feat(ui): DOMA-8921 updated Checkbox * refactor(ui): DOMA-8921 fixed stylelint * feat(ui): DOMA-8921 remove prop Checkbox.focus * refactor(condo): DOMA-8921 refactored after review
open-condo-software · May 2, 2024 · 5055cec · 5055cec
1 parent c495b45
commit 5055cec
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 102 deletions.
diff --git a/packages/ui/src/components/Checkbox/mixins.less b/packages/ui/src/components/Checkbox/mixins.less
@@ -1,9 +1,10 @@
-.condo-checkbox-inner-layer(@color, @checkbox-inner-border-radius) {
+.condo-checkbox-layer(@margin) {
   position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  background: @color border-box;
-  border-radius: @checkbox-inner-border-radius;
+  top: @margin;
+  right: @margin;
+  bottom: @margin;
+  left: @margin;
+  display: block;
+  border-radius: inherit;
   content: "";
 }
diff --git a/packages/ui/src/components/Checkbox/style.less b/packages/ui/src/components/Checkbox/style.less
@@ -1,115 +1,56 @@
 @import "antd/lib/checkbox/style/index.less";
 @import (reference) "@open-condo/ui/src/tokens/variables.less";
 @import (reference) "@open-condo/ui/src/components/style/mixins/typography";
+@import (reference) "@open-condo/ui/src/components/style/mixins/transition";
 @import "./mixins";
 
 @checkbox-border-width: @condo-global-border-width-default;
 @checkbox-border-radius: @condo-global-border-radius-small;
 @checkbox-size: (@condo-global-spacing-24 - (@checkbox-border-width * 2));
-@checkbox-inner-border-radius: @checkbox-border-radius - @checkbox-border-width;
 
 @condo-checkbox-checkmark-top: ((@checkbox-size / 2));
 @condo-checkbox-checkmark-left: ((@checkbox-size / 4) - 0.5);
 @condo-checkbox-checkmark-width: (@checkbox-size / 4) - 1;
 @condo-checkbox-checkmark-height: (@checkbox-size / 2) - 1.5;
 
+@condo-checkbox-focus-outline-width: @condo-global-border-width-default * 2;
+@condo-checkbox-focus-layer-margin: @condo-checkbox-focus-outline-width + @checkbox-border-width + 2px;
 @condo-checkbox-hidden-area: @condo-global-spacing-8;
 
 .condo-checkbox-wrapper {
   align-items: center;
 
   .condo-checkbox {
     top: 0;
+    border-color: @condo-global-color-gray-5;
 
-    &-input {
-      margin: 0;
-    }
+    .condo-transition(border-color);
 
     &-inner {
       box-sizing: content-box;
       border-color: @condo-global-color-gray-5;
+      outline: none;
 
-      &::after {
-        transition: none;
-      }
-    }
-
-    &-indeterminate > .condo-checkbox-inner {
-      &::after {
-        width: @condo-global-spacing-12;
-        height: @condo-global-spacing-4;
-        background: @condo-global-color-brand-gradient-5 border-box;
-        border-radius: @condo-global-border-width-default;
-      }
-
-      &::before {
-        .condo-checkbox-inner-layer(@condo-global-color-brand-gradient-1, @checkbox-inner-border-radius);
-      }
-    }
-
-    &-checked::after {
-      border: none;
-    }
-
-    &-checked > .condo-checkbox-inner {
-      box-sizing: content-box;
-      background: @condo-global-color-gray-5 border-box;
-      border-color: transparent;
+      .condo-transition(border-color, opacity);
 
+      // Before layer is used to show gradient outline on tab-focusing
       &::before {
-        .condo-checkbox-inner-layer(@condo-global-color-brand-gradient-1, @checkbox-inner-border-radius);
+        box-sizing: border-box;
+        background: @condo-global-color-brand-gradient-3 border-box;
+        border: @condo-checkbox-focus-outline-width solid transparent;
+        opacity: 1;
+        mask: linear-gradient(#111 0 0) padding-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
       }
 
       &::after {
-        top: @condo-checkbox-checkmark-top - 1;
-        left: @condo-checkbox-checkmark-left;
-        box-sizing: content-box;
-        width: @condo-checkbox-checkmark-width;
-        height: @condo-checkbox-checkmark-height;
-        border-width: 3px;
-        border-image-source: linear-gradient(45deg, #4cd174 0%, #6db8f2 100%);
-        border-image-slice: 1;
-        transform: rotate(48deg) scale(1) translate(-50%, -50%);
         transition: none;
       }
     }
 
-    &-disabled {
-      & > .condo-checkbox-inner {
-        background-color: @condo-global-color-gray-1;
-        //border color in disabled is defined with !important so I need to use it to override
-        border-color: @condo-global-color-gray-3 !important;
-      }
-
-      &.condo-checkbox-checked > .condo-checkbox-inner {
-        &::before {
-          background: @condo-global-color-gray-1;
-        }
-
-        &::after {
-          border-color: @condo-global-color-gray-5;
-          border-image-source: none;
-        }
-      }
-    }
-
-    &-input:focus + .condo-checkbox-inner {
-      background: @condo-global-color-brand-gradient-5 border-box;
-      border-color: transparent;
-
-      &::before {
-        .condo-checkbox-inner-layer(@condo-global-color-white, @checkbox-inner-border-radius);
-      }
-    }
-
-    &-indeterminate.condo-checkbox-disabled > .condo-checkbox-inner {
-      &::after {
-        background: @condo-global-color-gray-5;
-      }
-
-      &::before {
-        .condo-checkbox-inner-layer(@condo-global-color-white, @checkbox-inner-border-radius);
-      }
+    &-checked::after {
+      border: none;
     }
 
     &::after {
@@ -125,38 +66,57 @@
     }
   }
 
-  &:hover > .condo-checkbox > .condo-checkbox-inner {
-    border-color: @condo-global-color-gray-7;
+  &-disabled .condo-checkbox-inner {
+    opacity: @condo-global-opacity-disabled;
   }
 
-  &:hover > .condo-checkbox-checked > .condo-checkbox-inner::before {
-    border-radius: @checkbox-inner-border-radius;
+  .condo-checkbox-input {
+    margin: 0;
+
+    &:focus + .condo-checkbox-inner {
+      border-color: @condo-global-color-gray-5;
+    }
   }
 
-  .condo-checkbox-indeterminate > .condo-checkbox-input:focus + .condo-checkbox-inner::before {
-    .condo-checkbox-inner-layer(@condo-global-color-brand-gradient-1, @checkbox-inner-border-radius);
+  .condo-checkbox.condo-checkbox-indeterminate > .condo-checkbox-inner {
+    background: @condo-global-color-brand-gradient-1;
+
+    &::after {
+      width: 12px;
+      height: @condo-global-spacing-4;
+      background: @condo-global-color-brand-gradient-5 border-box;
+      border-radius: @condo-global-border-width-default;
+    }
   }
 
-  &:hover > .condo-checkbox-checked > .condo-checkbox-inner {
-    background: @condo-global-color-brand-gradient-5 border-box;
-    border-color: transparent;
+  .condo-checkbox.condo-checkbox-checked > .condo-checkbox-inner {
+    background: @condo-global-color-brand-gradient-1;
+
+    &::after {
+      top: @condo-checkbox-checkmark-top - 1;
+      left: @condo-checkbox-checkmark-left;
+      box-sizing: content-box;
+      width: @condo-checkbox-checkmark-width;
+      height: @condo-checkbox-checkmark-height;
+      border-width: 3px;
+      border-image-source: linear-gradient(45deg, #4cd174 0%, #6db8f2 100%);
+      border-image-slice: 1;
+      transform: rotate(48deg) scale(1) translate(-50%, -50%);
+      transition: none;
+    }
   }
 
-  &:hover > .condo-checkbox-disabled > .condo-checkbox-inner {
-    background: @condo-global-color-gray-1 border-box;
-    border-color: transparent;
+  &-disabled .condo-checkbox:not(.condo-checkbox-indeterminate, .condo-checkbox-checked) > .condo-checkbox-inner {
+    background: transparent;
   }
 
-  .condo-checkbox-checked > .condo-checkbox-input:focus + .condo-checkbox-inner {
-    background: @condo-global-color-brand-gradient-5 border-box;
-    border-color: transparent;
+  .condo-checkbox-input:focus-visible + .condo-checkbox-inner::before {
+    .condo-checkbox-layer(-@condo-checkbox-focus-layer-margin);
 
-    &::before {
-      .condo-checkbox-inner-layer(@condo-global-color-brand-gradient-1, @checkbox-inner-border-radius);
-    }
+    border-radius: @condo-global-border-radius-medium;
   }
 
-  &:hover > .condo-checkbox::after {
-    visibility: visible;
+  &:hover:not(&-disabled) > .condo-checkbox > .condo-checkbox-inner {
+    border-color: @condo-global-color-gray-7;
   }
 }
diff --git a/packages/ui/src/components/Typography/style.less b/packages/ui/src/components/Typography/style.less
@@ -1,10 +1,12 @@
 @import "antd/lib/tooltip/style/index.less";
 @import (reference) "@open-condo/ui/src/tokens/variables.less";
 @import (reference) "@open-condo/ui/src/components/style/mixins/typography.less";
+@import (reference) "@open-condo/ui/src/components/style/mixins/transition";
 @import "@open-condo/ui/src/components/style/mixins/link.less";
 
 .condo-typography {
   @condo-typography-decoration-thickness: 1px;
+  .condo-transition(color, opacity, text-decoration-color);
 
   word-break: break-word;
 

diff --git a/packages/ui/src/components/style/mixins/transition.less b/packages/ui/src/components/style/mixins/transition.less
@@ -0,0 +1,5 @@
+.condo-transition(@transition-property...) {
+  transition-timing-function: ease-in;
+  transition-duration: @condo-global-transition-duration-default;
+  transition-property: @transition-property;
+}