fix: removing the color property is done using a css variable

irisSong · irisSong · commit 8d371acf2c9a · 2024-12-11T15:12:10.000+08:00
diff --git a/migrate-from-v2.md b/migrate-from-v2.md
@@ -666,6 +666,7 @@ plugins: [
 #### Badge
 
 - 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效
+- 移除 `徽标背景颜色`，通过css变量`--nutui-badge-background-color`实现
 
 #### CircleProgress
 
diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
@@ -98,7 +98,7 @@
 
   &-outline {
     background: $color-primary-text;
-    color: $color-primary;
+    color: $badge-outline-color;
     &::after {
       border: $badge-outline-border;
     }
diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx
@@ -20,7 +20,6 @@ const defaultProps = {
   max: 99,
   top: 0,
   right: 0,
-  color: '',
   fill: 'solid',
   size: 'large',
 } as BadgeProps
@@ -35,7 +34,6 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     dot,
     top,
     right,
-    color,
     fill,
     size,
   } = {
@@ -94,22 +92,6 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     setContentStyle(style)
   }
 
-  const getCustomStyle = () => {
-    const style: CSSProperties = {}
-    if (color) {
-      if (fill === 'outline') {
-        style.color = color
-        isHarmony
-          ? (style.backgroundColor = '#FFFFFF')
-          : (style.background = '#FFFFFF')
-      } else {
-        style.color = '#fff'
-        isHarmony ? (style.backgroundColor = color) : (style.background = color)
-      }
-    }
-    return style
-  }
-
   return (
     <View className={classes} style={style} ref={badgeRef}>
       {isIcon() && (
@@ -125,10 +107,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
       )}
       {children}
       {!isIcon() && (
-        <View
-          className={contentClasses}
-          style={{ ...contentStyle, ...getCustomStyle() }}
-        >
+        <View className={contentClasses} style={contentStyle}>
           {content()}
         </View>
       )}
diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx
@@ -11,7 +11,6 @@ const defaultProps = {
   max: 99,
   top: 0,
   right: 0,
-  color: '',
   fill: 'solid',
   size: 'large',
 } as BadgeProps
@@ -26,7 +25,6 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     dot,
     top,
     right,
-    color,
     fill,
     size,
   } = {
@@ -102,10 +100,7 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
       )}
       {children}
       {!isIcon() && (
-        <div
-          className={contentClasses}
-          style={{ ...getPositionStyle(), ...getCustomStyle() }}
-        >
+        <div className={contentClasses} style={getPositionStyle()}>
           {content()}
         </div>
       )}
