Elastic EUI v102.0.0 版本发布：语义化颜色体系升级与表单控件优化

Elastic EUI 是 Elastic 公司开源的一套基于 React 的 UI 组件库，专为构建复杂的企业级应用界面而设计。它提供了丰富的组件和设计系统，帮助开发者快速构建符合 Elastic 设计语言的用户界面。本次 v102.0.0 版本带来了重要的语义化颜色体系升级和表单控件优化。

语义化颜色体系全面升级

在本次更新中，Elastic EUI 对颜色系统进行了重大重构，引入了更加语义化的颜色命名方案。这一变化使得颜色使用更加直观，开发者不再需要记忆抽象的编号，而是可以直接使用具有明确语义的颜色名称。

新增语义化严重程度颜色标记

新版本增加了六种表示严重程度的语义化颜色标记：

• unknown：表示未知状态
• neutral：表示中性状态
• success：表示成功状态
• warning：表示警告状态
• risk：表示风险状态
• danger：表示危险状态

这些标记可以直接通过 colors.severity 命名空间访问，例如 colors.severity.success 表示成功状态的绿色。

新增中性(neutral)和风险(risk)变体颜色

为了完善语义化颜色体系，本次更新特别为中性(neutral)和风险(risk)状态新增了完整的颜色变体，包括：

• 文本颜色：textNeutral 和 textRisk
• 背景基础色：backgroundBaseNeutral 和 backgroundBaseRisk
• 浅色背景：backgroundLightNeutral 和 backgroundLightRisk
• 填充背景：backgroundFilledNeutral 和 backgroundFilledRisk
• 基础边框色：borderBaseNeutral 和 borderBaseRisk
• 强调边框色：borderStrongNeutral 和 borderStrongRisk

组件颜色变体支持扩展

新版本为多个核心组件增加了对中性(neutral)和风险(risk)变体的支持，包括：

• 按钮组件：EuiButton、EuiButtonEmpty、EuiButtonIcon
• 徽章组件：EuiBadge
• 图标组件：EuiIcon
• 面板组件：EuiPanel

这意味着开发者现在可以更直观地为这些组件设置符合语义的颜色状态，而不需要手动指定具体的颜色值。

移除旧版编号颜色标记

作为本次重构的一部分，旧版基于编号的严重程度颜色标记已被移除。这些标记包括从 euiColorSeverity0 到 euiColorSeverity14 的所有编号颜色。开发者应迁移到新的语义化颜色命名方案。

表单控件布局优化

除了颜色系统的升级，本次更新还对表单控件的布局进行了优化：

EuiFormControlLayoutIcons 组件的对齐方式从居中(center)调整为顶部对齐(top)。这一变化特别改善了多行表单控件（如带有多个选中选项的 EuiComboBox）的用户体验，使图标位置更加合理，减少视觉混乱。

无障碍改进

在无障碍访问方面，本次更新修复了 EuiDataGrid 组件中的一个问题：当表格列头同时具有排序和操作功能时，屏幕阅读器会重复播报相同信息。这一修复提升了使用辅助技术用户的体验。

总结

Elastic EUI v102.0.0 版本通过引入语义化颜色体系，使开发者能够更直观地表达界面元素的含义和状态，同时移除了容易混淆的编号颜色标记。表单控件布局的优化进一步提升了复杂场景下的用户体验。这些改进体现了 Elastic EUI 对设计一致性和可访问性的持续关注，为构建更专业、更易用的企业级应用界面提供了更好的工具支持。