alibaba-fusion / next

🦍 A configurable component library for web built on React.
https://fusion.design
MIT License
4.58k stars 589 forks source link

[Input]Disabled 状态下的 placeholder 颜色与 value 颜色无法区分 #3257

Open guoyunhe opened 3 years ago

guoyunhe commented 3 years ago

Component

Input

Reproduction link

https://riddle.alibaba-inc.com/riddles/1a0b2e1c

Steps to reproduce

下面两个 disabled 的 Input,一个是文字来源于 placeholder,一个来源于 value,但是显示效果相同。直觉上 value 的文本颜色应该比 placeholder 重。

image

Fusion 的默认主题用的是浅灰色作为 disabled 字体颜色。假如 disabled 字体颜色为 #000,那么 placeholder 就会显得非常扎眼。我们的一个场景:

编辑状态:

image

禁用状态:

image

希望能够提供主题选项,单独定制 disabled placeholder 的颜色。

相关代码: https://github.com/alibaba-fusion/next/blob/48450accd638661e84747ec013a13b967807c245/src/input/main.scss#L269-L277

bindoon commented 2 years ago

为何要把 disabled 颜色调那么黑?都不像禁止状态,像 readonly!

如果你期望只读展示应该用 readonly 态

guoyunhe commented 2 years ago

业务需求就是这样的,没有办法。浏览器原生 input 的 disabled 也是比 placeholder 要深的。我可以把它变浅,但是还是要和 placeholder 区分