Merge pull request #1497 from DouyinFE/add_token

feat: modal add fullscrren top token & sidesheet add header border a…

packages/semi-foundation/modal/modal.scss

@@ -76,6 +76,7 @@ $module: #{$prefix}-modal;
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;
+        top: $spacing-modal_content_fullscreen-top;
     }
 
     // &-close {

packages/semi-foundation/modal/variables.scss

@@ -43,6 +43,7 @@ $spacing-modal_footer_button-marginLeft: $spacing-base-tight; // 模态框 foote
 $spacing-modal_footer_button-marginRight: 0; // 模态框 footer 按钮右侧外边距
 $spacing-modal_confirm_header-marginBottom: 8px; // 命令式调用模态框 header 底部外边距
 $spacing-modal_confirm_icon_wrapper-marginRight: $spacing-base-tight; // 命令式调用模态框图标右侧外边距
+$spacing-modal_content_fullscreen-top: 0px; // 模态框内容全屏顶部位置
 
 // Width/Height
 $width-modal_title: 100%; // 模态框标题宽度

packages/semi-foundation/sideSheet/sideSheet.scss

@@ -95,6 +95,7 @@ $module: #{$prefix}-sidesheet;
         align-items: flex-start;
         padding: $spacing-sideSheet_header-padding;
         padding-bottom: $spacing-sideSheet_header-paddingBottom;
+        border-bottom: $width-sideSheet_header-borderBottom solid $color-sideSheet_header-borderBottom;
     }
 
     &-body {
@@ -103,6 +104,20 @@ $module: #{$prefix}-sidesheet;
         overflow: auto;
     }
 
+    &-size-small {
+        width: $width-sideSheet_size-small;
+    }
+
+    &-size-medium {
+        width: $width-sideSheet_size-medium;
+    }
+
+    &-size-large {
+        width: $width-sideSheet_size-large;
+    }
+
+
+
     &-content {
         height: 100%;
         display: flex;

packages/semi-foundation/sideSheet/variables.scss

@@ -2,6 +2,7 @@
 $color-sideSheet_mask-bg: var(--semi-color-overlay-bg); // 侧边栏打开后蒙层颜色
 $color-sideSheet-bg: var(--semi-color-bg-2); // 侧边栏背景颜色
 $color-sideSheet_main-text: var(--semi-color-text-0); // 侧边栏默认文本颜色
+$color-sideSheet_header-borderBottom: var(--semi-color-border); // 侧边栏 header 底部边框颜色
 
 // Spacing
 $spacing-sideSheet-margin: 0; // 侧边栏整体外边距
@@ -12,6 +13,11 @@ $spacing-sideSheet_body-paddingY: 0; // 侧边栏 body 垂直内边距
 $spacing-sideSheet_body-paddingX: $spacing-loose; // 侧边栏 body 水平内边距
 $spacing-sideSheet_footer-padding: $spacing-loose; // 侧边栏 footer 内边距
 
+$width-sideSheet_header-borderBottom: 0px; // 侧边栏 header 底部边框宽度
+$width-sideSheet_size-small: 448px; // 小尺寸侧边栏宽度
+$width-sideSheet_size-medium: 684px; // 中尺寸侧边栏宽度
+$width-sideSheet_size-large: 920px; // 大尺寸侧边栏宽度
+
 // Font
 $font-sideSheet_title-fontWeight: $font-weight-bold; // 侧边栏标题文本字重
 $font-sideSheet_title-fontSize: $font-size-header-5; // 侧边栏标题文本字号

packages/semi-ui/sideSheet/SideSheetContent.tsx

@@ -5,6 +5,7 @@ import { cssClasses } from '@douyinfe/semi-foundation/sideSheet/constants';
 import Button from '../iconButton';
 import { noop } from 'lodash';
 import { IconClose } from '@douyinfe/semi-icons';
+import { SideSheetProps } from "@douyinfe/semi-foundation/sideSheet/sideSheetFoundation";
 
 let uuid = 0;
 const prefixCls = cssClasses.PREFIX;
@@ -19,17 +20,18 @@ export interface SideSheetContentProps {
     title?: React.ReactNode;
     closable?: boolean;
     headerStyle?: CSSProperties;
-    width: CSSProperties['width'];
+    width?: CSSProperties['width'];
     height: CSSProperties['height'];
     style: CSSProperties;
+    size: SideSheetProps['size'];
     bodyStyle?: CSSProperties;
     className: string;
-    dialogClassName?:string;
+    dialogClassName?: string;
     children?: React.ReactNode;
     footer?: React.ReactNode;
     'aria-label'?: string;
-    maskExtraProps?: {[key:string]: any};
-    wrapperExtraProps?: {[key:string]: any}
+    maskExtraProps?: {[key: string]: any};
+    wrapperExtraProps?: {[key: string]: any}
 }
 
 export default class SideSheetContent extends React.PureComponent<SideSheetContentProps> {
@@ -138,7 +140,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
                 key="dialog-element"
                 role="dialog"
                 tabIndex={-1}
-                className={cls(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, this.props.dialogClassName??"")}
+                className={cls(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, this.props.dialogClassName??"", `${prefixCls}-size-${props.size}`)}
                 // onMouseDown={this.onDialogMouseDown}
                 style={{ ...props.style, ...style }}
                 {...this.props.wrapperExtraProps}
@@ -168,6 +170,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         } = this.props;
         const wrapperCls = cls(className, {
             [`${prefixCls}-fixed`]: !mask,
+            [`${prefixCls}-size-${this.props.size}`]: !mask
         });
         const wrapperStyle: CSSProperties = {};
         if (!mask && width) {

packages/semi-ui/sideSheet/index.tsx

@@ -206,7 +206,6 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         const { direction } = this.context;
         const isVertical = placement === 'left' || placement === 'right';
         const isHorizontal = placement === 'top' || placement === 'bottom';
-        const sheetWidth = isVertical ? (width ? width : defaultWidthList[size]) : '100%';
         const sheetHeight = isHorizontal ? (height ? height : defaultHeight) : '100%';
         const classList = cls(prefixCls, className, {
             [`${prefixCls}-${placement}`]: placement,
@@ -216,11 +215,12 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
             [`${prefixCls}-hidden`]: keepDOM && this.state.displayNone,
         });
         const contentProps = {
+            ...( isVertical ? (width ? { width } : {}) : { width: "100%" }),
             ...props,
             visible,
             motion: false,
+            size,
             className: classList,
-            width: sheetWidth,
             height: sheetHeight,
             onClose: this.handleCancel,
         };