From 4a39ad9d0d08cdc89764bd1134df03e426d31239 Mon Sep 17 00:00:00 2001
From: xiejay97 <xiejay97@gmail.com>
Date: Fri, 10 Mar 2023 16:00:44 +0800
Subject: [PATCH] fix: fix gap not support in old browser

---
 .stylelintrc                                  |  3 +-
 packages/site/src/styles/_app.scss            | 15 ----------
 .../src/components/checkbox/demos/1.Basic.md  |  4 ++-
 .../checkbox/demos/3.Indeterminate.md         |  1 +
 .../ui/src/components/compose/Compose.tsx     | 17 ++++++++---
 .../src/components/pagination/Pagination.tsx  |  8 ++++--
 packages/ui/src/components/radio/Radio.tsx    | 12 +++++---
 .../ui/src/components/radio/RadioGroup.tsx    |  2 ++
 .../ui/src/components/radio/demos/1.Basic.md  |  4 ++-
 packages/ui/src/styles/_mixins.scss           |  1 +
 .../ui/src/styles/components/accordion.scss   |  3 +-
 .../src/styles/components/auto-complete.scss  |  3 +-
 .../ui/src/styles/components/breadcrumb.scss  |  3 +-
 .../ui/src/styles/components/cascader.scss    |  3 +-
 .../ui/src/styles/components/checkbox.scss    | 10 +++++--
 .../ui/src/styles/components/compose.scss     |  8 +++---
 .../ui/src/styles/components/date-picker.scss |  5 ++--
 packages/ui/src/styles/components/empty.scss  |  3 +-
 packages/ui/src/styles/components/fab.scss    | 20 ++++++++++---
 packages/ui/src/styles/components/form.scss   |  3 +-
 packages/ui/src/styles/components/image.scss  |  6 ++--
 packages/ui/src/styles/components/menu.scss   |  2 +-
 .../src/styles/components/mixins/_footer.scss |  3 +-
 .../src/styles/components/mixins/_header.scss |  3 +-
 .../components/mixins/_notification.scss      |  3 +-
 .../src/styles/components/mixins/_toast.scss  |  3 +-
 .../ui/src/styles/components/pagination.scss  | 21 +++++++-------
 .../ui/src/styles/components/popover.scss     |  3 +-
 packages/ui/src/styles/components/radio.scss  | 25 ++++++++++++++---
 packages/ui/src/styles/components/rating.scss |  3 +-
 packages/ui/src/styles/components/select.scss |  3 +-
 packages/ui/src/styles/components/switch.scss |  3 +-
 packages/ui/src/styles/components/table.scss  |  3 +-
 packages/ui/src/styles/components/tabs.scss   | 28 +++++++++++++------
 .../ui/src/styles/components/transfer.scss    |  6 ++--
 packages/ui/src/styles/components/tree.scss   |  6 ++--
 packages/ui/src/styles/components/upload.scss |  7 +++--
 packages/ui/src/styles/mixins/_polyfill.scss  | 19 +++++++++++++
 38 files changed, 186 insertions(+), 89 deletions(-)
 create mode 100644 packages/ui/src/styles/mixins/_polyfill.scss

diff --git a/.stylelintrc b/.stylelintrc
index 7326f896..dafedaa6 100644
--- 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
index 19c1932d..9b95de8d 100644
--- 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
index a0f02da8..3c49e5c1 100644
--- 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
index 663ca9a7..8c60a68b 100644
--- 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
index aaabf1db..ebb6f7f4 100644
--- 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
index 718d0524..92d0ce03 100644
--- 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
index dd5d2cdc..4285baaf 100644
--- 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
index df0cfec7..d180bedf 100644
--- 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
index c1fa9b2f..dae5324d 100644
--- 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
index 101c36a2..4730858c 100644
--- 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
index eb4ee87d..8ed30e46 100644
--- 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
index 8039c6f3..153f2c4c 100644
--- 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
index b65a17cd..4536a2e5 100644
--- 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
index fb77f627..73f32421 100644
--- 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
index 933de87d..c9ae981c 100644
--- 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
index 0242af92..94cc6c28 100644
--- 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,7 +56,7 @@
       border-bottom-left-radius: 0 !important;
     }
 
