Semi Design中Icon Button宽高不一致问题的分析与解决

问题背景

在Semi Design组件库的2.0版本中，Button组件存在一个设计上的问题：当用户通过DSM(Design System Manager)调整按钮高度后，Icon Button会出现宽度与高度不一致的情况。这种不一致性会导致视觉上的不协调，特别是当按钮中包含正方形图标时，这种差异会更加明显。

问题表现

Icon Button作为一种特殊类型的按钮，通常用于容纳单个图标。在理想情况下，Icon Button应该保持宽度和高度相等，这样不仅能够确保图标的完美展示，还能方便地实现圆形按钮的设计效果。然而，当前实现中，当按钮高度被调整后，宽度未能同步保持与高度一致，导致按钮呈现为矩形而非预期的正方形。

技术分析

从技术实现角度来看，这个问题源于Button组件的样式定义未能充分考虑Icon Button的特殊需求。在常规按钮中，宽度通常由内容决定，而高度则由设计系统统一控制。但对于Icon Button这种特殊场景，需要额外的样式约束来确保宽高比例。

解决方案

针对这个问题，开发团队通过以下方式进行了修复：

1. 为Icon Button添加了特定的样式规则，强制保持宽度与高度相等
2. 确保在DSM调整高度时，宽度能够同步变化
3. 保留原有按钮的其他样式特性，如边框、阴影等

这种解决方案既保持了设计系统的灵活性，又确保了Icon Button的特殊需求得到满足。

最佳实践

对于使用Semi Design的开发人员，在处理Icon Button时应注意：

1. 优先使用专门的Icon Button组件而非普通Button
2. 当需要自定义按钮尺寸时，建议同时设置宽度和高度
3. 对于圆形按钮需求，可以直接使用Icon Button而无需额外样式

总结

Semi Design团队及时识别并修复了Icon Button宽高不一致的问题，体现了对细节的关注和对用户体验的重视。这个案例也提醒我们，在设计系统组件时，需要充分考虑各种使用场景的特殊需求，确保组件在不同配置下都能保持一致的视觉效果和行为。