@douyinfe/semi-foundation 2.15.0 → 2.16.0-beta.0

package/slider/variables.scss

@@ -11,9 +11,10 @@ $color-slider_handle_disabled-border-hover: var(--semi-color-white); // 禁用
 $color-slider_handle_disabled-border: var(--semi-color-border); // 禁用滑动条圆形描边颜色 - 默认态
 $color-slider_mark-text-default: var(--semi-color-text-2); // 滑动条刻度文字颜色
 $color-slider_rail-bg-default: var(--semi-color-fill-0); // 滑动条轨道颜色 - 未填充
-$color-slider_rail: rgba(0, 0, 0, .65);
+$color-slider_rail: rgba(0, 0, 0, 0.65);
 $color-slider_track-bg-default: var(--semi-color-primary); // 滑动条轨道颜色 - 已填充
 $color-slider_track_disabled-bg: var(--semi-color-primary-disabled); // 禁用滑动条轨道颜色 - 已填充
+$color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按钮轮廓 - 聚焦
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
@@ -33,7 +34,7 @@ $spacing-slider_boundary_min-left: 0;
 $spacing-slider_boundary_max-right: 0;
 $spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
 $spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
-$spacing-slider_vertical_marks-reverse-marginLeft: -26px;// 垂直滑动条刻度标签左侧外边距（标签在左侧时）
+$spacing-slider_vertical_marks-reverse-marginLeft: -26px; // 垂直滑动条刻度标签左侧外边距（标签在左侧时）
 $spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
 $spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
 $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距
@@ -42,7 +43,6 @@ $spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按
 $radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角
 $radius-slider_track: var(--semi-border-radius-small); // 滚动条已填充轨道圆角
 
-
 // Width/Height
 $height-slider_wrapper: 32px; // 滚动条容器整体高度
 $height-slider_vertical_wrapper: 4px; // 垂直滚动条整体宽度
@@ -52,7 +52,7 @@ $width-slider_handle_clicked: 1px; // 滚动条圆形按钮按下后描边宽度
 $height-slider_track: 4px; // 滚动条已填充轨道高度
 $width-slider_dot: 4px; // 滚动条圆形刻度点宽度
 $width-slider_handle_border_disabled: 1px; // 禁用滚动条圆形按钮按下后描边宽度
-
+$width-slider_handle-focus: 2px; // 圆形按钮轮廓 - 聚焦
 
 // Font
 $font-slider_rail-fontSize: 14px; // 滚动条轨道文本字号

package/tooltip/variables.scss

@@ -19,7 +19,7 @@ $spacing-tooltip_content-paddingBottom: $spacing-tight; // 工具提示内容底
 
 $font-tooltip-fontSize: $font-size-regular; // 工具提示文本字号
 $width-tooltip: 240px; // 工具提示宽度 - 默认
-$width-tooltip_arrow: 24px; // 工具提示小三角箭头宽度 - 水平
+$width-tooltip_arrow: 24px; // 工具提示小三角箭头宽度 - 水平 ignore-semi-css-trans
 $height-tooltip_arrow: 7px; // 工具提示小三角箭头高度 - 水平
 
 $height-tooltip_arrow_vertical: 24px; // 工具提示小三角箭头高度 - 垂直

package/treeSelect/treeSelect.scss

@@ -239,6 +239,7 @@ $module: #{$prefix}-tree-select;
         // right: 0;
         display: inline-flex;
         align-items: center;
+        flex-shrink: 0;
         height: 100%;
         justify-content: center;
         width: $width-treeSelect_arrow;
@@ -265,6 +266,7 @@ $module: #{$prefix}-tree-select;
         display: inline-flex;
         align-items: center;
         height: 100%;
+        flex-shrink: 0;
         justify-content: center;
         width: $width-treeSelect_arrow;
         color: $color-treeSelect_default-icon-default;

package/typography/typography.scss

@@ -6,6 +6,14 @@ $module: #{$prefix}-typography;
     color: $color-typography_default-text-default;
     @include font-size-regular;
 
+    &-text {
+        display: inline-block;
+
+        &-icon {
+            display: inline-flex;
+        }
+    }
+
     &.#{$module}-secondary {
         color: $color-typography_secondary-text-default;
     }
@@ -45,7 +53,7 @@ $module: #{$prefix}-typography;
     }
 
     &-icon {
-        // display: inline-flex;
+        display: inline-flex;
         margin-right: $spacing-typography_iconPrefix-marginRight;
         vertical-align: middle;
         color: inherit;

package/utils/a11y.ts

@@ -1,6 +1,6 @@
 import { get } from "lodash";
 
-export function handlePrevent(event: any)  {
+export function handlePrevent(event: any) {
     event.stopPropagation();
     event.preventDefault();
 }
@@ -47,7 +47,7 @@ export function setFocusToPreviousMenuItem (itemNodes: HTMLElement[], currentIte
 }
 
 // set focus to the next item in item list
-export function  setFocusToNextMenuitem (itemNodes: HTMLElement[], currentItem: HTMLElement): void {
+export function setFocusToNextMenuitem (itemNodes: HTMLElement[], currentItem: HTMLElement): void {
     let newMenuItem: HTMLElement, index: number;
 
     if (itemNodes.length > 0){
@@ -97,10 +97,10 @@ export function getAncestorNodeByRole(curElement: Element, role: string): Elemen
     return curElement.parentElement;
 }
 
-// According to the Id, find the corresponding data-popupId element
+// According to the Id, find the corresponding data-popupid element
 export function getMenuButton(focusableEle: NodeListOf<HTMLElement>, Id: string): HTMLElement{
     for (let i = 0; i < focusableEle.length; i++){
-        const curAriDescribedby = focusableEle[i].attributes['data-popupId'];
+        const curAriDescribedby = focusableEle[i].attributes['data-popupid'];
         if (curAriDescribedby && curAriDescribedby.value === Id){
             return focusableEle[i];
         }