apps/mantine.dev/src/pages/changelog/7-15-0.mdx
import { Button } from '@mantine/core'; import { HeartIcon } from '@phosphor-icons/react'; import { ActionIconDemos, BarChartDemos, DatePickerDemos, FormDemos, ModalDemos, ModalsDemos, TableDemos, TipTapDemos, UseRadialMoveDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.Changelog7150);
You can now sponsor Mantine development with OpenCollective. All funds are used to improve Mantine and create new features and components.
<SponsorButton />New use-radial-move hook can be used to create custom radial sliders:
<Demo data={UseRadialMoveDemos.usage} />BarChart component now supports getBarColor prop to assign color based on value.
getBarColor function is called with two arguments: value and series object. It should return a color
string (theme color reference or any valid CSS color value).
ActionIcon.GroupSection and Button.GroupSection are new components that
can be used in ActionIcon.Group/Button.Group to create sections that are
not ActionIcon/Button components:
Table component now support variant="vertical":
Table component now supports tabularNums prop to render numbers in tabular style. It sets
font-variant-numeric: tabular-nums which makes numbers to have equal width.
This is useful when you have columns with numbers and you want them to be aligned:
Modals manager now supports modals.updateModal and modals.updateContextModal
function to update modal after it was opened:
use-form hook now supports form.submitting field
and form.setSubmitting function to track form submission state.
form.submitting field will be set to true if function passed to
form.onSubmit returns a promise. After the promise is resolved or rejected,
form.submitting will be set to false:
You can also manually set form.submitting to true or false:
import { useForm } from '@mantine/form';
const form = useForm({ mode: 'uncontrolled' });
form.submitting; // -> false
form.setSubmitting(true);
form.submitting; // -> true
form.setSubmitting(false);
form.submitting; // -> false
use-form hook now supports onSubmitPreventDefault option.
This option is useful if you want to integrate useForm hook with server actions.
By default, event.preventDefault() is called on the form onSubmit handler.
If you want to change this behavior, you can pass onSubmitPreventDefault option
to useForm hook. It can have the following values:
always (default) - always call event.preventDefault()never - never call event.preventDefault()validation-failed - call event.preventDefault() only if validation failedimport { useForm } from '@mantine/form';
const form = useForm({
mode: 'uncontrolled',
onSubmitPreventDefault: 'never',
});
RichTextEditor component now supports subtle variant:
Modal and Drawer components now support onExitTransitionEnd and onEnterTransitionEnd props,
which can be used to run code after exit/enter transition is finished. For example, this is useful when you want to clear
data after modal is closed:
DatePicker and other components based on Calendar component now support withWeekNumbers prop to display week numbers:
Custom variants types augmentation guide was added to the documentation.
Example of adding custom variant type to Button component:
import { ButtonVariant, MantineSize } from '@mantine/core';
type ExtendedButtonVariant = ButtonVariant | 'contrast' | 'radial-gradient';
declare module '@mantine/core' {
export interface ButtonProps {
variant?: ExtendedButtonVariant;
}
}