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.
177.0.0 (Apr 10, 2025)
Major
- Internal: prep work for final legacy open source repo (
Patch
- Docs: fix in redirect (
Patch
- Docs: remove icons page (
Minor
- Icon: Add 13 new icons [GESTALT-8752] (
Patch
- Button: Fixing docs (
Patch
- Masonry: Flexible modules unit tests and integration tests (
Patch
- Masonry: Add unit test to verify the overlap bug on dynamic heights v2 is fixed (
Patch
- Masonry: Add integration test for dynamic heights v2 and masonry testing page (
Major
- Heading: deprecating size 500, moving 500 to 600 and 600 to 700 (
Minor
- Button: new button social (
Minor
- Masonry: Enable dynamic batches (
Patch
- Internal: fixing codemods (
Minor
- Toast: Compact icons (
Patch
- Internal: fixes dark mode adding DesignTokensProvider (
Patch
- Docs: cleanup of old pages (
Patch
- Docs: adds DesignTokensProvider to Sandpack code editor (
Patch
- Internal: refactor experimental theme consumption (
Patch
- Docs: refactor to enable CALICO theme from selector in Gestalt Docs (
Patch
- Internal: Bump @babel/helpers from 7.10.4 to 7.27.0 (
Major
- ColorSchemeProvider: Refactor ColorSchemeProvider & separated concerns into DesignTokensProvider (
Patch
- Masonry: Fix the props on Masonry V2 (
Patch
- Masonry: Multi-column position algorithm V2 (
Patch
- SearchGuide: (mWeb) update color variant "11" to match figma in dark mode (
Minor
- AvatarGroupCluster: new component (
Patch
- Masonry: Fix scroll position glitch on load (
Patch
- SearchField: fix rtl in VR bug (
Minor
- Icon: New Icons [GESTALT-8749] (
Patch
- RadioGroup: fix in CSS file for width (
Patch
- Internal: [Snyk] Security upgrade react-cookie from 4.1.1 to 8.0.1 (
Minor
- Tabs: supports large size
size="lg"
(Major
- RadioButton: deprecate component (
Patch
- TileData: removed width and max width definitions (
Patch
- Avatar: updates to verified icon (
Minor
- ChartGraph: added support to custom labels in bars + new ChartGraph.Label (
Patch
- Internal: Bump @babel/runtime from 7.15.4 to 7.26.10 (
Patch
- ChartGraph: Upgrade recharts for ChartGraph to support React 19 (
Minor
- Masonry: Fix Multi-Column Module Positioning Bug on Dynamic Heights V2 (
Major
- PopoverMessage: renamed PopoverEducational to PopoverMessage + support to
type=education
andtype=notification
(Patch
- ChartGraph: padding adjusments + example fixes (
Patch
- Revert "Masonry: Fix Multi-Column Module Positioning Bug on Dynamic H… (
Minor
- Masonry: Flexible width items (
Patch
- Masonry: Fix Multi-Column Module Positioning Bug on Dynamic Heights V2 and Optimize Height Recalculation (
Patch
- ChartGraph: fix time series interval and padding issues (
Patch
- ChartGraph: document is not defined issue (
Minor
- ButtonToggle: color picker supports custom colors (
Minor
- ChartGraph, TileData, TagData: support neutral dataviz color & opacity (
Minor
- Internal: Compact Icon Swap (
Patch
- BannerCallout: Revert BannerCallout
172.10.7 (Mar 3, 2025)
Patch
- TapAreaLink: support to
title
prop (Patch
- Internal: Upgrade mui-material (
Patch
- Image, Video: if image or track
src
is empty string "" then set as undefined (Patch
- Popover: remove border options (
Patch
- DateField, DateRange: upgrade @mui/x-date-pickers to 7.27.2 (
Patch
- Masonry: Code cleanup and new test for masonry testing page (
Patch
- DateField: fix to exclude more (unrecognized) attributes to reach input html (
Minor
- Button, ButtonLink: Fixing VR height (
Patch
- DateField: upgrade dependency to 7.0.0 (
Patch
- Masonry: Fix bug on edge case while using dynamicHeightsV2 (
Patch
- SearchGuide: fix stacking context bug with isolation='isolate' (
Patch
- DateField: upgrade dependency to 6.20.2 (
Patch
- BannerCallout: message width adjustments (
Patch
- SearchGuide: fix border radius in VR image variant (
Minor
- Icon: New Icons [GESTALT-8749] (
Patch
- SegmentedControl: fix VR colors in dark mode (
Patch
- DatePicker: add private prop _overrideRangeDateFix to enable correct logic in date ranges (
Patch
- Link: fix a warning from accessibility pause in AccessibilityLinkActionIcon (
Patch
- Internal: change v.pinimg.com to v1.pinimg.com (
Patch
- IconButton: fix focus ring on visible in VR (
Patch
- SearchGuide: adjust selected state in Classic (
Minor
- Button, ButtonLink: support lineClamp (
Minor
- Box, Flex: support to
xl
,xxl
,xxxl
breakpoints (Patch
- SearchGuide: fix border radius in VR image variant (
Patch
- ComboBox: fix placeholder width when Tags are used (
Patch
- TapAreaLink: fix duplication in aria label for target blank (
Patch
- SearchField: VR API fixes (
Minor
- SearchGuide: support to gradient background + overall fixes (
Minor
- Icon: New and Updated Icons [Gestalt-8748] (
Minor
- SearchField: support tabIndex (
Minor
- SearchField: support readOnly (
Patch
- Internal: Revert "Internal
172.2.2 (Feb 6, 2025)
Patch
- Masonry: Fixing type bug (
Patch
- Checkbox: background fix on VR (
Minor
- RadioGroup: VR changes (
Minor
- Masonry: Adding Window type to scroll container (
Patch
- BannerOverlay: fix examples with logo (
Major
- BannerUpsell: VR fixes & title as required (
Minor
- Tabs: support new icon prop #3972 (
Minor
- RadioGroup: VR changes (
Minor
- Spinner, Text, TextUI: add label to Spinner, and id to TextUI and Text #3947 (
Patch
- BannerSlim: adjustments (
Minor
- Dropdown: support to
avatar
(Minor
- BannerUpsell: VR changes (
Patch
- Dropdown: VR changes and overall fixes (
Patch
- Dropdown: VR changes 1/2 (
Minor
- Masonry: Experimental breakpoints for gridSize (
Patch
- Internal: Fix key prop error on Flex Component for React 19 (
Major
- BannerOverlay: VR changes (
Minor
- SearchField: support onClear prop (
Major
- SearchField, DefaultLabelProvider: add default accessibility label for clean input button (
Minor
- Internal: Change React 19 Build (
Patch
- Spinner, BannerSlim, Text, TextUI: revert some changes creating some unexpected resizes in some prod surfaces (
Patch
- Masonry: Fix integration tests (
Patch
- Icon: Add Re-do and Undo to RTL (
Patch
- Internal: renaming Visual Refresh experiment name to snake_case (
Minor
- Button: new variants (
Patch
- DateRange: fix date selection bug when you disable secondary range (
Patch
- DateRange: fix date input border radius when radio group is present (web) (
Patch
- Dropdown: add marginStart to selected check icon (
Patch
- HelpButton: general fixes and VR fixes (
Patch
- BannerSlim: fix (
Patch
- BannerSlim: fix bug with list of children (
Minor
- Spinner, Text, TextUI: add label to Spinner, and id to TextUI and Text (
Patch
- Internal: upgrade "@playwright/test" to 1.49 (
Patch
- BannerSlim: fix <sm breakpoint paddingY (
Patch
- Internal: Revert Revert "Internal
169.0.1 (Jan 16, 2025)
Patch
- Internal: Revert "Internal
169.0.0 (Jan 16, 2025)
Major
- Internal: Upgrade React to 19 (
Patch
- AvatarGroup: fix VR default size bug (
Patch
- AvatarGroup: fix VR default size bug (
- BannerSlim: fix <sm breakpoint paddingY (
- Internal: upgrade "@playwright/test" to 1.49 (
- Spinner, Text, TextUI: add label to Spinner, and id to TextUI and Text (
- BannerSlim: fix bug with list of children (
- BannerSlim: fix (
- HelpButton: general fixes and VR fixes (
- Dropdown: add marginStart to selected check icon (
- DateRange: fix date input border radius when radio group is present (web) (
- DateRange: fix date selection bug when you disable secondary range (
- Button: new variants (
- Internal: renaming Visual Refresh experiment name to snake_case (
- Icon: Add Re-do and Undo to RTL (
- Masonry: Fix integration tests (
- Spinner, BannerSlim, Text, TextUI: revert some changes creating some unexpected resizes in some prod surfaces (
- Internal: Change React 19 Build (
- SearchField, DefaultLabelProvider: add default accessibility label for clean input button (
- SearchField: support onClear prop (
- BannerOverlay: VR changes (
- Internal: Fix key prop error on Flex Component for React 19 (
- Masonry: Experimental breakpoints for gridSize (
- Dropdown: VR changes 1/2 (
- Dropdown: VR changes and overall fixes (
- BannerUpsell: VR changes (
- Dropdown: support to
- BannerSlim: adjustments (
- Spinner, Text, TextUI: add label to Spinner, and id to TextUI and Text #3947 (
- RadioGroup: VR changes (
- Tabs: support new icon prop #3972 (
- BannerUpsell: VR fixes & title as required (
- BannerOverlay: fix examples with logo (
- Masonry: Adding Window type to scroll container (
- RadioGroup: VR changes (
- Checkbox: background fix on VR (
- SearchField: support readOnly (
- SearchField: support tabIndex (
- Icon: New and Updated Icons [Gestalt-8748] (
- SearchGuide: support to gradient background + overall fixes (
- SearchField: VR API fixes (
- TapAreaLink: fix duplication in aria label for target blank (
- ComboBox: fix placeholder width when Tags are used (
- SearchGuide: fix border radius in VR image variant (
- Box, Flex: support to
- Button, ButtonLink: support lineClamp (
- SearchGuide: adjust selected state in Classic (
- IconButton: fix focus ring on visible in VR (
- Internal: change v.pinimg.com to v1.pinimg.com (
- Link: fix a warning from accessibility pause in AccessibilityLinkActionIcon (
- DatePicker: add private prop _overrideRangeDateFix to enable correct logic in date ranges (
- SegmentedControl: fix VR colors in dark mode (
- Icon: New Icons [GESTALT-8749] (
- SearchGuide: fix border radius in VR image variant (
- BannerCallout: message width adjustments (
- DateField: upgrade dependency to 6.20.2 (
- SearchGuide: fix stacking context bug with isolation='isolate' (
- Masonry: Fix bug on edge case while using dynamicHeightsV2 (
- DateField: upgrade dependency to 7.0.0 (
- Button, ButtonLink: Fixing VR height (
- DateField: fix to exclude more (unrecognized) attributes to reach input html (
- Masonry: Code cleanup and new test for masonry testing page (
- DateField, DateRange: upgrade @mui/x-date-pickers to 7.27.2 (
- Popover: remove border options (
- Image, Video: if image or track
- Internal: Upgrade mui-material (
- Internal: Compact Icon Swap (
- ChartGraph, TileData, TagData: support neutral dataviz color & opacity (
- ButtonToggle: color picker supports custom colors (
- ChartGraph: document is not defined issue (
- ChartGraph: fix time series interval and padding issues (
- Masonry: Fix Multi-Column Module Positioning Bug on Dynamic Heights V2 and Optimize Height Recalculation (
- Masonry: Flexible width items (
- Revert "Masonry: Fix Multi-Column Module Positioning Bug on Dynamic H… (
- ChartGraph: padding adjusments + example fixes (
- PopoverMessage: renamed PopoverEducational to PopoverMessage + support to
- Masonry: Fix Multi-Column Module Positioning Bug on Dynamic Heights V2 (
- ChartGraph: Upgrade recharts for ChartGraph to support React 19 (
- Internal: Bump @babel/runtime from 7.15.4 to 7.26.10 (
- ChartGraph: added support to custom labels in bars + new ChartGraph.Label (
- Avatar: updates to verified icon (
- TileData: removed width and max width definitions (
- RadioButton: deprecate component (
- Tabs: supports large size
- Internal: [Snyk] Security upgrade react-cookie from 4.1.1 to 8.0.1 (
- RadioGroup: fix in CSS file for width (
- Icon: New Icons [GESTALT-8749] (
- SearchField: fix rtl in VR bug (
- Masonry: Fix scroll position glitch on load (
- AvatarGroupCluster: new component (
- SearchGuide: (mWeb) update color variant "11" to match figma in dark mode (
- Masonry: Multi-column position algorithm V2 (
- Masonry: Fix the props on Masonry V2 (
- ColorSchemeProvider: Refactor ColorSchemeProvider & separated concerns into DesignTokensProvider (
- Internal: Bump @babel/helpers from 7.10.4 to 7.27.0 (
- Docs: refactor to enable CALICO theme from selector in Gestalt Docs (
- Internal: refactor experimental theme consumption (
- Docs: adds DesignTokensProvider to Sandpack code editor (
- Docs: cleanup of old pages (
- Internal: fixes dark mode adding DesignTokensProvider (
- Toast: Compact icons (
- Internal: fixing codemods (
- Masonry: Enable dynamic batches (
- Button: new button social (
- Heading: deprecating size 500, moving 500 to 600 and 600 to 700 (
- Masonry: Add integration test for dynamic heights v2 and masonry testing page (
- Masonry: Add unit test to verify the overlap bug on dynamic heights v2 is fixed (
- Masonry: Flexible modules unit tests and integration tests (
- Button: Fixing docs (
- Icon: Add 13 new icons [GESTALT-8752] (
- Docs: remove icons page (
- Docs: fix in redirect (