feat(alert): add size api

.changeset/mean-ants-shave.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/alert": minor
+---
+
+feat: add size api

.changeset/odd-tomatoes-grow.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Alert feat: add size api

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__) {

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 {

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={() => {

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',

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>
+    </>
+  )
+}