[core] Add 7.13.0 changelog for GitHub

changelog/7.13.0.md

@@ -0,0 +1,166 @@
+[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-13-0)
+
+## Container queries support in Grid
+
+You can now use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
+in [Grid](https://mantine.dev/core/grid) component. With container queries, all responsive values
+are adjusted based on the container width, not the viewport width.
+
+Example of using container queries. To see how the grid changes, resize the root element
+of the demo with the resize handle located at the bottom right corner of the demo:
+
+```tsx
+import { Grid } from '@mantine/core';
+
+function Demo() {
+  return (
+    // Wrapper div is added for demonstration purposes only,
+    // it is not required in real projects
+    <div style={{ resize: 'horizontal', overflow: 'hidden', maxWidth: '100%' }}>
+      <Grid
+        type="container"
+        breakpoints={{ xs: '100px', sm: '200px', md: '300px', lg: '400px', xl: '500px' }}
+      >
+        <Col span={{ base: 12, md: 6, lg: 3 }}>1</Col>
+        <Col span={{ base: 12, md: 6, lg: 3 }}>2</Col>
+        <Col span={{ base: 12, md: 6, lg: 3 }}>3</Col>
+        <Col span={{ base: 12, md: 6, lg: 3 }}>4</Col>
+      </Grid>
+    </div>
+  );
+}
+```
+
+## CompositeChart component
+
+New [CompositeChart](https://mantine.dev/charts/composite-chart) component allows using `Line`, `Area` and `Bar` charts together in a single chart:
+
+```tsx
+import { CompositeChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <CompositeChart
+      h={300}
+      data={data}
+      dataKey="date"
+      unit="$"
+      maxBarWidth={30}
+      series={[
+        { name: 'Tomatoes', color: 'rgba(18, 120, 255, 0.2)', type: 'bar' },
+        { name: 'Apples', color: 'red.8', type: 'line' },
+        { name: 'Oranges', color: 'yellow.8', type: 'area' },
+      ]}
+    />
+  );
+}
+```
+
+## Points labels
+
+[LineChart](https://mantine.dev/charts/line-chart) and [AreaChart](https://mantine.dev/charts/area-chart) now support `withPointLabels` prop to display labels on data points:
+
+```tsx
+import { LineChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <LineChart
+      h={300}
+      data={data}
+      dataKey="date"
+      withLegend
+      withPointLabels
+      series={[
+        { name: 'Apples', color: 'indigo.6' },
+        { name: 'Oranges', color: 'blue.6' },
+      ]}
+    />
+  );
+}
+```
+
+[ScatterChart](https://mantine.dev/charts/scatter-chart) also supports point labels, but also allows to control which axis should display labels with `pointLabels` prop:
+
+```tsx
+import { ScatterChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <ScatterChart
+      h={350}
+      data={data}
+      dataKey={{ x: 'age', y: 'BMI' }}
+      xAxisLabel="Age"
+      yAxisLabel="BMI"
+      pointLabels="x"
+    />
+  );
+}
+```
+
+## BarChart: Mixed stacks
+
+You can now control how [BarChart](https://mantine.dev/charts/bar-chart) series are stacked by setting `stackId` property in series object:
+
+```tsx
+import { BarChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      series={[
+        { name: 'Smartphones', color: 'violet.6', stackId: 'a' },
+        { name: 'Laptops', color: 'blue.6', stackId: 'b' },
+        { name: 'Tablets', color: 'teal.6', stackId: 'b' },
+      ]}
+    />
+  );
+}
+```
+
+## BarChart: Minimum bar size
+
+[BarChart](https://mantine.dev/charts/bar-chart) now supports `minBarSize` prop to set the minimum size of the bar in px:
+
+```tsx
+import { BarChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      withLegend
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+```
+
+## Help Center updates
+
+- New [How to integrate custom input with use-form hook?](https://help.mantine.dev/q/custom-input-use-form) question
+- New [Can I remove MultiSelect placeholder when the component has selected values?](https://help.mantine.dev/q/multiselect-value-placeholder) question
+- New [How can I load fonts in Remix?](https://help.mantine.dev/q/remix-load-fonts) question
+- New [My styles are overridden by Mantine components styles, what should I do?](https://help.mantine.dev/q/styles-order) question
+- New [Why I cannot use one polymorphic component in component prop of another polymorphic component?](https://help.mantine.dev/q/polymorphic-in-polymorphic) question
+- New [Can I use an array of strings as a list in use-form?](https://help.mantine.dev/q/list-of-strings-in-use-form) question
+
+## Other changes
+
+- New demo has been added to [Chip](https://mantine.dev/core/chip) component with an example of how to deselect radio chip
+- [BarChart](https://mantine.dev/charts/bar-chart) now supports `maxBarWidth` prop to set the maximum width of each bar in px