@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

package/lib/es/popconfirm/constants.js

@@ -1,7 +1,7 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-popconfirm"),
-  POPOVER: "".concat(BASE_CLASS_PREFIX, "-popconfirm-popover")
+  PREFIX: `${BASE_CLASS_PREFIX}-popconfirm`,
+  POPOVER: `${BASE_CLASS_PREFIX}-popconfirm-popover`
 };
 const strings = {
   POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver'],

package/lib/es/popconfirm/popconfirm.css

@@ -11,17 +11,9 @@
   padding: 24px 24px 24px 20px;
   position: relative;
 }
-.semi-popconfirm-inner .semi-popconfirm-btn-close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  margin-top: 24px;
-  margin-right: 24px;
-}
 .semi-popconfirm-header {
   display: flex;
   justify-content: flex-start;
-  margin-right: 68px;
 }
 .semi-popconfirm-header-title {
   font-size: 16px;
@@ -41,12 +33,15 @@
 }
 .semi-popconfirm-header-body {
   display: inline-flex;
+  flex-grow: 1;
   flex-direction: column;
 }
 .semi-popconfirm-body {
-  margin-left: 36px;
   color: var(--semi-color-text-2);
 }
+.semi-popconfirm-body-withIcon {
+  margin-left: 36px;
+}
 .semi-popconfirm-body > p {
   margin: 0;
   padding: 0;
@@ -66,10 +61,6 @@
 .semi-popover-with-arrow .semi-popconfirm-inner {
   padding: 12px 12px 12px 8px;
 }
-.semi-popover-with-arrow .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-top: 12px;
-  margin-right: 12px;
-}
 
 .semi-popconfirm-rtl {
   direction: rtl;
@@ -77,15 +68,8 @@
 .semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 24px 20px 24px 24px;
 }
-.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  right: auto;
-  left: 0;
-  margin-right: 0;
-  margin-left: 24px;
-}
 .semi-popconfirm-rtl .semi-popconfirm-header {
   margin-right: 0;
-  margin-left: 68px;
 }
 .semi-popconfirm-rtl .semi-popconfirm-header-icon {
   margin-right: 0;
@@ -104,8 +88,4 @@
 }
 .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 12px 8px 12px 12px;
-}
-.semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-right: 0;
-  margin-left: 12px;
 }

package/lib/es/popconfirm/popconfirm.scss

@@ -12,20 +12,11 @@ $module: #{$prefix}-popconfirm;
         flex-direction: column;
         padding: $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-bottom;
         position: relative;
-
-        .#{$module}-btn-close {
-            position: absolute;
-            right: $spacing-popconfirm_inner_close_btn-right;
-            top: $spacing-popconfirm_inner_close_btn-top;
-            margin-top: $spacing-popconfirm_btn_close-margin;
-            margin-right: $spacing-popconfirm_btn_close-margin;
-        }
     }
 
     &-header {
         display: flex;
         justify-content: flex-start;
-        margin-right: $spacing-popconfirm_header-marginRight;
 
         &-title {
             @include font-size-header-6;
@@ -49,13 +40,15 @@ $module: #{$prefix}-popconfirm;
 
         &-body {
             display: inline-flex;
+            flex-grow: 1;
             flex-direction: column;
         }
     }
 
     &-body {
-        margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
-
+        &-withIcon {
+            margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
+        }
         color: $color-popconfirm_body-text;
 
         & > p {
@@ -84,11 +77,6 @@ $module: #{$prefix}-popconfirm;
 .#{$prefix}-popover-with-arrow {
     .#{$module}-inner {
         padding: $spacing-popconfirm_popover_with_arrow_inner-padding;
-
-        .#{$module}-btn-close {
-            margin-top: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop;
-            margin-right: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-        }
     }
 }
 

package/lib/es/popconfirm/popconfirmFoundation.d.ts

@@ -7,6 +7,9 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
+    focusCancelButton: () => void;
+    focusOkButton: () => void;
+    focusPrevFocusElement: () => void;
 }
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
     init(): void;
