Проблема

Дизайн отрисовывает некоторые компоненты в 2-х размерах:

• обычный – для мобильных экранов с тач, чтобы удобней было попадать по компоненту
• компактный – на устройств с большим экраном и мышкой, т.к. больше всего вмешается и есть точный указатель, с которым легко попасть

В разработке, по историческим причинам, эту логику реализовали как 2 отдельных параметра для 2-х разных осей sizeX и sizeY, что предполагает, что в sizeX это размер в зависимости от ширины, а sizeY это размер в зависимости от высоты. Если sizeX и зависит от ширины, то sizeY зависит и от высоты, и от ширины, и от наличия точного указателя мыши.

• sizeX="regular" – это @media (min-width: 768px)
• sizeX="compact" – это @media (max-width: 767.9px)
• sizeY="compact" – это @media (pointer: fine) and (min-width: 768px), (max-height: 414.9px)
• sizeY="regular" – это @media (pointer: coarse) and (min-height: 415px), (pointer: none) and (min-height: 415px), (max-width: 767.9px) and (min-height: 415px)

Решение

Разумней будет оставить только один параметр sizeY, который будет отвечать за адаптивность, а вместо sizeX использовать брейкпоинты smallTabletMinus и smallTabletPlus.

Далее как нужно это сделать и что учесть.

sizeY

В M3 есть такой параметр как density (ссылка на документацию M3) для такой задачи, предлагаю также перейти на такое именование, а также заменить compact и regular на множитель.

• депрекейт sizeY с пометкой удалить в v10
• warnOnce на использование sizeY
• sizeY="compact" → density="compact"
• sizeY="regular" → density="regular"
• замена под коду (для v8 должна быть обратная совместимость с sizeY)
• документ по миграции

sizeX

Здесь всё проще:

• депрекейт sizeX с пометкой удалить в v10
• warnOnce на использование sizeX
• sizeX="compact" → smallTabletMinus
• sizeX="regular" → smallTabletPlus
• замена в компонентах (для v8 должна быть обратная совместимость с sizeX)
  • CardGrid
  • Group
  • Header
  • Panel
  • PanelHeader
  • PanelHeaderButton
  • PanelHeaderContext
  • Separator
  • Tappable (косвенно затрагивает HorizontalCell, HorizontalCellShowMore)
• документ по миграции
  • удалить AdaptivityProvider свойство sizeX
  • там, где нужно перебить поведение компонента, обернуть в AdaptivityProvider с брейкпоинтом smallTabletMinus или smallTabletPlus

Блог

Написать пост в https://vkui.io/blog об изменении.