Spectrum CSS 评分组件重大更新解析

项目背景

Spectrum CSS 是 Adobe 设计系统的重要组成部分，它提供了一套符合 Spectrum 设计语言的 CSS 组件库。这些组件帮助开发者快速构建符合 Adobe 设计规范的 Web 应用界面。评分组件(Rating)是用户界面中常见的交互元素，用于收集用户对内容的评价反馈。

版本 7.0.0-next.2 主要变更

最新发布的 7.0.0-next.2 版本对评分组件进行了重大重构，将其迁移至 Spectrum 2(S2)设计系统。这一变更不仅涉及视觉样式的更新，还包括组件结构和功能的增强。

核心改进

1. 尺寸系统重构

   • 默认采用中等(medium)尺寸变体
   • 新增了T恤尺码(T-shirt sizing)的中等尺寸变体
   • 移除了原有的垂直间距自定义属性

2. 部分填充功能

   • 新增支持部分填充星形图标的功能
   • 通过添加 .is-partial 类和设置 --mod-rating-icon-fill 自定义属性控制填充比例

3. 工具提示支持

   • 新增工具提示功能，可向用户说明交互行为
   • 包含文档示例和控制方式

自定义属性变更

新增属性

• 组件尺寸相关：--mod-rating-width、--mod-rating-height
• 间距控制：--mod-rating-bottom-to-content-area、--mod-rating-edge-to-content-area、--mod-rating-top-to-content-area
• 填充控制：--mod-rating-icon-fill

移除属性

• 旧版尺寸控制：--mod-rating-icon-spacing-vertical-top、--mod-rating-indicator-height
• 旧版边框控制：--mod-rating-indicator-border-radius
• 焦点状态颜色：--mod-rating-icon-color-key-focus

底层样式更新

新版本采用了 Spectrum 2 的设计规范，引入了以下基础样式变量：

• 间距：--spectrum-spacing-75
• 图标尺寸：--spectrum-workflow-icon-size-75
• 圆角半径：--spectrum-corner-radius-medium-size-medium、--spectrum-corner-radius-medium-size-small
• 中性色内容颜色：--spectrum-neutral-content-color-default 等状态变体

同时移除了与旧版设计系统相关的多个变量，包括：

• 旧版焦点状态颜色：--spectrum-accent-content-color-key-focus
• 边框宽度：--spectrum-border-width-200
• 旧版间距：--spectrum-component-top-to-workflow-icon-100
• 旧版圆角：--spectrum-corner-radius-100

技术实现细节

部分填充实现

新版本引入了精细的填充控制能力，开发者可以通过以下方式实现部分填充效果：

<span class="spectrum-Rating-icon is-selected is-partial" style="--mod-rating-icon-fill: 50%"></span>

这种实现方式提供了极大的灵活性，允许开发者精确控制每个星形图标的填充比例。

工具提示集成

工具提示的加入增强了组件的可访问性和用户体验。当用户与评分组件交互时，可以显示提示信息，说明操作将清除还是修改现有评分。这一功能特别适用于需要明确用户意图的场景。

响应式设计改进

新版本通过引入基于内容区域的间距控制属性(--mod-rating-*-to-content-area)，使组件在不同屏幕尺寸和布局中具有更好的适应性。这种设计思路符合现代Web开发对响应式设计的重视。

迁移建议

对于现有项目迁移到新版本，开发者需要注意：

1. 检查并更新所有使用自定义属性的地方
2. 重新评估组件尺寸设置，特别是从旧版尺寸系统迁移的情况
3. 考虑是否需要添加工具提示功能来提升用户体验
4. 测试部分填充功能是否符合产品需求

总结

Spectrum CSS 7.0.0-next.2 版本的评分组件更新代表了向现代化设计系统的演进。通过这次重构，组件获得了更精细的控制能力、更好的可访问性和更灵活的样式定制选项。这些改进使开发者能够构建更符合现代Web标准的用户界面，同时保持与Adobe设计语言的一致性。