Merge branch 'main' into release

content/start/changelog/index-en-US.md

@@ -16,6 +16,19 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.23.3 (2022-11-15)
+- 【Style】
+    - Form Design Token is updated，`$spacing-form_label_extra_posBottom-marginTop`、`$spacing-form_label_extra_posMid-marginBottom`、`$spacing-form_label_extra_posMid-marginTop` is corrected to more semantically `$spacing-form_extra_posBottom-marginTop`、`$spacing-form_extra_posMid-marginBottom`、`$spacing-form_extra_posMid-marginTop` [#1272](https://github.com/DouyinFE/semi-design/pull/1272)
+
+
+#### 🎉 2.23.2 (2022-11-14)
+- 【Fix】
+    - Fix the problem of the `Input` component reporting style props error in React 18 + NextJS SSR environment [#1262](https://github.com/DouyinFE/semi-design/issues/1262) [#1181](https://github.com/DouyinFE/semi-design/issues/1181)
+- 【Style】
+    - Fixed the problem that the spacing between the last line and other lines was inconsistent when there were multiple lines of content in `TagInput` [#1263](https://github.com/DouyinFE/semi-design/pull/1263)
+    - Fixed the problem that  Form Label lost padding right（effect version v2.23.1） [#1258](https://github.com/DouyinFE/semi-design/pull/1258)
+    - The Switch component Design Token is updated, adding `$spacing-switch_knob-left`; `$motion-switch_unchecked-translateX` is corrected to more semantically `$spacing-switch_unchecked-translateX` [#1267](https://github.com/DouyinFE/semi-design/pull/1267)
+
 #### 🎉 2.23.1 (2022-11-11)
 - 【Fix】
     - Fixed the problem that Transfer in Popover caused Popover to close unexpectedly when dragging [#1226](https://github.com/DouyinFE/semi-design/issues/1226)

content/start/changelog/index.md

@@ -16,6 +16,17 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 
 ---
 
+#### 🎉 2.23.3 (2022-11-15)
+- 【Style】
+    - Form 组件 Design Token 修正，`$spacing-form_label_extra_posBottom-marginTop`、`$spacing-form_label_extra_posMid-marginBottom`、`$spacing-form_label_extra_posMid-marginTop`更正为更符合语义的 `$spacing-form_extra_posBottom-marginTop`、`$spacing-form_extra_posMid-marginBottom`、`$spacing-form_extra_posMid-marginTop`，并更正相关文档描述 [#1272](https://github.com/DouyinFE/semi-design/pull/1272)
+
+#### 🎉 2.23.2 (2022-11-14)
+- 【Fix】
+    - 修复 React 18 + NextJS SSR 环境下 Input 组件关于 style props报错的问题 [#1262](https://github.com/DouyinFE/semi-design/issues/1262) [#1181](https://github.com/DouyinFE/semi-design/issues/1181)
+- 【Style】
+    - 修复 TagInput 中多行内容时，最后一行与其他行行间距不一致的问题 [#1263](https://github.com/DouyinFE/semi-design/pull/1263)
+    - 修复 Form Label 标签右侧边距丢失的问题（影响范围 v2.23.1） [#1258](https://github.com/DouyinFE/semi-design/pull/1258)
+    - Switch 组件 Design Token更新，新增 `$spacing-switch_knob-left`；`$motion-switch_unchecked-translateX`更正为更符合语义的 `$spacing-switch_unchecked-translateX`; [#1267](https://github.com/DouyinFE/semi-design/pull/1267)
 
 #### 🎉 2.23.1 (2022-11-11)
 - 【Fix】

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.23.1"
+    "version": "2.23.3"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@douyinfe/semi-animation": "2.12.0",
-    "@douyinfe/semi-animation-styled": "2.23.1",
+    "@douyinfe/semi-animation-styled": "2.23.2",
     "classnames": "^2.2.6"
   },
   "devDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "semi styled animation",
   "keywords": [
     "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-semi-design",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "semi ui eslint plugin",
   "keywords": [
     "semi",

packages/semi-foundation/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
         @include font-size-regular;
@@ -210,14 +211,14 @@ $rating: #{$prefix}-rating;
 
     &[x-extra-pos="middle"] {
         .#{$field}-extra {
-            margin-top: $spacing-form_label_extra_posMid-marginTop;
-            margin-bottom: $spacing-form_label_extra_posMid-marginBottom;
+            margin-top: $spacing-form_extra_posMid-marginTop;
+            margin-bottom: $spacing-form_extra_posMid-marginBottom;
         }
     }
 
     &[x-extra-pos="bottom"] {
         .#{$field}-extra {
-            margin-top: $spacing-form_label_extra_posBottom-marginTop;
+            margin-top: $spacing-form_extra_posBottom-marginTop;
         }
     }
 

packages/semi-foundation/form/rtl.scss

@@ -33,6 +33,7 @@ $rating: #{$prefix}-rating;
     
         &-field-label {
             padding-right: 0;
+            padding-left: $spacing-form_label-paddingRight;
     
             &-with-extra {
                 .#{$field}-label-extra {

packages/semi-foundation/form/variables.scss

@@ -7,6 +7,7 @@ $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布
 $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
 
 // form label
+$spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
@@ -15,9 +16,10 @@ $spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边
 $spacing-form_label_posLeft-marginBottom: 0; // 表单项左侧标签底部外边距
 $spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 表单项顶部标签顶部边距
 $spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 表单项顶部标签底部边距
-$spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单项标签 图标/可选标记 顶部外边距
-$spacing-form_label_extra_posMid-marginBottom: $spacing-extra-tight; // 表单项标签 图标/可选标记 底部外边距 - 居中
-$spacing-form_label_extra_posBottom-marginTop: $spacing-extra-tight; // 表单项标签 图标/可选标记 顶部外边距 - 底部
+
+$spacing-form_extra_posMid-marginTop: $spacing-extra-tight; // 表单项额外提示信息顶部外边距 - 额外信息处于中间时
+$spacing-form_extra_posMid-marginBottom: $spacing-extra-tight; // 表单项额外提示信息底部外边距 - 额外信息处于中间时
+$spacing-form_extra_posBottom-marginTop: $spacing-extra-tight; //表单项额外提示信息顶部外边距 - 额外信息处于底部时
 
 // form switch rating需要额外margin以对齐高度 32px
 $spacing-form_switch_rating_marginY: ($height-control-default - 24px) * 0.5; // Switch / Rating 表单项顶部内边距（水平布局）

packages/semi-foundation/input/foundation.ts

@@ -21,7 +21,6 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyKeyUp(e: any): void;
     notifyKeyPress(e: any): void;
     notifyEnterPress(e: any): void;
-    setPaddingLeft(paddingLeft: string): void;
     isEventTarget(e: any): boolean
 }
 
@@ -266,10 +265,6 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         }
     }
 
-    setPaddingLeft(paddingLeft: string) {
-        this._adapter.setPaddingLeft(paddingLeft);
-    }
-
     isAllowClear() {
         const { value, isFocus, isHovering } = this._adapter.getStates();
         const { showClear, disabled } = this._adapter.getProps();

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.23.1",
+    "version": "2.23.3",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",

packages/semi-foundation/select/option.scss

@@ -1,5 +1,3 @@
-@import "./variables.scss";
-
 $module: #{$prefix}-select;
 $single: #{$module}-single;
 $filterable: #{$module}-filterable;

packages/semi-foundation/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
 @import "./animation.scss";
-@import './option.scss';
 @import './variables.scss';
+@import './option.scss';
 @import './mixin.scss';
 
 $module: #{$prefix}-select;

packages/semi-foundation/switch/rtl.scss

@@ -20,7 +20,7 @@ $module: #{$prefix}-switch;
         &-knob {
             right: 0;
             left: auto;
-            transform: translateX(-$motion-switch_unchecked-translateX);
+            transform: translateX(-1 * $spacing-switch_unchecked-translateX);
         }
 
         &-native-control {

packages/semi-foundation/switch/switch.scss

@@ -94,14 +94,14 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_knob-bg-default;
         box-sizing: border-box;
         position: absolute;
-        left: 0;
+        left: $spacing-switch_knob-left;
         right: auto;
         transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
 
         width: $width-switch_knob_default;
         height: $width-switch_knob_default;
         top: $spacing-switch_knob-padding;
-        transform: translateX($motion-switch_unchecked-translateX);
+        transform: translateX($spacing-switch_unchecked-translateX);
     }
 
     &-native-control {

packages/semi-foundation/switch/variables.scss

@@ -1,5 +1,5 @@
 // Other
-$motion-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量 - 动画用
+$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
 $motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
 $motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
 $motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
@@ -62,9 +62,10 @@ $width-switch-outline: 2px; // 开关轮廓宽度
 
 
 // Spacing
-$spacing-switch_knob-padding: 2px; // 开关按钮内边距
+$spacing-switch_knob-padding: 2px; // 开关按钮顶部边距
 $spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
 $spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
+$spacing-switch_knob-left: 0px; // 开关左侧偏移距离
 
 // Radius
 $radius-switch: $height-switch * 0.5; // 开关圆角

packages/semi-foundation/tagInput/tagInput.scss

@@ -106,6 +106,18 @@ $module: #{$prefix}-tagInput;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
 
+        &-small {
+            min-height: $height-tagInput-small;
+        }
+
+        &-default {
+            min-height: $height-tagInput-default;
+        }
+
+        &-large {
+            min-height: $height-tagInput-large;
+        }
+
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
@@ -170,6 +182,42 @@ $module: #{$prefix}-tagInput;
             &:not(:first-child) > input {
                 padding-left: 0;
             }
+
+            &-small {
+                height: $height-tagInput_input_small;
+                margin-top: $spacing-tagInput_small-Y;
+                margin-bottom: $spacing-tagInput_small-Y;
+                line-height: $height-tagInput_input_small;
+
+                & .#{$prefix}-input-small {
+                    height: $height-tagInput_input_small;
+                    line-height: $height-tagInput_input_small;
+                }
+            }
+
+            &-default {
+                height: $height-tagInput_input_default;
+                margin-top: $spacing-tagInput_default-Y;
+                margin-bottom: $spacing-tagInput_default-Y;
+                line-height: $height-tagInput_input_default;
+
+                & .#{$prefix}-input-default {
+                    height: $height-tagInput_input_default;
+                    line-height: $height-tagInput_input_default;
+                }
+            }
+
+            &-large {
+                height: $height-tagInput_input_large;
+                margin-top: $spacing-tagInput_large-Y;
+                margin-bottom: $spacing-tagInput_large-Y;
+                line-height: $height-tagInput_input_large;
+
+                & .#{$prefix}-input-large {
+                    height: $height-tagInput_input_large;
+                    line-height: $height-tagInput_input_large;
+                }
+            }
         }
     }
 

packages/semi-foundation/tagInput/variables.scss

@@ -40,6 +40,9 @@ $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
 $height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
+$height-tagInput_input_small: 20px; // 小尺寸标签输入框Input框高度
+$height-tagInput_input_default: 24px; // 默认尺寸标签输入框Input框高度
+$height-tagInput_input_large: 24px; // 大尺寸标签输入框Input框高度
 
 $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
 $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "semi icons",
   "keywords": [
     "semi",
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@douyinfe/semi-webpack-plugin": "2.23.1",
+    "@douyinfe/semi-webpack-plugin": "2.23.2",
     "babel-loader": "^8.2.2",
     "css-loader": "4.3.0",
     "del": "^6.0.0",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-illustrations",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.23.1",
+    "version": "2.23.3",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.23.1"
+        "@douyinfe/semi-webpack-plugin": "2.23.2"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "compile semi scss to css",
   "author": "[email protected]",
   "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.23.1",
+    "version": "2.23.3",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/calendar/_story/calendar.stories.jsx

@@ -563,14 +563,7 @@ export const WeekStartsOnDemo = () => {
                 mode="month"
                 weekStartsOn={1}
                 events={events}
-                dateGridRender={(dateString, date) => {
-                    if (dateString === new Date(2019, 6, 16).toString()) {
-                    return (
-                        <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>123test</div>
-                    );
-                    }
-                    return null;
-                }}
+                displayValue={new Date(2022, 8, 5, 14, 45, 0)} 
             ></Calendar>
       </div>
     )

packages/semi-ui/form/hoc/withField.tsx

@@ -441,7 +441,7 @@ function withField<
             const extraCls = classNames(`${prefix}-field-extra`, {
                 [`${prefix}-field-extra-string`]: typeof extraText === 'string',
                 [`${prefix}-field-extra-middle`]: mergeExtraPos === 'middle',
-                [`${prefix}-field-extra-botttom`]: mergeExtraPos === 'bottom',
+                [`${prefix}-field-extra-bottom`]: mergeExtraPos === 'bottom',
             });
 
             const extraContent = extraText ? <div className={extraCls} id={extraTextId} x-semi-prop="extraText">{extraText}</div> : null;

packages/semi-ui/input/index.tsx

@@ -72,7 +72,6 @@ export interface InputState {
     cachedValue: React.ReactText;
     disabled: boolean;
     props: Record<string, any>;
-    paddingLeft: string;
     isFocus: boolean;
     isHovering: boolean;
     eyeClosed: boolean;
@@ -157,7 +156,6 @@ class Input extends BaseComponent<InputProps, InputState> {
             cachedValue: null, // Cache current props.value value
             disabled: false,
             props: {},
-            paddingLeft: '',
             isFocus: false,
             isHovering: false,
             eyeClosed: props.mode === 'password',
@@ -195,7 +193,6 @@ class Input extends BaseComponent<InputProps, InputState> {
             notifyKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => this.props.onKeyUp(e),
             notifyEnterPress: (e: React.KeyboardEvent<HTMLInputElement>) => this.props.onEnterPress(e),
             notifyClear: (e: React.MouseEvent<HTMLDivElement>) => this.props.onClear(e),
-            setPaddingLeft: (paddingLeft: string) => this.setState({ paddingLeft }),
             setMinLength: (minLength: number) => this.setState({ minLength }),
             isEventTarget: (e: React.MouseEvent) => e && e.target === e.currentTarget,
         };
@@ -429,7 +426,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             preventScroll,
             ...rest
         } = this.props;
-        const { value, paddingLeft, isFocus, minLength: stateMinLength } = this.state;
+        const { value, isFocus, minLength: stateMinLength } = this.state;
         const suffixAllowClear = this.showClearBtn();
         const suffixIsIcon = isSemiIcon(suffix);
         const ref = forwardRef || this.inputRef;
@@ -462,7 +459,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         const inputValue = value === null || value === undefined ? '' : value;
         const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
             ...rest,
-            style: { paddingLeft, ...inputStyle },
+            style: inputStyle,
             autoFocus: autofocus,
             className: inputCls,
             disabled,

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.23.1",
+    "version": "2.23.3",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.23.1",
-        "@douyinfe/semi-foundation": "2.23.1",
-        "@douyinfe/semi-icons": "2.23.1",
-        "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.23.1",
+        "@douyinfe/semi-animation": "2.23.3",
+        "@douyinfe/semi-animation-react": "2.23.3",
+        "@douyinfe/semi-foundation": "2.23.3",
+        "@douyinfe/semi-icons": "2.23.3",
+        "@douyinfe/semi-illustrations": "2.23.3",
+        "@douyinfe/semi-theme-default": "2.23.3",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.23.1",
+        "@douyinfe/semi-scss-compile": "2.23.2",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

packages/semi-ui/tagInput/_story/tagInput.stories.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
-import { Toast, Icon, Button, Avatar, Form, Popover, SideSheet, Modal, TagInput } from '../../index';
-import { IconGift, IconVigoLogo } from '@douyinfe/semi-icons';
+import { Toast, Icon, Button, Avatar, Form, Popover, SideSheet, Modal, TagInput, Switch } from '../../index';
+import { IconGift, IconVigoLogo, IconClose } from '@douyinfe/semi-icons';
 const style = {
   width: 400,
   marginTop: 10,

packages/semi-ui/tagInput/index.tsx

@@ -555,9 +555,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             [`${prefixCls}-warning`]: validateStatus === 'warning'
         });
 
-        const inputCls = cls(`${prefixCls}-wrapper-input`);
+        const inputCls = cls(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);
 
-        const wrapperCls = cls(`${prefixCls}-wrapper`);
+        const wrapperCls = cls(`${prefixCls}-wrapper`, `${prefixCls}-wrapper-${size}`);
 
         return (
             // eslint-disable-next-line 

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.23.1",
+    "version": "2.23.3",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",