alibaba-fusion / next

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

[Button]建议能为不同颜色的 Button 设置不同颜色的 shadow #2018

Open mengxi-ream opened 4 years ago

mengxi-ream commented 4 years ago

Type

Platform Theme

Component

Button

Feature Description

为了鼓励用户点击按钮,我在设计的时候为 Button 设计了阴影,让 Button 看起来更突出,预期效果如下: image image

但是我发现 fusion design 如果配置 Button 的时候配置 shadow 的话,这个 shadow 会应用到所有类型的按钮中 (包括 warning button 和 ghost button 的 primary,normal)。所以导致如果我们的 shadow 是彩色的(比如 primary 的带有主题色绿色的 shadow),那么红色的 warning button 也会强制带上绿色的阴影,非常的难看。

现在的解决办法只有手动去改每个不同类型 button 的 css,非常麻烦,也不符合 fusion design 的初衷。非常期待 fusion 能够让我们分开设置不同类型的 button 的不同阴影颜色。

youluna commented 4 years ago

是所有的primay类型的Button都希望有这个强调的阴影,还是说在特定的场合下primary Button才有阴影的诉求呢?

mengxi-ream commented 4 years ago

是所有的primay类型的Button都希望有这个强调的阴影,还是说在特定的场合下primary Button才有阴影的诉求呢?

所有的 primary button 都有这个阴影诉求。 不过现在就是如果我设置了普通 Button 的 primary 阴影为绿色,会有三个具体问题存在:

  1. Warning Button 的样式也会强制带上绿色的阴影,和红色的 Warning Button 配合起来可以扭秧歌了哈哈哈。
  2. Shadow 我们只能配置三种嘛 shadow-1,shadow-2 和 shadow-3,而且和 color 是绑定的. 也就是说,然后如果要设置 shadow-3 是绿色,那么 shadow-3 就不能用于 warning button 按钮。(由于上面提到的第 1 点,我们也没办法让 warning button 有红色阴影,因为他的 shadow 属性和普通 button 是一致绑定的)
  3. 普通 Button 的 normal 类型(灰色 button)也会强制带上绿色阴影,但是希望它是灰色,强行绿人家总是不太好 lol。