Merge pull request #2578 from XiaoMi/feature/notification(add-size-api)

feat(notification): add size api

.changeset/chilled-wolves-love.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/notification": minor
+---
+
+feat: 增加 size API

.changeset/fast-ants-bake.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Notification feat: 增加 size API

packages/ui/notification/src/Notification.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
-import { HiBaseHTMLProps } from '@hi-ui/core'
+import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core'
 import { CSSTransition } from 'react-transition-group'
 import { IconButton } from '@hi-ui/icon-button'
 import {
@@ -41,6 +41,7 @@ export const Notification = forwardRef<HTMLDivElement | null, NotificationProps>
       type = 'info',
       action,
       destroy,
+      size = 'lg',
       onClose,
       ...rest
     },
@@ -87,7 +88,7 @@ export const Notification = forwardRef<HTMLDivElement | null, NotificationProps>
       })
     }, [])
 
-    const cls = cx(prefixCls, className, `${prefixCls}--type-${type}`)
+    const cls = cx(prefixCls, className, `${prefixCls}--type-${type}`, `${prefixCls}--size-${size}`)
 
     return (
       <CSSTransition
@@ -111,12 +112,9 @@ export const Notification = forwardRef<HTMLDivElement | null, NotificationProps>
             {content ? <div className={`${prefixCls}__content`}>{content}</div> : null}
             {action ? <div className={`${prefixCls}__footer`}>{action}</div> : null}
             {closable ? (
-              <IconButton
-                className={`${prefixCls}__close`}
-                effect
-                icon={<CloseOutlined />}
-                onClick={requestClose}
-              />
+              <div className={`${prefixCls}__close`}>
+                <IconButton effect icon={<CloseOutlined />} onClick={requestClose} />
+              </div>
             ) : null}
           </div>
         </div>
@@ -172,6 +170,10 @@ export interface NotificationProps extends Omit<HiBaseHTMLProps<'div'>, 'title'>
    * 操作配置
    */
   action?: React.ReactNode
+  /**
+   * 通知框尺寸
+   */
+  size?: HiBaseSizeEnum
 }
 
 if (__DEV__) {

packages/ui/notification/src/styles/notification.scss

@@ -12,7 +12,6 @@ $prefix: '#{$component-prefix}-notification' !default;
   position: relative;
   box-sizing: border-box;
   width: 360px;
-  padding: use-spacing(10);
   margin: use-spacing(8);
   border-radius: use-border-radius('lg');
   pointer-events: auto;
@@ -21,6 +20,18 @@ $prefix: '#{$component-prefix}-notification' !default;
   line-height: use-text-lineheight('normal');
   background-color: use-color-static('white');
 
+  &--size-lg {
+    padding: use-spacing(10);
+  }
+
+  &--size-md {
+    padding: use-spacing(8);
+  }
+
+  &--size-sm {
+    padding: use-spacing(6);
+  }
+
   &__header {
     display: flex;
     align-items: center;
@@ -30,20 +41,45 @@ $prefix: '#{$component-prefix}-notification' !default;
   }
 
   &__content {
-    margin-top: use-spacing(4);
-    padding: 0 use-spacing(7) 0 use-spacing(18);
     word-break: break-word;
     color: use-color('gray', 600);
+
+    .#{$prefix}--size-lg & {
+      margin-top: use-spacing(4);
+      padding: 0 0 0 use-spacing(16);
+    }
+
+    .#{$prefix}--size-md & {
+      margin-top: use-spacing(3);
+      padding: 0 0 0 use-spacing(15);
+    }
+
+    .#{$prefix}--size-sm & {
+      margin-top: use-spacing(2);
+      padding: 0 0 0 use-spacing(14);
+    }
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    margin-right: use-spacing(6);
-    font-size: use-text-size('xxl');
+
+    .#{$prefix}--size-lg & {
+      margin-right: use-spacing(6);
+    }
+
+    .#{$prefix}--size-md & {
+      margin-right: use-spacing(5);
+    }
+
+    .#{$prefix}--size-sm & {
+      margin-right: use-spacing(4);
+    }
 
     svg {
       flex-shrink: 0;
+      width: use-height-size(5);
+      height: use-height-size(5);
     }
   }
 
@@ -127,13 +163,38 @@ $prefix: '#{$component-prefix}-notification' !default;
 
   &__close {
     position: absolute;
-    top: use-spacing(10);
-    right: use-spacing(10);
+    line-height: 0;
+
+    .#{$prefix}--size-lg & {
+      top: use-spacing(10);
+      right: use-spacing(10);
+    }
+
+    .#{$prefix}--size-md & {
+      top: use-spacing(8);
+      right: use-spacing(8);
+    }
+
+    .#{$prefix}--size-sm & {
+      top: use-spacing(6);
+      right: use-spacing(6);
+    }
   }
 
   &__footer {
     display: flex;
     justify-content: flex-end;
-    margin-top: use-spacing(10);
+
+    .#{$prefix}--size-lg & {
+      margin-top: use-spacing(10);
+    }
+
+    .#{$prefix}--size-md & {
+      margin-top: use-spacing(8);
+    }
+
+    .#{$prefix}--size-sm & {
+      margin-top: use-spacing(6);
+    }
   }
 }

packages/ui/notification/stories/index.stories.tsx

@@ -6,6 +6,7 @@ export * from './close.stories'
 export * from './title.stories'
 export * from './auto-close.stories'
 export * from './action.stories'
+export * from './size.stories'
 
 export default {
   title: 'FeedBack/Notification',

packages/ui/notification/stories/size.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import notification from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 设置尺寸
+ */
+export const Size = () => {
+  const notificationIdRef = React.useRef<React.ReactText>()
+
+  const openNotification = (size) => {
+    notificationIdRef.current = notification.open({
+      size,
+      autoClose: false,
+      title: '数据备份通知',
+      content: '将于 2035.08.10 00:00:00-08:00：00 期间进行系统服务器升级维护！',
+    })
+  }
+  return (
+    <>
+      <h1>Size</h1>
+      <div className="notification-size__wrap">
+        <Button onClick={() => openNotification('lg')}>Notice lg</Button>
+        <Button onClick={() => openNotification('md')}>Notice md</Button>
+        <Button onClick={() => openNotification('sm')}>Notice sm</Button>
+      </div>
+    </>
+  )
+}