chore(ui): optimize style of checkbox and radio

Author: xiejay97

packages/ui/src/components/checkbox/Checkbox.tsx

@@ -69,30 +69,32 @@ export const DCheckbox: {
         'is-disabled': disabled,
       })}
     >
-      <div className={`${dPrefix}checkbox__state-container`}>
-        <DBaseInput dFormControl={dFormControl} dLabelFor>
-          {({ render: renderBaseInput }) => {
-            const input = renderBaseInput(
-              <input
-                ref={dRef?.input}
-                className={`${dPrefix}checkbox__input`}
-                type="checkbox"
-                disabled={disabled}
-                aria-checked={dIndeterminate ? 'mixed' : checked}
-                onChange={() => {
-                  changeChecked(!checked);
-                }}
-              />
-            );
+      <div className={`${dPrefix}checkbox__state-container-wrapper`}>
+        <div className={`${dPrefix}checkbox__state-container`}>
+          <DBaseInput dFormControl={dFormControl} dLabelFor>
+            {({ render: renderBaseInput }) => {
+              const input = renderBaseInput(
+                <input
+                  ref={dRef?.input}
+                  className={`${dPrefix}checkbox__input`}
+                  type="checkbox"
+                  disabled={disabled}
+                  aria-checked={dIndeterminate ? 'mixed' : checked}
+                  onChange={() => {
+                    changeChecked(!checked);
+                  }}
+                />
+              );
 
-            return isUndefined(dInputRender) ? input : dInputRender(input);
-          }}
-        </DBaseInput>
-        {dIndeterminate ? (
-          <div className={`${dPrefix}checkbox__indeterminate`}></div>
-        ) : (
-          checked && <div className={`${dPrefix}checkbox__tick`}></div>
-        )}
+              return isUndefined(dInputRender) ? input : dInputRender(input);
+            }}
+          </DBaseInput>
+          {dIndeterminate ? (
+            <div className={`${dPrefix}checkbox__indeterminate`}></div>
+          ) : (
+            checked && <div className={`${dPrefix}checkbox__tick`}></div>
+          )}
+        </div>
       </div>
       {checkNodeExist(children) && <div className={`${dPrefix}checkbox__label`}>{children}</div>}
     </label>

packages/ui/src/components/radio/Radio.tsx

@@ -96,32 +96,34 @@ export const DRadio: {
               }
             }}
           >
-            <div className={`${dPrefix}radio__input-wrapper`}>
-              <DFocusVisible onFocusVisibleChange={setFocusVisible}>
-                {({ render: renderFocusVisible }) => (
-                  <DBaseInput dFormControl={dFormControl} dLabelFor>
-                    {({ render: renderBaseInput }) => {
-                      const input = renderFocusVisible(
-                        renderBaseInput(
-                          <input
-                            ref={dRef?.input}
-                            className={`${dPrefix}radio__input`}
-                            type="radio"
-                            checked={checked}
-                            disabled={disabled}
-                            aria-checked={checked}
-                            onChange={() => {
-                              changeChecked(true);
-                            }}
-                          />
-                        )
-                      );
-
-                      return isUndefined(dInputRender) ? input : dInputRender(input);
-                    }}
-                  </DBaseInput>
-                )}
-              </DFocusVisible>
+            <div className={`${dPrefix}radio__input-wrapper-wrapper`}>
+              <div className={`${dPrefix}radio__input-wrapper`}>
+                <DFocusVisible onFocusVisibleChange={setFocusVisible}>
+                  {({ render: renderFocusVisible }) => (
+                    <DBaseInput dFormControl={dFormControl} dLabelFor>
+                      {({ render: renderBaseInput }) => {
+                        const input = renderFocusVisible(
+                          renderBaseInput(
+                            <input
+                              ref={dRef?.input}
+                              className={`${dPrefix}radio__input`}
+                              type="radio"
+                              checked={checked}
+                              disabled={disabled}
+                              aria-checked={checked}
+                              onChange={() => {
+                                changeChecked(true);
+                              }}
+                            />
+                          )
+                        );
+
+                        return isUndefined(dInputRender) ? input : dInputRender(input);
+                      }}
+                    </DBaseInput>
+                  )}
+                </DFocusVisible>
+              </div>
             </div>
             {checkNodeExist(children) && <div className={`${dPrefix}radio__label`}>{children}</div>}
             {waveNode}

packages/ui/src/styles/components/checkbox.scss

@@ -19,7 +19,7 @@
 
   position: relative;
   display: inline-flex;
-  align-items: center;
+  line-height: 1.25;
 
   &:hover {
     @include e(input) {
@@ -96,9 +96,15 @@
     }
   }
 
+  @include e(state-container-wrapper) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: 1.25em;
+  }
+
   @include e(state-container) {
     position: relative;
-    flex-shrink: 0;
     width: 16px;
     height: 16px;
     cursor: pointer;

packages/ui/src/styles/components/radio.scss

@@ -4,7 +4,7 @@
 @include b(radio) {
   position: relative;
   display: inline-flex;
-  align-items: center;
+  line-height: 1.25;
 
   &:hover {
     @include e(input) {
@@ -114,9 +114,15 @@
     }
   }
 
+  @include e(input-wrapper-wrapper) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    height: 1.25em;
+  }
+
   @include e(input-wrapper) {
     position: relative;
-    flex-shrink: 0;
     width: 16px;
     height: 16px;
     margin-right: 8px;