fix: fix gap not support in old browser

DevCloudFE · Mar 10, 2023 · 4a39ad9 · 4a39ad9
1 parent 45f5752
commit 4a39ad9
Show file tree

Hide file tree

Showing 38 changed files with 186 additions and 89 deletions.
diff --git a/.stylelintrc b/.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": [
     {

diff --git a/packages/site/src/styles/_app.scss b/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;

diff --git a/packages/ui/src/components/checkbox/demos/1.Basic.md b/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>

diff --git a/packages/ui/src/components/checkbox/demos/3.Indeterminate.md b/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}`,

diff --git a/packages/ui/src/components/compose/Compose.tsx b/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}

diff --git a/packages/ui/src/components/pagination/Pagination.tsx b/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>
+          </>
         );
       }
     }

diff --git a/packages/ui/src/components/radio/Radio.tsx b/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 }) =>

diff --git a/packages/ui/src/components/radio/RadioGroup.tsx b/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>(

diff --git a/packages/ui/src/components/radio/demos/1.Basic.md b/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>

diff --git a/packages/ui/src/styles/_mixins.scss b/packages/ui/src/styles/_mixins.scss
@@ -4,3 +4,4 @@
 @import 'mixins/function';
 @import 'mixins/bem';
 @import 'mixins/utils';
+@import 'mixins/polyfill';
diff --git a/packages/ui/src/styles/components/accordion.scss b/packages/ui/src/styles/components/accordion.scss
@@ -12,8 +12,9 @@
   }
 
   @include e(item-button) {
+    @include polyfill-column-gap(10px);
+
     display: flex;
-    gap: 0 10px;
     align-items: center;
     padding: 12px 16px;
     cursor: pointer;

diff --git a/packages/ui/src/styles/components/auto-complete.scss b/packages/ui/src/styles/components/auto-complete.scss
@@ -16,9 +16,10 @@ $auto-complete-option-height: 32px;
   }
 
   @include e(option) {
+    @include polyfill-column-gap(8px);
+
     position: relative;
     display: flex;
-    gap: 0 8px;
     align-items: center;
     width: 100%;
     height: $auto-complete-option-height;

diff --git a/packages/ui/src/styles/components/breadcrumb.scss b/packages/ui/src/styles/components/breadcrumb.scss
@@ -1,8 +1,9 @@
 @include b(breadcrumb) {
   @include e(list) {
+    @include polyfill-column-gap(2px);
+
     display: flex;
     flex-wrap: wrap;
-    gap: 4px 2px;
     align-items: center;
     padding: 0;
     margin: 0 -6px;

diff --git a/packages/ui/src/styles/components/cascader.scss b/packages/ui/src/styles/components/cascader.scss
@@ -65,9 +65,10 @@ $cascader-option-height: 32px;
   }
 
   @include e(option) {
+    @include polyfill-column-gap(8px);
+
     position: relative;
     display: flex;
-    gap: 0 8px;
     align-items: center;
     width: 100%;
     height: $cascader-option-height;

diff --git a/packages/ui/src/styles/components/checkbox.scss b/packages/ui/src/styles/components/checkbox.scss
@@ -15,9 +15,10 @@
 }
 
 @include b(checkbox) {
+  @include polyfill-column-gap(8px);
+
   position: relative;
   display: inline-flex;
-  gap: 0 8px;
   align-items: center;
 
   &:hover {
@@ -192,10 +193,15 @@
 @include b(checkbox-group) {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px 12px;
   align-items: center;
 
+  &:not(.#{$rd-prefix}checkbox-group--vertical) {
+    @include polyfill-gap(8px, 12px);
+  }
+
   @include m(vertical) {
+    @include polyfill-row-gap(8px);
+
     flex-direction: column;
     align-items: flex-start;
   }

diff --git a/packages/ui/src/styles/components/compose.scss b/packages/ui/src/styles/components/compose.scss
@@ -42,7 +42,7 @@
   }
 
   &:not(#{&}--vertical) {
-    & > :not(:first-child, :only-child) {
+    & > :not(:first-child):not(:only-child) {
       margin-left: -1px !important;
     }
 
@@ -56,15 +56,15 @@
       border-bottom-left-radius: 0 !important;
     }
 
-    & > :not(:first-child, :last-child) {
+    & > :not(:first-child):not(:last-child) {
       border-radius: 0 !important;
     }
   }
 
   @include m(vertical) {
     flex-direction: column;
 
-    & > :not(:first-child, :only-child) {
+    & > :not(:first-child):not(:only-child) {
       margin-top: -1px !important;
     }
 
@@ -78,7 +78,7 @@
       border-top-right-radius: 0 !important;
     }
 
-    & > :not(:first-child, :last-child) {
+    & > :not(:first-child):not(:last-child) {
       border-radius: 0 !important;
     }
   }

diff --git a/packages/ui/src/styles/components/date-picker.scss b/packages/ui/src/styles/components/date-picker.scss
@@ -82,7 +82,7 @@
     height: 26px;
     cursor: pointer;
 
-    &:not(.is-current-selected, .is-another-selected, .is-hover, .is-between, .is-between-hover):hover {
+    &:not(.is-current-selected):not(.is-another-selected):not(.is-hover):not(.is-between):not(.is-between-hover):hover {
       background-color: var(--#{$rd-prefix}background-color-hover);
     }
 
@@ -141,8 +141,9 @@
   }
 
   @include e(footer) {
+    @include polyfill-column-gap(4px);
+
     display: flex;
-    gap: 0 4px;
     align-items: center;
     justify-content: center;
     min-height: 41px;

diff --git a/packages/ui/src/styles/components/empty.scss b/packages/ui/src/styles/components/empty.scss
@@ -1,7 +1,8 @@
 @include b(empty) {
+  @include polyfill-row-gap(8px);
+
   display: flex;
   flex-direction: column;
-  gap: 8px 0;
   align-items: center;
   color: rgb(var(--#{$rd-prefix}text-color-rgb) / 28%);
 

diff --git a/packages/ui/src/styles/components/fab.scss b/packages/ui/src/styles/components/fab.scss
@@ -246,36 +246,48 @@
       top: -16px;
       left: 0;
       flex-direction: column-reverse;
-      gap: 10px 0;
       width: 100%;
       transform: translateY(-100%);
+
+      & > * + * {
+        margin-bottom: 10px;
+      }
     }
 
     @include m(right) {
       top: 0;
       right: -16px;
       flex-direction: row;
-      gap: 0 10px;
       height: 100%;
       transform: translateX(100%);
+
+      & > * + * {
+        margin-left: 10px;
+      }
     }
 
     @include m(bottom) {
       bottom: -16px;
       left: 0;
       flex-direction: column;
-      gap: 10px 0;
       width: 100%;
       transform: translateY(100%);
+
+      & > * + * {
+        margin-top: 10px;
+      }
     }
 
     @include m(left) {
       top: 0;
       left: -16px;
       flex-direction: row-reverse;
-      gap: 0 10px;
       height: 100%;
       transform: translateX(-100%);
+
+      & > * + * {
+        margin-right: 10px;
+      }
     }
   }
 

diff --git a/packages/ui/src/styles/components/form.scss b/packages/ui/src/styles/components/form.scss
@@ -95,8 +95,9 @@
   }
 
   @include e(item-label-extra) {
+    @include polyfill-column-gap(4px);
+
     display: inline-flex;
-    gap: 0 4px;
     align-items: center;
     margin-left: 4px;
     font-size: 0.9em;

diff --git a/packages/ui/src/styles/components/image.scss b/packages/ui/src/styles/components/image.scss
@@ -120,8 +120,9 @@
   }
 
   @include e(toolbar-page) {
+    @include polyfill-column-gap(8px);
+
     display: inline-flex;
-    gap: 0 8px;
     align-items: center;
     margin-right: auto;
   }
@@ -159,12 +160,13 @@
   }
 
   @include e(thumbnail-list) {
+    @include polyfill-column-gap(8px);
+
     position: absolute;
     bottom: 10px;
     left: 50%;
     z-index: 5;
     display: flex;
-    gap: 0 8px;
     padding: 8px;
     margin: 0;
     list-style: none;