mantinedev/mantine (@mantine/core)
### [`v7.11.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.11.0): 👁️
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.10.2...7.11.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-10-0)
##### withProps function
All Mantine components now have `withProps` static function that can be used to
add default props to the component:
```tsx
import { IMaskInput } from 'react-imask';
import { Button, InputBase } from '@mantine/core';
const LinkButton = Button.withProps({
component: 'a',
target: '_blank',
rel: 'noreferrer',
variant: 'subtle',
});
const PhoneInput = InputBase.withProps({
mask: '+7 (000) 000-0000',
component: IMaskInput,
label: 'Your phone number',
placeholder: 'Your phone number',
});
function Demo() {
return (
<>
{/* You can pass additional props to components created with `withProps` */}
Mantine website
{/* Component props override default props defined in `withProps` */}
);
}
```
##### Avatar initials
[Avatar](https://mantine.dev/core/avatar) component now supports displaying initials with auto generated color based on the given `name` value.
To display initials instead of the default placeholder, set `name` prop
to the name of the person, for example, `name="John Doe"`. If the name
is set, you can use `color="initials"` to generate color based on the name:
```tsx
import { Avatar, Group } from '@mantine/core';
const names = [
'John Doe',
'Jane Mol',
'Alex Lump',
'Sarah Condor',
'Mike Johnson',
'Kate Kok',
'Tom Smith',
];
function Demo() {
const avatars = names.map((name) => );
return {avatars};
}
```
##### BubbleChart component
New [BubbleChart](https://mantine.dev/charts/bubble-chart) component:
```tsx
import { BubbleChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### BarChart waterfall type
[BarChart](https://mantine.dev/charts/bar-chart) component now supports `waterfall` type
which is useful for visualizing changes in values over time:
```tsx
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### LineChart gradient type
[LineChart](https://mantine.dev/charts/line-chart) component now supports `gradient` type
which renders line chart with gradient fill:
```tsx
import { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
`${value}°C`}
/>
);
}
```
##### Right Y axis
[LineChart](https://mantine.dev/charts/line-chart), [BarChart](https://mantine.dev/charts/bar-chart) and [AreaChart](https://mantine.dev/charts/area-chart) components
now support `rightYAxis` prop which renders additional Y axis on the right side of the chart:
```tsx
import { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### RadarChart legend
[RadarChart](https://mantine.dev/charts/radar-chart) component now supports legend:
```tsx
import { RadarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### TagsInput acceptValueOnBlur
[TagsInput](https://mantine.dev/core/tags-input) component behavior has been changed. Now By default,
if the user types in a value and blurs the input, the value is added to the list.
You can change this behavior by setting `acceptValueOnBlur` to `false`. In this case, the value is added
only when the user presses `Enter` or clicks on a suggestion.
```tsx
import { TagsInput } from '@mantine/core';
function Demo() {
return (
<>
);
}
```
##### Transition delay
[Transition](https://mantine.dev/core/transition) component now supports `enterDelay` and `exitDelay` props to delay transition start:
```tsx
import { useState } from 'react';
import { Button, Flex, Paper, Transition } from '@mantine/core';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
{(transitionStyle) => (
setOpened(false)}
style={{ ...transitionStyle, zIndex: 1 }}
>
Click to close
)}
);
}
```
##### Documentation updates
- New [segmented progress](https://mantine.dev/core/progress/#example-progress-with-segments) example has been added to `Progress` component documentation
- [Select](https://mantine.dev/core/select), [TagsInput](https://mantine.dev/core/tags-input) and [MultiSelect](https://mantine.dev/core/multi-select) components documentation now includes additional demo on how to change the dropdown width
- New [DatePicker](https://mantine.dev//dates/date-picker/#exclude-dates) example for `excludeDate` prop
##### Other changes
- [Pagination](https://mantine.dev/core/pagination) component now supports `hideWithOnePage` prop which hides pagination when there is only one page
- [Spoiler](https://mantine.dev/core/spoiler) component now supports controlled expanded state with `expanded` and `onExpandedChange` props
- [Burger](https://mantine.dev/core/burger) component now supports `lineSize` prop to change lines height
- [Calendar](https://mantine.dev/dates/calendar), [DatePicker](https://mantine.dev/dates/date-picker) and other similar components now support `highlightToday` prop to highlight today's date
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Enabled.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
[ ] If you want to rebase/retry this PR, check this box
This PR has been generated by Mend Renovate. View repository job log here.
This PR contains the following updates:
^7.10.2->^7.11.0^7.10.2->^7.11.0^7.10.2->^7.11.0^7.10.2->^7.11.0^7.10.2->^7.11.0^7.10.2->^7.11.0Release Notes
mantinedev/mantine (@mantine/core)
### [`v7.11.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.11.0): 👁️ [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.10.2...7.11.0) [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-10-0) ##### withProps function All Mantine components now have `withProps` static function that can be used to add default props to the component: ```tsx import { IMaskInput } from 'react-imask'; import { Button, InputBase } from '@mantine/core'; const LinkButton = Button.withProps({ component: 'a', target: '_blank', rel: 'noreferrer', variant: 'subtle', }); const PhoneInput = InputBase.withProps({ mask: '+7 (000) 000-0000', component: IMaskInput, label: 'Your phone number', placeholder: 'Your phone number', }); function Demo() { return ( <> {/* You can pass additional props to components created with `withProps` */}Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Enabled.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
This PR has been generated by Mend Renovate. View repository job log here.