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( closeIcon = defaultCloseIcon, // duration小于 0,表示不开启自动关闭 duration = -1, + size = 'lg', onClose, ...rest }, @@ -62,7 +63,8 @@ export const Alert = forwardRef( 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={ 文字说明文字说明文字说明 - 操作按钮 + } onClose={() => { @@ -30,7 +33,9 @@ export const Content = () => { content={ 文字说明文字说明文字说明 - 操作按钮 + } onClose={() => { @@ -44,7 +49,9 @@ export const Content = () => { content={ 文字说明文字说明文字说明 - 操作按钮 + } onClose={() => { @@ -58,7 +65,7 @@ export const Content = () => { content={ 文字说明文字说明文字说明 - 操作按钮 + } 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 ( + <> +

Size

+
+

lg

+ { + console.log('alert关闭回调') + }} + /> +
+ + 文字说明文字说明文字说明 + + + } + onClose={() => { + console.log('alert关闭回调') + }} + /> +

md

+ { + console.log('alert关闭回调') + }} + /> +
+ + 文字说明文字说明文字说明 + + + } + onClose={() => { + console.log('alert关闭回调') + }} + /> +

sm

+ { + console.log('alert关闭回调') + }} + /> +
+ + 文字说明文字说明文字说明 + + + } + onClose={() => { + console.log('alert关闭回调') + }} + /> +
+ + ) +}