fix: fix gap not support in old browser

Author: xiejay97

.stylelintrc

@@ -8,7 +8,8 @@
   "rules": {
     "import-notation": null,
     "selector-class-pattern": null,
-    "block-no-empty": null
+    "block-no-empty": null,
+    "selector-not-notation": "simple"
   },
   "overrides": [
     {

packages/site/src/styles/_app.scss

@@ -201,7 +201,6 @@ h3 {
         'DatePicker': 'date-picker',
         'Image': 'image',
         'Input': 'input',
-        'Radio': 'radio',
         'Select': 'select',
         'Switch': 'switch',
         'Tag': 'tag',
@@ -251,20 +250,6 @@ h3 {
     }
   }
 
-  section[id^='Checkbox'] {
-    .#{$rd-prefix}checkbox {
-      margin-right: 8px;
-      margin-bottom: 12px;
-    }
-
-    .#{$rd-prefix}checkbox-group {
-      .#{$rd-prefix}checkbox {
-        margin-right: 0;
-        margin-bottom: 0;
-      }
-    }
-  }
-
   section[id^='Form'] {
     .#{$rd-prefix}form--inline {
       min-width: 800px;

packages/ui/src/components/checkbox/demos/1.Basic.md

@@ -31,7 +31,9 @@ export default function Demo() {
       </DButton>
       <br />
       <br />
-      <DCheckbox dDisabled={disabled}>Checkbox</DCheckbox>
+      <DCheckbox className="me-3" dDisabled={disabled}>
+        Checkbox
+      </DCheckbox>
       <DCheckbox dIndeterminate dDisabled={disabled}>
         Checkbox
       </DCheckbox>

packages/ui/src/components/checkbox/demos/3.Indeterminate.md

@@ -33,6 +33,7 @@ export default function Demo() {
         {state === true ? 'Clear all' : 'Select all'}
       </DCheckbox>
       <br />
+      <br />
       <DCheckbox.Group
         dList={[1, 2, 3].map((n) => ({
           label: `Checkbox ${n}`,

packages/ui/src/components/compose/Compose.tsx

@@ -21,6 +21,10 @@ export interface DComposeProps extends React.HTMLAttributes<HTMLDivElement> {
   dDisabled?: boolean;
 }
 
+export interface DComposePrivateProps {
+  __noStyle?: boolean;
+}
+
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCompose' as const });
 export const DCompose: {
   (props: DComposeProps): JSX.Element | null;
@@ -31,9 +35,10 @@ export const DCompose: {
     dSize,
     dVertical = false,
     dDisabled = false,
+    __noStyle,
 
     ...restProps
-  } = useComponentConfig(COMPONENT_NAME, props);
+  } = useComponentConfig(COMPONENT_NAME, props as DComposeProps & DComposePrivateProps);
 
   //#region Context
   const dPrefix = usePrefixConfig();
@@ -55,9 +60,13 @@ export const DCompose: {
     <DComposeContext.Provider value={contextValue}>
       <div
         {...restProps}
-        className={getClassName(restProps.className, `${dPrefix}compose`, {
-          [`${dPrefix}compose--vertical`]: dVertical,
-        })}
+        className={
+          __noStyle
+            ? restProps.className
+            : getClassName(restProps.className, `${dPrefix}compose`, {
+                [`${dPrefix}compose--vertical`]: dVertical,
+              })
+        }
         role="group"
       >
         {children}

packages/ui/src/components/pagination/Pagination.tsx

@@ -210,9 +210,11 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
         return dCustomRender.jump(jumpInput);
       } else {
         return (
-          <div className={`${dPrefix}pagination__jump-wrapper`}>
-            {t('Pagination', 'Go')} {jumpInput} {t('Pagination', 'Page')}
-          </div>
+          <>
+            <span>{t('Pagination', 'Go')}</span>
+            {jumpInput}
+            <span>{t('Pagination', 'Page')}</span>
+          </>
         );
       }
     }

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

@@ -64,10 +64,14 @@ export const DRadio: {
 
   return (
     <DBaseDesign
-      dComposeDesign={{
-        active: checked || focusVisible,
-        disabled: disabled,
-      }}
+      dComposeDesign={
+        __type
+          ? {
+              active: checked || focusVisible,
+              disabled: disabled,
+            }
+          : false
+      }
       dFormDesign={false}
     >
       {({ render: renderBaseDesign }) =>

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

@@ -75,12 +75,14 @@ export function DRadioGroup<V extends DId>(props: DRadioGroupProps<V>): JSX.Elem
       {...restProps}
       className={getClassName(restProps.className, `${dPrefix}radio-group`, {
         [`${dPrefix}radio-group--default`]: isUndefined(dType),
+        [`${dPrefix}radio-group--vertical`]: dVertical,
         'is-change': isChange,
       })}
       dDisabled={disabled}
       role="radiogroup"
       dSize={size}
       dVertical={dVertical}
+      {...({ __noStyle: isUndefined(dType) } as any)}
     >
       {dList.map((item) =>
         React.cloneElement<DRadioPrivateProps>(

packages/ui/src/components/radio/demos/1.Basic.md

@@ -31,7 +31,9 @@ export default function Demo() {
       </DButton>
       <br />
       <br />
-      <DRadio dDisabled={disabled}>Radio</DRadio>
+      <DRadio className="me-3" dDisabled={disabled}>
+        Radio
+      </DRadio>
       <DRadio dDisabled={disabled} dModel>
         Radio
       </DRadio>

packages/ui/src/styles/_mixins.scss

@@ -4,3 +4,4 @@
 @import 'mixins/function';
 @import 'mixins/bem';
 @import 'mixins/utils';
+@import 'mixins/polyfill';