feat(alert): new component

config/components.ts

@@ -53,6 +53,7 @@ export const components = {
   ],
   feedback: [
     '/components/action-sheet',
+    '/components/alert',
     '/components/dialog',
     '/components/empty',
     '/components/error-block',

package.json

@@ -41,7 +41,7 @@
     "pub:dev": "npm publish ./lib --tag dev",
     "size-limit": "size-limit",
     "size-limit:ci": "size-limit --json",
-    "start": "dumi dev",
+    "start": "HOST=localhost dumi dev",
     "test": "jest",
     "test-with-coverage": "jest --coverage"
   },

src/components/alert/alert.less

@@ -0,0 +1,78 @@
+.adm-alert {
+  --adm-alert-border-radius: 4px;
+  --adm-alert-close-color: var(--adm-color-light);
+  --adm-alert-close-size: 16px;
+  --adm-alert-font-size: 12px;
+  --adm-alert-gap: 8px;
+  --adm-alert-icon-size: 16px;
+  --adm-alert-line-height: 16px;
+
+  border-radius: var(--adm-alert-border-radius);
+  display: flex;
+  gap: var(--adm-alert-gap);
+  font-size: var(--adm-alert-font-size);
+  line-height: var(--adm-alert-line-height);
+  padding: 12px;
+
+  &-icon {
+    svg {
+      width: var(--adm-alert-icon-size);
+      height: var(--adm-alert-icon-size);
+    }
+  }
+
+  &-main {
+    flex: 1 1 auto;
+
+    &-ellipsis {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-extra {
+    white-space: nowrap;
+  }
+
+  &-close {
+    color: var(--adm-alert-close-color);
+
+    svg {
+      width: var(--adm-alert-close-size);
+      height: var(--adm-alert-close-size);
+    }
+  }
+
+  &-info {
+    background: var(--adm-color-primary-light);
+
+    .adm-alert-icon {
+      color: var(--adm-color-primary);
+    }
+  }
+
+  &-success {
+    background: var(--adm-color-success-light);
+
+    .adm-alert-icon {
+      color: var(--adm-color-success);
+    }
+  }
+
+  &-warning {
+    background: var(--adm-color-warning-light);
+
+    .adm-alert-icon {
+      color: var(--adm-color-warning);
+    }
+  }
+
+  &-error {
+    background: var(--adm-color-danger-light);
+
+    .adm-alert-icon {
+      color: var(--adm-color-danger);
+    }
+  }
+}

src/components/alert/alert.tsx

@@ -0,0 +1,53 @@
+import { CloseOutline } from 'antd-mobile-icons'
+import cn from 'classnames'
+import React, { CSSProperties, ReactNode } from 'react'
+import './alert.less'
+import { getFallbackIcon } from './getFallbackIcon'
+
+export interface AlertProps {
+  type?: 'info' | 'success' | 'warning' | 'error'
+  showIcon?: boolean
+  icon?: ReactNode
+  ellipsis?: boolean
+  extra?: ReactNode
+  closeable?: boolean
+  onClose?: () => void
+  children?: ReactNode
+  className?: string
+  style?: CSSProperties
+}
+
+export function Alert({
+  type = 'info',
+  showIcon,
+  icon,
+  ellipsis,
+  extra,
+  closeable,
+  onClose,
+  children,
+  className,
+  style,
+}: AlertProps) {
+  return (
+    <div
+      className={cn('adm-alert', `adm-alert-${type}`, className)}
+      style={style}
+    >
+      {showIcon && (
+        <div className='adm-alert-icon'>{icon || getFallbackIcon(type)}</div>
+      )}
+      <div
+        className={cn('adm-alert-main', ellipsis && 'adm-alert-main-ellipsis')}
+      >
+        {children}
+      </div>
+      {extra && <div className='adm-alert-extra'>{extra}</div>}
+      {closeable && (
+        <div className='adm-alert-close' onClick={onClose}>
+          <CloseOutline />
+        </div>
+      )}
+    </div>
+  )
+}

src/components/alert/demos/demo1.tsx

@@ -0,0 +1,90 @@
+import { Alert, Button } from 'antd-mobile'
+import {
+  AppOutline,
+  AudioMutedOutline,
+  LockOutline,
+  PictureWrongOutline,
+} from 'antd-mobile-icons'
+import { DemoBlock } from 'demos'
+import React, { useState } from 'react'
+
+export default () => {
+  const [close, setClose] = useState(false)
+  return (
+    <>
+      <DemoBlock title='无图标'>
+        <Alert type='success'>Success message</Alert>
+        <br />
+        <Alert type='info'>Info message</Alert>
+        <br />
+        <Alert type='warning'>Warning message</Alert>
+        <br />
+        <Alert type='error'>Error message</Alert>
+      </DemoBlock>
+
+      <DemoBlock title='有图标'>
+        <Alert type='success' showIcon>
+          Success message
+        </Alert>
+        <br />
+        <Alert type='info' showIcon>
+          Info message
+        </Alert>
+        <br />
+        <Alert type='warning' showIcon>
+          Warning message
+        </Alert>
+        <br />
+        <Alert type='error' showIcon>
+          Error message
+        </Alert>
+      </DemoBlock>
+
+      <DemoBlock title='自定义图标'>
+        <Alert type='success' showIcon icon={<AppOutline />}>
+          Success message
+        </Alert>
+        <br />
+        <Alert type='info' showIcon icon={<AudioMutedOutline />}>
+          Info message
+        </Alert>
+        <br />
+        <Alert type='warning' showIcon icon={<LockOutline />}>
+          Warning message
+        </Alert>
+        <br />
+        <Alert type='error' showIcon icon={<PictureWrongOutline />}>
+          Error message
+        </Alert>
+      </DemoBlock>
+
+      <DemoBlock title='右侧额外内容'>
+        <Alert type='info' showIcon extra={<a href='#'>Learn more</a>}>
+          Info message
+        </Alert>
+      </DemoBlock>
+
+      <DemoBlock title='省略内容'>
+        <Alert type='info' showIcon ellipsis>
+          This is a long long long long long long long long long long message
+        </Alert>
+      </DemoBlock>
+
+      <DemoBlock title='关闭按钮'>
+        <Button
+          onClick={() => setClose(false)}
+          size='small'
+          style={{ marginBottom: 8 }}
+        >
+          展示
+        </Button>
+        <br />
+        {!close && (
+          <Alert type='info' showIcon closeable onClose={() => setClose(true)}>
+            Info message
+          </Alert>
+        )}
+      </DemoBlock>
+    </>
+  )
+}

src/components/alert/getFallbackIcon.tsx

@@ -0,0 +1,20 @@
+import {
+  CheckCircleFill,
+  CloseCircleFill,
+  ExclamationCircleFill,
+  InformationCircleFill,
+} from 'antd-mobile-icons'
+import React from 'react'
+
+export function getFallbackIcon(type?: string) {
+  switch (type) {
+    case 'success':
+      return <CheckCircleFill />
+    case 'warning':
+      return <ExclamationCircleFill />
+    case 'error':
+      return <CloseCircleFill />
+    default:
+      return <InformationCircleFill />
+  }
+}

src/components/alert/index.en.md

@@ -0,0 +1,38 @@
+# Alert
+
+Display warning messages that require attention.
+
+## When to Use
+
+- When you need to show alert messages to users.
+- When you need a persistent static container which is closeable by user actions.
+
+## Demos
+
+<code src="./demos/demo1.tsx"></code>
+
+## API
+
+### Props
+
+| Name | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| `type` | Decide color and default icon of alert. | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | 5.38.0 |
+| `showIcon` | Whether to show icon. | `boolean` | `false` | 5.38.0 |
+| `icon` | Custom icon, effective when `showIcon` is `true`. | `ReactNode` | - | 5.38.0 |
+| `ellipsis` | Limit content to one line and show ellipsis when content is too long. | `boolean` | `false` | 5.38.0 |
+| `extra` | Show extra content at the end. | `ReactNode` | - | 5.38.0 |
+| `closeable` | Show close button. | `boolean` | `false` | 5.38.0 |
+| `onClose` | Callback when alert is closed | `() => void` | - | 5.38.0 |
+
+### CSS Variables
+
+| Name | Description | Default | Global | Version |
+| --- | --- | --- | --- | --- |
+| `--adm-alert-border-radius` | Border radius of the alert. | `4px` | `--adm-alert-border-radius` | 5.38.0 |
+| `--adm-alert-close-color` | Color of the alert close icon. | `var(--adm-color-light)` | `--adm-alert-close-color` | 5.38.0 |
+| `--adm-alert-close-size` | Size of the alert close icon. | `16px` | `--adm-alert-close-size` | 5.38.0 |
+| `--adm-alert-font-size` | Font size of the alert. | `12px` | `--adm-alert-font-size` | 5.38.0 |
+| `--adm-alert-gap` | Gap between icon, content, extra and close. | `8px` | `--adm-alert-gap` | 5.38.0 |
+| `--adm-alert-icon-size` | Size of the alert icon. | `16px` | `--adm-alert-icon-size` | 5.38.0 |
+| `--adm-alert-line-height` | Line height of the alert. | `16px` | `--adm-alert-line-height` | 5.38.0 |

src/components/alert/index.ts

@@ -0,0 +1,5 @@
+import { Alert, AlertProps } from './alert'
+
+export { AlertProps }
+
+export default Alert

src/components/alert/index.zh.md

@@ -0,0 +1,38 @@
+# Alert 警告提示
+
+警告提示，展现需要关注的信息。
+
+## 何时使用
+
+- 当某个页面需要向用户显示警告的信息时。
+- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
+
+## 示例
+
+<code src="./demos/demo1.tsx"></code>
+
+## API
+
+### 属性
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| `type` | 决定 Alert 的颜色和默认图标 | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | 5.38.0 |
+| `showIcon` | 是否展示图标 | `boolean` | `false` | 5.38.0 |
+| `icon` | 自定义图标，只在 `showIcon` 为 `true` 时生效 | `ReactNode` | - | 5.38.0 |
+| `ellipsis` | 限制内容为一行，内容过长时展示省略号 | `boolean` | `false` | 5.38.0 |
+| `extra` | 在末尾展示额外内容 | `ReactNode` | - | 5.38.0 |
+| `closeable` | 显示关闭按钮 | `boolean` | `false` | 5.38.0 |
+| `onClose` | 关闭时的回调函数 | `() => void` | - | 5.38.0 |
+
+### CSS 变量
+
+| 变量 | 说明 | 默认值 | 全局变量 | 版本 |
+| --- | --- | --- | --- | --- |
+| `--adm-alert-border-radius` | Alert 圆角大小 | `4px` | `--adm-alert-border-radius` | 5.38.0 |
+| `--adm-alert-close-color` | Alert 关闭按钮颜色 | `var(--adm-color-light)` | `--adm-alert-close-color` | 5.38.0 |
+| `--adm-alert-close-size` | Alert 关闭图标大小 | `16px` | `--adm-alert-close-size` | 5.38.0 |
+| `--adm-alert-font-size` | Alert 字体大小 | `12px` | `--adm-alert-font-size` | 5.38.0 |
+| `--adm-alert-gap` | 图标，主要内容，额外内容和关闭图标之间的间隙 | `8px` | `--adm-alert-gap` | 5.38.0 |
+| `--adm-alert-icon-size` | Alert 图标大小 | `16px` | `--adm-alert-icon-size` | 5.38.0 |
+| `--adm-alert-line-height` | Alert 文字行高 | `16px` | `--adm-alert-line-height` | 5.38.0 |