diff --git a/.changeset/chilled-wolves-love.md b/.changeset/chilled-wolves-love.md new file mode 100644 index 000000000..8596b4c7e --- /dev/null +++ b/.changeset/chilled-wolves-love.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/notification": minor +--- + +feat: 增加 size API diff --git a/.changeset/fast-ants-bake.md b/.changeset/fast-ants-bake.md new file mode 100644 index 000000000..0e1e8da4f --- /dev/null +++ b/.changeset/fast-ants-bake.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Notification feat: 增加 size API diff --git a/packages/ui/notification/src/Notification.tsx b/packages/ui/notification/src/Notification.tsx index 0b681fb6e..d7344f9ef 100644 --- a/packages/ui/notification/src/Notification.tsx +++ b/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 type = 'info', action, destroy, + size = 'lg', onClose, ...rest }, @@ -87,7 +88,7 @@ export const Notification = forwardRef }) }, []) - const cls = cx(prefixCls, className, `${prefixCls}--type-${type}`) + const cls = cx(prefixCls, className, `${prefixCls}--type-${type}`, `${prefixCls}--size-${size}`) return ( {content ?
{content}
: null} {action ?
{action}
: null} {closable ? ( - } - onClick={requestClose} - /> +
+ } onClick={requestClose} /> +
) : null} @@ -172,6 +170,10 @@ export interface NotificationProps extends Omit, 'title'> * 操作配置 */ action?: React.ReactNode + /** + * 通知框尺寸 + */ + size?: HiBaseSizeEnum } if (__DEV__) { diff --git a/packages/ui/notification/src/styles/notification.scss b/packages/ui/notification/src/styles/notification.scss index c6a85c1f6..332d8e5a0 100644 --- a/packages/ui/notification/src/styles/notification.scss +++ b/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); + } } } diff --git a/packages/ui/notification/stories/index.stories.tsx b/packages/ui/notification/stories/index.stories.tsx index 8b16540ea..ca4ab016a 100644 --- a/packages/ui/notification/stories/index.stories.tsx +++ b/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', diff --git a/packages/ui/notification/stories/size.stories.tsx b/packages/ui/notification/stories/size.stories.tsx new file mode 100644 index 000000000..1fabff198 --- /dev/null +++ b/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() + + const openNotification = (size) => { + notificationIdRef.current = notification.open({ + size, + autoClose: false, + title: '数据备份通知', + content: '将于 2035.08.10 00:00:00-08:00:00 期间进行系统服务器升级维护!', + }) + } + return ( + <> +

Size

+
+ + + +
+ + ) +}