fix(Badge): Badge位置值兼容两种类型，添加css变量min-width (#1410)

* docs: fix offset data type(#1401) * docs: fix offset data type(#1401) * fix(Badge): add data type * fix(Badge): add min-width * docs: align offset data type * fix(Badge): match px and float
jdf2e · Sep 19, 2023 · fe024a1 · fe024a1
1 parent 8272d6a
commit fe024a1
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 16 deletions.
diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
@@ -26,6 +26,7 @@
     line-height: 16px;
     border: $badge-border;
     border-radius: $badge-border-radius;
+    min-width: $badge-min-width;
   }
 
   &__content {

diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx
@@ -7,8 +7,8 @@ export interface BadgeProps extends BasicComponent {
   value: ReactNode
   dot: boolean
   max: number
-  top: string
-  right: string
+  top: string | number
+  right: string | number
   color: string
 }
 const defaultProps = {
@@ -41,8 +41,8 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
   }
   const getStyle = () => {
     const style: CSSProperties = {}
-    style.top = `${Number(top) || parseFloat(top) || 0}px`
-    style.right = `${Number(right) || parseFloat(right) || 0}px`
+    style.top = `${Number(top) || parseFloat(String(top)) || 0}px`
+    style.right = `${Number(right) || parseFloat(String(right)) || 0}px`
     style.background = color
     return style
   }

diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx
@@ -7,8 +7,8 @@ export interface BadgeProps extends BasicComponent {
   value: ReactNode
   dot: boolean
   max: number
-  top: string
-  right: string
+  top: string | number
+  right: string | number
   color: string
 }
 const defaultProps = {
@@ -41,8 +41,8 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
   }
   const getStyle = () => {
     const style: CSSProperties = {}
-    style.top = `${Number(top) || parseFloat(top) || 0}px`
-    style.right = `${Number(right) || parseFloat(right) || 0}px`
+    style.top = `${Number(top) || parseFloat(String(top)) || 0}px`
+    style.right = `${Number(right) || parseFloat(String(right)) || 0}px`
     style.background = color
     return style
   }

diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md
@@ -250,8 +250,8 @@ export default App;
 | value | value to show, eg number、charctor and custom content | `ReactNode` | `-` |
 | max | when value is number, it's the max size | `number` | `99` |
 | dot | Is dotted | `boolean` | `false` |
-| top | Up and down offset, support unit setting, can be set to: 5, etc. | `number` | `0` |
-| right | Left and right offset, support unit setting, can be set to: 5, etc. | `number` | `0` |
+| top | Up and down offset, support unit setting, can be set to: "0" or 0, etc. | `string` \| `number` | `"0"` |
+| right | Left and right offset, support unit setting, can be set to: "5" or 5, etc. | `string` \| `number` | `"5"` |
 | color | background color,the default value is the theme primary color | `string` | `-` |
 
 ## Theming
@@ -267,6 +267,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-badge-font-size | badge content font size | `$font-size-1` |
 | \--nutui-badge-border | badge border | `0px solid $primary-text-color` |
 | \--nutui-badge-border-radius | badge border-radius | `14px` |
+| \--nutui-badge-min-width | badge min-width | `5px` |
 | \--nutui-badge-padding | badge padding value | `0 5px` |
 | \--nutui-badge-icon-padding | when badge is icon,badge padding | `2px` |
 | \--nutui-badge-content-transform | badge content transform | `translateY(-50%) translateX(100%)` |

diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md
@@ -250,8 +250,8 @@ export default App;
 | value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` |
 | max | value 为数值时，最大值 | `number` | `99` |
 | dot | 是否为小点 | `boolean` | `false` |
-| top | 上下偏移量，支持单位设置，可设置为：5 等 | `number` | `0` |
-| right | 左右偏移量，支持单位设置，可设置为：5 等 | `number` | `0` |
+| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
+| right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` |
 | color | 徽标背景颜色,默认值为当前主题色 | `string` | `-` |
 
 ## 主题定制
@@ -267,6 +267,7 @@ export default App;
 | \--nutui-badge-font-size | badge 内容字号 | `$font-size-1` |
 | \--nutui-badge-border | badge 边框 | `0px solid $primary-text-color` |
 | \--nutui-badge-border-radius | badge 边框圆角 | `14px` |
+| \--nutui-badge-min-width | badge 最小宽度 | `5px` |
 | \--nutui-badge-padding | badge 的padding值 | `0 5px` |
 | \--nutui-badge-icon-padding | badge 为自定义icon时 的 padding值 | `2px` |
 | \--nutui-badge-content-transform | badge 内容位置 | `translateY(-50%) translateX(100%)` |

diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md
@@ -250,8 +250,8 @@ export default App;
 | value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` |
 | max | value 为数值时，最大值 | `number` | `99` |
 | dot | 是否为小点 | `boolean` | `false` |
-| top | 上下偏移量，支持单位设置，可设置为：5 等 | `number` | `0` |
-| right | 左右偏移量，支持单位设置，可设置为：5 等 | `number` | `0` |
+| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
+| right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` |
 | color | 徽标背景颜色 | `string` | `#fa2c19` |
 
 ## 主题定制
@@ -267,6 +267,7 @@ export default App;
 | \--nutui-badge-font-size | badge 内容字号 | `$font-size-1` |
 | \--nutui-badge-border | badge 边框 | `0px solid $primary-text-color` |
 | \--nutui-badge-border-radius | badge 边框圆角 | `14px` |
+| \--nutui-badge-min-width | badge 最小宽度 | `5px` |
 | \--nutui-badge-padding | badge 的padding值 | `0 5px` |
 | \--nutui-badge-icon-padding | badge 为自定义icon时 的 padding值 | `2px` |
 | \--nutui-badge-content-transform | badge 内容位置 | `translateY(-50%) translateX(100%)` |

diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md
@@ -250,8 +250,8 @@ export default App;
 | value | 顯示的內容，支持數字、字符和自定義內容 | `ReactNode` | `-` |
 | max | value 為數值時，最大值 | `number` | `99` |
 | dot | 是否為小點 | `boolean` | `false` |
-| top | 上下偏移量，支持單位設置，可設置為：5 等 | `number` | `0` |
-| right | 左右偏移量，支持單位設置，可設置為：5 等 | `number` | `0` |
+| top | 上下偏移量，支持單位設置，可設置為："0"或0 等 | `string` \| `number` | `"0"` |
+| right | 左右偏移量，支持單位設置，可設置為："5"或5 等 | `string` \| `number` | `"5"` |
 | color | 徽標背景顏色,默認值為當前主題色 | `string` | `-` |
 
 ## 主題定制
@@ -267,6 +267,7 @@ export default App;
 | \--nutui-badge-font-size | badge 內容字號 | `$font-size-1` |
 | \--nutui-badge-border | badge 邊框 | `0px solid $primary-text-color` |
 | \--nutui-badge-border-radius | badge 邊框圓角 | `14px` |
+| \--nutui-badge-min-width | badge 最小寬度 | `5px` |
 | \--nutui-badge-padding | badge 的padding值 | `0 5px` |
 | \--nutui-badge-icon-padding | badge 為自定義icon時 的 padding值 | `2px` |
 | \--nutui-badge-content-transform | badge 內容位置 | `translateY(-50%) translateX(100%)` |

diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
@@ -1342,6 +1342,7 @@ $badge-border: var(
   0px solid $primary-text-color
 ) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, 14px) !default;
+$badge-min-width: var(--nutui-badge-min-width, 5px) !default;
 $badge-padding: var(--nutui-badge-padding, 0 5px) !default;
 $badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default;
 $badge-content-transform: var(

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1371,6 +1371,7 @@ $badge-border: var(
   0px solid $primary-text-color
 ) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, 14px) !default;
+$badge-min-width: var(--nutui-badge-min-width, 5px) !default;
 $badge-padding: var(--nutui-badge-padding, 0 5px) !default;
 $badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default;
 $badge-content-transform: var(