feat(notice-bar): shape and bordered prop

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": "export NODE_OPTIONS=--openssl-legacy-provider && HOST=localhost dumi dev",
     "test": "jest",
     "test-with-coverage": "jest --coverage"
   },

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 () => {
       <DemoBlock title='通告栏语义' padding='0' background='transparent'>
         <Space block direction='vertical'>
           <NoticeBar content='默认' color='default' />
+          <NoticeBar content='成功' color='success' />
           <NoticeBar content='警告' color='alert' />
           <NoticeBar content='错误' color='error' />
           <NoticeBar content='信息' color='info' />
@@ -50,6 +51,22 @@ export default () => {
             content={'自定义右侧功能区'}
             color='alert'
           />
+          <div style={{ paddingInline: 12 }}>
+            <NoticeBar
+              color='info'
+              shape='neutral'
+              bordered
+              content={'圆角+全边框'}
+            />
+          </div>
+          <div style={{ paddingInline: 12 }}>
+            <NoticeBar
+              color='success'
+              shape='rounded'
+              bordered={false}
+              content={'圆形+无边框'}
+            />
+          </div>
         </Space>
       </DemoBlock>
     </>

src/components/notice-bar/index.en.md

@@ -14,8 +14,8 @@ 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` | `<CloseOutline />` |
 | color | The type of the NoticeBar | `'default' \| 'alert' \| 'error' \| 'info'` | `'default'` |
@@ -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 |

src/components/notice-bar/index.zh.md

@@ -14,8 +14,8 @@
 
 ### 属性
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
 | closeable | 是否可关闭 | `boolean` | `false` |
 | closeIcon | 自定义关闭按钮图标 | `ReactNode` | `<CloseOutline />` |
 | color | 通告栏的类型 | `'default' \| 'alert' \| 'error' \| 'info'` | `'default'` |
@@ -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 |

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);
+  }
+
+  &-noborder {
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
 }

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: <SoundOutline />,
   wrap: false,
+  shape: 'rectangular',
+  bordered: 'block' as 'block' | boolean,
 }
 
 export const NoticeBar = memo<NoticeBarProps>(props => {
@@ -130,8 +136,11 @@ export const NoticeBar = memo<NoticeBarProps>(props => {
       className={classNames(
         classPrefix,
         `${classPrefix}-${mergedProps.color}`,
+        `${classPrefix}-${mergedProps.shape}`,
         {
           [`${classPrefix}-wrap`]: mergedProps.wrap,
+          [`${classPrefix}-bordered`]: mergedProps.bordered === true,
+          [`${classPrefix}-noborder`]: mergedProps.bordered === false,
         }
       )}
       onClick={mergedProps.onClick}

src/components/notice-bar/tests/__snapshots__/notice-bar.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`NoticeBar long content 1`] = `
 <div>
   <div
-    class="adm-notice-bar adm-notice-bar-default"
+    class="adm-notice-bar adm-notice-bar-default adm-notice-bar-rectangle"
   >
     <span
       class="adm-notice-bar-left"