@@ -15,4 +18,5 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
     handleConfirm(e: any): void;
     handleClickOutSide(e: any): void;
     handleVisibleChange(visible: boolean): void;
+    handleFocusOperateButton(): void;
 }

package/lib/es/popconfirm/popconfirmFoundation.js

@@ -1,20 +1,15 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
+import _get from "lodash/get";
 import BaseFoundation from '../base/foundation';
 import isPromise from '../utils/isPromise';
 export default class PopConfirmFoundation extends BaseFoundation {
   init() {}
-
   destroy() {}
-
   handleCancel(e) {
     const maybePromise = this._adapter.notifyCancel(e);
-
     if (isPromise(maybePromise)) {
       this._adapter.updateCancelLoading(true);
-
       maybePromise.then(result => {
         this.handleVisibleChange(false);
-
         this._adapter.updateCancelLoading(false);
       }, errors => {
         this._adapter.updateCancelLoading(false);
@@ -23,16 +18,12 @@ export default class PopConfirmFoundation extends BaseFoundation {
       this.handleVisibleChange(false);
     }
   }
-
   handleConfirm(e) {
     const maybePromise = this._adapter.notifyConfirm(e);
-
     if (isPromise(maybePromise)) {
       this._adapter.updateConfirmLoading(true);
-
       maybePromise.then(result => {
         this._adapter.updateConfirmLoading(false);
-
         this.handleVisibleChange(false);
       }, errors => {
         this._adapter.updateConfirmLoading(false);
@@ -41,17 +32,29 @@ export default class PopConfirmFoundation extends BaseFoundation {
       this.handleVisibleChange(false);
     }
   }
-
   handleClickOutSide(e) {
     this._adapter.notifyClickOutSide(e);
   }
-
   handleVisibleChange(visible) {
     if (!this._isControlledComponent('visible')) {
       this._adapter.setVisible(visible);
     }
-
+    if (visible) {
+      this.handleFocusOperateButton();
+    } else {
+      this._adapter.focusPrevFocusElement();
+    }
     this._adapter.notifyVisibleChange(visible);
   }
-
+  handleFocusOperateButton() {
+    const {
+      cancelButtonProps,
+      okButtonProps
+    } = this._adapter.getProps();
+    if (_get(cancelButtonProps, 'autoFocus') && !_get(cancelButtonProps, 'disabled')) {
+      this._adapter.focusCancelButton();
+    } else if (_get(okButtonProps, 'autoFocus') && !_get(okButtonProps, 'disabled')) {
+      this._adapter.focusOkButton();
+    }
+  }
 }

package/lib/es/popconfirm/rtl.scss

@@ -9,20 +9,12 @@ $module: #{$prefix}-popconfirm;
     &-inner {
         .#{$module}-rtl & {
             padding: $spacing-popconfirm-top $spacing-popconfirm-bottom $spacing-popconfirm-top $spacing-popconfirm-top;
-    
-            .#{$module}-btn-close {
-                right: auto;
-                left: 0;
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_btn_close-margin;
-            }
         }
     }
 
     &-header {
         .#{$module}-rtl & {
             margin-right: 0;
-            margin-left: $spacing-popconfirm_header-marginRight;
     
             &-icon {
                 margin-right: 0;
@@ -49,11 +41,6 @@ $module: #{$prefix}-popconfirm;
         
         .#{$module}-inner {
             padding: $spacing-popconfirm_popover_with_arrow_inner_rtl-padding;
-    
-            .#{$module}-btn-close {
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-            }
         }
     }
 

package/lib/es/popconfirm/variables.scss

@@ -13,9 +13,6 @@ $spacing-popconfirm-top: 24px; // 顶部内边距
 $spacing-popconfirm-bottom: 20px; // 底部内边距
 $spacing-popconfirm_btn_close-margin: 24px; // 关闭按钮顶部 & 右侧外边距
 $spacing-popconfirm_with_arrow-padding: 12px; // 顶部内边距
-$spacing-popconfirm_inner_close_btn-top: 0; // 关闭按钮距顶部距离
-$spacing-popconfirm_inner_close_btn-right: 0; // 关闭按钮距右侧距离
-$spacing-popconfirm_header-marginRight: $spacing-popconfirm_btn_close-margin + $width-popconfirm_close_btn + 20px; // header 右侧外边距
 $spacing-popconfirm_header_title-marginBottom: 8px; // header 标题底部外边距
 $spacing-popconfirm_header_content_p-padding: 0; // header 正文内边距
 $spacing-popconfirm_header_content_p-margin: 0; // header 正文外边距
@@ -26,7 +23,6 @@ $spacing-popconfirm_footer_btn-marginRight: 8px; // footer 按钮右侧外边距
 $spacing-popconfirm_popover_with_arrow_inner-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距
 $spacing-popconfirm_popover_with_arrow_inner_rtl-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距(rtl)
 $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的顶部外边距
-$spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的右侧外边距
 $spacing-popconfirm_header_icon-marginRight: 12px; // header 图标的右侧外边距
 
 // Font

package/lib/es/popover/constants.d.ts

@@ -4,7 +4,7 @@ declare const cssClasses: {
 };
 declare const strings: {
     readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
-    readonly TRIGGER_SET: readonly ["hover", "focus", "click", "custom"];
+    readonly TRIGGER_SET: readonly ["hover", "focus", "click", "custom", "contextMenu"];
     readonly DEFAULT_ARROW_STYLE: {
         readonly borderOpacity: "1";
         readonly backgroundColor: "var(--semi-color-bg-3)";

package/lib/es/popover/constants.js

@@ -1,12 +1,12 @@
 import { numbers as tooltipNumbers } from '../tooltip/constants';
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-popover"),
-  ARROW: "".concat(BASE_CLASS_PREFIX, "-popover-icon-arrow")
+  PREFIX: `${BASE_CLASS_PREFIX}-popover`,
+  ARROW: `${BASE_CLASS_PREFIX}-popover-icon-arrow`
 };
 const strings = {
   POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver'],
-  TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+  TRIGGER_SET: ['hover', 'focus', 'click', 'custom', 'contextMenu'],
   DEFAULT_ARROW_STYLE: {
     borderOpacity: '1',
     backgroundColor: 'var(--semi-color-bg-3)',

package/lib/es/popover/popover.css

@@ -54,9 +54,11 @@
 }
 .semi-popover-animation-show {
   animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 .semi-popover-animation-hide {
   animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 
 .semi-popover-wrapper .semi-popover-icon-arrow {

package/lib/es/popover/popover.scss

@@ -79,10 +79,12 @@ $module-icon: #{$module}-icon-arrow;
     }
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-popover-in $animation_function-popover-in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-popover-out $animation_function-popover-out;
+        animation-fill-mode: forwards;
     }
 }
 

package/lib/es/progress/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-progress")
+  PREFIX: `${BASE_CLASS_PREFIX}-progress`
 };
 const strings = {
   types: ['line', 'circle'],

package/lib/es/progress/generates.d.ts

@@ -1,7 +1,7 @@
-declare type StrokeSet = {
+type StrokeSet = {
     percent: number;
     color: string;
 };
-declare type StrokeArr = Array<StrokeSet>;
+type StrokeArr = Array<StrokeSet>;
 declare function generateColor(s: StrokeArr, percent: number, gradient: boolean): string | undefined;
 export { generateColor, StrokeArr };

package/lib/es/progress/generates.js

@@ -1,5 +1,4 @@
 import { strings } from './constants';
-
 function generateColor(s, percent, gradient) {
   try {
     const gradientColorArr = generate(s, percent, gradient);
@@ -7,45 +6,34 @@ function generateColor(s, percent, gradient) {
   } catch (e) {
     return undefined;
   }
-
   return undefined;
 }
-
 function generate(s, percent, gradient) {
   s.sort((a, b) => a.percent - b.percent);
-
   if (s[0].percent > percent) {
     return strings.STROKE_DEFAULT;
   }
-
   const endS = s[s.length - 1];
-
   if (endS.percent < percent) {
     return formatToHex(endS.color);
   }
-
   for (const [index, item] of s.entries()) {
     if (item.percent === percent) {
       return formatToHex(item.color);
     }
-
     if (percent > item.percent) continue;
     const oldItem = s[index - 1];
-
     if (!gradient) {
       return formatToHex(oldItem.color);
     }
-
     return generateGradients({
       startColor: formatToHex(oldItem.color),
       endColor: formatToHex(item.color),
       size: item.percent - oldItem.percent - 1
     }, percent - oldItem.percent - 1);
   }
-
   return undefined;
 }
-
 function generateGradients(g, index) {
   const {
     startColor,
@@ -54,108 +42,87 @@ function generateGradients(g, index) {
   } = g;
   const sA = startColor.split('');
   const eA = endColor.split('');
-  const rC = [parseInt("".concat(sA[1]).concat(sA[2]), 16), parseInt("".concat(eA[1]).concat(eA[2]), 16)];
-  const gC = [parseInt("".concat(sA[3]).concat(sA[4]), 16), parseInt("".concat(eA[3]).concat(eA[4]), 16)];
-  const bC = [parseInt("".concat(sA[5]).concat(sA[6]), 16), parseInt("".concat(eA[5]).concat(eA[6]), 16)];
-  const aC = [parseInt("".concat(sA[7]).concat(sA[8]), 16), parseInt("".concat(eA[7]).concat(eA[8]), 16)];
+  const rC = [parseInt(`${sA[1]}${sA[2]}`, 16), parseInt(`${eA[1]}${eA[2]}`, 16)];
+  const gC = [parseInt(`${sA[3]}${sA[4]}`, 16), parseInt(`${eA[3]}${eA[4]}`, 16)];
+  const bC = [parseInt(`${sA[5]}${sA[6]}`, 16), parseInt(`${eA[5]}${eA[6]}`, 16)];
+  const aC = [parseInt(`${sA[7]}${sA[8]}`, 16), parseInt(`${eA[7]}${eA[8]}`, 16)];
   const rStep = (rC[0] - rC[1]) / (size + 1);
   const gStep = (gC[0] - gC[1]) / (size + 1);
   const bStep = (bC[0] - bC[1]) / (size + 1);
   const aStep = (aC[0] - aC[1]) / (size + 1);
-
   function tHex(i) {
     const rS = Math.round(rC[0] - rStep * (i + 1)).toString(16);
     const gS = Math.round(gC[0] - gStep * (i + 1)).toString(16);
     const bS = Math.round(bC[0] - bStep * (i + 1)).toString(16);
-    const h = "".concat(padTwo(rS)).concat(padTwo(gS)).concat(padTwo(bS));
+    const h = `${padTwo(rS)}${padTwo(gS)}${padTwo(bS)}`;
     const t = Math.floor(aStep * (i + 1) + aC[1]).toString(16);
-    return toHex.Hex("#".concat(h), t);
+    return toHex.Hex(`#${h}`, t);
   }
-
   function padTwo(s) {
     if (s.length === 1) {
-      return "0".concat(s);
+      return `0${s}`;
     }
-
     if (s.length === 0) {
       return '00';
     }
-
     return s;
   }
-
   if (typeof index === 'undefined') {
     const gradientColorArr = [startColor];
-
     for (let i = 0; i < size; i += 1) {
       gradientColorArr.push(tHex(i));
     }
-
     return gradientColorArr;
   }
-
   return tHex(index);
-} // Resolve the colour type contained within `ColorType` to Hex
-
-
+}
+// Resolve the colour type contained within `ColorType` to Hex
 function formatToHex(color) {
-  color = color.trim().toLowerCase(); // Hex
-
+  color = color.trim().toLowerCase();
+  // Hex
   if (REG_S.hex.test(color)) {
     return toHex.Hex(color, undefined);
-  } // Hsl or Hsla
-
-
+  }
+  // Hsl or Hsla
   if (REG_S.hslA.test(color)) {
     return toHex.Hex(toHex.HslA(color), undefined);
-  } // Rgb or Rgba
-
-
+  }
+  // Rgb or Rgba
   if (REG_S.rgbA.test(color)) {
     return toHex.Hex(toHex.RgbA(color), undefined);
-  } // Semi Design Tokens
-
-
+  }
+  // Semi Design Tokens
   if (REG_S.semiDesignTokens.test(color)) {
     if (SEMI_DESIGN_TOKENS.ALONG.indexOf(color) !== -1) {
       return toHex.SemiDesignToken(color);
     }
-
     if (SEMI_DESIGN_TOKENS.SEQUENCE.indexOf(color) !== -1) {
-      return toHex.SemiDesignToken("".concat(color, "-5"));
+      return toHex.SemiDesignToken(`${color}-5`);
     }
-
-    return toHex.SemiDesignToken("".concat(color));
+    return toHex.SemiDesignToken(`${color}`);
   }
-
   return undefined;
 }
-
 const toHex = {
   Hex(color, transparency) {
     color = color.replace('#', '');
-    if (color.length === 8) return "#".concat(color);
-    if (color.length === 6) return "#".concat(color).concat(transparency || 'ff');
-
+    if (color.length === 8) return `#${color}`;
+    if (color.length === 6) return `#${color}${transparency || 'ff'}`;
     if (color.length === 3) {
       color = color.split('').map(c => c + c).join('');
     }
-
-    return "#".concat(color).concat(transparency || 'ff');
+    return `#${color}${transparency || 'ff'}`;
   },
-
   SemiDesignToken(color) {
     // ! Only produces effects when used, the conditions for running need to occur after the real DOM is rendered
     if (typeof window === 'undefined') {
       return undefined;
     }
-
-    const variable = getComputedStyle(document.body).getPropertyValue("--semi-".concat(color));
+    const variable = getComputedStyle(document.body).getPropertyValue(`--semi-${color}`);
     if (variable === '') return undefined;
-    const rgba = "rgba(".concat(variable, ", 1)");
+    const rgba = `rgba(${variable}, 1)`;
     return toHex.RgbA(rgba);
   },
-
   HslA(color) {
     const hsla = REG_S.hslA.exec(color);
     const h = parseInt(hsla[2]);
@@ -163,12 +130,11 @@ const toHex = {
     const l = parseInt(hsla[4]) / 100;
     const a = hsla[5];
     const c = (1 - Math.abs(2 * l - 1)) * s,
-          x = c * (1 - Math.abs(h / 60 % 2 - 1)),
-          m = l - c / 2;
+      x = c * (1 - Math.abs(h / 60 % 2 - 1)),
+      m = l - c / 2;
     let r = 0,
-        g = 0,
-        b = 0;
-
+      g = 0,
+      b = 0;
     if (0 <= h && h < 60) {
       r = c;
       g = x;
@@ -194,37 +160,31 @@ const toHex = {
       g = 0;
       b = x;
     }
-
     r = Math.round((r + m) * 255).toString(16);
     g = Math.round((g + m) * 255).toString(16);
     b = Math.round((b + m) * 255).toString(16);
     return toHex.utils.pAL(r, g, b, a);
   },
-
   RgbA(color) {
     const rgba = REG_S.rgbA.exec(color);
     const r = parseInt(rgba[2], 10).toString(16),
-          g = parseInt(rgba[3], 10).toString(16),
-          b = parseInt(rgba[4], 10).toString(16),
-          a = rgba[5];
+      g = parseInt(rgba[3], 10).toString(16),
+      b = parseInt(rgba[4], 10).toString(16),
+      a = rgba[5];
     return toHex.utils.pAL(r, g, b, a);
   },
-
   utils: {
     pAL(r, g, b, a) {
       if (r.length == 1) r = '0' + r;
       if (g.length == 1) g = '0' + g;
       if (b.length == 1) b = '0' + b;
-
       if (typeof a !== 'undefined') {
         a = Math.round(parseInt(a) * 255).toString(16);
         if (a.length == 1) a = '0' + a;
         return '#' + r + g + b + a;
       }
-
       return '#' + r + g + b;
     }
-
   }
 };
 const REG_S = {
@@ -232,8 +192,8 @@ const REG_S = {
   hslA: /(hsl)a?\(\s*?(\d+),?\s*?(\d+)%,?\s*?(\d+)%,?\s*?\/?(\s*?[\d.]+)?\s*?\)/,
   rgbA: /(rgb)a?\(\s*?(\d+),?\s*?(\d+),?\s*?(\d+),?\s*?\/?(\s*?[\d.]+)?\s*?\)/,
   semiDesignTokens: /(\w+)?-?(\w+)-?(\d)?/
-}; // From src/components/palette.js
-
+};
+// From src/components/palette.js
 const SEMI_DESIGN_TOKENS = {
   // No sequence
   ALONG: ["black", "white"],

package/lib/es/radio/constants.js

@@ -1,20 +1,20 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const radioClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-radio"),
-  INNER: "".concat(BASE_CLASS_PREFIX, "-radio-inner"),
-  TEXT: "".concat(BASE_CLASS_PREFIX, "-radio-text"),
-  INPUT: "".concat(BASE_CLASS_PREFIX, "-radio-input"),
-  CHECKED: "".concat(BASE_CLASS_PREFIX, "-radio-checked"),
-  DISABLED: "".concat(BASE_CLASS_PREFIX, "-radio-disabled"),
-  BUTTON: "".concat(BASE_CLASS_PREFIX, "-radio-button")
+  PREFIX: `${BASE_CLASS_PREFIX}-radio`,
+  INNER: `${BASE_CLASS_PREFIX}-radio-inner`,
+  TEXT: `${BASE_CLASS_PREFIX}-radio-text`,
+  INPUT: `${BASE_CLASS_PREFIX}-radio-input`,
+  CHECKED: `${BASE_CLASS_PREFIX}-radio-checked`,
+  DISABLED: `${BASE_CLASS_PREFIX}-radio-disabled`,
+  BUTTON: `${BASE_CLASS_PREFIX}-radio-button`
 };
 const radioGroupClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-radioGroup"),
-  INNER: "".concat(BASE_CLASS_PREFIX, "-radioGroup-inner"),
-  TEXT: "".concat(BASE_CLASS_PREFIX, "-radioGroup-text"),
-  INPUT: "".concat(BASE_CLASS_PREFIX, "-radioGroup-input"),
-  CHECKED: "".concat(BASE_CLASS_PREFIX, "-radioGroup-checked"),
-  DISABLED: "".concat(BASE_CLASS_PREFIX, "-radioGroup-disabled")
+  PREFIX: `${BASE_CLASS_PREFIX}-radioGroup`,
+  INNER: `${BASE_CLASS_PREFIX}-radioGroup-inner`,
+  TEXT: `${BASE_CLASS_PREFIX}-radioGroup-text`,
+  INPUT: `${BASE_CLASS_PREFIX}-radioGroup-input`,
+  CHECKED: `${BASE_CLASS_PREFIX}-radioGroup-checked`,
+  DISABLED: `${BASE_CLASS_PREFIX}-radioGroup-disabled`
 };
 const strings = {
   DIRECTION_SET: ['horizontal', 'vertical'],

package/lib/es/radio/radio.css

@@ -6,6 +6,7 @@
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: relative;
   display: inline-flex;
   column-gap: 8px;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
@@ -175,6 +176,7 @@
 .semi-radio-content {
   display: flex;
   flex-direction: column;
+  row-gap: 4px;
 }
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
@@ -301,6 +303,7 @@
 .semi-radioGroup-horizontal {
   display: inline-flex;
   flex-wrap: wrap;
+  vertical-align: bottom;
   gap: 16px;
 }
 .semi-radioGroup-buttonRadio {