fix(checkbox): remove extra gap (#1479)

Author: desig9stein

src/components/checkbox/checkbox-base.ts

@@ -87,6 +87,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
 
   protected override createRenderRoot() {
     const root = super.createRenderRoot();
+    this.hideLabel = isEmpty(this.label);
 
     root.addEventListener('slotchange', () => {
       this.hideLabel = isEmpty(this.label);

src/components/checkbox/checkbox.ts

@@ -122,8 +122,7 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
           .hidden=${this.hideLabel}
           part=${partNameMap({ label: true, checked })}
           id=${this.labelId}
-        >
-          <slot></slot>
+          ><slot></slot>
         </span>
       </label>
       ${this.renderValidatorContainer()}

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

@@ -40,6 +40,10 @@ $mark-length: 24;
     transition: color .2s ease-in-out;
 }
 
+[part~='base'] {
+    gap: rem(8px);
+}
+
 [part~='indicator'] {
     display: flex;
     position: absolute;
@@ -65,7 +69,6 @@ label {
     align-items: center;
     cursor: pointer;
     flex-flow: row nowrap;
-    gap: rem(8px);
 }
 
 [part='indicator checked'] {

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

@@ -55,10 +55,6 @@ $theme: $bootstrap;
     }
 }
 
-[part~='base'] {
-    gap: rem(16px);
-}
-
 :host(:hover) {
     [part~='control']::after {
         box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'empty-color-hover');

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

@@ -46,10 +46,6 @@ $disabled-color: var-get($theme, 'disabled-color');
     transform: scale(.8);
 }
 
-[part~='base'] {
-    gap: rem(16px);
-}
-
 :host(:hover) {
     [part~='indicator'] {
         opacity: 1;

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

@@ -21,10 +21,6 @@ $error-color-hover: var-get($theme, 'error-color-hover');
     }
 }
 
-[part~='base'] {
-    gap: rem(16px);
-}
-
 [part~='control'] {
     --size: #{rem(16px)};
 

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

@@ -52,8 +52,6 @@ label {
 }
 
 [part~='base'] {
-    gap: rem(8px);
-
     &:hover {
         [part~='control'] {
             &::before {