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?

Use
Gestalt Usage Visualizer
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.

Icons and SVGs

If you need a new icon for an experiment that is not listed on our Icon documentation, use the dangerouslySetSvgPath prop on Icon, IconButton, and Pog. However, dangerouslySetSvgPath only works with one SVG path. For icons with multiple paths and groups, use Box and dangerouslySetInlineStyle to pass the custom icon as backgroundImage.

Once your experiment ships to 100%, ask your designer to follow the directions in the Icon kit. Once the asset is ready, we can add the Icon to Gestalt.

We recommend streamlining (removing strokes, transforms, ...) and optimizing the SVGs to improve the performance and the pinner experience using the tools svgo or ImageOptim

Gestalt Icon svg files follow a particular format and use automatic file validation testing.

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"> <path d="_______________"/> </svg>

We override the color in the Gestalt Icon component and Gestalt only uses the d attribute in the path tag and the basic attributes for visualizing the raw file in the svg tag . For consistency, we don't include unnecessary attributes in the svg and path tags.

Accessibility notes:

  • Icons must meet the Non-Text Contrast requirement.
  • Avoid using unfamiliar icons. Always refer to Gestalt available icons. A new icon needs to be user tested to evaluate comprehension.
  • Some icons don’t translate well in all cultures, so it's preferred to user-test each Icon before it gets added to Gestalt.

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
Edit page on GitHub