vue-devui icon indicating copy to clipboard operation
vue-devui copied to clipboard

🐛 [Bug]: Button、Search、Input、InputNumber、InputIcon、Select等支持设置size的组件标准不一

Open jxhhdx opened this issue 2 years ago • 5 comments

Version

v1.0.0-rc.11

Vue Version

3.2.29

Link to minimal reproduction

xs sm md lg
Button 20px 24px 32px 36px
Search 26 px 32px 46px
Input 24px 26px 44px
InputNumber 26px 28px 46px
InputIcon 无demo? 无demo? 无demo? 无demo?
Select 22px 26px 42px
Radio 28px 32px 36px 40px
Checkbox 28px 32px 36px 40px
AutoComplete 26px 32px 46px
DatePickerPro 26px 28px 46px
Form 待补充 待补充 待补充
Icon 待补充 待补充 待补充
Pagination 待补充 待补充 待补充
Skeleton 待补充 待补充 待补充
Switch 待补充 待补充 待补充
Table 待补充 待补充 待补充
Tag 待补充 待补充 待补充
ant-design 24px 32px 40px
Element-plus 与antd相同 与antd相同 与antd相同

Step to reproduce

使用这些组件

What is expected

  1. 建议xs、 sm 、md、lg使用标准的尺寸
  2. 建议这些将组件的尺寸使用公共的sass变量
  3. 建议参考社区主流的尺寸
  4. 考虑移除xs这个尺寸、或都都支持xs

What is actually happening

大小不一,标准不同

Any additional comments (optional)

No response

jxhhdx avatar Aug 08 '22 14:08 jxhhdx

赞成!

kagol avatar Aug 09 '22 07:08 kagol

是否可以考虑移除 md 把 md 直接作为默认

vaebe avatar Aug 12 '22 13:08 vaebe

是否可以考虑移除 md 把 md 直接作为默认

md作为默认,但不移除比较合理,保留md可以显式表明默认到底是什么

kagol avatar Aug 12 '22 15:08 kagol

建议将这三个尺寸抽成三个scss变量,统一使用,方便后续设计规范变更之后,修改起来方便。

$devui-size-sm: 24px;
$devui-size-md: 32px;
$devui-size-lg: 40px;

kagol avatar Aug 12 '22 15:08 kagol

2022-09-17 Button Search Input InputNumber Select Radio Checkbox AutoComplete DatePickerPro Pagination Tag 移除size xs类型

vaebe avatar Sep 17 '22 14:09 vaebe

Icon、Skeleton、Table 的size 属性应该是独立的吧 和表单没有关系 @linxiang07 @kagol

vaebe avatar Dec 11 '22 09:12 vaebe

通过检查发现,

  1. checkbox、select、switch组件中获取size的优先级顺序为from > group > props,与其他form组件的优先级顺序不一致,实际上应该是props > group > from比较合理。
  2. input组件未设置默认样式为md,会影响html上没有默认size对应class。 看大佬在radio组件中修改了以上的问题,看下继续对上面组件进行修改,获取我这边修改后提pr也可以。 @vaebe

hxj9102 avatar Dec 11 '22 10:12 hxj9102

通过检查发现,

  1. checkbox、select、switch组件中获取size的优先级顺序为from > group > props,与其他form组件的优先级顺序不一致,实际上应该是props > group > from比较合理。
  2. input组件未设置默认样式为md,会影响html上没有默认size对应class。 看大佬在radio组件中修改了以上的问题,看下继续对上面组件进行修改,获取我这边修改后提pr也可以。 @vaebe 非常感谢
  1. checkbox、switch 已经提pr了,select 还没看 大佬有时间可以修一下
  2. input 没有 .devui-input--md 这个 class 和 scss 样式写的有关系,目前逻辑应该正确的。

vaebe avatar Dec 11 '22 13:12 vaebe

通过检查发现,

  1. checkbox、select、switch组件中获取size的优先级顺序为from > group > props,与其他form组件的优先级顺序不一致,实际上应该是props > group > from比较合理。
  2. input组件未设置默认样式为md,会影响html上没有默认size对应class。 看大佬在radio组件中修改了以上的问题,看下继续对上面组件进行修改,获取我这边修改后提pr也可以。 @vaebe 非常感谢
  1. checkbox、switch 已经提pr了,select 还没看 大佬有时间可以修一下
  2. input 没有 .devui-input--md 这个 class 和 scss 样式写的有关系,目前逻辑应该正确的。

select已提pr

hxj9102 avatar Dec 11 '22 15:12 hxj9102

Fixed by @vaebe and @hxj9102 🎉

kagol avatar Dec 13 '22 13:12 kagol