feat(checkbox): update checkbox implementation and slotted checkbox styles (#1489)

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: didimmova

src/components/checkbox/themes/checkbox.base.scss

@@ -16,6 +16,9 @@ $mark-length: 24;
 [part~='control'] {
     --size: #{rem(20px)};
 
+    width: var(--size);
+    height: var(--size);
+    min-width: var(--size);
     position: relative;
     display: inline-flex;
     user-select: none;
@@ -45,22 +48,25 @@ $mark-length: 24;
 }
 
 [part~='indicator'] {
+    --indicator-size: #{rem(18px)};
+
     display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
     inset: 0;
     stroke-linecap: square;
-    stroke-width: 3;
+    stroke-width: var(--mark-stroke, 3);
     stroke-dasharray: $mark-length;
     stroke-dashoffset: $mark-length;
     fill: none;
     opacity: 0;
     z-index: 1;
-    transform: scale(.45);
     transform-origin: center;
 
     svg {
-        width: 100%;
-        height: 100%;
+        width: var(--indicator-size);
+        height: var(--indicator-size);
     }
 }
 
@@ -82,6 +88,11 @@ label {
         stroke-dashoffset: 41;
         opacity: 1;
         transform: rotate(45deg) scale(.45) translateX(-.25rem);
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
     }
 }
 

src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss

@@ -19,18 +19,15 @@ $theme: $bootstrap;
 }
 
 [part~='indicator'] {
-    stroke-width: 3;
-    transform: scale(.7);
+    --indicator-size: #{rem(11px)};
+
     transition: none;
 }
 
 [part~='control'] {
     --size: #{rem(16px)};
 
     border-radius: var-get($theme, 'border-radius-ripple');
-    width: var(--size);
-    height: var(--size);
-    min-width: var(--size);
     transition: all .15s ease-in-out;
     background: var-get($theme, 'empty-fill-color');
 
@@ -92,8 +89,6 @@ $theme: $bootstrap;
     }
 
     [part~='indicator'] {
-        stroke-dashoffset: 41;
-        opacity: 1;
         transform: rotate(45deg) translateX(-.075rem) scale(.7);
     }
 }

src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss

@@ -19,10 +19,6 @@ $disabled-color: var-get($theme, 'disabled-color');
 }
 
 [part~='control'] {
-    width: var(--size, rem(20px));
-    height: var(--size, rem(20px));
-    min-width: var(--size, rem(20px));
-
     // Removing visual artifacts, to understand the problem see
     // https://stackoverflow.com/questions/69658462/inset-box-shadow-visual-artifacts-in-google-chrome
     transform: translate3d(0, 0, 0);
@@ -42,8 +38,8 @@ $disabled-color: var-get($theme, 'disabled-color');
 }
 
 [part~='indicator'] {
-    stroke-width: 1.5;
-    transform: scale(.8);
+    --indicator-size: #{rem(16px)};
+    --mark-stroke: 1.5;
 }
 
 :host(:hover) {

src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss

@@ -25,9 +25,6 @@ $error-color-hover: var-get($theme, 'error-color-hover');
     --size: #{rem(16px)};
 
     border-radius: var-get($theme, 'border-radius-ripple');
-    width: var(--size, rem(16px));
-    height: var(--size, rem(16px));
-    min-width: var(--size, rem(16px));
 
     &::after {
         border-radius: var-get($theme, 'border-radius');
@@ -41,14 +38,15 @@ $error-color-hover: var-get($theme, 'error-color-hover');
 }
 
 [part~='indicator'] {
+    --indicator-size: #{rem(13px)};
+
     stroke: unset;
     stroke-linecap: unset;
     stroke-width: unset;
     stroke-dasharray: unset;
     stroke-dashoffset: unset;
     fill: var-get($theme, 'tick-color');
     transition: none;
-    transform: scale(.8);
 
     rect {
         fill: none;

src/components/checkbox/themes/shared/checkbox/checkbox.material.scss

@@ -16,16 +16,10 @@ $theme: $material;
     @include type-style('subtitle-1');
 }
 
-label {
-    gap: rem(2px);
-}
-
 [part~='control'] {
-    --size: #{rem(20px)};
-
-    width: calc(var(--size) * 2);
-    height: calc(var(--size) * 2);
-    min-width: calc(var(--size) * 2);
+    // We expose that css variable to override the padding of
+    // the checkbox control in components that we nest it in like List and Tree.
+    padding: var(--control-padding, rem(20px));
     transition: background .15s ease-in;
 
     &::after {
@@ -52,6 +46,8 @@ label {
 }
 
 [part~='base'] {
+    gap: rem(2px);
+
     &:hover {
         [part~='control'] {
             &::before {

src/components/list/themes/item.base.scss

@@ -15,6 +15,10 @@
 }
 
 ::slotted(*) {
+    // We're not able to target the control part of the checkbox
+    // that's why we exposed that css variable (https://github.com/w3c/csswg-drafts/issues/3896)
+    --control-padding: 0;
+
     margin: 0;
     font: inherit;
     opacity: inherit;

src/components/tree/themes/shared/item.material.scss

@@ -1,5 +1,9 @@
 @use 'styles/utilities' as *;
 
+igc-checkbox {
+    --control-padding: 0;
+}
+
 [part~='select'] {
-    margin-inline-end: rem(4px);
+    margin-inline: rem(10px) rem(14px);
 }