Merge branch 'pinterest:master' into dynamic-heights-unit-test-overlap

Author: JosAnGoCa

.github/pr-title-checker-config.json

@@ -11,7 +11,7 @@
       "ESLint plugin: ",
       "Tokens: "
     ],
-    "regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|IconCompact|Image|Indicator|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverEducational|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
+    "regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|IconCompact|Image|Indicator|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverMessage|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
     "regexpFlags": "",
     "ignoreLabels": []
   },

CHANGELOG.md

@@ -1,3 +1,135 @@
+## 173.1.1 (Mar 10, 2025)
+
+### Patch
+
+- ChartGraph: Upgrade recharts for ChartGraph to support React 19 ([#4034](https://github.com/pinterest/gestalt/pull/4034)) - [Preview link](https://deploy-preview-4034--gestalt.netlify.app?devexample=true)
+
+## 173.1.0 (Mar 10, 2025)
+
+### Minor
+
+- Masonry: Fix Multi-Column Module Positioning Bug on Dynamic Heights V2 ([#4033](https://github.com/pinterest/gestalt/pull/4033)) - [Preview link](https://deploy-preview-4033--gestalt.netlify.app?devexample=true)
+
+## 173.0.0 (Mar 8, 2025)
+
+### Major
+
+- PopoverMessage: renamed PopoverEducational to PopoverMessage + support to `type=education` and `type=notification` ([#4032](https://github.com/pinterest/gestalt/pull/4032)) - [Preview link](https://deploy-preview-4032--gestalt.netlify.app?devexample=true)
+
+## 172.14.2 (Mar 7, 2025)
+
+### Patch
+
+- ChartGraph: padding adjusments + example fixes ([#4030](https://github.com/pinterest/gestalt/pull/4030)) - [Preview link](https://deploy-preview-4030--gestalt.netlify.app?devexample=true)
+
+## 172.14.1 (Mar 7, 2025)
+
+### Patch
+
+- Revert "Masonry: Fix Multi-Column Module Positioning Bug on Dynamic H… ([#4031](https://github.com/pinterest/gestalt/pull/4031)) - [Preview link](https://deploy-preview-4031--gestalt.netlify.app?devexample=true)
+
+## 172.14.0 (Mar 6, 2025)
+
+### Minor
+
+- Masonry: Flexible width items ([#3993](https://github.com/pinterest/gestalt/pull/3993)) - [Preview link](https://deploy-preview-3993--gestalt.netlify.app?devexample=true)
+
+## 172.13.3 (Mar 6, 2025)
+
+### Patch
+
+- Masonry: Fix Multi-Column Module Positioning Bug on Dynamic Heights V2 and Optimize Height Recalculation ([#4029](https://github.com/pinterest/gestalt/pull/4029)) - [Preview link](https://deploy-preview-4029--gestalt.netlify.app?devexample=true)
+
+## 172.13.2 (Mar 5, 2025)
+
+### Patch
+
+- ChartGraph: fix time series interval and padding issues ([#4028](https://github.com/pinterest/gestalt/pull/4028)) - [Preview link](https://deploy-preview-4028--gestalt.netlify.app?devexample=true)
+
+## 172.13.1 (Mar 5, 2025)
+
+### Patch
+
+- ChartGraph: document is not defined issue ([#4027](https://github.com/pinterest/gestalt/pull/4027)) - [Preview link](https://deploy-preview-4027--gestalt.netlify.app?devexample=true)
+
+## 172.13.0 (Mar 5, 2025)
+
+### Minor
+
+- ButtonToggle: color picker supports custom colors ([#4025](https://github.com/pinterest/gestalt/pull/4025)) - [Preview link](https://deploy-preview-4025--gestalt.netlify.app?devexample=true)
+
+## 172.12.0 (Mar 5, 2025)
+
+### Minor
+
+- ChartGraph, TileData, TagData: support neutral dataviz color & opacity ([#4026](https://github.com/pinterest/gestalt/pull/4026)) - [Preview link](https://deploy-preview-4026--gestalt.netlify.app?devexample=true)
+
+## 172.11.0 (Mar 4, 2025)
+
+### Minor
+
+- Internal: Compact Icon Swap ([#4010](https://github.com/pinterest/gestalt/pull/4010)) - [Preview link](https://deploy-preview-4010--gestalt.netlify.app?devexample=true)
+
+## 172.10.8 (Mar 3, 2025)
+
+### Patch
+
+- BannerCallout: Revert BannerCallout: message width adjustments ([#4007](https://github.com/pinterest/gestalt/pull/4007)) - [Preview link](https://deploy-preview-4007--gestalt.netlify.app?devexample=true) ([#4024](https://github.com/pinterest/gestalt/pull/4024)) - [Preview link](https://deploy-preview-4024--gestalt.netlify.app?devexample=true)
+
+## 172.10.7 (Mar 3, 2025)
+
+### Patch
+
+- TapAreaLink: support to `title` prop ([#4022](https://github.com/pinterest/gestalt/pull/4022)) - [Preview link](https://deploy-preview-4022--gestalt.netlify.app?devexample=true)
+
+## 172.10.6 (Mar 3, 2025)
+
+### Patch
+
+- Internal: Upgrade mui-material ([#4023](https://github.com/pinterest/gestalt/pull/4023)) - [Preview link](https://deploy-preview-4023--gestalt.netlify.app?devexample=true)
+
+## 172.10.5 (Feb 28, 2025)
+
+### Patch
+
+- Image, Video: if image or track `src` is empty string "" then set as undefined ([#4013](https://github.com/pinterest/gestalt/pull/4013)) - [Preview link](https://deploy-preview-4013--gestalt.netlify.app?devexample=true)
+
+## 172.10.4 (Feb 28, 2025)
+
+### Patch
+
+- Popover: remove border options ([#4020](https://github.com/pinterest/gestalt/pull/4020)) - [Preview link](https://deploy-preview-4020--gestalt.netlify.app?devexample=true)
+
+## 172.10.3 (Feb 28, 2025)
+
+### Patch
+
+- DateField, DateRange: upgrade @mui/x-date-pickers to 7.27.2 ([#4019](https://github.com/pinterest/gestalt/pull/4019)) - [Preview link](https://deploy-preview-4019--gestalt.netlify.app?devexample=true)
+
+## 172.10.2 (Feb 28, 2025)
+
+### Patch
+
+- Masonry: Code cleanup and new test for masonry testing page ([#4014](https://github.com/pinterest/gestalt/pull/4014)) - [Preview link](https://deploy-preview-4014--gestalt.netlify.app?devexample=true)
+
+## 172.10.1 (Feb 27, 2025)
+
+### Patch
+
+- DateField: fix to exclude more (unrecognized) attributes to reach input html ([#4018](https://github.com/pinterest/gestalt/pull/4018)) - [Preview link](https://deploy-preview-4018--gestalt.netlify.app?devexample=true)
+
+## 172.10.0 (Feb 27, 2025)
+
+### Minor
+
+- Button, ButtonLink: Fixing VR height ([#4005](https://github.com/pinterest/gestalt/pull/4005)) - [Preview link](https://deploy-preview-4005--gestalt.netlify.app?devexample=true)
+
+## 172.9.6 (Feb 27, 2025)
+
+### Patch
+
+- DateField: upgrade dependency to 7.0.0 ([#4009](https://github.com/pinterest/gestalt/pull/4009)) - [Preview link](https://deploy-preview-4009--gestalt.netlify.app?devexample=true)
+
 ## 172.9.5 (Feb 26, 2025)
 
 ### Patch

docs/docs-components/PatternBarFill.tsx

@@ -15,14 +15,23 @@ type DataVisualizationColors =
   | '09'
   | '10'
   | '11'
-  | '12';
+  | '12'
+  | 'neutral';
 
 export const useHexColor: () => (arg1: DataVisualizationColors) => string = () => {
   const { colorSchemeName } = useColorScheme();
-  return (vizColor: DataVisualizationColors) =>
-    colorSchemeName === 'lightMode'
+
+  return (vizColor: DataVisualizationColors) => {
+    if (vizColor === 'neutral') {
+      return colorSchemeName === 'lightMode'
+        ? lightColorDesignTokens['color-background-chartgraph-neutral']
+        : darkColorDesignTokens['color-background-chartgraph-neutral'];
+    }
+
+    return colorSchemeName === 'lightMode'
       ? lightColorDesignTokens[`color-data-visualization-${vizColor}`]
       : darkColorDesignTokens[`color-data-visualization-${vizColor}`];
+  };
 };
 
 export default function PatternBarFill() {

docs/docs-components/data/components.tsx

@@ -53,7 +53,7 @@ import NumberField from '../../graphics/general/NumberField.svg';
 import OverlayPanel from '../../graphics/general/OverlayPanel.svg';
 import PageHeader from '../../graphics/general/PageHeader.svg';
 import Popover from '../../graphics/general/Popover.svg';
-import PopoverEducational from '../../graphics/general/PopoverEducational.svg';
+import PopoverMessage from '../../graphics/general/PopoverMessage.svg';
 import Pulsar from '../../graphics/general/Pulsar.svg';
 import RadioGroup from '../../graphics/general/RadioGroup.svg';
 import SearchField from '../../graphics/general/SearchField.svg';
@@ -1818,28 +1818,21 @@ const componentData: ReadonlyArray<ComponentData> = [
           mobileAdaptive: 'planned',
           responsive: 'ready',
           status: 'ready',
-          knownIssues: [
-            {
-              title: 'Incorrect positioning and dimensions',
-              description:
-                'Popover accumulates many known issues. It is a custom built component. We are in the process of exploring replacing it with a battle-tested third-party library. Check the linked document to see if your issue is already documented.',
-              internalDocUrl: 'http://pinch.pinadmin.com/popover_history',
-            },
-          ],
         },
       },
     },
   },
   {
-    id: 'PopoverEducational',
+    id: 'PopoverMessage',
     platform: {
       web: {
-        name: 'PopoverEducational',
+        alias: ['PopoverEducational', 'PopoverNotification'],
+        name: 'PopoverMessage',
         visual: {
-          svg: <PopoverEducational />,
+          svg: <PopoverMessage />,
         },
         description:
-          'PopoverEducational is a floating container that introduces users to elements on the screen. Used for education or onboarding experiences.',
+          'PopoverMessage is a floating container that introduces users to elements on the screen. Used for education or onboarding experiences.',
         category: ['Help and guidance'],
         status: {
           accessible: {
@@ -1853,20 +1846,6 @@ const componentData: ReadonlyArray<ComponentData> = [
           figmaStatus: 'ready',
           responsive: 'ready',
           status: 'ready',
-          knownIssues: [
-            {
-              title: 'Caret misalignment',
-              description:
-                "PopoverEducational's caret might appear misaligned when positioned below the element of reference.",
-              internalDocUrl: 'http://pinch.pinadmin.com/popover_history',
-            },
-            {
-              title: 'Incorrect positioning and dimensions',
-              description:
-                'PopoverEducational is built on top of Popover. Popover accumulates many known issues. It is a custom built component. We are in the process of exploring replacing it with a battle-tested third-party library. Check the linked document to see if your issue is already documented.',
-              internalDocUrl: 'http://pinch.pinadmin.com/popover_history',
-            },
-          ],
         },
       },
     },

docs/docs-components/siteIndex.ts

@@ -166,7 +166,7 @@ const siteIndex: readonly [siteIndexType, ...siteIndexType[]] = [
       'PageHeader',
       'Pog',
       'Popover',
-      'PopoverEducational',
+      'PopoverMessage',
       'Pulsar',
       'RadioGroup',
       'SearchField',

docs/examples/chartgraph/doColor.tsx

@@ -39,6 +39,15 @@ export default function Example() {
         xAxisBottom: ['auto', 'auto'],
       }}
       tickFormatter={{
+        xAxisBottom: (date, index) => {
+          if (index % 2 === 0) {
+            return `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
+              date,
+            )}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`;
+          }
+          return '';
+        },
+
         timeseries: (date) =>
           `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
             date,

docs/examples/chartgraph/doLimit.tsx

@@ -17,7 +17,6 @@ export default function Example() {
     { name: new Date(2023, 8, 8).getTime(), 'Paid': 400, 'Organic': 400 },
     { name: new Date(2023, 9, 8).getTime(), 'Paid': 1005, 'Organic': 500 },
     { name: new Date(2023, 10, 8).getTime(), 'Paid': 400, 'Organic': 550 },
-    { name: new Date(2023, 11, 8).getTime(), 'Paid': 300, 'Organic': 700 },
   ];
 
   return (
@@ -39,6 +38,14 @@ export default function Example() {
       }}
       tickFormatter={{
         yAxisLeft: (value) => `${value / 1000}K`,
+        xAxisBottom: (date, index) => {
+          if (index % 2 === 0) {
+            return `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
+              date,
+            )}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`;
+          }
+          return '';
+        },
         timeseries: (date) =>
           `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
             date,

docs/examples/chartgraph/doSameColor.tsx

@@ -39,6 +39,14 @@ export default function Example() {
         xAxisBottom: ['auto', 'auto'],
       }}
       tickFormatter={{
+        xAxisBottom: (date, index) => {
+          if (index % 2 === 0) {
+            return `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
+              date,
+            )}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`;
+          }
+          return '';
+        },
         yAxisLeft: (value) => `${value / 1000}K`,
         timeseries: (date) =>
           `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(

docs/examples/chartgraph/dontLimit.tsx

@@ -83,13 +83,6 @@ export default function Example() {
       'Earned': 100000,
       'Converted': 7000000,
     },
-    {
-      name: new Date(2023, 11, 8).getTime(),
-      'Paid 10% per click on average': 3000000,
-      'Organic': 7000000,
-      'Earned': 200000,
-      'Converted': 3000000,
-    },
   ];
 
   return (
@@ -113,6 +106,15 @@ export default function Example() {
         xAxisBottom: ['auto', 'auto'],
       }}
       tickFormatter={{
+        xAxisBottom: (date, index) => {
+          if (index % 2 === 0) {
+            return `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
+              date,
+            )}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`;
+          }
+          return '';
+        },
+
         timeseries: (date) =>
           `${new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(date)}`,
       }}