Skip to content

fix(countup): 分隔符文字颜色支持css变量修改 #2869

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 18, 2024
Merged

fix(countup): 分隔符文字颜色支持css变量修改 #2869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/packages/animatingnumbers/countup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
display: flex;
height: 80%;
align-items: flex-end;
color: $countup-bg-color;
color: $countup-separator-color;
}

&-number {
Expand Down
1 change: 1 addition & 0 deletions src/packages/animatingnumbers/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const Demo2 = () => {
nutuiCountupBgColor: `var(--nutui-color-primary)`,
nutuiCountupColor: `#fff`,
nutuiCountupLrMargin: `1px`,
nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
}
const [value, setEndNumer] = useState('1570.99')
useEffect(() => {
Expand Down
1 change: 1 addition & 0 deletions src/packages/animatingnumbers/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const Demo2 = () => {
nutuiCountupBgColor: `var(--nutui-color-primary)`,
nutuiCountupColor: `#fff`,
nutuiCountupLrMargin: `1px`,
nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
}
const [value, setEndNumer] = useState('1570.99')
useEffect(() => {
Expand Down
1 change: 1 addition & 0 deletions src/packages/animatingnumbers/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,4 @@ The component provides the following CSS variables, which can be used to customi
| \--nutui-countup-lr-margin | margin of item | `0` |
| \--nutui-countup-bg-color | background color of item | `inherit` |
| \--nutui-countup-color | color of item | `$color-title` |
| \--nutui-countup-separator-color | The font color of the separator | `$color-title` |
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

需要同步更新中文文档

根据验证结果，分隔符颜色的 CSS 变量已在繁体中文（zh-TW）和 Taro 版本文档中更新，但中文（zh-CN）文档缺失。请添加相应的中文文档更新。

  • 需要在 src/packages/animatingnumbers/doc.zh-CN.md 文件中添加对应的 CSS 变量说明
  • CSS 变量表格中应包含 nutui-countup-separator-color 的中文说明
🔗 Analysis chain

文档更新正确且完整

新增的 CSS 变量文档符合组件的命名规范，描述清晰，默认值设置合理。

运行以下脚本验证其他语言版本的文档是否同步更新：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：检查其他语言版本的文档是否包含相同的 CSS 变量定义

# 搜索所有语言版本的文档文件
fd "doc\.(zh-CN|zh-TW|taro)\.md$" src/packages/animatingnumbers/ --exec rg -l "nutui-countup-separator-color"

Length of output: 194

Script:

#!/bin/bash
# 检查中文文档是否存在
fd "doc\.zh-CN\.md$" src/packages/animatingnumbers/

# 如果存在，检查其内容中的 CSS 变量表格部分
fd "doc\.zh-CN\.md$" src/packages/animatingnumbers/ --exec cat

Length of output: 118

1 change: 1 addition & 0 deletions src/packages/animatingnumbers/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
| \--nutui-countup-lr-margin | 每个数字的margin | `0` |
| \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` |
| \--nutui-countup-color | 每个数字块的字色 | `$color-title` |
| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` |
1 change: 1 addition & 0 deletions src/packages/animatingnumbers/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react-taro'
| \--nutui-countup-lr-margin | 每个数字的margin | `0` |
| \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` |
| \--nutui-countup-color | 每个数字块的字色 | `$color-title` |
| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` |
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

需要更新样式实现以支持新的CSS变量

经过验证发现：

  1. 文档中已添加了 --nutui-countup-separator-color 变量的说明
  2. Demo 文件中已经在使用该变量
  3. 但在 SCSS 实现中仍然使用的是 $countup-separator-color 变量，需要更新为新的 CSS 变量

建议：

  • 在 SCSS 文件中更新分隔符颜色的实现，使用 var(--nutui-countup-separator-color) 替代 $countup-separator-color
🔗 Analysis chain

Taro文档更新完整，建议验证实现！

新增的CSS变量文档更新正确。建议确认以下几点：

  1. Taro版本的样式实现是否已同步更新
  2. 相关demo是否已更新使用新变量
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查Taro版本的实现和demo
rg --type=scss "nutui-countup-separator-color" src/packages/animatingnumbers/
rg --type=typescript "nutuiCountupSeparatorColor" src/packages/animatingnumbers/demos/taro/

Length of output: 233

Script:

#!/bin/bash
# Check implementation and demo files
rg "nutui-countup-separator-color" src/packages/animatingnumbers/
rg "nutuiCountupSeparatorColor" src/packages/animatingnumbers/

Length of output: 800

Script:

#!/bin/bash
# Check the SCSS implementation
fd -e scss . src/packages/animatingnumbers/ -x cat {}

Length of output: 877

1 change: 1 addition & 0 deletions src/packages/animatingnumbers/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
| \--nutui-countup-lr-margin | 每個數字的margin | `0` |
| \--nutui-countup-bg-color | 每個數字塊的背景色 | `inherit` |
| \--nutui-countup-color | 每個數字塊的字色 | `$color-title` |
| \--nutui-countup-separator-color | 分隔符的字體顏色 | `$color-title` |
4 changes: 4 additions & 0 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2291,6 +2291,10 @@ $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
$countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
$countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
$countup-color: var(--nutui-countup-color, $color-title) !default;
$countup-separator-color: var(
--nutui-countup-separator-color,
$color-title
) !default;

// layout（✅）
$row-content-color: var(--nutui-row-content-color, #fff) !default;
Expand Down
Loading