View changelog with demos on Mantine website
Theme based default props
Default props on MantineProvider
can now subscribe to theme:
import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
<MantineProvider
inherit
theme={{
components: {
Button: {
defaultProps: (theme) => ({
color: theme.colorScheme === 'dark' ? 'orange' : 'cyan',
}),
},
},
}}
>
<Button>Demo button</Button>
</MantineProvider>
);
}
@mantine/form validators
@mantine/form
package now exports isNotEmpty
, isEmail
, matches
, isInRange
and hasLength
functions
to simplify validation of common fields types:
import { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } from '@mantine/form';
import { Button, Group, TextInput, NumberInput, Box } from '@mantine/core';
function Demo() {
const form = useForm({
initialValues: {
name: '',
job: '',
email: '',
favoriteColor: '',
age: 18,
},
validate: {
name: hasLength({ min: 2, max: 10 }, 'Name must be 2-22 characters long'),
job: isNotEmpty('Enter your current job'),
email: isEmail('Invalid email'),
favoriteColor: matches(/^#([0-9a-f]{3}){1,2}$/, 'Enter a valid hex color'),
age: isInRange({ min: 18, max: 99 }, 'You must be 18-99 years old to register'),
},
});
return (
<Box component="form" maw={400} mx="auto" onSubmit={form.onSubmit(() => {})}>
<TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} />
<TextInput
label="Your job"
placeholder="Your job"
withAsterisk
mt="md"
{...form.getInputProps('job')}
/>
<TextInput
label="Your email"
placeholder="Your email"
withAsterisk
mt="md"
{...form.getInputProps('email')}
/>
<TextInput
label="Your favorite color"
placeholder="Your favorite color"
withAsterisk
mt="md"
{...form.getInputProps('favoriteColor')}
/>
<NumberInput
label="Your age"
placeholder="Your age"
withAsterisk
mt="md"
{...form.getInputProps('age')}
/>
<Group position="right" mt="md">
<Button type="submit">Submit</Button>
</Group>
</Box>
);
}
Flagpack extension
New mantine-flagpack extension. It is a set of 4x3 flags as React components based on flagpack.
The package is tree shakable – all unused components are not included in the production bundle.
All flag components support style props.
Other changes
- ColorPicker component now supports
onColorSwatchClick
prop - ColorInput now supports
closeOnColorSwatchClick
prop - ColorInput now shows eye dropper in all supported browsers by default
- @mantine/form now exports
TransformedValues
type to get type of transformed values from the form object - RingProgress now supports changing root segment color with
rootColor
prop - Text component now supports
truncate
prop - Stepper component now supports
allowSelectNextSteps
prop - @mantine/form now exports
superstructResolver
to allow schema based validation with superstruct - FileInput and FileButton components now support
capture
prop
New Contributors
- @sctape made their first contribution in #3098
- @paulm17 made their first contribution in #3151
- @ahmedDev20 made their first contribution in #3202
- @dmshvetsov made their first contribution in #2957
Full Changelog: 5.9.6...5.10.0