What's new 🎉
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.
Find information below on all new and updated components by version number, as well as available codemods to help upgrade between versions.
148.0.3 (May 21, 2024)
Patch
- Internal: playwright TypeScript fixup (
Patch
- Internal: migrate playwright tests to TypeScript (
Patch
- Internal: Remove codemod for gestalt version upgrade (
Major
- Internal: TypeScript Migration (
Minor
- Masonry: Bug fix, "basic" layout not left aligning (
Patch
- Docs: Removed deprecated links from accessibility (
Patch
- Internal: change runs-on from macos-12 to ubuntu-latest (
Patch
- Internal: Fix some issues caught in TypeScript branch (
Patch
- Internal: add temporary files to ignore lists (
Patch
- Popover: Flip direction after shifting (
Patch
- Internal: remove
.flowtest.js
(Patch
- Internal: Upgrade to Node 20 (
Patch
- SideNavigation: Use TransitionEvent (
Patch
- Internal: Upgrade GitHub actions to v4 (
Patch
- Docs: Update Android component status to reflect the latest (
Patch
- Tag: fix padding in mobile browsers in button tag (
Patch
- Masonry: Fix heights init (
Minor
- Tokens: add declaration file for constant tokens (
Patch
- Icon: added cloud-server-icon (
Patch
- Masonry: Remove heights cache (
Minor
- Accordion: support borderStyles prop (
Minor
- Tokens: support .ts outputs for web (
Patch
- DatePicker: upgraded react-datepicker to 6.9.0 (
Patch
- Masonry: Update element height on reflow (MasonryV2) (
Patch
- Internal: remove dead dev dependency (
Patch
- Masonry: Enable multiple multi column items, second take (
Patch
- Dropdown: fix ts file bug (
Patch
- Revert "Masonry: Enable multiple multi column items on layout logic (… (
Patch
- Docs: Update iOS component status to reflect the latest (
Minor
- Icon: adding 62 new icons (TEST PR for perf testing) (
Minor
- Icon: more Icons for Android (
Patch
- Masonry: Correctly set width when multi column item is set to scale to fit (
Patch
- Docs: RTL icons update (
Patch
- Masonry: Enable multiple multi column items on layout logic (
Patch
- Tag: Fix disabled tag spacing (
Patch
- Docs: updated broken/deprecated links to drive links (
Patch
- Masonry: Scroll throttle + memo component (MasonryV2) (
Patch
- Masonry: Enable n-column modules on first row (
Patch
- Popover: Add experimental overflow prop (
Patch
- SideNavigation: add type fixes based on component prop definition (
Major
- Icon: deprecate "pincode" icon (
Patch
- Icon: New icon for search by image (
Patch
- Masonry: Implement graph early bailout feature (
Patch
- Docs: Newsletter March (
Minor
- ComboBox: Use Popover v2 (
Patch
- Icon: Pinterest logo change (
Patch
- Masonry: Fix incorrect node to solve graph positioning for two column items (
Minor
- TextArea, NumberField, SelectList: Adding new datatestids (
Patch
- Masonry: Update useElementWidth for MasonryV2 (
Patch
- Icon: Added icon to Android folder (
Minor
- Masonry: Experimental Masonry Refactor (
Minor
- Revert "ComboBox: Use Popover v2" (
Patch
- PageHeader: update heading to BreakAll to split on long titles (
Patch
- Internal: Bump undici from 5.28.3 to 5.28.4 (
Patch
- Internal: replace interpolated strings with design tokens constants. (
Patch
- Docs: Contributions (
Minor
- ComboBox: Use Popover v2 (
Patch
- Docs: Update redirects.js (
Patch
- Internal: added Stylelint rule to prevent Gestalt token errors (
Minor
- HelpButton: Use Popover v2 (
Patch
- Docs: Update contributions image (
Patch
- Docs: Design contributions updates (
Minor
- OverlayPanel: Use ConfirmationPopover v2 #3501 (
Patch
- SideNavigation: Fix scrollbar clipping in collapsed state (
Minor
- PopoverEducational: Release v2 (
Patch
- Tokens: remove dead code in color token (
Patch
- TileData: Fixing width Overlap issues (
Patch
- Masonry: Multi column feature, fix first row items position when batch is small (
Patch
- SideNavigation: Display scrollbar only when content overflows (
Patch
- Internal: Bump express from 4.18.2 to 4.19.2 (
Patch
- Masonry: seeded random values for deterministic integration tests (
Patch
- Docs: Get help and Training content updates (
Patch
- Docs: Figma embed fixes (
Patch
- Masonry: Positions tcm correctly for last item on first row (
Patch
- PopoverEducational: fix zIndex bug + add example (
Patch
- Internal: Enable ESLint rule react/jsx-sort-props except for codemod folder (
Patch
- Masonry: Render tcm in position on first line (
Patch
- Masonry: Revert splitIndex change (
Patch
- Masonry: Update scroll performance test (
Patch
- Masonry: Adds a data attribute for two column module on ssr (
Minor
- SideNavigation: Collapsible SideNavigation (
Patch
- Internal: testing data-id for HelixBot to detect page title (
Minor
- Icon: Add arrow double icons (
Patch
- Masonry: Enable corrent positioning of two column module when initial heights are 0 (
Minor
- Tokens: theming folders and config for automatic token builds (
Minor
- ESLint plugin:
only-valid-tokens
(Patch
- Masonry: Enable two column module on secod batch (
Minor
- Dropdown: Add disabled variant (
Patch
- Docs: Fix md page width (
Patch
- Tokens: Refactored tokens style-dictionary build (
Patch
- Button: Fix Font Sizing (
Patch
- Tokens: generate commonJS constant file (
Major
- Internal: migration to token constants (
Patch
- Internal: run all visual snapshots for updated snapshots of components (
Patch
- Internal: Add initial unit test for masonry two column module (
Minor
- TagData: Move to BreakAll (
Patch
- Docs: Newsletter Feb 2024 (
Patch
- TagData: Fix Heights and Captions (
Patch
- TextField: Update Docs examples and cleanup (
Patch
- Masonry: Fix initial flash for two-column mode (
Patch
- Tokens: set
outputReferences"
145.4.1 (Feb 29, 2024)
Patch
- Tokens: organized packages/gestalt-design-tokens/config.json & packages/gestalt-design-tokens/build.js + constants.js file (
Minor
- TextField: Adding new autocomplete strings (
Patch
- SelectList, SearchField: fix token (
Patch
- Internal: bump es5-ext from 0.10.61 to 0.10.63 (
Patch
- Popover: Remove autofocusing dismiss button (
Patch
- SelectList: fix for hidden arrow-down Icon (
Patch
- RadioGroup, Accordion, Datapoint, Dropdown: Fixing badge type (
Patch
- Tokens: add original values to JSON and extend tokens table for extended metadata (
Minor
- Tokens: some cleanups to increase token coverage (
Minor
- TextField: Add dataTestId prop (
Patch
- Popover, Dropdown, ComboBox, Tooltip: Disable focus trap for Tooltip + fixed a11y in Dropdown, ComboBox (
Patch
- ComboBox, Dropdown, HelpButton: Disable internal Popover portal (
Minor
- ColorSchemeProvider: deprecated all legacy colors from provider + tokenized all legacy colors in components (
Major
- Revert "ComboBox, Dropdown, HelpButton, PopoverEducational: Release v… (
Major
- ColorSchemeProvider, Avatar, Tag, TextField: deprecate legacy colors from provider + tokenize background and border colors (
Minor
- DatePicker: tokenize colors and other internal styles (
Major
- Textfield, RadioGroup, SearchField: implement background color tokens in form fields and some code cleanups (
Patch
- ButtonLink: fix on darkmode colors + more documentation (
Minor
- Tag: Change tag contents to break-all (
- ButtonLink: fix on darkmode colors + more documentation (
- Textfield, RadioGroup, SearchField: implement background color tokens in form fields and some code cleanups (
- DatePicker: tokenize colors and other internal styles (
- ColorSchemeProvider, Avatar, Tag, TextField: deprecate legacy colors from provider + tokenize background and border colors (
- Revert "ComboBox, Dropdown, HelpButton, PopoverEducational: Release v… (
- ColorSchemeProvider: deprecated all legacy colors from provider + tokenized all legacy colors in components (
- ComboBox, Dropdown, HelpButton: Disable internal Popover portal (
- Popover, Dropdown, ComboBox, Tooltip: Disable focus trap for Tooltip + fixed a11y in Dropdown, ComboBox (
- TextField: Add dataTestId prop (
- Tokens: some cleanups to increase token coverage (
- Tokens: add original values to JSON and extend tokens table for extended metadata (
- RadioGroup, Accordion, Datapoint, Dropdown: Fixing badge type (
- SelectList: fix for hidden arrow-down Icon (
- Popover: Remove autofocusing dismiss button (
- Internal: bump es5-ext from 0.10.61 to 0.10.63 (
- SelectList, SearchField: fix token (
- TextField: Adding new autocomplete strings (
- Tokens: set
- Masonry: Fix initial flash for two-column mode (
- TextField: Update Docs examples and cleanup (
- TagData: Fix Heights and Captions (
- Docs: Newsletter Feb 2024 (
- TagData: Move to BreakAll (
- Internal: Add initial unit test for masonry two column module (
- Internal: run all visual snapshots for updated snapshots of components (
- Internal: migration to token constants (
- Tokens: generate commonJS constant file (
- Button: Fix Font Sizing (
- Tokens: Refactored tokens style-dictionary build (
- Docs: Fix md page width (
- Dropdown: Add disabled variant (
- Masonry: Enable two column module on secod batch (
- ESLint plugin:
- Tokens: theming folders and config for automatic token builds (
- Masonry: Enable corrent positioning of two column module when initial heights are 0 (
- Icon: Add arrow double icons (
- Internal: testing data-id for HelixBot to detect page title (
- SideNavigation: Collapsible SideNavigation (
- Masonry: Adds a data attribute for two column module on ssr (
- Masonry: Update scroll performance test (
- Masonry: Revert splitIndex change (
- Masonry: Render tcm in position on first line (
- Internal: Enable ESLint rule react/jsx-sort-props except for codemod folder (
- PopoverEducational: fix zIndex bug + add example (
- Masonry: Positions tcm correctly for last item on first row (
- Docs: Figma embed fixes (
- Docs: Get help and Training content updates (
- Masonry: seeded random values for deterministic integration tests (
- Internal: Bump express from 4.18.2 to 4.19.2 (
- SideNavigation: Display scrollbar only when content overflows (
- Masonry: Multi column feature, fix first row items position when batch is small (
- TileData: Fixing width Overlap issues (
- Tokens: remove dead code in color token (
- PopoverEducational: Release v2 (
- SideNavigation: Fix scrollbar clipping in collapsed state (
- OverlayPanel: Use ConfirmationPopover v2 #3501 (
- Docs: Design contributions updates (
- Docs: Update contributions image (
- HelpButton: Use Popover v2 (
- Internal: added Stylelint rule to prevent Gestalt token errors (
- Docs: Update redirects.js (
- ComboBox: Use Popover v2 (
- Docs: Contributions (
- Internal: replace interpolated strings with design tokens constants. (
- Internal: Bump undici from 5.28.3 to 5.28.4 (
- PageHeader: update heading to BreakAll to split on long titles (
- Revert "ComboBox: Use Popover v2" (
- Masonry: Experimental Masonry Refactor (
- Icon: Added icon to Android folder (
- Masonry: Update useElementWidth for MasonryV2 (
- TextArea, NumberField, SelectList: Adding new datatestids (
- Masonry: Fix incorrect node to solve graph positioning for two column items (
- Icon: Pinterest logo change (
- ComboBox: Use Popover v2 (
- Docs: Newsletter March (
- Masonry: Implement graph early bailout feature (
- Icon: New icon for search by image (
- Icon: deprecate "pincode" icon (
- SideNavigation: add type fixes based on component prop definition (
- Popover: Add experimental overflow prop (
- Masonry: Enable n-column modules on first row (
- Masonry: Scroll throttle + memo component (MasonryV2) (
- Docs: updated broken/deprecated links to drive links (
- Tag: Fix disabled tag spacing (
- Masonry: Enable multiple multi column items on layout logic (
- Docs: RTL icons update (
- Masonry: Correctly set width when multi column item is set to scale to fit (
- Icon: more Icons for Android (
- Icon: adding 62 new icons (TEST PR for perf testing) (
- Docs: Update iOS component status to reflect the latest (
- Revert "Masonry: Enable multiple multi column items on layout logic (… (
- Dropdown: fix ts file bug (
- Masonry: Enable multiple multi column items, second take (
- Internal: remove dead dev dependency (
- Masonry: Update element height on reflow (MasonryV2) (
- DatePicker: upgraded react-datepicker to 6.9.0 (
- Tokens: support .ts outputs for web (
- Accordion: support borderStyles prop (
- Masonry: Remove heights cache (
- Icon: added cloud-server-icon (
- Tokens: add declaration file for constant tokens (
- Masonry: Fix heights init (
- Tag: fix padding in mobile browsers in button tag (
- Docs: Update Android component status to reflect the latest (
- Internal: Upgrade GitHub actions to v4 (
- SideNavigation: Use TransitionEvent (
- Internal: Upgrade to Node 20 (
- Internal: remove
- Popover: Flip direction after shifting (
- Internal: add temporary files to ignore lists (
- Internal: Fix some issues caught in TypeScript branch (
- Internal: change runs-on from macos-12 to ubuntu-latest (
- Docs: Removed deprecated links from accessibility (
- Masonry: Bug fix, "basic" layout not left aligning (
- Internal: TypeScript Migration (
- Internal: Remove codemod for gestalt version upgrade (
- Internal: migrate playwright tests to TypeScript (