Skip to content
A set of React UI components that supports Pinterest’s design language
JavaScript CSS Shell
Branch: master
Clone or download

Latest commit

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Internal: Update Node.js version to 12.x (#686) Feb 25, 2020
docs Revert bad Masonry and Flyout commits (#691) Feb 25, 2020
flow-typed/npm Internal: Convert tests to React Testing Library (#603) Dec 7, 2019
packages Version bump 1.7.1 (#695) Feb 27, 2020
scripts Modal: Fix extra border between content / footer + revert letter spac… Feb 27, 2020
.editorconfig Initial commit Feb 16, 2018
.eslintignore Internal: upgrade gestalt package dependencies (#595) Nov 27, 2019
.eslintrc.json Checkbox: Convert examples & component to use hooks (#600) Dec 4, 2019
.flowconfig Internal: Flowtype CSS (#675) Feb 21, 2020
.gitignore IconWithTooltip: Improve accessibility and convert component to hooks ( Jan 9, 2020
.npmrc Initial commit Feb 16, 2018
.nvmrc Internal: Update Node.js version to 12.x (#686) Feb 25, 2020
.prettierignore Internal: upgrade gestalt package dependencies (#595) Nov 27, 2019
.prettierrc.json Internal: upgrade gestalt package dependencies (#595) Nov 27, 2019
.stylelintignore Internal: upgrade gestalt package dependencies (#595) Nov 27, 2019
.stylelintrc.json Internal: update dependencies (#671) Feb 20, 2020
CHANGELOG.md Version bump 1.7.1 (#695) Feb 27, 2020
CODE_OF_CONDUCT.md Update code of conduct with Pinterest official one (#682) Feb 24, 2020
LICENSE Initial commit Feb 16, 2018
README.md Update README to reflect GitHub Actions publishing (#634) Jan 21, 2020
babel.config.js Internal: Upgrade react-scripts / babel7 & jest (#592) Nov 27, 2019
dangerfile.js TravisCI (#333) Nov 11, 2018
greenkeeper.json Internal: upgrade gestalt package dependencies (#595) Nov 27, 2019
netlify.toml Fix netlify build (#58) Mar 7, 2018
package.json Internal: Flowtype CSS (#675) Feb 21, 2020
yarn.lock Internal: update yarn.lock file (#687) Feb 25, 2020

README.md

Gestalt

NPM Version Coverage status Greenkeeper badge

Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.

View the full docs or Check out the Gestalt playground

Install

npm i gestalt --save or yarn add gestalt

Usage

Gestalt exports each component as ES6 modules and a single, precompiled CSS file:

import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';

That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS.

Development

Gestalt is a multi-project monorepo. The docs, components and integration tests are all organized as separate packages that share similar tooling.

Install project dependencies and run tests:

yarn
yarn test

Build and watch Gestalt & run the docs server:

yarn start

Visit http://localhost:3000/ and click on a component to view the docs.

Using the Masonry playground:

cd test && yarn start
open "http://localhost:3001/Masonry"

Running Masonry's integration tests. This will leave lots of Firefox processes hanging around, so please be warned.

./run_integration_tests

Codemods

When a release will cause breaking changes — in usage or in typing — we provide a codemod to ease the upgrade process. Codemods are organized by release in /packages/gestalt-codemods. We recommend using jscodeshift to upgrade.

Usage:

Clone the Gestalt repo locally if you haven't already. Run the relevant codemod(s) in the relevant directory of your repo (not the Gestalt repo): anywhere the component to be updated is used. Example usage for a codebase using Flow:

yarn codemod --parser=flow -t={relative/path/to/codemod} relative/path/to/your/code

For a dry run to see what the changes will be, add the -d (dry run) and -p (print output) flags (pipe stdout to a file for easier inspection if you like).

Releasing

If you haven’t already, you’ll first need to create an npm account. Once you've done that you can setup your username and email in Yarn using yarn login.

The following outlines our release process:

  1. Checkout a new branch.
  2. Bump package version in packages/gestalt/package.json & update CHANGELOG.md.
  3. Open a pull request with the new version and land that in master.
  4. Draft a new release from the tag at https://github.com/pinterest/gestalt/releases. GitHub Actions will automatically publish to npm and GitHub pages.

Typescript Support

Install the DefinitelyTyped definitions.

Install

npm i --save @types/gestalt

or

yarn add @types/gestalt

You can’t perform that action at this time.