revert: revert "feat(ui): add dVerticalCenter to checkbox and radio"

This reverts commit cfe1fe7.
DevCloudFE · Mar 17, 2023 · 9b0b06a · 9b0b06a
1 parent d2dc4f1
commit 9b0b06a
Show file tree

Hide file tree

Showing 8 changed files with 4 additions and 56 deletions.
diff --git a/packages/ui/src/components/checkbox/Checkbox.tsx b/packages/ui/src/components/checkbox/Checkbox.tsx
@@ -19,7 +19,6 @@ export interface DCheckboxProps extends React.HTMLAttributes<HTMLElement> {
   };
   dFormControl?: DFormControl;
   dModel?: boolean;
-  dVerticalCenter?: boolean;
   dDisabled?: boolean;
   dIndeterminate?: boolean;
   dInputRender?: DCloneHTMLElement<React.InputHTMLAttributes<HTMLInputElement>>;
@@ -37,7 +36,6 @@ export const DCheckbox: {
     dRef,
     dFormControl,
     dModel,
-    dVerticalCenter = false,
     dDisabled = false,
     dIndeterminate = false,
     dInputRender,
@@ -66,7 +64,6 @@ 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,

diff --git a/packages/ui/src/components/checkbox/CheckboxGroup.tsx b/packages/ui/src/components/checkbox/CheckboxGroup.tsx
@@ -12,7 +12,6 @@ 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;
@@ -24,7 +23,6 @@ export function DCheckboxGroup<V extends DId>(props: DCheckboxGroupProps<V>): JS
     dFormControl,
     dList,
     dModel,
-    dVerticalCenter = false,
     dDisabled = false,
     dVertical = false,
     onModelChange,
@@ -41,7 +39,6 @@ export function DCheckboxGroup<V extends DId>(props: DCheckboxGroupProps<V>): JS
       dFormControl={dFormControl}
       dList={dList}
       dModel={dModel}
-      dVerticalCenter={dVerticalCenter}
       dDisabled={dDisabled}
       dRender={(nodes) => (
         <div

diff --git a/packages/ui/src/components/checkbox/CheckboxGroupRenderer.tsx b/packages/ui/src/components/checkbox/CheckboxGroupRenderer.tsx
@@ -16,23 +16,14 @@ 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,
-    dVerticalCenter = false,
-    dDisabled = false,
-    dRender,
-    onModelChange,
-  } = useComponentConfig(COMPONENT_NAME, props);
+  const { dFormControl, dList, dModel, dDisabled = false, dRender, onModelChange } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const { gDisabled } = useGeneralContext();
@@ -47,7 +38,6 @@ 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, {

diff --git a/packages/ui/src/components/radio/Radio.tsx b/packages/ui/src/components/radio/Radio.tsx
@@ -22,7 +22,6 @@ export interface DRadioProps extends React.HTMLAttributes<HTMLElement> {
   };
   dFormControl?: DFormControl;
   dModel?: boolean;
-  dVerticalCenter?: boolean;
   dDisabled?: boolean;
   dInputRender?: DCloneHTMLElement<React.InputHTMLAttributes<HTMLInputElement>>;
   onModelChange?: (checked: boolean) => void;
@@ -43,7 +42,6 @@ export const DRadio: {
     dRef,
     dFormControl,
     dModel,
-    dVerticalCenter = false,
     dDisabled = false,
     dInputRender,
     onModelChange,
@@ -83,7 +81,6 @@ 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,

diff --git a/packages/ui/src/components/radio/RadioGroup.tsx b/packages/ui/src/components/radio/RadioGroup.tsx
@@ -19,7 +19,6 @@ 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;
@@ -34,7 +33,6 @@ export function DRadioGroup<V extends DId>(props: DRadioGroupProps<V>): JSX.Elem
     dList,
     dModel,
     dName,
-    dVerticalCenter = false,
     dDisabled = false,
     dType,
     dSize,
@@ -65,7 +63,6 @@ export function DRadioGroup<V extends DId>(props: DRadioGroupProps<V>): JSX.Elem
       dList={dList}
       dModel={dModel}
       dName={dName}
-      dVerticalCenter={dVerticalCenter}
       dDisabled={dDisabled}
       dRender={(nodes) => (
         <DCompose

diff --git a/packages/ui/src/components/radio/RadioGroupRenderer.tsx b/packages/ui/src/components/radio/RadioGroupRenderer.tsx
@@ -23,24 +23,14 @@ 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,
-    dVerticalCenter = false,
-    dDisabled = false,
-    dRender,
-    onModelChange,
-  } = useComponentConfig(COMPONENT_NAME, props);
+  const { dFormControl, dList, dModel, dName, dDisabled = false, dRender, onModelChange } = useComponentConfig(COMPONENT_NAME, props);
 
   //#region Context
   const { gDisabled } = useGeneralContext();
@@ -67,7 +57,6 @@ 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, {

diff --git a/packages/ui/src/styles/components/checkbox.scss b/packages/ui/src/styles/components/checkbox.scss
@@ -19,7 +19,7 @@
 
   position: relative;
   display: inline-flex;
-  line-height: 1.25;
+  align-items: center;
 
   &:hover {
     @include e(input) {
@@ -96,17 +96,8 @@
     }
   }
 
-  @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;

diff --git a/packages/ui/src/styles/components/radio.scss b/packages/ui/src/styles/components/radio.scss
@@ -4,7 +4,7 @@
 @include b(radio) {
   position: relative;
   display: inline-flex;
-  line-height: 1.25;
+  align-items: center;
 
   &:hover {
     @include e(input) {
@@ -50,7 +50,6 @@
   }
 
   @include m(button) {
-    align-items: center;
     height: var(--#{$rd-prefix}size);
     white-space: nowrap;
     cursor: pointer;
@@ -115,17 +114,8 @@
     }
   }
 
-  @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;