-
Notifications
You must be signed in to change notification settings - Fork 267
一个组件的诞生
azhe edited this page Feb 23, 2023
·
4 revisions
https://whimsical.com/component-flow-QBMNNCjmj819HCZcnH1c95
- PMC 同学从 issue、论坛或业务使用群中收集新组件需求,PMC 周例会上提出讨论,协商一致确定新组件满足“通用性”与“必要性”的要求。
- 向设计师同学同步新组件设计需求,需要提供必要的组件功能说明、业务使用样例截图或业界其他组件库中类似组件的链接等
- 设计师同学排期安排产出交互稿,确定后续负责设计稿的设计同学
- 在主仓库 roadmap 里新增组件类型,状态标记为“待启动”
- 在 TDesign 周报、内部论坛、issue、内外部群等渠道持续招募各角色贡献者:UI 开发同学、API 制定者、各技术栈开发同学(角色只用于明确开发职责,可以都是同一位同学,招募时可以询问是否愿意承担相应的职责)
- UI 开发、API 制定及某个技术栈开发角色招募到位后,就可以拉企业微信群介绍组件相关情况,包括但不限于:宣讲各参与人职责、交互稿地址、相关开发、设计指引文档等。API 制定者需要根据现有设计稿及业界类似组件实现,制定一份 API 初稿,并约相关组件参与者进行线上会议评审
- 线上评审会
- 必需参与的角色:技术栈 PMC 负责同学、交互设计师、视觉设计师、UI 开发同学、API 制定者、各技术栈开发同学
- 讨论内容:API 设置是否满足业务场景需求,是否留有扩展空间(组件易用性与灵活性 trade-off);API 描述等是否框架无关,能够在多个技术栈中实现;交互稿是否满足需求,是否提供了所有场景的 demo
- 会后需要明确交互稿调整后定稿时间
- 交互设计师撰写该组件的设计指南(例:https://tdesign.tencent.com/vue-next/components/button?tab=design)
- 视觉设计师根据调整后的交互稿,产出设计稿及时在群中同步
- 负责组件进展的 PMC 同学录入 API 管理平台:https://github.com/Tdesignoteam/tdesign-api
- clone 仓库:https://github.com/TDesignOteam/tdesign-api,按照仓库 README 中指令操作说明拉取对应组件 API 相关文件至本地
- 负责 UI 开发的同学按照设计稿独立在 common 中开发组件 UI(HTML + CSS),UI demo 需要包括交互稿中给出的各类使用场景的静态样式。提交 PR 后在群中同步信息,如果有其他技术栈开发同学需要与 PMC 同学一起 CR UI 实现,没问题后合入 PR
- 组件开发:各技术栈开发同学使用 cli 工具拉取生成本技术栈的组件 API 定义相关文件(例:https://github.com/Tencent/tdesign-vue/blob/develop/src/button/props.ts),根据定义文件和 UI 实现进行组件逻辑开发
- 开发完成后提交 PR,各 CI 环节执行通过后需要邀请 PMC 同学进行 CR,如果在提交 PR 过程中遇到问题,可以先参考指引:https://tdesign.tencent.com/about/contributing
- CR 问题修复后,邀请交互、视觉设计师同学参与走查验收,对照 PR 上预览官网地址走查组件 demo 实现情况
- 视觉设计师需要设计该组件的一个缩略图,以在 组件概览 页展示
- PMC 同学上传缩略图到 TDesign 公共 COS 服务,生成图片链接给组件开发同学,在 common overview 文档中新增组件预览入口,并更新该分类下组件数量
- PR 合入 develop,准备发布
- PMC 同学收集各位参与同学 GitHub 账号,更新到贡献者维护系统中
访问 TDesign 官网