fix(FormLayoutGroup): FormItem width with long text in top prop makes second FormItem overflows

[andrey-medvedev-vk]

• e2e-тесты
• Release notes

Описание

Если внутри FormLayoutGroup лежит по крайней мере 2 FormItem в горизонтальной ориентации и у первого FormItem в свойстве top очень длинный текст, то размер первого FormItem может увеличится на столько, что он вытеснит за пределы FormLayoutGroup второй FormItem.

Изменения

Похоже, что тут влияют браузерные стили для тэга fieldset, который по умолчанию используется в FormLayoutGroup.
Браузер устанавливает min-width: min-content;.

Делаем min-width: auto.

Скриншоты

До	После

Release notes

Исправления

• FormLayoutGroup: исправили возможное переполнение контейнера FormLayoutGroup, если внутри используется два FormField в горизонтальной ориентации и у первого FormField в свойстве top находится очень длинный текст.

[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]

size-limit report 📦

Path	Size
JS	381.21 KB (0%)
JS (gzip)	115.54 KB (0%)
JS (brotli)	95.08 KB (0%)
JS import Div (tree shaking)	1.46 KB (0%)
CSS	332.17 KB (+0.01% 🔺)
CSS (gzip)	42.1 KB (+0.02% 🔺)
CSS (brotli)	33.16 KB (-0.04% 🔽)

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit de38181

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.14%. Comparing base (f2ddd2a) to head (de38181).
Report is 6 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7819   +/-   ##
=======================================
  Coverage   95.14%   95.14%           
=======================================
  Files         376      376           
  Lines       11087    11092    +5     
  Branches     3682     3684    +2     
=======================================
+ Hits        10549    10554    +5     
  Misses        538      538           

Flag	Coverage Δ
unittests	95.14% <ø> (+<0.01%)	⬆️

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.

[inomdzhon]

💅

[inomdzhon]

Добавил лейблы v6 и patch, но конфликта скорей всего не избежать, т.к. в стилях БЭМ удаляли

[vkcom-publisher]

❌ Patch

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

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

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

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

git stash # опционально
git fetch origin v6
git checkout -b patch/pr7819 origin/v6

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

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

git push --set-upstream origin patch/pr7819
gh pr create --base v6 --title "patch: pr7819" --body "- patch #7819"

[vkcom-publisher]

❌ Patch

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

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

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

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

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

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

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

git push --set-upstream origin patch/pr7819
gh pr create --base 7.0-stable --title "patch: pr7819" --body "- patch #7819"

[vkcom-publisher]

✅ v6.7.3 🎉