From 4dc2094d43cc39ab2cdeb0c10b62866d83f8ad05 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Thu, 7 Sep 2023 20:30:53 +0800
Subject: [PATCH] feat(alert): add size api

---
 .changeset/mean-ants-shave.md                 |  5 +
 .changeset/odd-tomatoes-grow.md               |  5 +
 packages/ui/alert/src/Alert.tsx               | 10 +-
 packages/ui/alert/src/styles/alert.scss       | 68 ++++++++++++--
 packages/ui/alert/stories/content.stories.tsx | 15 ++-
 packages/ui/alert/stories/index.stories.tsx   |  1 +
 packages/ui/alert/stories/size.stories.tsx    | 93 +++++++++++++++++++
 7 files changed, 184 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/mean-ants-shave.md
 create mode 100644 .changeset/odd-tomatoes-grow.md
 create mode 100644 packages/ui/alert/stories/size.stories.tsx

diff --git a/.changeset/mean-ants-shave.md b/.changeset/mean-ants-shave.md
new file mode 100644
index 000000000..ba3bd3743
--- /dev/null
+++ b/.changeset/mean-ants-shave.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/alert": minor
+---
+
+feat: add size api
diff --git a/.changeset/odd-tomatoes-grow.md b/.changeset/odd-tomatoes-grow.md
new file mode 100644
index 000000000..152c7b167
--- /dev/null
+++ b/.changeset/odd-tomatoes-grow.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Alert feat: add size api
diff --git a/packages/ui/alert/src/Alert.tsx b/packages/ui/alert/src/Alert.tsx
index 805606ccc..bcbe2ce45 100644
--- a/packages/ui/alert/src/Alert.tsx
+++ b/packages/ui/alert/src/Alert.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, useState, useEffect } 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 { AlertTypeEnum } from './types'
 import { useLatestCallback } from '@hi-ui/use-latest'
@@ -32,6 +32,7 @@ export const Alert = forwardRef<HTMLDivElement | null, AlertProps>(
       closeIcon = defaultCloseIcon,
       // duration小于 0，表示不开启自动关闭
       duration = -1,
+      size = 'lg',
       onClose,
       ...rest
     },