-    & > :not(:first-child, :last-child) {
+    & > :not(:first-child):not(:last-child) {
       border-radius: 0 !important;
     }
   }
@@ -64,7 +64,7 @@
   @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
index e1ccd0f0..3f957460 100644
--- 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
index 7dc8cae1..7a2fa961 100644
--- 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
index 96ce46ec..bfdfa199 100644
--- 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
index 68eddd6c..eb504e0a 100644
--- 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
index bc265804..90de08ca 100644
--- 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;
diff --git a/packages/ui/src/styles/components/menu.scss b/packages/ui/src/styles/components/menu.scss
index 0a53314d..4378790b 100644
--- a/packages/ui/src/styles/components/menu.scss
+++ b/packages/ui/src/styles/components/menu.scss
@@ -5,7 +5,7 @@ $menu-item-height: 40px;
   padding: 8px 0;
   outline: none;
 
-  &:not(&--horizontal) {
+  &:not(#{&}--horizontal) {
     overflow: hidden auto;
   }
 
diff --git a/packages/ui/src/styles/components/mixins/_footer.scss b/packages/ui/src/styles/components/mixins/_footer.scss
index 59dcb9f8..4cd30cbf 100644
--- a/packages/ui/src/styles/components/mixins/_footer.scss
+++ b/packages/ui/src/styles/components/mixins/_footer.scss
@@ -1,8 +1,9 @@
 @mixin component-footer {
   @include e(footer) {
+    @include polyfill-column-gap(8px);
+
     position: relative;
     display: flex;
-    gap: 0 8px;
     align-items: center;
     padding: 12px 16px;
     border-top: 1px solid var(--#{$rd-prefix}color-divider);
diff --git a/packages/ui/src/styles/components/mixins/_header.scss b/packages/ui/src/styles/components/mixins/_header.scss
index 78634394..25f67d97 100644
--- a/packages/ui/src/styles/components/mixins/_header.scss
+++ b/packages/ui/src/styles/components/mixins/_header.scss
@@ -16,9 +16,10 @@
   }
 
   @include e(header-actions) {
+    @include polyfill-column-gap(8px);
+
     display: inline-flex;
     flex-shrink: 0;
-    gap: 0 8px;
     align-items: center;
   }
 }
diff --git a/packages/ui/src/styles/components/mixins/_notification.scss b/packages/ui/src/styles/components/mixins/_notification.scss
index ee3770dc..fe16f6c0 100644
--- a/packages/ui/src/styles/components/mixins/_notification.scss
+++ b/packages/ui/src/styles/components/mixins/_notification.scss
@@ -37,9 +37,10 @@
   }
 
   @include e(header-actions) {
+    @include polyfill-column-gap(4px);
+
     display: inline-flex;
     flex-shrink: 0;
-    gap: 0 4px;
     align-items: center;
 
     .#{$rd-prefix}button {
diff --git a/packages/ui/src/styles/components/mixins/_toast.scss b/packages/ui/src/styles/components/mixins/_toast.scss
index df744253..4a5c1a54 100644
--- a/packages/ui/src/styles/components/mixins/_toast.scss
+++ b/packages/ui/src/styles/components/mixins/_toast.scss
@@ -22,9 +22,10 @@
   }
 
   @include e(actions) {
+    @include polyfill-column-gap(4px);
+
     display: inline-flex;
     flex-shrink: 0;
-    gap: 0 4px;
     align-items: center;
 
     .#{$rd-prefix}button {
diff --git a/packages/ui/src/styles/components/pagination.scss b/packages/ui/src/styles/components/pagination.scss
index 7a10f5f8..84abfaa0 100644
--- a/packages/ui/src/styles/components/pagination.scss
+++ b/packages/ui/src/styles/components/pagination.scss
@@ -7,11 +7,18 @@
 
   display: flex;
   flex-wrap: wrap;
-  gap: 8px 0;
   align-items: center;
   padding: 0;
   margin: 0;
 
+  &:not(.#{$rd-prefix}pagination--mini) {
+    .#{$rd-prefix}pagination__jump {
+      @include polyfill-column-gap(4px);
+    }
+
+    @include polyfill-gap(8px, 8px);
+  }
+
   @include when(change) {
     @include e(button) {
       @include m(number) {
@@ -25,7 +32,7 @@
     --#{$rd-prefix}pagination-space: 8px;
     --#{$rd-prefix}pagination-button-space: 2px;
 
-    gap: 4px 0;
+    @include polyfill-gap(4px, 2px);
 
     @include font-size(0.8rem);
 
@@ -44,8 +51,8 @@
       padding: 0 6px;
     }
 
-    @include e(jump-wrapper) {
-      gap: 0 2px;
+    @include e(jump) {
+      @include polyfill-column-gap(2px);
     }
 
     @include e(jump-input) {
@@ -158,12 +165,6 @@
     vertical-align: top;
   }
 
-  @include e(jump-wrapper) {
-    display: flex;
-    gap: 0 4px;
-    align-items: center;
-  }
-
   @include e(jump-input) {
     @include overwrite-component(input) {
       width: 4.5em;
diff --git a/packages/ui/src/styles/components/popover.scss b/packages/ui/src/styles/components/popover.scss
index 388dae1b..c05534a6 100644
--- a/packages/ui/src/styles/components/popover.scss
+++ b/packages/ui/src/styles/components/popover.scss
@@ -149,7 +149,8 @@
   }
 
   @include e(footer) {
-    gap: 0 6px;
+    @include polyfill-column-gap(6px);
+
     padding: 0 12px 10px;
     border-top: none;
 
diff --git a/packages/ui/src/styles/components/radio.scss b/packages/ui/src/styles/components/radio.scss
index 3416f0fb..6954775d 100644
--- a/packages/ui/src/styles/components/radio.scss
+++ b/packages/ui/src/styles/components/radio.scss
@@ -4,7 +4,6 @@
 @include b(radio) {
   position: relative;
   display: inline-flex;
-  gap: 0 8px;
   align-items: center;
 
   &:hover {
@@ -51,7 +50,6 @@
   }
 
   @include m(button) {
-    gap: 0;
     height: var(--#{$rd-prefix}size);
     white-space: nowrap;
     cursor: pointer;
@@ -76,6 +74,7 @@
     @include e(input-wrapper) {
       width: 0;
       height: 0;
+      margin-right: 0;
       overflow: hidden;
     }
 
@@ -123,6 +122,7 @@
     position: relative;
     width: 16px;
     height: 16px;
+    margin-right: 8px;
     cursor: pointer;
     background-color: var(--#{$rd-prefix}background-color-input);
     border-radius: 50%;
@@ -179,6 +179,10 @@
 }
 
 @include b(radio-group) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
   @include when(change) {
     .#{$rd-prefix}radio,
     .#{$rd-prefix}radio__label {
@@ -186,8 +190,21 @@
     }
   }
 
+  @include m(vertical) {
+    align-items: flex-start;
+  }
+
   @include m(default) {
-    flex-wrap: wrap;
-    gap: 8px 12px;
+    &:not(.#{$rd-prefix}radio-group--vertical) {
+      @include polyfill-gap(8px, 12px);
+    }
+  }
+
+  @include m(vertical) {
+    &.#{$rd-prefix}radio-group--default {
+      @include polyfill-row-gap(8px);
+
+      flex-direction: column;
+    }
   }
 }
diff --git a/packages/ui/src/styles/components/rating.scss b/packages/ui/src/styles/components/rating.scss
index 3dcd15d2..ef90240e 100644
--- a/packages/ui/src/styles/components/rating.scss
+++ b/packages/ui/src/styles/components/rating.scss
@@ -1,7 +1,8 @@
 @include b(rating) {
+  @include polyfill-column-gap(8px);
+
   position: relative;
   display: inline-flex;
-  gap: 0 0.35em;
   align-items: center;
   font-size: 1.2em;
   color: var(--#{$rd-prefix}color-warning);
diff --git a/packages/ui/src/styles/components/select.scss b/packages/ui/src/styles/components/select.scss
index 03966af8..8a547029 100644
--- a/packages/ui/src/styles/components/select.scss
+++ b/packages/ui/src/styles/components/select.scss
@@ -57,9 +57,10 @@ $select-option-height: 32px;
   }
 
   @include e(option) {
+    @include polyfill-column-gap(8px);
+
     position: relative;
     display: flex;
-    gap: 0 8px;
     align-items: center;
     width: 100%;
     height: $select-option-height;
diff --git a/packages/ui/src/styles/components/switch.scss b/packages/ui/src/styles/components/switch.scss
index bab85f38..dfbf81ab 100644
--- a/packages/ui/src/styles/components/switch.scss
+++ b/packages/ui/src/styles/components/switch.scss
@@ -11,9 +11,10 @@
 }
 
 @include b(switch) {
+  @include polyfill-column-gap(8px);
+
   position: relative;
   display: inline-flex;
-  gap: 0 8px;
   align-items: center;
 
   &:active {
diff --git a/packages/ui/src/styles/components/table.scss b/packages/ui/src/styles/components/table.scss
index 8ea8a2fd..dbccc87c 100644
--- a/packages/ui/src/styles/components/table.scss
+++ b/packages/ui/src/styles/components/table.scss
@@ -340,9 +340,10 @@ $table-filter-option-height: 32px;
   }
 
   @include e(filter-option) {
+    @include polyfill-column-gap(8px);
+
     position: relative;
     display: flex;
-    gap: 0 8px;
     align-items: center;
     width: 100%;
     height: $table-filter-option-height;
diff --git a/packages/ui/src/styles/components/tabs.scss b/packages/ui/src/styles/components/tabs.scss
index eb0fe8b6..8541815d 100644
--- a/packages/ui/src/styles/components/tabs.scss
+++ b/packages/ui/src/styles/components/tabs.scss
@@ -49,9 +49,12 @@
   }
 
   @include e(tablist) {
-    gap: var(--#{$rd-prefix}tabs-tab-gap);
     min-width: 100%;
 
+    & > * + *:not(.#{$rd-prefix}tabs__indicator) {
+      margin-left: var(--#{$rd-prefix}tabs-tab-gap);
+    }
+
     &::after {
       left: 0;
       width: 100%;
@@ -256,12 +259,15 @@
 
   --#{$rd-prefix}tabs-tab-size: 44px;
   --#{$rd-prefix}tabs-slider-tab-size: 36px;
-  --#{$rd-prefix}tabs-tab-gap: 0 32px;
   --#{$rd-prefix}tabs-tab-padding: 16px;
 
   position: relative;
   display: flex;
 
+  &:not(.#{$rd-prefix}tabs--slider):not(.#{$rd-prefix}tabs--wrap) {
+    --#{$rd-prefix}tabs-tab-gap: 32px;
+  }
+
   @include m(top) {
     @include tabs-horizontal(top);
   }
@@ -281,23 +287,30 @@
   @include m(smaller) {
     --#{$rd-prefix}tabs-tab-size: 36px;
     --#{$rd-prefix}tabs-slider-tab-size: 32px;
-    --#{$rd-prefix}tabs-tab-gap: 20px;
     --#{$rd-prefix}tabs-tab-padding: 12px;
 
     @include font-size(0.9rem);
+
+    &:not(.#{$rd-prefix}tabs--slider):not(.#{$rd-prefix}tabs--wrap) {
+      --#{$rd-prefix}tabs-tab-gap: 20px;
+    }
   }
 
   @include m(larger) {
     --#{$rd-prefix}tabs-tab-size: 52px;
     --#{$rd-prefix}tabs-slider-tab-size: 44px;
-    --#{$rd-prefix}tabs-tab-gap: 36px;
     --#{$rd-prefix}tabs-tab-padding: 20px;
 
     @include font-size(1.15rem);
+
+    &:not(.#{$rd-prefix}tabs--slider):not(.#{$rd-prefix}tabs--wrap) {
+      --#{$rd-prefix}tabs-tab-gap: 36px;
+    }
   }
 
   @include m(slider) {
     --#{$rd-prefix}tabs-tab-size: var(--#{$rd-prefix}tabs-slider-tab-size);
+    --#{$rd-prefix}tabs-tab-gap: 0;
 
     &#{$selector}--top,
     &#{$selector}--bottom {
@@ -312,7 +325,6 @@
     }
 
     @include e(tablist) {
-      gap: 0;
       min-width: unset;
       background-color: var(--#{$rd-prefix}tabs-background-color-slider);
 
@@ -323,16 +335,14 @@
   }
 
   @include m(wrap) {
+    --#{$rd-prefix}tabs-tab-gap: 0;
+
     &#{$selector}--top,
     &#{$selector}--bottom {
       @include e(tab) {
         padding: 0 var(--#{$rd-prefix}tabs-tab-padding);
       }
     }
-
-    @include e(tablist) {
-      gap: 0;
-    }
   }
 
   @include e(tablist-wrapper) {
diff --git a/packages/ui/src/styles/components/transfer.scss b/packages/ui/src/styles/components/transfer.scss
index 4e7d3fdd..1a99a81c 100644
--- a/packages/ui/src/styles/components/transfer.scss
+++ b/packages/ui/src/styles/components/transfer.scss
@@ -25,9 +25,10 @@ $transfer-option-height: 32px;
   }
 
   @include e(actions) {
+    @include polyfill-row-gap(4px);
+
     display: flex;
     flex-direction: column;
-    gap: 4px 0;
     margin: 0 8px;
     /* stylelint-disable-next-line declaration-property-value-allowed-list */
     font-size: 12px;
@@ -94,9 +95,10 @@ $transfer-option-height: 32px;
   }
 
   @include e(option) {
+    @include polyfill-column-gap(8px);
+
     position: relative;
     display: flex;
-    gap: 0 8px;
     align-items: center;
     height: $transfer-option-height;
     padding: 0 12px;
diff --git a/packages/ui/src/styles/components/tree.scss b/packages/ui/src/styles/components/tree.scss
index 6ca43fcb..846df8ea 100644
--- a/packages/ui/src/styles/components/tree.scss
+++ b/packages/ui/src/styles/components/tree.scss
@@ -85,10 +85,11 @@ $tree-option-height: 32px;
   }
 
   @include e(option) {
+    @include polyfill-column-gap(8px);
+
     position: relative;
     display: inline-flex;
     flex-shrink: 0;
-    gap: 0 8px;
     align-items: center;
     height: $tree-option-height;
     padding: 0 12px;
@@ -175,9 +176,10 @@ $tree-option-height: 32px;
   }
 
   @include e(search-option) {
+    @include polyfill-column-gap(8px);
+
     position: relative;
     display: flex;
-    gap: 0 8px;
     align-items: center;
     height: $tree-option-height;
     padding: 0 12px;
diff --git a/packages/ui/src/styles/components/upload.scss b/packages/ui/src/styles/components/upload.scss
index 2553c821..ec6f18a8 100644
--- a/packages/ui/src/styles/components/upload.scss
+++ b/packages/ui/src/styles/components/upload.scss
@@ -45,9 +45,10 @@
     --#{$rd-prefix}upload-action-color-lighter: var(--#{$rd-prefix}text-color);
     --#{$rd-prefix}upload-action-background-color-hover: var(--#{$rd-prefix}background-color-hover);
 
+    @include polyfill-row-gap(8px);
+
     display: flex;
     flex-direction: column;
-    gap: 8px 0;
     width: 100%;
     padding: 0;
     margin: 0;
@@ -153,9 +154,10 @@
     --#{$rd-prefix}upload-action-color-lighter: #{map.get($rd-colors, 'white')};
     --#{$rd-prefix}upload-action-background-color-hover: var(--#{$rd-prefix}background-color-light-hover);
 
+    @include polyfill-gap(8px, 8px);
+
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
     width: 100%;
     padding: 0;
     margin: 0;
@@ -171,7 +173,6 @@
     width: 104px;
     height: 104px;
     padding: 8px;
-    margin: 0;
     vertical-align: top;
     background-color: var(--#{$rd-prefix}background-color-light-gray);
     border: 1px solid var(--#{$rd-prefix}color-border);
diff --git a/packages/ui/src/styles/mixins/_polyfill.scss b/packages/ui/src/styles/mixins/_polyfill.scss
new file mode 100644
index 00000000..a5369241
--- /dev/null
+++ b/packages/ui/src/styles/mixins/_polyfill.scss
@@ -0,0 +1,19 @@
+@mixin polyfill-gap($row-gap, $column-gap) {
+  row-gap: #{$row-gap};
+
+  & > * + * {
+    margin-left: #{$column-gap};
+  }
+}
+
+@mixin polyfill-row-gap($row-gap) {
+  & > * + * {
+    margin-top: #{$row-gap};
+  }
+}
+
+@mixin polyfill-column-gap($column-gap) {
+  & > * + * {
+    margin-left: #{$column-gap};
+  }
+}