Skip to content

feat(clamped-text): animate expanding and collapsing of clamped text and list (#DS-5644) - #2259

Draft
NikGurev wants to merge 2 commits into
mainfrom
fix/DS-5644-clamped-text-animation
Draft

NikGurev wants to merge 2 commits into
mainfrom
fix/DS-5644-clamped-text-animation

Conversation

@NikGurev

Copy link
Copy Markdown
Contributor

Что сделано

Плавная анимация раскрытия и сворачивания в KbqClampedText и KbqClampedList, как в React-версии (koobiq/react-components#513, хук useCollapseAnimation).

  • Анимируется block-size через Web Animations API: от высоты до переключения к высоте после. overflow: clip только на время анимации.
  • Запуск только из toggle() (действие пользователя): ресайз, смена items или появление триггера анимацию не запускают.
  • Анимация пропускается при равных высотах, без element.animate (SSR, jsdom) и при отключённой анимации (prefers-reduced-motion: reduce, KBQ_ANIMATIONS_CONFIG, NoopAnimations) — через kbqAnimationsDisabled() из core.
  • Идущая анимация отменяется, новая стартует с текущей видимой высоты.
  • Новый вход duration (мс, по умолчанию 100, numberAttribute) в обоих компонентах.
  • Общая логика — внутренний хелпер collapse-animation.ts, в public API не экспортируется. В clamped-text.api.md добавлен только duration.

На что обратить внимание

  • В KbqClampedText анимируется .kbq-clamped-text__content, в KbqClampedList — хост. Хост содержит проецируемый триггер, поэтому его высота включает триггер, а раскрытие выглядит цельным. Если хост списка display: inline, block-size на нём не действует и анимации не будет видно — для такого случая нужен блочный контейнер.
  • scrollIntoView в KbqClampedText не менялся.
  • В .mdx описаний входов нет (они берутся из JSDoc на вкладке API), поэтому docs-страницы не менялись; duration описан в JSDoc.
  • E2E-скриншоты не обновлялись.
  • yarn run check-api-docs падает на components-tree-select, это не связано с изменением.

🤖 Generated with Claude Code

…and list (#DS-5644)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@NikGurev
NikGurev requested a review from lskramarov as a code owner October 27, 2026 15:31
@github-actions github-actions Bot added the enhancement New feature or request label Oct 27, 2026
@github-actions

github-actions Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

Visit the preview URL for this PR (updated for commit 3895b01):

https://koobiq-next--prs-2259-hpszgeml.web.app

(expires Fri, 30 Oct 2026 15:51:31 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c

@NikGurev
NikGurev marked this pull request as draft October 27, 2026 15:39
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant