feat(checkbox): v14 #2802
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,46 +1,82 @@ | ||
| @import '../checkboxgroup/checkboxgroup.scss'; | ||
|
|
||
| .nut-checkbox-self { | ||
| width: 16px; | ||
| height: 16px; | ||
| flex-shrink: 0; | ||
| position: relative; | ||
| box-sizing: border-box; | ||
| border-radius: 50%; | ||
|
|
||
| &-normal { | ||
| border: 0.5px solid $color-text-disabled; | ||
| background: $color-background-overlay; | ||
| } | ||
|
|
||
| &-checked, | ||
| &-disabled, | ||
| &-checked-disabled { | ||
| &:after { | ||
| display: block; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| content: ' '; | ||
| background: $color-primary-text; | ||
| } | ||
| } | ||
|
|
||
| &-checked { | ||
| background: linear-gradient( | ||
| 90deg, | ||
| $color-primary-stop-1 0%, | ||
| $color-primary-stop-2 100% | ||
| ); | ||
| box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2); | ||
|
|
||
| &:after { | ||
| width: 8px; | ||
| height: 8px; | ||
| border-radius: 50%; | ||
| } | ||
| } | ||
|
|
||
| &-disabled { | ||
| background: $color-text-disabled; | ||
|
|
||
| &:after { | ||
| width: 8px; | ||
| height: 1.5px; | ||
| } | ||
| } | ||
|
|
||
| &-checked-disabled { | ||
| background: $color-primary-disabled-special; | ||
|
|
||
| &:after { | ||
| width: 8px; | ||
| height: 8px; | ||
| border-radius: 50%; | ||
| } | ||
| } | ||
|
Comment on lines
+16
to
+62
There was a problem hiding this comment. 🛠️ Refactor suggestion 建议将固定数值抽取为 CSS 变量 代码中存在多个魔法数字（如 + $checkbox-indicator-size: 8px;
+ $checkbox-disabled-height: 1.5px;
&-checked {
&:after {
- width: 8px;
- height: 8px;
+ width: $checkbox-indicator-size;
+ height: $checkbox-indicator-size;
border-radius: 50%;
}
}
|
||
| } | ||
|
|
||
| .nut-checkbox { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| &-label { | ||
| margin-left: $checkbox-label-margin-left; | ||
| font-size: $checkbox-label-font-size; | ||
| color: $checkbox-label-color; | ||
| white-space: nowrap; | ||
|
|
||
|
Comment on lines
72
to
74
There was a problem hiding this comment. 💡 Codebase verification 建议使用文本截断 mixin 替代单独的 white-space: nowrap 代码库中已有成熟的文本截断处理方案，建议使用 建议修改为： .nut-checkbox-label {
margin-left: $checkbox-label-margin-left;
font-size: $checkbox-label-font-size;
color: $checkbox-label-color;
@include text-ellipsis();
}🔗 Analysis chain建议重新考虑 white-space: nowrap 的使用 强制不换行可能导致长文本标签溢出容器。建议添加文本截断或允许适当换行的样式。 .nut-checkbox-label {
margin-left: $checkbox-label-margin-left;
font-size: $checkbox-label-font-size;
color: $checkbox-label-color;
- white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-break: break-word;
}🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# 检查是否有其他组件使用类似的标签处理方式
rg -l 'white-space:\s*nowrap' 'src/packages/*/*.scss'
Length of output: 117 Script: #!/bin/bash
# 使用 fd 查找所有 scss 文件并使用 rg 搜索 white-space: nowrap
fd -e scss -x rg -l 'white-space:\s*nowrap' {}
Length of output: 525 Script: #!/bin/bash
# 检查其他组件中 white-space: nowrap 的具体使用场景和相关样式
rg 'white-space:\s*nowrap' -B 2 -A 2 ./src/packages/tour/tour.scss ./src/packages/tabs/tabs.scss ./src/packages/noticebar/noticebar.scss ./src/packages/navbar/navbar.scss
# 检查是否有文本截断相关的 mixin 定义
cat ./src/styles/mixins/text-ellipsis.scss
Length of output: 2322 |
||
| &-disabled { | ||
| color: $color-text-disabled; | ||
| } | ||
| } | ||
|
|
||
| &-reverse { | ||
| flex-direction: row-reverse; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,11 @@ | ||
| import React, { ReactNode, useContext, useEffect, useState, FC } from 'react' | ||
| import classNames from 'classnames' | ||
| import { View } from '@tarojs/components' | ||
| import { BasicComponent, ComponentDefaults } from '@/utils/typings' | ||
| import Context from '../checkboxgroup/context' | ||
| import { usePropsValue } from '@/utils/use-props-value' | ||
| import { CheckboxLabelPosition } from '@/packages/checkboxgroup/types' | ||
| import Icon from '@/packages/checkbox/icon' | ||
|
|
||
| export type CheckboxShape = 'button' | 'round' | ||
|
|
||
|
|
@@ -97,31 +97,31 @@ export const Checkbox: FC< | |
| const renderIcon = () => { | ||
| if (innerDisabled) { | ||
| if (innerIndeterminate) { | ||
| return <Icon tag={View} name="disabled" /> | ||
|
There was a problem hiding this comment. 建议区分不同的禁用状态图标 目前在不同的禁用状态下使用了相同的图标名称 "disabled"，这可能会导致用户体验问题。建议为不同的禁用状态使用独特的图标。 建议修改如下： - return <Icon tag={View} name="disabled" />
+ return <Icon tag={View} name="indeterminate-disabled" />- return <Icon tag={View} name="disabled" />
+ return <Icon tag={View} name="unchecked-disabled" />Also applies to: 105-105 |
||
| } | ||
| if (innerChecked) { | ||
| return <Icon tag={View} name="checked-disabled" /> | ||
| } | ||
| return <Icon tag={View} name="disabled" /> | ||
| } | ||
| if (!innerChecked) { | ||
| return React.isValidElement(icon) ? ( | ||
| icon | ||
| ) : ( | ||
| <Icon tag={View} name="normal" /> | ||
| ) | ||
| } | ||
| if (innerIndeterminate) { | ||
| return React.isValidElement(indeterminateIcon) ? ( | ||
| indeterminateIcon | ||
| ) : ( | ||
| <Icon tag={View} name="disabled" /> | ||
|
There was a problem hiding this comment. 修复 indeterminate 状态下的图标显示 当前 indeterminate 状态使用了 "disabled" 图标，这似乎是不正确的。 建议修改如下： - return <Icon tag={View} name="disabled" />
+ return <Icon tag={View} name="indeterminate" />
|
||
| ) | ||
| } | ||
| return React.isValidElement(activeIcon) ? ( | ||
| activeIcon | ||
| ) : ( | ||
| <Icon tag={View} name="checked" /> | ||
|
Comment on lines
+100
to
+124
There was a problem hiding this comment. 🛠️ Refactor suggestion 建议添加图标名称的类型检查 为了提高代码的可维护性和类型安全性，建议为 Icon 组件的 name 属性添加类型定义。 建议在 Icon 组件中添加以下类型定义： type IconName = 'disabled' | 'checked-disabled' | 'normal' | 'checked' | 'indeterminate' | 'indeterminate-disabled' | 'unchecked-disabled';
interface IconProps {
tag: typeof View;
name: IconName;
} |
||
| ) | ||
| } | ||
| const color = () => { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,12 +5,12 @@ import React, { | |
| useEffect, | ||
| useState, | ||
| } from 'react' | ||
| import classNames from 'classnames' | ||
| import { BasicComponent, ComponentDefaults } from '@/utils/typings' | ||
| import Context from '../checkboxgroup/context' | ||
| import { usePropsValue } from '@/utils/use-props-value' | ||
| import { CheckboxLabelPosition } from '@/packages/checkboxgroup/types' | ||
| import Icon from '@/packages/checkbox/icon' | ||
|
|
||
| export type CheckboxShape = 'button' | 'round' | ||
|
|
||
|
|
@@ -102,52 +102,29 @@ export const Checkbox: FunctionComponent< | |
| const renderIcon = () => { | ||
| if (innerDisabled) { | ||
| if (innerIndeterminate) { | ||
| return <Icon name="disabled" /> | ||
| } | ||
| if (innerChecked) { | ||
| return <Icon name="checked-disabled" /> | ||
| } | ||
| return <Icon name="disabled" /> | ||
| } | ||
| if (!innerChecked) { | ||
| return React.isValidElement(icon) ? icon : <Icon name="normal" /> | ||
| } | ||
| if (innerIndeterminate) { | ||
| return React.isValidElement(indeterminateIcon) ? ( | ||
| indeterminateIcon | ||
| ) : ( | ||
| <Icon name="disabled" /> | ||
| ) | ||
| } | ||
| return React.isValidElement(activeIcon) ? ( | ||
| activeIcon | ||
| ) : ( | ||
| <Icon name="checked" /> | ||
| ) | ||
| } | ||
| const renderLabel = () => { | ||
| return ( | ||
| <span | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { createElement } from 'react' | ||
| import { mergeProps } from '@/utils/merge-props' | ||
|
|
||
| interface IconProps { | ||
| tag: any | ||
| classPrefix: string | ||
| name: 'normal' | 'disabled' | 'checked' | 'checked-disabled' | ||
| } | ||
Alex-huxiyang marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const Icon = (props: Partial<IconProps>) => { | ||
| const { tag, classPrefix, name } = mergeProps( | ||
| { | ||
| tag: 'div', | ||
| classPrefix: 'nut-checkbox-self', | ||
| name: 'normal', | ||
| }, | ||
| props | ||
| ) | ||
| return createElement<{ className: string }>(tag, { | ||
| className: `${classPrefix} ${classPrefix}-${name}`, | ||
| }) | ||
| } | ||
|
|
||
| export default Icon | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
测试用例与测试名称不符
该测试用例命名为测试
indeterminate状态，但实际上在验证disabled状态。建议修改测试用例以确保正确验证indeterminate状态。建议修改为：
📝 Committable suggestion