From d0d31226ec4535ddf771548e7c97f0c595a8aeb5 Mon Sep 17 00:00:00 2001 From: Guo Yunhe Date: Sat, 3 Aug 2024 10:44:24 +0800 Subject: [PATCH] feat(notice-bar): shape and bordered prop --- package.json | 2 +- src/components/notice-bar/demos/demo1.tsx | 21 ++++++++++-- src/components/notice-bar/index.en.md | 12 ++++--- src/components/notice-bar/index.zh.md | 24 ++++++++------ src/components/notice-bar/notice-bar.less | 33 ++++++++++++++++--- src/components/notice-bar/notice-bar.tsx | 11 ++++++- .../__snapshots__/notice-bar.test.tsx.snap | 2 +- 7 files changed, 82 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index bb1560d999..d8e264dc25 100644 --- a/package.json +++ b/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" }, 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..064108f164 100644 --- a/src/components/notice-bar/index.en.md +++ b/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` | `` | | 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 | diff --git a/src/components/notice-bar/index.zh.md b/src/components/notice-bar/index.zh.md index 14d5407e48..49081d5229 100644 --- a/src/components/notice-bar/index.zh.md +++ b/src/components/notice-bar/index.zh.md @@ -14,8 +14,8 @@ ### 属性 -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | | closeable | 是否可关闭 | `boolean` | `false` | | closeIcon | 自定义关闭按钮图标 | `ReactNode` | `` | | 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 | diff --git a/src/components/notice-bar/notice-bar.less b/src/components/notice-bar/notice-bar.less index 13ef66513b..1ab67fb264 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); + } + + &-noborder { + 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..962a9388be 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}-noborder`]: 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..c12203d829 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`] = `