{"componentChunkName":"component---src-pages-how-to-contribute-component-index-mdx","path":"/how-to-contribute/component/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Components","description":"Component contributions can take several forms. Most are either component enhancements or brand new assets."},"relativePagePath":"/how-to-contribute/component/index.mdx","titleType":"prepend","MdxNode":{"id":"b4fdd4c2-0d07-5e05-b3a7-91d496ed524e","children":[],"parent":"ae843ee6-19a7-5e03-994c-7411e24ab3c5","internal":{"content":"---\ntitle: Components\ndescription: Component contributions can take several forms. Most are either component enhancements or brand new assets.\n---\n\n### Component contributions can take several forms. Most are either component enhancements or brand new assets.\n\n## First steps to contributing\n\nTo contribute a component to Carbon, start by [opening a Github issue](https://github.com/carbon-design-system/carbon/issues/new?assignees=&labels=type%3A+enhancement+%F0%9F%92%A1&template=feature-request-or-enhancement.md&title=). Include a detailed description in which you:\n\n- Explain the rationale\n- Detail the intended behavior\n- Clarify whether it's a variation of an existing component, or a new asset\n- Include mockups of any fidelity (optional)\n- Include any inspirations from other products (optional)\n\nThis issue will be the staging ground for the contribution and an opportunity for the community to weigh in with any suggestions. We'll also be able to tell you up-front whether the contribution is likely to become part of Carbon, and potentially save you time.\n\nWe encourage you to surface works-in-progress. If you're not able to complete all of the parts yourself, someone in the community may be able to pick up where you leave off.\n\n## Parts of a component contribution\n\nHere are all of the steps for a complete contribution.\n\n#### 1. Provide a rationale\n\nExplain how your component will add value to the system. Carbon serves the widest possible range of products, and contributions that increase the scope of the system are more likely to be accepted. Be sure to include any user experience and interaction descriptions.\n\n#### 2. Create a design spec\n\nCreate sizing and styling annotations for all aspects of the component. This spec should provide a developer with everything they need to create the design in code. Check out our [production guidelines](https://github.com/carbon-design-system/carbon-website/wiki/Production-guidelines#spec-guidelines) to get started.\n\nYou should include color tokens and type tokens used.\n\n\n\n\n\n\nExample of a design spec\n\n\n
\n\n#### 3. Create a Sketch symbol\n\nAny new components or changes to existing components will also live in the [Carbon Sketch kit](/get-started/design#get-the-kit) and so we'll need a Sketch symbol. Check out [Sketch's guide](https://www.sketch.com/docs/symbols/creating-symbols/) for creating a symbol.\n\nThis symbol can be contributed with the asset or enhancement, but must be added to the kit by one of its [maintainers](/how-to-contribute/overview/overview#maintainers). To contribute a symbol, simply open an issue in the [kit repo](https://github.com/carbon-design-system/carbon-design-kit/issues).\n\n#### 4. Provide usage documentation\n\nIf the contribution adds additional behavior or expands a component's features, you'll need to document them with usage guidance, which will go in the usage tab of the component page. Color and type tokens will live in the style tab.\n\nSee our [production guidelines](https://github.com/carbon-design-system/carbon-website/wiki/Production-guidelines#spec-guidelines) and the [documentation guidelines](/how-to-contribute/documentation) for help documenting your work. Reading through existing component documentation on the site will help also.\n\n#### 5. Provide working code\n\nThe component or enhancement must be built in one of our supported frameworks (Vanilla, React, Vue, or Angular). See the contribution guidelines for the specific repo you intend to contribute to.\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n\n \n\n\n\n \n\n
\n","type":"Mdx","contentDigest":"5d0fb9e9479036c0beda535c702f0d0d","counter":1459,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Components","description":"Component contributions can take several forms. Most are either component enhancements or brand new assets."},"exports":{},"rawBody":"---\ntitle: Components\ndescription: Component contributions can take several forms. Most are either component enhancements or brand new assets.\n---\n\n### Component contributions can take several forms. Most are either component enhancements or brand new assets.\n\n## First steps to contributing\n\nTo contribute a component to Carbon, start by [opening a Github issue](https://github.com/carbon-design-system/carbon/issues/new?assignees=&labels=type%3A+enhancement+%F0%9F%92%A1&template=feature-request-or-enhancement.md&title=). Include a detailed description in which you:\n\n- Explain the rationale\n- Detail the intended behavior\n- Clarify whether it's a variation of an existing component, or a new asset\n- Include mockups of any fidelity (optional)\n- Include any inspirations from other products (optional)\n\nThis issue will be the staging ground for the contribution and an opportunity for the community to weigh in with any suggestions. We'll also be able to tell you up-front whether the contribution is likely to become part of Carbon, and potentially save you time.\n\nWe encourage you to surface works-in-progress. If you're not able to complete all of the parts yourself, someone in the community may be able to pick up where you leave off.\n\n## Parts of a component contribution\n\nHere are all of the steps for a complete contribution.\n\n#### 1. Provide a rationale\n\nExplain how your component will add value to the system. Carbon serves the widest possible range of products, and contributions that increase the scope of the system are more likely to be accepted. Be sure to include any user experience and interaction descriptions.\n\n#### 2. Create a design spec\n\nCreate sizing and styling annotations for all aspects of the component. This spec should provide a developer with everything they need to create the design in code. Check out our [production guidelines](https://github.com/carbon-design-system/carbon-website/wiki/Production-guidelines#spec-guidelines) to get started.\n\nYou should include color tokens and type tokens used.\n\n\n\n\n\n\nExample of a design spec\n\n\n
\n\n#### 3. Create a Sketch symbol\n\nAny new components or changes to existing components will also live in the [Carbon Sketch kit](/get-started/design#get-the-kit) and so we'll need a Sketch symbol. Check out [Sketch's guide](https://www.sketch.com/docs/symbols/creating-symbols/) for creating a symbol.\n\nThis symbol can be contributed with the asset or enhancement, but must be added to the kit by one of its [maintainers](/how-to-contribute/overview/overview#maintainers). To contribute a symbol, simply open an issue in the [kit repo](https://github.com/carbon-design-system/carbon-design-kit/issues).\n\n#### 4. Provide usage documentation\n\nIf the contribution adds additional behavior or expands a component's features, you'll need to document them with usage guidance, which will go in the usage tab of the component page. Color and type tokens will live in the style tab.\n\nSee our [production guidelines](https://github.com/carbon-design-system/carbon-website/wiki/Production-guidelines#spec-guidelines) and the [documentation guidelines](/how-to-contribute/documentation) for help documenting your work. Reading through existing component documentation on the site will help also.\n\n#### 5. Provide working code\n\nThe component or enhancement must be built in one of our supported frameworks (Vanilla, React, Vue, or Angular). See the contribution guidelines for the specific repo you intend to contribute to.\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n\n \n\n\n\n \n\n
\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/how-to-contribute/component/index.mdx"}}}}