跳到主要内容

贡献
准备就绪

我们的设计系统从未完成，它不断变化和演进。我们需要像您一样的 Grafanistas 的帮助来创新和解决问题！阅读本页了解如何贡献 — 我们非常乐意接受您的帮助！

参与​

设计系统、设计师和开发者之间保持开放的沟通渠道对于成功至关重要，也是提高每个人对我们拥有和不拥有的解决方案的认识的最佳方式。

  • 设计系统 GitHub 项目。查看我们正在或稍后将进行的工作。这里将是跟踪任何贡献工作的好地方

  • #grafana-design-system
    一个内部 Slack 频道，用于发布您的问题、获取解答、分享您的想法，甚至获取设计系统发布更新

  • UX 反馈会议。一个 Grafana 内部平台，用于获取同行反馈以改进您的工作。 #ux Slack 频道会发布提醒并分享这些会议的议程。如果您想被添加到这些定期会议中，请请求加入该频道。

指导原则​

为了使设计系统成为更好的产品，请牢记这些原则

Saga guiding principles

贡献和等级​

贡献不仅限于组件或代码。我们欢迎任何反馈、文档、工具、设计。下面是我们确定的各种贡献等级以及一些示例。

  1. 修复： 代码中的错误、设计中的未对齐问题，或阐明文档以提高简洁性。

  2. 小改进： 不产生破坏性更改的添加或扩展，例如将图标添加到图标库或为现有组件引入新的变体。

  3. 大改进： 这些更改通常需要跨系统的对齐和协调。例如我们如何处理保存或删除。通常，这些更改需要调整代码、设计和文档。

  4. 新增： 一个全新的组件或模式，包括变体、文档和相应的代码实现。这也可以包括 Grafana 中现有的、历史上未包含在设计系统中的 UI，并且需要适当的文档和产品对齐。

贡献之前​

花点时间查看上面在参与中提到的区域，看看是否存在现有解决方案，或者查看组件库（参见资源），如果您觉得可能已经存在某些内容。

组件贡献​

组件贡献通常包括以下内容

  1. 原因 解释您的组件如何解决问题并为系统和 Grafana 带来价值。务必包含它在 Grafana 各个区域支持的功能，以展示其共享价值。

  2. Figma 组件 将您的组件放入 Grafana 设计系统 - 暗色模式 文件的 Figma 分支 (Figma 分支最佳实践) 中，以记录您的调整。构建组件时务必使用当前的 Figma 功能——自动布局、组件属性、变体属性、状态和变体。

  3. 设计规范 为开发者提供正确地在代码中构建组件所需的一切。这可能包括间距、颜色和排版等方面。

  4. 使用文档 包括正确的使用方法和特定配置要求，任何需要指定的交互类型，包括所需的无障碍要求。查看我们的文档模板以供参考和指导。代码 Grafana 使用 React 作为其主要代码库。对于一个完整的组件贡献，必须包含在 React 中构建此组件所需的代码。

模式贡献​

模式是解决常见设计问题的重复性解决方案。尝试提供模式的总体概念，并务必包含任何重要细节。下面是一些可以考虑包含的内容

  1. 概述 解释此模式解决了什么问题，影响了哪些区域，以及它如何为整个组织提供价值。

  2. 实现 指定此模式如何工作以及哪些组件与其结合使用。是否有不同层级的实现方式

  3. 无障碍性 需要哪些重要细节来确保此模式具有无障碍性？在此处务必清晰简洁，因为我们非常重视无障碍性。

  4. 相关 是否有替代模式或类似模式是设计师或开发者可能正在寻找的，或应根据用例使用的？

  5. 参考资料 是否有任何内容或资源有助于支持此模式？例如内部文档或通用最佳实践——在此处包含它们。

资源​

我们提供多种工具来帮助开发者和设计师构建更好的解决方案。

反馈？​

如果您发现此处有可以改进或添加的内容？在Slack上联系或直接消息 Staton Hysell、Joao Silva 或 Natacha de Jesus。我们期待您的反馈！