diff --git a/src/packages/badge/demos/h5/demo3.tsx b/src/packages/badge/demos/h5/demo3.tsx
@@ -7,19 +7,28 @@ const Demo3 = () => {
     <Cell style={{ justifyContent: 'space-around' }}>
       <Badge
         dot
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        style={{
+          '--nutui-badge-background-color':
+            'linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)',
+        }}
       >
         <Avatar icon={<User />} shape="square" />
       </Badge>
       <Badge
         value={8}
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        style={{
+          '--nutui-badge-background-color':
+            'linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)',
+        }}
       >
         <Avatar icon={<User />} shape="square" />
       </Badge>
       <Badge
         value="内容"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        style={{
+          '--nutui-badge-background-color':
+            'linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)',
+        }}
       >
         <Avatar icon={<User />} shape="square" />
       </Badge>
diff --git a/src/packages/badge/demos/h5/demo8.tsx b/src/packages/badge/demos/h5/demo8.tsx
@@ -13,10 +13,10 @@ const Demo8 = () => {
       </Badge>
       <Badge
         value="内容"
-        color="blue"
         fill="outline"
         style={{
           '--nutui-badge-outline-border': '1px solid blue',
+          '--nutui-badge-outline-color': 'blue',
         }}
       >
         <Avatar icon={<User />} shape="square" />
diff --git a/src/packages/badge/demos/taro/demo3.tsx b/src/packages/badge/demos/taro/demo3.tsx
@@ -7,19 +7,28 @@ const Demo3 = () => {
     <Cell style={{ justifyContent: 'space-around' }}>
       <Badge
         dot
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        style={{
+          '--nutui-badge-background-color':
+            'linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)',
+        }}
       >
         <Avatar icon={<User />} shape="square" />
       </Badge>
       <Badge
         value={8}
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        style={{
+          '--nutui-badge-background-color':
+            'linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)',
+        }}
       >
         <Avatar icon={<User />} shape="square" />
       </Badge>
       <Badge
         value="内容"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        style={{
+          '--nutui-badge-background-color':
+            'linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)',
+        }}
       >
         <Avatar icon={<User />} shape="square" />
       </Badge>
diff --git a/src/packages/badge/demos/taro/demo8.tsx b/src/packages/badge/demos/taro/demo8.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { User } from '@nutui/icons-react-taro'
 import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
-import { harmony } from '@/utils/platform-taro'
 
 const Demo8 = () => {
   return (
@@ -12,18 +11,16 @@ const Demo8 = () => {
       <Badge value={8} fill="outline">
         <Avatar icon={<User />} shape="square" />
       </Badge>
-      {harmony() ? null : (
-        <Badge
-          value="内容"
-          color="blue"
-          fill="outline"
-          style={{
-            '--nutui-badge-outline-border': '1px solid blue',
-          }}
-        >
-          <Avatar icon={<User />} shape="square" />
-        </Badge>
-      )}
+      <Badge
+        value="内容"
+        fill="outline"
+        style={{
+          '--nutui-badge-outline-border': '1px solid blue',
+          '--nutui-badge-outline-color': 'blue',
+        }}
+      >
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
     </Cell>
   )
 }
diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md
@@ -87,7 +87,6 @@ import { Badge } from '@nutui/nutui-react'
 | size | dot size, effective when dot is equal to `true` | `small` \| `normal` \| `large` | `large` |
 | top | Up and down offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` |
 | right | Left and right offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` |
-| color | background color,the default value is the theme primary color | `string` | `-` |
 | fill | Fill Mode | `solid` \| `outline` | `solid` |
 
 ## Theming
@@ -114,4 +113,5 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-badge-dot-small-width | When badge is a dot, size is equal to the width and height of small | `4px` |
 | \--nutui-badge-dot-large-width | When the badge is a dot, size is equal to the width and height of large | `8px` |
 | \--nutui-badge-dot-border | The border when the badge is a dot | `1px solid $color-primary-text` |
+| \--nutui-badge-outline-color | The border when badge is outline text color value | `$color-primary` |
 | \--nutui-badge-outline-border | The border when badge is outline fill mode | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md
@@ -86,7 +86,6 @@ import { Badge } from '@nutui/nutui-react'
 | size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` |
 | top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` |
 | right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` |
-| color | 徽标背景颜色,默认值为当前主题色 | `string` | `-` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
 
 ## 主题定制
@@ -113,4 +112,5 @@ import { Badge } from '@nutui/nutui-react'
 | \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽高 | `4px` |
 | \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽高 | `8px` |
 | \--nutui-badge-dot-border | badge 为圆点时的边框 | `1px solid $color-primary-text` |
+| \--nutui-badge-outline-color | badge 为 outline 文字色值 | `$color-primary` |
 | \--nutui-badge-outline-border | badge 为 outline 填充模式时的边框 | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md
@@ -86,7 +86,6 @@ import { Badge } from '@nutui/nutui-react-taro'
 | size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` |
 | top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
 | right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
-| color | 徽标背景颜色 | `string` | `-` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
 
 ## 主题定制
@@ -113,4 +112,5 @@ import { Badge } from '@nutui/nutui-react-taro'
 | \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽高 | `4px` |
 | \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽高 | `8px` |
 | \--nutui-badge-dot-border | badge 为圆点时的边框 | `1px solid $color-primary-text` |
+| \--nutui-badge-outline-color | badge 为 outline 文字色值 | `$color-primary` |
 | \--nutui-badge-outline-border | badge 为 outline 填充模式时的边框 | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md
@@ -86,7 +86,6 @@ import { Badge } from '@nutui/nutui-react'
 | size | dot 尺寸，當 dot 等於 `true` 時生效 | `small` \| `normal` \| `large` | `large` |
 | top | 上下偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` |
 | right | 左右偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` |
-| color | 徽標背景顏色,默認值為當前主題色 | `string` | `-` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
 
 ## 主題定制
@@ -113,4 +112,5 @@ import { Badge } from '@nutui/nutui-react'
 | \--nutui-badge-dot-small-width | badge 為圓點時，size 等於 small 的寬高 | `4px` |
 | \--nutui-badge-dot-large-width | badge 為圓點時，size 等於 large 的寬高 | `8px` |
 | \--nutui-badge-dot-border | badge 為圓點時的邊框 | `1px solid $color-primary-text` |
+| \--nutui-badge-outline-color | badge 為 outline 文字色值 | `$color-primary` |
 | \--nutui-badge-outline-border | badge 為 outline 填充模式時的邊框 | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/types.ts b/src/packages/badge/types.ts
@@ -9,7 +9,6 @@ export interface BadgeProps extends BasicComponent {
   max: number
   top: string | number
   right: string | number
-  color: string
   fill: BadgeFill
   size: BadgeDotSize
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1606,6 +1606,7 @@ $badge-dot-width: var(--nutui-badge-dot-width, 6px) !default;
 $badge-dot-small-width: var(--nutui-badge-dot-width, 4px) !default;
 $badge-dot-large-width: var(--nutui-badge-dot-width, 8px) !default;
 $badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text);
+$badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default;
 $badge-outline-border: var(
   --nutui-badge-outline-border,
   1px solid $color-primary

Original file line number	Diff line number	Diff line change
`@@ -98,7 +98,7 @@`
`98`	`98`
`99`	`99`	`&-outline {`
`100`	`100`	`background: $color-primary-text;`
`101`		`- color: $color-primary;`
	`101`	`+ color: $badge-outline-color;`
`102`	`102`	`&::after {`
`103`	`103`	`border: $badge-outline-border;`
`104`	`104`	`}`