From abd798218fee866d837c0094913443bd1c15a995 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B9=A4=E4=BB=99?= Date: Mon, 5 Aug 2024 13:50:56 +0800 Subject: [PATCH] feat(notice-bar): shape and bordered prop --- src/components/notice-bar/demos/demo1.tsx | 21 ++++++++++-- src/components/notice-bar/index.en.md | 14 +++++--- src/components/notice-bar/index.zh.md | 26 ++++++++------- src/components/notice-bar/notice-bar.less | 33 ++++++++++++++++--- src/components/notice-bar/notice-bar.tsx | 11 ++++++- .../__snapshots__/notice-bar.test.tsx.snap | 2 +- 6 files changed, 83 insertions(+), 24 deletions(-) diff --git a/src/components/notice-bar/demos/demo1.tsx b/src/components/notice-bar/demos/demo1.tsx index 40601a5397..df1fa518ae 100644 --- a/src/components/notice-bar/demos/demo1.tsx +++ b/src/components/notice-bar/demos/demo1.tsx @@ -1,7 +1,7 @@ -import React from 'react' import { NoticeBar, Space } from 'antd-mobile' +import { CloseCircleOutline, CompassOutline } from 'antd-mobile-icons' import { DemoBlock, lorem } from 'demos' -import { CompassOutline, CloseCircleOutline } from 'antd-mobile-icons' +import React from 'react' const demoLongText = lorem.generateWords(20) @@ -11,6 +11,7 @@ export default () => { + @@ -50,6 +51,22 @@ export default () => { content={'自定义右侧功能区'} color='alert' /> +
+ +
+
+ +
diff --git a/src/components/notice-bar/index.en.md b/src/components/notice-bar/index.en.md index 4149d54876..a4ba784168 100644 --- a/src/components/notice-bar/index.en.md +++ b/src/components/notice-bar/index.en.md @@ -14,11 +14,11 @@ It is applicable to the notification of information in the current page, which i ### Props -| Name | Description | Type | Default | -| --- | --- | --- | --- | +| Name | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | | closeable | Whether it can be closed | `boolean` | `false` | | closeIcon | Custom close button icon | `ReactNode` | `` | -| color | The type of the NoticeBar | `'default' \| 'alert' \| 'error' \| 'info'` | `'default'` | +| color | The type of the NoticeBar | `'default' \| 'alert' \| 'error' \| 'info' \| 'success'` | `'default'` | | content | The content of the NoticeBar | `React.ReactNode` | - | | delay | Delay to start scrolling, unit `ms` | `number` | `2000` | | extra | Additional operating area, displayed to the left of the close button | `React.ReactNode` | - | @@ -27,14 +27,18 @@ It is applicable to the notification of information in the current page, which i | onClick | Click event | `() => void` | - | | speed | Scroll speed, unit `px/s` | `number` | `50` | | wrap | Whether to display multiple lines | `boolean` | `false` | +| shape | Shape of the NoticeBar (rectangular: sharp; neutral: round corner; rounded: circle/pill shape) | `'rectangular' \| 'neutral' \| 'rounded'` | `'rectangular'` | 5.38.0 | +| bordered | Border visibility of the NoticeBar (`block`: top and bottom border; `true`: full border; `false`: no border) | `'block' \| boolean` | `'block'` | 5.38.0 | ### CSS Variables -| Name | Description | Default | -| --- | --- | --- | +| Name | Description | Default | Global | Version | +| --- | --- | --- | --- | --- | | --background-color | background color | `var(--adm-color-weak)` | | --border-color | border color | `var(--adm-color-weak)` | | --font-size | Font size of notice text content. | `15px` | | --height | Height of the whole element. | `40px` | | --icon-font-size | Font size of left icon. | `18px` | | --text-color | text color | `#ffffff` | +| `--adm-notice-bar-border-radius` | Border radius of neutral shape NoticeBar | `4px` | `--adm-notice-bar-border-radius` | 5.38.0 | +| `--adm-notice-bar-border-width` | Border width of bordered NoticeBar | `1px` | `--adm-notice-bar-border-width` | 5.38.0 | diff --git a/src/components/notice-bar/index.zh.md b/src/components/notice-bar/index.zh.md index 14d5407e48..d617f7eb0a 100644 --- a/src/components/notice-bar/index.zh.md +++ b/src/components/notice-bar/index.zh.md @@ -14,11 +14,11 @@ ### 属性 -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | | closeable | 是否可关闭 | `boolean` | `false` | | closeIcon | 自定义关闭按钮图标 | `ReactNode` | `` | -| color | 通告栏的类型 | `'default' \| 'alert' \| 'error' \| 'info'` | `'default'` | +| color | 通告栏的类型 | `'default' \| 'alert' \| 'error' \| 'info' \| 'success'` | `'default'` | | content | 公告内容 | `React.ReactNode` | - | | delay | 开始滚动的延迟，单位 `ms` | `number` | `2000` | | extra | 额外操作区域，显示在关闭按钮左侧 | `React.ReactNode` | - | @@ -27,14 +27,18 @@ | onClick | 点击事件 | `() => void` | - | | speed | 滚动速度，单位 `px/s` | `number` | `50` | | wrap | 是否多行展示 | `boolean` | `false` | +| shape | 形状 (rectangular: 直角; neutral: 圆角; rounded: 圆形) | `'rectangular' \| 'neutral' \| 'rounded'` | `'rectangular'` | 5.38.0 | +| bordered | 边框可见性 (`block`: 上下边框; `true`: 全边框; `false`: 无边框) | `'block' \| boolean` | `'block'` | 5.38.0 | ### CSS 变量 -| 属性 | 说明 | 默认值 | -| ------------------ | -------------- | ----------------------- | -| --background-color | 背景色 | `var(--adm-color-weak)` | -| --border-color | 边框颜色 | `var(--adm-color-weak)` | -| --font-size | 文字字号 | `15px` | -| --height | 整体高度 | `40px` | -| --icon-font-size | 左侧图标的字号 | `18px` | -| --text-color | 文字颜色 | `#ffffff` | +| 属性 | 说明 | 默认值 | 全局变量 | 版本 | +| --- | --- | --- | --- | --- | +| `--background-color` | 背景色 | `var(--adm-color-weak)` | +| `--border-color` | 边框颜色 | `var(--adm-color-weak)` | +| `--font-size` | 文字字号 | `15px` | +| `--height` | 整体高度 | `40px` | +| `--icon-font-size` | 左侧图标的字号 | `18px` | +| `--text-color` | 文字颜色 | `#ffffff` | +| `--adm-notice-bar-border-radius` | 圆角形状(neutral)的圆角大小 | `4px` | `--adm-notice-bar-border-radius` | 5.38.0 | +| `--adm-notice-bar-border-width` | 边框粗细 | `1px` | `--adm-notice-bar-border-width` | 5.38.0 | diff --git a/src/components/notice-bar/notice-bar.less b/src/components/notice-bar/notice-bar.less index 13ef66513b..0dbcf159cf 100644 --- a/src/components/notice-bar/notice-bar.less +++ b/src/components/notice-bar/notice-bar.less @@ -7,6 +7,8 @@ --font-size: var(--adm-font-size-7); --icon-font-size: var(--adm-font-size-10); --height: 40px; + --adm-notice-bar-border-radius: 4px; + --adm-notice-bar-border-width: 1px; height: var(--height); box-sizing: border-box; @@ -16,9 +18,9 @@ align-items: center; justify-content: space-between; - border: solid 1px var(--border-color); - border-left: none; - border-right: none; + border: solid var(--adm-notice-bar-border-width) var(--border-color); + border-left-width: 0; + border-right-width: 0; background-color: var(--background-color); color: var(--text-color); & > span[role='img'] { @@ -33,13 +35,18 @@ &.@{class-prefix-notice-bar}-error { --background-color: var(--adm-color-danger); --border-color: #d9281e; - --text-color: #ffffff; + --text-color: #fff; } &.@{class-prefix-notice-bar}-info { --background-color: #d0e4ff; --border-color: #bcd8ff; --text-color: var(--adm-color-primary); } + &.@{class-prefix-notice-bar}-success { + --background-color: #d1fff0; + --border-color: #a8f0d8; + --text-color: var(--adm-color-success); + } & .@{class-prefix-notice-bar}-left { flex-shrink: 0; @@ -89,4 +96,22 @@ padding-bottom: 8px; line-height: 22px; } + + &-neutral { + border-radius: var(--adm-notice-bar-border-radius); + } + + &-rounded { + border-radius: 1000px; + } + + &-bordered { + border-left-width: var(--adm-notice-bar-border-width); + border-right-width: var(--adm-notice-bar-border-width); + } + + &-without-border { + border-top-width: 0; + border-bottom-width: 0; + } } diff --git a/src/components/notice-bar/notice-bar.tsx b/src/components/notice-bar/notice-bar.tsx index b2a858a3ee..f3780e7464 100644 --- a/src/components/notice-bar/notice-bar.tsx +++ b/src/components/notice-bar/notice-bar.tsx @@ -13,7 +13,7 @@ const classPrefix = `adm-notice-bar` export type NoticeBarProps = { /** The type of the NoticeBar */ - color?: 'default' | 'alert' | 'error' | 'info' + color?: 'default' | 'alert' | 'error' | 'success' | 'info' /** TDelay to start scrolling, unit ms */ delay?: number /** Scroll speed, unit px/s */ @@ -34,6 +34,10 @@ export type NoticeBarProps = { icon?: ReactNode /** Whether to display multiple lines */ wrap?: boolean + /** Block shape */ + shape?: 'rectangular' | 'neutral' | 'rounded' + /** Border visibility */ + bordered?: 'block' | boolean } & NativeProps< | '--background-color' | '--border-color' @@ -49,6 +53,8 @@ const defaultProps = { speed: 50, icon: , wrap: false, + shape: 'rectangular', + bordered: 'block' as 'block' | boolean, } export const NoticeBar = memo(props => { @@ -130,8 +136,11 @@ export const NoticeBar = memo(props => { className={classNames( classPrefix, `${classPrefix}-${mergedProps.color}`, + `${classPrefix}-${mergedProps.shape}`, { [`${classPrefix}-wrap`]: mergedProps.wrap, + [`${classPrefix}-bordered`]: mergedProps.bordered === true, + [`${classPrefix}-without-border`]: mergedProps.bordered === false, } )} onClick={mergedProps.onClick} diff --git a/src/components/notice-bar/tests/__snapshots__/notice-bar.test.tsx.snap b/src/components/notice-bar/tests/__snapshots__/notice-bar.test.tsx.snap index d6c6d47a01..e5580e361e 100644 --- a/src/components/notice-bar/tests/__snapshots__/notice-bar.test.tsx.snap +++ b/src/components/notice-bar/tests/__snapshots__/notice-bar.test.tsx.snap @@ -3,7 +3,7 @@ exports[`NoticeBar long content 1`] = `