Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Mantine to v5 (major) - autoclosed #121

Closed
wants to merge 1 commit into from
Closed

Update Mantine to v5 (major) - autoclosed #121

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Jul 29, 2022 •
edited

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mantine/core (source) 4.2.12 -> 5.10.5 age adoption passing confidence
@mantine/hooks (source) 4.2.12 -> 5.10.5 age adoption passing confidence
@mantine/next (source) 4.2.12 -> 5.10.5 age adoption passing confidence
@mantine/notifications (source) 4.2.12 -> 5.10.5 age adoption passing confidence

Release Notes

mantinedev/mantine

v5.10.5

Compare Source

What's Changed

  • [@mantine/dates] Fix inputWrapperOrder not supported by TimeInput and TimeInputRange components (#​3520)
  • [@mantine/core] Fix AppShell, Dialog, Drawer and Modal components incorrect style props type
  • [@mantine/modals] Fix centered modal jumping when closed (#​3570)
  • [@mantine/core] Popover: Fix dropdown not following target element inside scrollable container when withinPortal is set (#​3576)
  • [@mantine/core] Tooltip: Fix incorrect disabled prop behavior in Tooltip.Floating (#​3611)
  • [@mantine/core] Table: Fix incorrect th styles inside tbody (#​3556)
  • [@mantine/core] Add ColSpan type exports (#​3564)
  • [@mantine/core] PasswordInput: Fix typo in selector (#​3553)

New Contributors

Full Changelog: mantinedev/mantine@5.10.4...5.10.5

v5.10.4

Compare Source

What's Changed

  • [@mantine/core] PasswordInput: Hide native browser password reveal button in Edge
  • [@mantine/core] Notification: Fix content overflow with very large children (#​3540)
  • [@mantine/core] Make useInputProps hook strongly typed (#​3486)
  • [@mantine/core] MultiSelect: Add missing default value for dropdownPosition (#​3490)
  • [@mantine/core] Table: Fix styles for th elements not working inside tbody (#​3504)
  • [@mantine/modals] Fix multiple closeModal issues (#​3498)
  • [@mantine/hooks] use-disclosure: Memoize functions (#​3513)
  • [@mantine/hooks] use-focus-trap: Fix aria-hidden not being removed from the body when target element changes (#​3526)
  • [@mantine/core] Allow usage of read only arrays in Select and MulstiSelect components (#​3542)
  • [@mantine/core] Text: Add option to truncate text from the start (#​3550)

New Contributors

Full Changelog: mantinedev/mantine@5.10.3...5.10.4

v5.10.3

Compare Source

What's Changed

  • [@mantine/core] Add option to pass additional props to file input in FileButton and FileInput components
  • [@mantine/form] Fix onBlur missing in getInputProps type
  • [@mantine/form] Improve isEmail validation logic (#​3443)
  • [@mantine/core] SimpleGrid: Fix zero spacing and vertical spacing nor working in breakpoints (#​3453)
  • [@mantine/dropzone] Add avif image mime type (#​3166)
  • [@mantine/dates] DateRangePicker: Fix incorrect openDropdownOnClear behavior (#​3299)
  • [@mantine/hooks] use-hotkeys: Add additional configuration to allow hook usage with content editable elements (#​3410)
  • [@mantine/core] Add hoverOnSearchChange prop to Autocomplete, Select and MultiSelect (#​3102)
  • [@mantine/styles] Fix incorrect useComponentDefaultProps type (#​3484)
  • [@mantine/core] MultiSelect: Allow to disable selected items filtering from the dropdown items list (#​3104)
  • [@mantine/form] Fix zodResolver not being type safe with older versions of TypeScript (#​3431)
  • [@mantine/carousel] Fix carousel with vertical orientation working incorrectly with RTL direction (#​3438)
  • [@mantine/core] Fix dropdown position not being updated after Select, MultiSelect and Autocomplete dropdown was flipped and user started searching (#​3439)
  • [@mantine/core] Pagination: Fix spacing={0} not working (#​3456)
  • [@mantine/core] Dependency: migrate @floating-ui/react-dom-interactions to @floating-ui/react (#​3471)
  • [@mantine/core] Skeleton: Allow overflow when children are visible (#​3475)
  • [@mantine/core] TransferList: add transferAllMatchingFilter prop (#​3436)

New Contributors

Full Changelog: mantinedev/mantine@5.10.2...5.10.3

v5.10.2

Compare Source

What's Changed

New Contributors

Full Changelog: mantinedev/mantine@5.10.1...5.10.2

v5.10.1

Compare Source

What's Changed

  • [@mantine/core] HoverCard: Add missing types for classNames, styles and unstyled props (#​3257)
  • [@mantine/modals] Fix incorrect close modal logic (#​3300)
  • [@mantine/hooks] use-set-state: Make setState fucntion stable across renders (#​3357)
  • [@mantine/tiptap] Fix incorrect styles on placeholder component (#​3382)
  • [@mantine/hooks] use-local-storage: Fix value not updated when local storage value is cleared (#​3298)
  • [@mantine/core] Fix unexpected extra space added at the bottom of Switch, Radio and Checkbox components (#​3303)
  • [@mantine/hooks] use-full-screen: Fix hook not working on iOS (#​3327)
  • [@mantine/core] Stepper: Fix allowStepSelect not working on Stepper.Step component (#​3340)
  • [@mantine/form] Fix useForm initialDirty stops form.isDirty from working as expected (#​3372)
  • [@mantine/core] Stack: Fix incorrect default justify prop (#​3293)

New Contributors

Full Changelog: mantinedev/mantine@5.10.0...5.10.1

v5.10.0

Compare Source

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 '@&#8203;mantine/form';
import { Button, Group, TextInput, NumberInput, Box } from '@&#8203;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

Full Changelog: mantinedev/mantine@5.9.6...5.10.0

v5.9.6

Compare Source

What's Changed

  • [@mantine/spotlight] Allow overriding search input size (#​3181)
  • [@mantine/core] Tooltip: Fix incorrect Tooltip.Floating Styles API name
  • [@mantine/core] ScrollArea: Add viewportProps support
  • [@mantine/core] Title: Remove span prop

New Contributors

Full Changelog: mantinedev/mantine@5.9.5...5.9.6

v5.9.5

Compare Source

What's Changed

  • [@mantine/tiptap] Fix LinkControl not supporting custom icon (#​3196)
  • [@mantine/hooks] use-network: Fix incorrect initial online/offline state detection (#​3178)
  • [@mantine/core] Space: Add responsive values support to w and h props
  • [@mantine/core] FileInput: Fix value overflow when selected value name is too large

New Contributors

Full Changelog: mantinedev/mantine@5.9.4...5.9.5

v5.9.4

Compare Source

What's Changed

  • [@mantine/core] Switch: Fix incorrect alignment (#​3082)
  • [@mantine/dates] Fix DateRangePicker and DatePicker components not supporting readOnly prop (#​3089)
  • [@mantine/hooks] use-click-outside: Fix incorrect typescript definition for strict mode (#​3119)
  • [@mantine/core] Input: Fix incorrect Input.Error role, connect Input.Description and Input.Error to the input element with aria-describedby (#​3146)
  • [@mantine/tiptap] Fix control styles API working incorrectly for Link and Color control (#​3148)
  • [@mantine/modals] Increase default zIndex to allow usage with Modal component (#​3154)
  • [@mantine/hooks] use-click-outside: Fix incorrect outside clicks detection when click target is html element (#​3143)

Full Changelog: mantinedev/mantine@5.9.3...5.9.4

v5.9.3

Compare Source

What's Changed

  • [@mantine/core] TypographyStylesProvider: Fix incorrect <code /> styles
  • [@mantine/styles] Allow createStyle to go to the original definition (#​3108)
  • [@mantine/core] Menu: Change hovered item background-color to make it consistent with other components (#​3109)
  • [@mantine/tiptap] Fix incorrect RichTextEditor ref type (#​3142)
  • [@mantine/form] Fix typing issue with nested interfaces in passed type (#​3157)

New Contributors

Full Changelog: mantinedev/mantine@5.9.2...5.9.3

v5.9.2

Compare Source

What's Changed

  • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
  • [@mantine/core] ScrollArea: Fix flickering
  • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
  • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
  • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

Full Changelog: mantinedev/mantine@5.9.1...5.9.2

v5.9.1

Compare Source

What's Changed

  • [@mantine/styles] Add access to theme in defaultProps (#​2950)
  • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
  • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
  • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
  • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
  • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
  • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
  • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
  • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
  • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
  • [@mantine/spotlight] Fix theme.defaultRadius not being respected
  • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
  • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
  • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
  • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)

New Contributors

Full Changelog: mantinedev/mantine@5.9.0...5.9.1

v5.9.0

Compare Source

View changelog with demos on mantine.dev website

use-eye-dropper hook

New use-eye-dropper hook provides an interface to work with EyeDropper API.
It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@&#8203;mantine/core';
import { IconColorPicker } from '@&#8203;tabler/icons';
import { useEyeDropper } from '@&#8203;mantine/hooks';

function Demo() {
  const [color, setColor] = useState('');
  const [error, setError] = useState(null);
  const { supported, open } = useEyeDropper();

  const pickColor = async () => {
    try {
      const { sRGBHex } = await open();
      setColor(sRGBHex);
    } catch (e) {
      setError(e);
    }
  };

  if (!supported) {
    return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
  }

  return (
    <Group>
      <ActionIcon variant="default" onClick={pickColor}>
        <IconColorPicker size={16} stroke={1.5} />
      </ActionIcon>
      {color ? (
        <Group spacing="xs">
          <ColorSwatch color={color} />
          <Text>Picked color: {color}</Text>
        </Group>
      ) : (
        <Text>Click the button to pick color</Text>
      )}
      {error && <Text color="red">Error: {error?.message}</Text>}
    </Group>
  );
}

ColorInput eye dropper

ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section.
This feature depends on EyeDropper API,
the eye dropper will not be rendered if the API is not supported.

import { ColorInput } from '@&#8203;mantine/core';

function Demo() {
  return (
    <ColorInput
      withEyeDropper
      placeholder="With eye dropper"
      label="Pick any color from the page"
    />
  );
}

AppShell alt layout

AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

Responsive Grid gutter

Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

import { Grid } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
    </Grid>
  );
}

Static components default props

All static components now support default props on MantineProvider.
The following example demonstrates how to add default props to Menu.Item, Tabs.List and
RichTextEditor.Toolbar components:

import { MantineProvider, Button } from '@&#8203;mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          MenuItem: {
            defaultProps: { color: 'red' },
          },

          TabsList: {
            defaultProps: {
              position: 'right',
            },
          },

          RichTextEditorToolbar: {
            defaultProps: {
              sticky: true,
              stickyOffset: 60,
            },
          },
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

Input.Placeholder component

Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element
or do not support placeholder property natively:

import { Input } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Input component="button">
      <Input.Placeholder>Placeholder content</Input.Placeholder>
    </Input>
  );
}

Other changes

  • RangeSlider component now supports maxRange prop
  • Stepper component now supports any CSS color value in color prop
  • use-hotkeys hook now allows to configure whether default behavior should be prevented
  • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props

New Contributors

Full Changelog: mantinedev/mantine@5.8.4...5.9.0

v5.8.4

Compare Source

What's Changed

  • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
  • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
  • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
  • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
  • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
  • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
  • [@mantine/tiptap] Add ref forwarding (#​3068)

Full Changelog: mantinedev/mantine@5.8.3...5.8.4

v5.8.3

Compare Source

What's Changed

  • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
  • [@mantine/tiptap] Fix incorrect content border-radius
  • [@mantine/tiptap] Fix placeholder extension not working as expected
  • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
  • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)

New Contributors

Full Changelog: mantinedev/mantine@5.8.2...5.8.3

v5.8.2

What's Changed

  • [@mantine/tiptap] Fix incorrect hr control label
  • [@mantine/tiptap] Fix incorrect editor prop type
  • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
  • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
  • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
  • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
  • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
  • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM

New Contributors

Full Changelog: mantinedev/mantine@5.8.0...5.8.2

v5.8.0

Compare Source

View changelog with demos on mantine.dev website

Tiptap rich text editor

New @​mantine/tiptap package is a replacement
for @​mantine/rte package. RichTextEditor
component is now based on Tiptap, it supports all of
Tiptap extensions and provides flexible components API.

import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
import { useEditor } from '@&#8203;tiptap/react';
import Highlight from '@&#8203;tiptap/extension-highlight';
import StarterKit from '@&#8203;tiptap/starter-kit';
import Underline from '@&#8203;tiptap/extension-underline';
import TextAlign from '@&#8203;tiptap/extension-text-align';
import Superscript from '@&#8203;tiptap/extension-superscript';
import SubScript from '@&#8203;tiptap/extension-subscript';

const content =
  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';

function Demo() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Underline,
      Link,
      Superscript,
      SubScript,
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
    ],
    content,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky stickyOffset={60}>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
          <RichTextEditor.Strikethrough />
          <RichTextEditor.ClearFormatting />
          <RichTextEditor.Highlight />
          <RichTextEditor.Code />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.H1 />
          <RichTextEditor.H2 />
          <RichTextEditor.H3 />
          <RichTextEditor.H4 />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Blockquote />
          <RichTextEditor.Hr />
          <RichTextEditor.BulletList />
          <RichTextEditor.OrderedList />
          <RichTextEditor.Subscript />
          <RichTextEditor.Superscript />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Link />
          <RichTextEditor.Unlink />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.AlignLeft />
          <RichTextEditor.AlignCenter />
          <RichTextEditor.AlignJustify />
          <RichTextEditor.AlignRight />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

@​mantine/rte package deprecation

Quill based RichTextEditor is now deprecated.
@mantine/rte package will no longer receive any updates, support for it
will be discontinued when 6.0.0 version is released. We recommend to switch
to Tiptap based editor as soon as possible.

Other changes

New Contributors

Full Changelog: mantinedev/mantine@5.7.2...5.8.0

v5.7.2

Compare Source

What's Changed

  • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
  • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
  • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
  • [@mantine/core] TypographyStylesProvider: Add mark styles
  • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
  • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
  • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
  • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
  • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)

New Contributors

Full Changelog: mantinedev/mantine@5.7.1...5.7.2

v5.7.1

Compare Source

What's Changed

  • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
  • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
  • [@mantine/core] Menu: Allow overriding Menu.Item button type
  • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
  • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
  • [@mantine/styles] Add missing right style prop (#​2887)
  • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)

New Contributors

Full Changelog: mantinedev/mantine@5.7.0...5.7.1

v5.7.0

Compare Source

View changelog with demos on mantine.dev website

Style props

All Mantine components now support responsive style props:

import { Box } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Box
      w={{ base: 200, sm: 400, lg: 500 }}
      py={{ base: 'xs', sm: 'md', lg: 'xl' }}
      bg="blue.7"
      c="#fff"
      ta="center"
      mx="auto"
    >
      Box with responsive style props
    </Box>
  );
}

Flex component

Flex component is an alternative to Group and Stack components.
It supports new responsive style props:

import { Flex, Button } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Flex
      direction={{ base: 'column', sm: 'row' }}
      gap={{ base: 'sm', sm: 'lg' }}
      justify={{ sm: 'center' }}
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}

Focus ring styles on theme

You can now customize focus ring styles for all components in MantineProvider:

function Demo() {
  return (
    <MantineProvider
      inherit
      theme={{
        focusRingStyles: {
          // reset styles are applied to <button /> and <a /> elements
          // in &:focus:not(:focus-visible) selector to mimic
          // default browser behavior for native <button /> and <a /> elements
          resetStyles: () => ({ outline: 'none' }),

          // styles applied to all elements expect inputs based on Input component
          // styled are added with &:focus selector
          styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),

          // focus styles applied to components that are based on Input
          // styled are added with &:focus selector
          inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
        },
      }}
    >
      <Group grow>
        <Button>Move focus with tab</Button>
        <TextInput placeholder="Focus input to see styles override" />
      </Group>
    </MantineProvider>
  );
}

Responsive Header and Footer height

Header and Footer components now support responsive height:

import { Header } from '@&#8203;mantine/core';

function Demo() {
  return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
}

Other changes

  • Collapse component now supports axis prop, it is now possible to animate width
  • Button component now supports loaderPosition="center"
  • Carousel now supports onSlideChange prop
  • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
  • use-form onSubmit can now be called without form event
  • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

New Contributors

Full Changelog: mantinedev/mantine@5.6.4...5.7.0

v5.6.4

Compare Source

What's Changed

  • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
  • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos

New Contributors

Full Changelog: mantinedev/mantine@5.6.3...5.6.4

v5.6.3

Compare Source

What's Changed
  • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
  • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
  • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
  • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
  • [@mantine/styles] Set color-scheme style in html element (#​2808)
  • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
  • [@mantine/styles] Fix incorrect styles params type in strict ts mode
New Contributors

Full Changelog: mantinedev/mantine@5.6.2...5.6.3

v5.6.2

Compare Source

What's Changed

  • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
  • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
  • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
  • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
  • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
  • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
  • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)

New Contributors

Full Changelog: mantinedev/mantine@5.6.1...5.6.2

v5.6.1

Compare Source

What's Changed

  • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
  • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
  • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
  • [@mantine/hooks] use-idle: Improve types for events (#​2704)
  • `[@Mantine

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ 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.

@renovate renovate bot added the renovate label Jul 29, 2022
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 4 times, most recently from 81a29b5 to 5baafb5 Compare August 5, 2022 20:17
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 6 times, most recently from ea8f126 to 9eaa1b5 Compare August 14, 2022 14:51
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 4 times, most recently from cc32719 to 75912cb Compare August 22, 2022 11:48
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 4 times, most recently from b9da9f4 to 34c56bb Compare September 2, 2022 17:17
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 6 times, most recently from aae55fb to ec90018 Compare September 9, 2022 16:02
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 5 times, most recently from 37fc321 to 6cb0a9f Compare September 15, 2022 15:03
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 6 times, most recently from 2008580 to 064a7fc Compare February 15, 2023 03:01
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 7 times, most recently from bb239a1 to 1338ac5 Compare February 23, 2023 22:10
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 8 times, most recently from 211ba34 to ee00203 Compare March 5, 2023 08:59
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 2 times, most recently from 3be98e5 to 138ffa6 Compare March 10, 2023 23:37
@renovate renovate bot force-pushed the renovate/major-5-mantine branch 2 times, most recently from 4b91c2e to 3f741d9 Compare April 7, 2023 18:34
@renovate renovate bot force-pushed the renovate/major-5-mantine branch from 3f741d9 to 957ce05 Compare April 22, 2023 16:49
@renovate renovate bot changed the title Update Mantine to v5 (major) Update Mantine to v5 (major) - autoclosed May 14, 2023
@renovate renovate bot closed this May 14, 2023
@renovate renovate bot deleted the renovate/major-5-mantine branch May 14, 2023 05:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
renovate
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
0 participants