@mantine/spotlight 5.2.0 on Node.js Yarn

View changelog with demos on documentation website

Styled components support

You can now use styled components syntax with @emotion/styled package:

It is fully compatible with Mantine server side rendering (@mantine/next, @mantine/remix and gatsby-plugin-mantine packages)
Mantine theme can now be used in component styles with no extra setup
Components created with @emotion/styled will use Mantine's emotion cache

import styled from '@emotion/styled';

const StyledComponent = styled.div`
  text-align: center;
  background-color: ${({ theme }) =>
    theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0]};
  padding: 30px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${({ theme }) =>
      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]};
  }
`;

function Demo() {
  return <StyledComponent />;
}

withAsterisk prop

All inputs that are based on Input and Input.Wrapper components now
support withAsterisk prop, it allows to display required asterisk without adding required attribute
to the input element. It is useful when you do not need browser validation in your forms but still want
to display the asterisk.

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

// Will display required asterisk and add `required` attribute to the input element
function RequiredDemo() {
  return <TextInput label="test-label" required />;
}

// Will only display the asterisk, `required` attribute is not added to the input element
function AsteriskDemo() {
  return <TextInput label="test-label" withAsterisk />;
}

Progress and RingProgress tooltips

Progress and RingProgress components
now support floating tooltips in sections:

import { RingProgress, Text, Group } from '@mantine/core';

function Demo() {
  return (
    <Group position="center">
      <RingProgress
        size={170}
        thickness={16}
        label={
          <Text size="xs" align="center" px="xs" sx={{ pointerEvents: 'none' }}>
            Hover sections to see tooltips
          </Text>
        }
        sections={[
          { value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' },
          { value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' },
          { value: 15, color: 'grape', tooltip: 'Other – 15 Gb' },
        ]}
      />
    </Group>
  );
}

Title component changes

Title now supports setting size different from order:

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

function Demo() {
  return (
    <>
      <Title order={3} size="h1">
        H3 heading with h1 font-size
      </Title>
      <Title size="h4">H1 heading with h4 font-size</Title>
      <Title size={12}>H1 heading with 12px size</Title>
    </>
  );
}

It also now supports all Text component props:

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

function Demo() {
  return (
    <>
      <Title order={3} weight={100} align="center">
        H3 heading aligned to center with 100 font-weight
      </Title>
      <Title order={4} underline color="blue.5">
        Underlined h4 heading with blue color
      </Title>
      <Title order={5} color="dimmed" italic>
        Italic dimmed h5 heading
      </Title>
    </>
  );
}

@mantine/form changes

New form.isValid handler performs form validation with given validation functions, rules object or schema, but unlike
form.validate it does not set form.errors and just returns boolean value that indicates whether form is valid.

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

const form = useForm({
  initialValues: { name: '', age: 0 },
  validate: {
    name: (value) => (value.trim().length < 2 ? 'Too short' : null),
    age: (value) => (value < 18 ? 'Too young' : null),
  },
});

// get validation status of all values
form.isValid(); // -> false

// get validation status of field
form.isValid('name'); // -> false

form.resetDirty will now memoize form values and compare all next changes with stored values instead of initialValues:

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

const form = useForm({ initialValues: { a: 1 } });

form.setFieldValue('a', 2);
form.isDirty(); // -> true

form.setFieldValue('a', 1);
form.isDirty(); // -> false

form.setFieldValue('a', 3);
form.resetDirty();
form.isDirty(); // -> false

form.setFieldValue('a', 3);
form.isDirty(); // -> true

Form rules now receive rule path as third argument:

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

const form = useForm({
  initialValues: { a: [{ b: 1 }, { b: 2 }] },
  validate: {
    a: {
      // path can be used to get field position relative to other fields
      b: (value, values, path) => (path === 'a.0.b' ? 'error' : null),
    },
  },
});

Custom prism themes

Prism component now supports custom themes with getPrismTheme prop:

import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
import { Prism } from '@mantine/prism';

const demoCode = `import { Button } from '@mantine/core';

function Demo() {
  return <Button>Hello</Button>
}`;

function Demo() {
  return (
    <Prism
      language="tsx"
      getPrismTheme={(_theme, colorScheme) =>
        colorScheme === 'light' ? duotoneLight : duotoneDark
      }
    >
      {demoCode}
    </Prism>
  );
}

Other changes

ActionIcon component now support gradient variant
Avatar component now supports variant prop
Carousel component now supports height="100%"
Grid.Col now supports order prop, it can be used to reorder columns when certain breakpoint is reached
Tabs component now supports keepMounted prop. If it is set to false then components rendered inside Tabs.Panel will be unmounted when tab is not active.
DatePicker and DateRangePicker components now have withinPortal prop set to false by default to match other components

New Contributors

@brunocrosier made their first contribution in #1885
@mdodell made their first contribution in #2143
@rodrigopalheiro made their first contribution in #2149

Full Changelog: 5.1.7...5.2.0