feat(ui): add dVerticalCenter to checkbox and radio

Author: xiejay97

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

@@ -19,6 +19,7 @@ export interface DCheckboxProps extends React.HTMLAttributes<HTMLElement> {
   };
   dFormControl?: DFormControl;
   dModel?: boolean;
+  dVerticalCenter?: boolean;
   dDisabled?: boolean;
   dIndeterminate?: boolean;
   dInputRender?: DCloneHTMLElement<React.InputHTMLAttributes<HTMLInputElement>>;
@@ -36,6 +37,7 @@ export const DCheckbox: {
     dRef,
     dFormControl,
     dModel,
+    dVerticalCenter = false,
     dDisabled = false,
     dIndeterminate = false,
     dInputRender,
@@ -64,6 +66,7 @@ export const DCheckbox: {
     <label
       {...restProps}
       className={getClassName(restProps.className, `${dPrefix}checkbox`, {
+        [`${dPrefix}checkbox--vertical-center`]: dVerticalCenter,
         'is-indeterminate': dIndeterminate,
         'is-checked': checked,
         'is-disabled': disabled,

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

@@ -12,6 +12,7 @@ export interface DCheckboxGroupProps<V extends DId> extends Omit<React.HTMLAttri
   dFormControl?: DFormControl;
   dModel?: V[];
   dList: DCheckboxItem<V>[];
+  dVerticalCenter?: boolean;
   dDisabled?: boolean;
   dVertical?: boolean;
   onModelChange?: (values: V[]) => void;
@@ -23,6 +24,7 @@ export function DCheckboxGroup<V extends DId>(props: DCheckboxGroupProps<V>): JS
     dFormControl,
     dList,
     dModel,
+    dVerticalCenter = false,
     dDisabled = false,
     dVertical = false,
     onModelChange,
@@ -39,6 +41,7 @@ export function DCheckboxGroup<V extends DId>(props: DCheckboxGroupProps<V>): JS
       dFormControl={dFormControl}
       dList={dList}
       dModel={dModel}
+      dVerticalCenter={dVerticalCenter}
       dDisabled={dDisabled}
       dRender={(nodes) => (
         <div

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

@@ -16,14 +16,23 @@ export interface DCheckboxGroupRendererProps<V extends DId> {
   dFormControl?: DFormControl;
   dModel?: V[];
   dList: DCheckboxItem<V>[];
+  dVerticalCenter?: boolean;
   dDisabled?: boolean;
   dRender: (nodes: React.ReactElement[]) => JSX.Element | null;
   onModelChange?: (values: V[]) => void;
 }
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCheckbox.GroupRenderer' as const });
 export function DCheckboxGroupRenderer<V extends DId>(props: DCheckboxGroupRendererProps<V>): JSX.Element | null {
-  const { dFormControl, dList, dModel, dDisabled = false, dRender, onModelChange } = useComponentConfig(COMPONENT_NAME, props);
+  const {
+    dFormControl,
+    dList,
+    dModel,
+    dVerticalCenter = false,
+    dDisabled = false,
+    dRender,
+    onModelChange,
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const { gDisabled } = useGeneralContext();
@@ -38,6 +47,7 @@ export function DCheckboxGroupRenderer<V extends DId>(props: DCheckboxGroupRende
     dList.map((item, index) => (
       <DCheckbox
         key={item.value}
+        dVerticalCenter={dVerticalCenter}
         dDisabled={item.disabled || disabled}
         dInputRender={(el) =>
           cloneHTMLElement(el, {

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

@@ -22,6 +22,7 @@ export interface DRadioProps extends React.HTMLAttributes<HTMLElement> {
   };
   dFormControl?: DFormControl;
   dModel?: boolean;
+  dVerticalCenter?: boolean;
   dDisabled?: boolean;
   dInputRender?: DCloneHTMLElement<React.InputHTMLAttributes<HTMLInputElement>>;
   onModelChange?: (checked: boolean) => void;
@@ -42,6 +43,7 @@ export const DRadio: {
     dRef,
     dFormControl,
     dModel,
+    dVerticalCenter = false,
     dDisabled = false,
     dInputRender,
     onModelChange,
@@ -81,6 +83,7 @@ export const DRadio: {
           <label
             {...restProps}
             className={getClassName(restProps.className, `${dPrefix}radio`, {
+              [`${dPrefix}radio--vertical-center`]: dVerticalCenter,
               [`${dPrefix}radio--button`]: __type,
               [`${dPrefix}radio--button-${__type}`]: __type,
               [`${dPrefix}radio--${gSize}`]: gSize,

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

@@ -19,6 +19,7 @@ export interface DRadioGroupProps<V extends DId> extends Omit<React.HTMLAttribut
   dList: DRadioItem<V>[];
   dModel?: V | null;
   dName?: string;
+  dVerticalCenter?: boolean;
   dDisabled?: boolean;
   dType?: 'outline' | 'fill';
   dSize?: DSize;
@@ -33,6 +34,7 @@ export function DRadioGroup<V extends DId>(props: DRadioGroupProps<V>): JSX.Elem
     dList,
     dModel,
     dName,
+    dVerticalCenter = false,
     dDisabled = false,
     dType,
     dSize,
@@ -63,6 +65,7 @@ export function DRadioGroup<V extends DId>(props: DRadioGroupProps<V>): JSX.Elem
       dList={dList}
       dModel={dModel}
       dName={dName}
+      dVerticalCenter={dVerticalCenter}
       dDisabled={dDisabled}
       dRender={(nodes) => (
         <DCompose

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

@@ -23,14 +23,24 @@ export interface DRadioGroupRendererProps<V extends DId> {
   dList: DRadioItem<V>[];
   dModel?: V | null;
   dName?: string;
+  dVerticalCenter?: boolean;
   dDisabled?: boolean;
   dRender: (nodes: React.ReactElement[]) => JSX.Element | null;
   onModelChange?: (value: V) => void;
 }
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DRadio.GroupRenderer' as const });
 export function DRadioGroupRenderer<V extends DId>(props: DRadioGroupRendererProps<V>): JSX.Element | null {
-  const { dFormControl, dList, dModel, dName, dDisabled = false, dRender, onModelChange } = useComponentConfig(COMPONENT_NAME, props);
+  const {
+    dFormControl,
+    dList,
+    dModel,
+    dName,
+    dVerticalCenter = false,
+    dDisabled = false,
+    dRender,
+    onModelChange,
+  } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const { gDisabled } = useGeneralContext();
@@ -57,6 +67,7 @@ export function DRadioGroupRenderer<V extends DId>(props: DRadioGroupRendererPro
         <DRadio
           key={item.value}
           dModel={item.value === value}
+          dVerticalCenter={dVerticalCenter}
           dDisabled={item.disabled || disabled}
           dInputRender={(el) =>
             cloneHTMLElement(el, {

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,8 +96,17 @@
     }
   }
 
+  @include m(vertical-center) {
+    align-items: center;
+
+    @include e(state-container) {
+      top: unset;
+    }
+  }
+
   @include e(state-container) {
     position: relative;
+    top: calc((1.25em - 16px) / 2);
     flex-shrink: 0;
     width: 16px;
     height: 16px;

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) {
@@ -50,6 +50,7 @@
   }
 
   @include m(button) {
+    align-items: center;
     height: var(--#{$rd-prefix}size);
     white-space: nowrap;
     cursor: pointer;
@@ -114,8 +115,17 @@
     }
   }
 
+  @include m(vertical-center) {
+    align-items: center;
+
+    @include e(state-container) {
+      top: unset;
+    }
+  }
+
   @include e(input-wrapper) {
     position: relative;
+    top: calc((1.25em - 16px) / 2);
     flex-shrink: 0;
     width: 16px;
     height: 16px;