Spectrum CSS ActionMenu 7.0.0 版本发布解析

项目背景

Spectrum CSS 是 Adobe 开源的一套企业级设计系统 CSS 框架，为开发者提供了一套完整、一致的 UI 组件样式解决方案。它遵循 Adobe 的设计语言规范，帮助开发者快速构建符合设计标准的 Web 应用界面。

重大更新：Spectrum 2 基础架构

本次发布的 ActionMenu 7.0.0 版本是一个重要的里程碑更新，主要引入了 Spectrum 2 Foundations 架构。这一架构在 Spectrum 1 (S1) 和 Spectrum 2 (S2) 设计之间建立了桥梁，实现了设计系统的平滑过渡。

核心特性

1. 多设计系统支持：开发者现在可以通过简单的配置切换组件在 S1、Express 和 S2 三种设计风格之间的显示效果。这一特性通过系统层实现，它将组件级别的 token 重新映射到相应的 token 数据集。

2. 版本依赖要求：

   • 要显示 S2 风格，需要使用 @spectrum-css/tokens v16 或更高版本
   • 要显示 S1 或 Express 风格，需要使用 @spectrum-css/tokens v14.x 或 v15.x

3. 文件使用策略：

   • 仅需 S2 基础样式：使用 index.css 文件
   • 仅需 S1 或 Express 组件：使用 index-base.css 加相应的主题文件
   • 需要动态切换设计风格：使用 index-base.css 加 index-theme.css，并配合上下文类(.spectrum--legacy 或 .spectrum--express)

废弃内容

1. 元数据文件夹：移除了包含 mods.md 和 metadata.json 的 metadata 文件夹。现在组件信息(包括选择器、修改器和透传属性)都包含在每个组件分发的 dist/metadata.json 文件中。

2. index-vars.css 文件：这个已被废弃的文件在此版本中完全移除，建议开发者使用 index.css 或 index-base.css 替代。

技术实现细节

这一版本的实现依赖于多个底层组件的更新，包括：

• 菜单系统(Menu)升级到 9.0.0 版本
• 操作按钮(ActionButton)升级到 7.0.0 版本
• 弹出框(Popover)升级到 8.0.0 版本
• 图标系统(Icon)升级到 9.0.0 版本
• 核心 Tokens 系统升级到 16.0.0 版本

这些依赖项的更新共同支撑了 ActionMenu 新特性的实现，确保了组件在不同设计风格下的一致性和可靠性。

开发者建议

对于正在使用 Spectrum Web Components 1.x 的开发者，这个基础版本是推荐的选择。但需要注意的是，这并非完整的 S2 组件迁移，如果开发者需要实现完全的 S2 设计，建议探索 next 标签的发布版本。

在实际项目中，开发者应该根据项目需求选择合适的版本组合，并注意相关依赖项的版本兼容性，以确保组件能够正确渲染并保持设计一致性。