SpareBank1设计系统中IconCard组件的右对齐图标变体开发
项目地址: https://gitcode.com/gh_mirrors/desi/designsystem 在SpareBank1设计系统的开发过程中，团队EM1提出了一个关于IconCard组件的新需求——希望增加一个图标位于文本右侧的变体版本。这个看似简单的功能需求实际上涉及到了组件设计的灵活性、可扩展性以及一致性等核心问题。
IconCard组件的基本概念
IconCard是SpareBank1设计系统中一个常见的UI组件，通常用于展示带有图标的卡片式内容。标准版本的IconCard采用左图标右文本的布局方式，这种布局在大多数场景下都能很好地满足需求，符合用户从左到右的阅读习惯。
新需求的技术背景
EM1团队在具体业务场景中发现，某些界面布局需要将图标放置在文本右侧才能达到更好的视觉效果或交互体验。这种需求在以下场景尤为常见：
- 需要强调文本内容而非图标的场景
- 与其他右对齐元素保持视觉一致性的界面
- 特定业务流程中的特殊设计需求
技术实现方案
经过团队讨论，决定采用以下实现策略：
- 在现有IconCard组件基础上扩展，而非创建全新组件
- 通过props控制图标位置，保持API的一致性
- 确保新变体在可访问性方面与原有版本保持一致
这种实现方式既满足了新需求，又维护了设计系统的一致性，避免了组件碎片化的问题。
开发流程与协作
该项目采用了开源协作的模式：
- 需求由使用方团队EM1提出
- 经过技术评估后，决定由EM1团队自行实现并通过PR提交
- 核心团队负责代码审查和合并
这种协作方式既保证了核心团队对设计系统质量的把控，又充分发挥了使用团队的主动性，是一种高效的开源协作模式。
设计系统演进思考
这个案例很好地展示了设计系统应该如何平衡稳定性和灵活性：
- 保持核心组件API的稳定性
- 通过合理的扩展机制满足特殊需求
- 建立良好的贡献机制，让使用团队能够参与系统建设
对于正在构建或维护设计系统的团队来说，SpareBank1的这种处理方式值得借鉴。它既避免了设计系统变得僵化无法满足实际需求，又防止了系统因随意扩展而失去一致性。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
