Frequently asked questions
Gestalt usage
What are the benefits of using the Gestalt library?
Using Gestalt guarantees adherence and compliance to Pinterest design standards and best practices which results in UI and UX consistency across surfaces.
Gestalt also provides:
- Styled, tested, and accessible components
- Right-to-left, internationalization, and dark-mode support
- Low maintaince (automatic design and code updates cross-platform)
- Well-documented components and continuous Gestalt team support
Gestalt increases designers and developers velocity with the highest design and code quality.
Component usage
How can I visualize which components use Gestalt?
Installation
Drag this link:
Gestalt usage visualiser
into your bookmarks toolbar. If you do not see the bookmarks toolbar, go to View and select 'Show Bookmarks Bar'.Usage
- Click the link in the bookmark bar.
- Red is bad: all places that are not using Gestalt will have a red border around them.
- Everything else is Gestalt (or using inline styles).
What is a boint?
A boint is a Pinterest specific unit of spacing that is equivalent to 4px. 1 boint = 4px, 2 boints = 8px, etc.
Gestalt component props such as margin and padding work with boint units.
padding 0 .. 12
How can add a new icon?
If you need an icon that is not listed on our
docs
for an experiment, use the dangerouslySetSvgPath prop on Icon. If the asset is ready, we will happily add the icon to Gestalt!To add it to Gestalt, get a streamlined & optimized version of the SVG not contain strokes / transforms / ...
How do I add Gestalt as a dependency?
Import exact versions. ^1.37.0 is imprecise and could import v1.38.0 which could affect snapshots from version to version. Check
semver documentation
for hints on the differences.How do I import components from Gestalt?
Add the following to your import declarations:
import { Button, Text } from 'gestalt';
What's required to support IE11?
Gestalt supports IE11 currently, but you will need to use a polyfill because the css file uses css variables. Below is an example of how we set the polyfill up in the docs which should go in the <head /> of your html.
// Load polyfills for IE 11
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
document.write(
'<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>' +
'<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"></script>'
);
}
Component development
How do I get access to the Gestalt repo?
The
Gestalt repository
is public and you do not need special permissions to make pull requests.How do I easily generate files for a component?
Run the following and replace "ComponentName" with the name of your component.
yarn generate ComponentName
What do we use for integration tests and how do we run the tests locally?
We use
Cypress
for our integration test. If you want to run the tests locally:yarn docs
yarn cypress run
What is Gestalt teachings and how do I add a video?
Gestalt teachings
is a youtube video playlist containing tips and tricks on how to use Gestalt. Use this special collaboration link
to add your own videos to this list.Automated releases
How does versioning work in Gestalt?
The Gestalt library development approach is continuous releasing. Each major, minor, and patch change is merged to master and released as the latest supported Gestalt version.
Check the release log.
When a release will cause breaking changes — in usage or in typing — we provide a codemod to ease the upgrade process.
Read more about Codemods.
My pull request fails on "Semver / Require Label (pull_request)", how do I fix it?
Nothing you can do to fix it.
A Gestalt Core maintainer will add a semver label (patch release / minor release / major release) when reviewing a PR..
How do these automated releases work under the hood?
Automated releases use
GitHub actions
with the these release steps
for every merge on master:- Fetch semver label for the associated PR (patch / minor / major)
- Check out the repository
- Setup Node.js
- Bump package.json version
- Update CHANGELOG.md file
- Create GitHub release
- Publish to npm
- Update Gestalt documentation