5-5-0.mdx

group	title	order	slug	release	date
changelog	Version 5.5.0	1	/changelog/5-5-0/	https://github.com/mantinedev/mantine/releases/tag/5.5.0	October 3rd, 2022

import { CollapseDemos, SliderDemos, CheckboxDemos, ModalDemos, TooltipDemos, PopoverDemos, } from '@mantine/demos';

Global styles on theme

You can now add global styles with theme.globalStyles, this way you will be able to share these styles between different environments (for example, Next.js application and Storybook):

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        globalStyles: (theme) => ({
          '*, *::before, *::after': {
            boxSizing: 'border-box',
          },

          body: {
            ...theme.fn.fontStyles(),
            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
            color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
            lineHeight: theme.lineHeight,
          },

          '.your-class': {
            backgroundColor: 'red',
          },

          '#your-id > [data-active]': {
            backgroundColor: 'pink',
          },
        }),
      }}
    >
      <App />
    </MantineProvider>
  );
}

Horizontal Collapse

Collapse component now supports axis prop:

Checkbox, Radio and Switch improvements

Checkbox, Radio and Switch components now support error, description and labelPosition props:

Inverted Slider

Slider and RangeSlider components now support inverted prop:

Inline Tooltip and Popover

Tooltip and Popover components now can be used with inline elements:

Autosize Modal

Modal component now supports size="auto":

Indeterminate Checkbox

Checkbox indeterminate state now has separate styles for checked and unchecked states:

form.setValues partial

form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

import { useForm } from '@mantine/form';

const form = useForm({ initialValues: { name: '', email: '', age: 0 } });

form.setValues({ name: 'John', age: 21 });
form.values; // -> { name: 'John', email: '', age: 21 }

Documentation updates

• Polymorphic components now display polymorphic badge next to component name (see Text as reference)
• New Usage with Storybook guide
• New Usage with TypeScript guide

Other changes

• Table component now supports withBorder and withColumnBorders props
• NumberInput component now supports removeTrailingZeros prop
• Popover and Menu components now support disabled prop