Patterns are best practice solutions for how a user achieves a goal. They are compound components and templates in motion, showing the choreography of components working together.
If you’ve designed a pattern that is not currently in Carbon, contributing it back allows others in the community to refine and use your pattern in their projects.
All contributions start by opening a Github issue. Include a detailed description in which you:
This issue will be the staging ground for the pattern contribution, and you should expect the Carbon core team and the community to weigh in with suggestions.
We encourage you to surface work in progress. If you’re not able to complete all of the parts yourself, someone in the community may be able to help.
These guidelines are to help you prepare a complete and comprehensive pattern for submission to the IBM Design System. We’ve included all of the sections you should consider while developing your pattern, with detail on the guidance and visuals that good patterns include.
We’ve also created a Markdown file that includes this guidance and helps get you one step closer.
This section answers the question: “What problem does this pattern solve?”
Show pattern in visual form
Include a short list describing situations where this pattern could be applied.
For example, use this pattern when:
If required, include a short explanation about when not to use this pattern.
This section explains the pattern in detail. Use a combination of written explanations and visuals to tell the story.
List out best practices and include any design considerations that help with making choices.
Different patterns require different visuals to best explain the behaviors and hierarchy. Choose the options that make the most sense for the story you are telling. See our production guidelines for information about creating assets for the IBM Design System.
Provide a Sketch file with any symbols you’ve created in the development of this pattern.
If there are use cases that require a different solution, include those here with corresponding explanations and visuals. Be sure to explain the reasons for using one solution over another.
Which components did you use when building this pattern? List them here.
If necessary, clarify any differences between this pattern and related patterns.
Evaluate your pattern to ensure it meets accessibility standards and guidelines, and provide details of compliance.
For example, “Users should be able to TAB into the input field of the search box to being typing and press ENTER to run the search query.”
Help designers understand your process by explaining your rationale for the way you implemented the pattern. Include any research, citations, books or articles that you found helpful.
We’ll include a feedback section here to gather questions and comments.