@@ -62,7 +63,8 @@ export const Alert = forwardRef<HTMLDivElement | null, AlertProps>(
       prefixCls,
       className,
       suffixIcon && `${prefixCls}--type-${type}`,
-      content && `${prefixCls}--with-content`
+      content && `${prefixCls}--with-content`,
+      size && `${prefixCls}--size-${size}`
     )
 
     return internalVisible ? (
@@ -115,6 +117,10 @@ export interface AlertProps extends HiBaseHTMLProps<'div'> {
    * @version 4.0.0
    */
   showIcon?: boolean
+  /**
+   * 设置尺寸
+   */
+  size?: HiBaseSizeEnum
 }
 
 if (__DEV__) {
diff --git a/packages/ui/alert/src/styles/alert.scss b/packages/ui/alert/src/styles/alert.scss
index e0dcb2555..5ca25d8c8 100644
--- a/packages/ui/alert/src/styles/alert.scss
+++ b/packages/ui/alert/src/styles/alert.scss
@@ -6,7 +6,6 @@ $prefix: '#{$component-prefix}-alert' !default;
   $alert-icon-size: 20px;
 
   position: relative;
-  padding: use-spacing(6) use-spacing(10);
   border-radius: use-border-radius('lg');
   font-size: use-text-size('normal');
   color: use-color('gray', 600);
@@ -17,24 +16,79 @@ $prefix: '#{$component-prefix}-alert' !default;
   box-sizing: border-box;
 
   &.#{$prefix}--with-content {
-    padding: use-spacing(10);
-
     .#{$prefix}__title {
       font-size: use-text-size('lg');
-      font-weight: use-text-weight('medium');
-      margin-bottom: use-spacing(4);
+      font-weight: use-text-weight('semibold');
     }
 
     .#{$prefix}__icon {
       font-size: $alert-icon-size;
-      margin-inline-end: use-spacing(6);
+    }
+  }
+
+  &--size-lg {
+    padding: use-spacing(6) use-spacing(8);
+
+    &.#{$prefix}--with-content {
+      padding: use-spacing(10);
+
+      .#{$prefix}__title {
+        margin-bottom: use-spacing(4);
+      }
+
+      .#{$prefix}__icon {
+        margin-inline-end: use-spacing(6);
+      }
+    }
+  }
+
+  &--size-md {
+    padding: use-spacing(5) use-spacing(6);
+
+    &.#{$prefix}--with-content {
+      padding: use-spacing(8);
+
+      .#{$prefix}__title {
+        margin-bottom: use-spacing(3);
+      }
+
+      .#{$prefix}__icon {
+        margin-inline-end: use-spacing(5);
+      }
+    }
+  }
+
+  &--size-sm {
+    padding: use-spacing(4);
+
+    &.#{$prefix}--with-content {
+      padding: use-spacing(6);
+
+      .#{$prefix}__title {
+        margin-bottom: use-spacing(3);
+      }
+
+      .#{$prefix}__icon {
+        margin-inline-end: use-spacing(4);
+      }
     }
   }
 
   &__icon {
     font-size: use-text-size('lg');
-    margin-inline-end: use-spacing(4);
     flex-shrink: 0;
+
+    .#{$prefix}--size-lg & {
+      margin-inline-end: use-spacing(5);
+    }
+
+    .#{$prefix}--size-md & {
+      margin-inline-end: use-spacing(4);
+    }
+
+    .#{$prefix}--size-sm & {
+      margin-inline-end: use-spacing(3);
+    }
   }
 
   &__message {
diff --git a/packages/ui/alert/stories/content.stories.tsx b/packages/ui/alert/stories/content.stories.tsx
index 6a749d151..b11ca5406 100644
--- a/packages/ui/alert/stories/content.stories.tsx
+++ b/packages/ui/alert/stories/content.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Alert from '../src'
+import Button from '@hi-ui/button'
 
 /**
  * @title 带内容
@@ -16,7 +17,9 @@ export const Content = () => {
           content={
             <span style={{ display: 'flex', justifyContent: 'space-between', marginRight: -24 }}>
               <span>文字说明文字说明文字说明</span>
-              <span>操作按钮</span>
+              <Button type="secondary" appearance="link">
+                操作按钮
+              </Button>
             </span>
           }
           onClose={() => {
@@ -30,7 +33,9 @@ export const Content = () => {
           content={
             <span style={{ display: 'flex', justifyContent: 'space-between', marginRight: -24 }}>
               <span>文字说明文字说明文字说明</span>
-              <span>操作按钮</span>
+              <Button type="success" appearance="link">
+                操作按钮
+              </Button>
             </span>
           }
           onClose={() => {
@@ -44,7 +49,9 @@ export const Content = () => {
           content={
             <span style={{ display: 'flex', justifyContent: 'space-between', marginRight: -24 }}>
               <span>文字说明文字说明文字说明</span>
-              <span>操作按钮</span>
+              <Button type="danger" appearance="link">
+                操作按钮
+              </Button>
             </span>
           }
           onClose={() => {
@@ -58,7 +65,7 @@ export const Content = () => {
           content={
             <span style={{ display: 'flex', justifyContent: 'space-between', marginRight: -24 }}>
               <span>文字说明文字说明文字说明</span>
-              <span>操作按钮</span>
+              <Button appearance="link">操作按钮</Button>
             </span>
           }
           onClose={() => {
diff --git a/packages/ui/alert/stories/index.stories.tsx b/packages/ui/alert/stories/index.stories.tsx
index dd9008b10..96c9d5976 100644
--- a/packages/ui/alert/stories/index.stories.tsx
+++ b/packages/ui/alert/stories/index.stories.tsx
@@ -8,6 +8,7 @@ export * from './duration.stories'
 export * from './banner.stories'
 export * from './close-icon.stories'
 export * from './carousel.stories'
+export * from './size.stories'
 
 export default {
   title: 'FeedBack/Alert',
diff --git a/packages/ui/alert/stories/size.stories.tsx b/packages/ui/alert/stories/size.stories.tsx
new file mode 100644
index 000000000..d023d2feb
--- /dev/null
+++ b/packages/ui/alert/stories/size.stories.tsx
@@ -0,0 +1,93 @@
+import React from 'react'
+import Alert from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 基础用法
+ * @desc 根据用户的操作进行页面级或模块、区块级的提示
+ */
+export const Size = () => {
+  return (
+    <>
+      <h1>Size</h1>
+      <div className="alert-size__wrap">
+        <h2>lg</h2>
+        <Alert
+          type="primary"
+          title="信息提示的文案"
+          onClose={() => {
+            console.log('alert关闭回调')
+          }}
+        />
+        <br />
+        <Alert
+          type="primary"
+          title="信息提示的文案"
+          content={
+            <span style={{ display: 'flex', justifyContent: 'space-between', marginRight: -24 }}>
+              <span>文字说明文字说明文字说明</span>
+              <Button type="secondary" appearance="link">
+                操作按钮
+              </Button>
+            </span>
+          }
+          onClose={() => {
+            console.log('alert关闭回调')
+          }}
+        />
+        <h2>md</h2>
+        <Alert
+          type="primary"
+          size={'md'}
+          title="信息提示的文案"
+          onClose={() => {
+            console.log('alert关闭回调')
+          }}
+        />
+        <br />
+        <Alert
+          type="primary"
+          size={'md'}
+          title="信息提示的文案"
+          content={
+            <span style={{ display: 'flex', justifyContent: 'space-between', marginRight: -24 }}>
+              <span>文字说明文字说明文字说明</span>
+              <Button type="secondary" appearance="link">
+                操作按钮
+              </Button>
+            </span>
+          }
+          onClose={() => {
+            console.log('alert关闭回调')
+          }}
+        />
+        <h2>sm</h2>
+        <Alert
+          type="primary"
+          size={'sm'}
+          title="信息提示的文案"
+          onClose={() => {
+            console.log('alert关闭回调')
+          }}
+        />
+        <br />
+        <Alert
+          type="primary"
+          size={'sm'}
+          title="信息提示的文案"
+          content={
+            <span style={{ display: 'flex', justifyContent: 'space-between', marginRight: -24 }}>
+              <span>文字说明文字说明文字说明</span>
+              <Button type="secondary" appearance="link">
+                操作按钮
+              </Button>
+            </span>
+          }
+          onClose={() => {
+            console.log('alert关闭回调')
+          }}
+        />
+      </div>
+    </>
+  )
+}