fix(CustomSelect/DateInput): placement configuration

[andrey-medvedev-vk]

• Unit-тесты
• e2e-тесты
• Дизайн-ревью
• Документация фичи
• Release notes

Описание

CustomSelect:

Было замечено, что при наличии переноса в опции, и при недостатке места по вертикали, CustomSelect может отрендерить список сбоку от инпута. По дизайну у нас нету такой поддержки, и стили выглядят странно.

Пример кода

import {
  CustomSelect,
  FormItem,
  Group,
  Panel,
  PanelHeader,
  SimpleCell,
  View,
} from "@vkontakte/vkui";

export default function App() {
  const options = [
    {
      value: "1",
      label:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
    },
    {
      value: "2",
      label: "Lorem Ipsum",
    },
  ];

  return (
    <View activePanel="profile">
      <Panel id="profile">
        <PanelHeader>VKUI</PanelHeader>
        <div
          style={{
            width: "360px",
          }}
        >
          <FormItem>
            <CustomSelect options={options} />
          </FormItem>
        </div>
      </Panel>
    </View>
  );
}

В качестве решения отключил возможность рендерить дропдаун сбоку от инпута. Только сверху или снизу.

Кроме того, заметил, что у нас существует конфликт между flip и shift middlewares. Добавил crossAxis: false во flip, чтобы при использовании вместе с shift() приоритом был shift, а потом уже в крайнем случае flip.

DateInput/DateRangeInput:

Календарь меняет свою высоту в зависимости от количества дней в месяце.
При переключении месяцев календарь может прыгать, позициионируясь то сверху, то снизу от инпута.
Это очень не удобно, если требуется продолжать перекючать месяцы.
Допустимо, чтобы календарь один раз менял свою позицию, запомнил свою последнюю удачную и больше не прыгал.

Screen.Recording.2025-03-06.at.18.55.10.mov

Пример кода:

import {
  DateInput,
  Group,
  Panel,
  PanelHeader,
  SimpleCell,
  View,
} from "@vkontakte/vkui";

export default function App() {
  return (
    <View activePanel="profile">
      <Panel id="profile">
        <PanelHeader>VKUI</PanelHeader>
        <div
          style={{
            position: "absolute",
            bottom: "340px",
          }}
        >
          <DateInput value={new Date("2024-11-01")} />
        </div>
      </Panel>
    </View>
  );
}

В качестве решения мы запонимаем последнюю удачную позицию в стейте.

Release notes

• Исправления

• CustomSelect: при нехватке места запрещаем позиционирование доропдауна сбоку
• DateInput: исправляем постоянную смену позиции календаря при переключении месяца
• DateRangeInput: исправляем постоянную смену позиции календаря при переключении месяца

[github-actions]

size-limit report 📦

Path	Size
JS	397.67 KB (+0.08% 🔺)
JS (gzip)	120.65 KB (+0.07% 🔺)
JS (brotli)	99.23 KB (+0.08% 🔺)
JS import Div (tree shaking)	1.56 KB (0%)
CSS	348.65 KB (0%)
CSS (gzip)	43.17 KB (0%)
CSS (brotli)	34.43 KB (0%)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook
• ✅ Docs beta

Commit b84c64b

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.44%. Comparing base (de20a81) to head (b84c64b).
Report is 33 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8332      +/-   ##
==========================================
- Coverage   95.46%   95.44%   -0.02%     
==========================================
  Files         406      409       +3     
  Lines       11610    11634      +24     
  Branches     3844     3850       +6     
==========================================
+ Hits        11083    11104      +21     
- Misses        527      530       +3     

Flag	Coverage Δ
unittests	95.44% <100.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[EldarMuhamethanov]

👍

[vkcom-publisher]

❌ Patch

Не удалось автоматически применить исправление на ветке 7.1-stable.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку 7.1-stable, выполните следующие действия:

1. Создайте новую ветку от 7.1-stable и примените изменения используя cherry-pick

git stash # опционально
git fetch origin 7.1-stable
git checkout -b patch/pr8332 origin/7.1-stable

git cherry-pick --no-commit df5e607794b93b2b88df9ef5d17fe30cbdb06423
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit

2. Исправьте конфликты, следуя инструкциям из терминала
3. Отправьте ветку на GitHub и создайте новый PR с веткой 7.1-stable (установка лейбла не требуется!)

git push --set-upstream origin patch/pr8332
gh pr create --base 7.1-stable --title "patch: pr8332" --body "- patch #8332"

[andrey-medvedev-vk]

☝️ Проигнорирую ошибку применения патча, так как планируем выпустить в минорном релизе.

[vkcom-publisher]

✅ v7.2.0 🎉