Mantine V7 migration notes & questions

mantine-v7-migration-notes-and-questions.md

Mantine v7 migration notes & questions

variantColorResolver

• It is impossible to know from the argument whether the user passed the color prop or it is a default value defined in the button-like component - the value seems have always fallback value. Usecase: I wan't to use currentColor as default value for color only for outline variant and only if user not passed different value with prop, even if this value is the same as default one.

getSize based utils alternative for safe usage?

Example: we like how tabs looks, except that we don't have ability to change spacing between tab pills (data-variant="pill"). For this case we write a simple component-wrapper, with one purpose - to support spacing prop:

interface StyledTabsProps extends TabsProps {
  spacing?: MantineSpacing;
}

So, we have a problem here to support spacing like mantine library does for all components. In v6 I copied getSize util, and user it like getSize(size, sizes). In v7 this util not supports sizes object, but allow only to transform number-like values to rem/em, or to resolve as global namespaced css variable. I have 2 questions:

1. How you use size resolver for internal/custom sizes (not global one)?
2. It is safe to use / copy implementation of getSize-related helper functions? If no: what is recommended approach for manual handling spacing and any size-related props?

All portal-based components

• PortalProps doesn't apply css vars passed in style prop I don't understand the purpose of this limitation, but if you have in your code dynamic css variables on portalProps which purpose was to provide some dynamic values for all parts of partal including the root, in v7 this sadly won't work.

Tooltip

• className on it is now applies to trigger instead of the content. Refactor needed, if you in v6 used some className for content.

Button

• inherit or currentColor values for color prop with filled variant won't work. Also is problematic to find a solution how to make it work with variantResolver:

  // Fix currentColor rules for filled variant
  if (parsedColor.color === 'currentColor' && input.variant === 'filled') {
    return {
      ...defaultResolvedColors,
      color: '', // <-- ??
      background: 'currentColor',
    };
  }

LoadingOverlay

• custom loader prop is removed, so currenlty is impossible to declare inline dynamic loader content. In v6 with loader prop was possible to defined custom layout elements as Overlay content, so this was used as overlay + conditional loader. In v7 we need to make the separate content and position it on top of the content of overlay, so, this is a breaking change. As a suggestion, I would like to see the children prop.

variantColorResolver

Надо проверить, что цвет передан не был. Например,

if (!input.color && input.variant === 'outline') {
  return { /* ... */ }
}

getSize

Утилиты экспортируются из этого файла – https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/core/utils/get-size/get-size.ts
Ожидается, что значения будут обвялены в стилях, сами функции возвращают только переменные. Если надо хранить значения в js, то есть пример – https://mantine.dev/core/container/#customize-sizes

Portal

В портале, элемент создается с помощью document.createElement, фильтровать свойства из style руками сложновато и не хочется. Если есть необходимость объявить доп стили или аттрибуты это можно сделать:

• На вложенных элементах
• Выставив кастомный target

Button

Честно говоря, не вижу особого смысла использовать currentColor и inherit в резолвере цветов. Для этого можно объявить кастомный вариант, как уже обсуждали.

Tooltip

Тут проблему не понял, в 6 версии работало вроде бы так же. Большинство пропсов необходимо прокидивать на таргет, чтобы была поддержка нескольких тултипов/поповеров у одного элемента.

LoadingOverlay

Способ менять лоадер будет добавлен в 7.2