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: Use octokit/graphql-action@v2.0.0 (#867) May 18, 2020
docs AvatarPair: add component (#880) May 27, 2020
flow-typed/npm Internal: update flow-typed definitions (#873) May 19, 2020
packages Version bump: v1.57.1 May 28, 2020
scripts Internal: Remove unused boxperf.js (#868) May 18, 2020
.editorconfig Initial commit Feb 16, 2018
.eslintignore Internal: upgrade gestalt package dependencies (#595) Nov 27, 2019
.eslintrc.json Internal: enable + enforce flow strict on every file (#841) May 5, 2020
.flowconfig Internal: enable + enforce flow strict on every file (#841) May 5, 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 Form fields: Add "lg" size option (#713) Mar 5, 2020
CHANGELOG.md Version bump: v1.57.1 May 28, 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 Docs: Remove code coverage status badge (#862) May 18, 2020
babel.config.js Internal: enable + enforce flow strict on every file (#841) May 5, 2020
dangerfile.js Internal: enable + enforce flow strict on every file (#841) May 5, 2020
greenkeeper.json Internal: upgrade gestalt package dependencies (#595) Nov 27, 2019
netlify.toml Fix netlify build (#58) Mar 7, 2018
package.json Internal: fix yarn watch keeps appending CSS (#877) May 22, 2020
yarn.lock Internal: fix yarn watch keeps appending CSS (#877) May 22, 2020

README.md

Gestalt

NPM Version

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 and components 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.

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.

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

Every commit to master performs a release. As a reviewer, ensure the correct label is attached to every PR. Please follow semantic versioning.

  • patch release: documentation updates / spelling mistakes in code / internal scripts
  • minor release: add component / add component props / API change with codemod
  • major release: backwards incompatible API change without codemod

Example PR title: Avatar: Add outline prop

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.