These guidelines summarize how GitHub implements progressive disclosure—an interaction design pattern that hides/displays information. This article also contains information regarding guiding principles, best practices, and implementation support.
The following table outlines common progressive disclosure solutions in use at GitHub. For more in depth analysis and usage guidelines, please refer to Progressive Disclosure User Interface Patterns.
|Chevron||When elements of content are collapsed and can be toggled open||Do not use this icon to trigger a dropdown menus or navigation; the Caret icon is the more suitable for this.|
|Expand/ Collapse Icon||Signify that there is content (typically text) to be revealed||Should generally stand alone, rather than being paired with text|
|Ellipses Icon||For toggling truncated inline text content||Do not use this icon to trigger a dropdown menus or navigation; the Kebab icon is the more suitable for this.|
|Text-only Toggles||Usage of this solution is discouraged, as generally icons or icon+text pairings provide better accessibility and more information|
|Kebab||N/A||For toggling inline dropdowns and menus|
|Caret||N/A||Refrain from using this icon as a progressive disclosure solution|
When designing interfaces that incorporate progressive disclosure, refrain from creating interactions that drastically disorient the user’s initial point of focus.
It's important to understand the differentiation from progressive disclosure and navigation patterns, as the two share “cousin” elements that can be confusing when deciding which one to implement.
Please refer to these guidelines as they detail in-use solutions, and outline best practices for implementation. For more clarity, refer to the Support section of this article for more information.
Pair progressive disclosure icons with descriptive text to provide context.
Progressive disclosures should be used sparingly, when it’s necessary to truncate information for the general layout/design.
The Chevron Icon is used when elements of content are collapsed and can be toggled open. Typically this icon is positioned vertically, and alternates between “up” and “down” states. This icon is quite flexible, and can stand alone, or be paired with text.
Chevron icon used to display more branches in mobile view
This icon is used to signify that there is content that can be toggled open and closed. It is typically surrounded by text content above and below it. There are currently versions of this icon that expand the context in a singular direction, but are only used in GitHub’s code review editor.
Fold/Unfold Icon used in Profiles context
The ellipses icon is used for toggling truncated inline text content. It’s primary purpose is to serve as a method that designers to use to curtail bodies of texts, but sometimes other types of information.
If or when certain progressive disclosure patterns in your design emerge, or you believe a certain solution should be made into a component, reach out to the #design-systems channel on Slack to find out more on submitting your code or idea. You may also reach out by opening an issue to the team the team directly on Github.
Progressive Disclosure can be tricky to implement, and certain designs may test the bounds of our design guidelines in unique scenarios. If you have further questions or require clarity on implementation, please reach out to the #design-systems channel on Slack.