feat(Tabs): support editable tabs — add and remove tabs (DS-5230)

[KamilEmeleev]

No description provided.

[github-actions]

Visit the preview URL for this PR (updated for commit 7a8d1b3):

https://react-koobiq-next--prs-406-pko8zgr4.web.app

_{(expires Wed, 08 Jul 2026 11:52:25 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}

[rmnturov]

Скроллбар бы стилизовать

[rmnturov]

При ховере вертикальных вкладок возникает эффект, когда крестик уже виден, а фон еще белый. Будто крестик без анимации появляется, а фон анимируется. Надо синхронно — анимация на фон и появление крестика не нужна

kbq-react-verical-tabs-animation.mp4

[rmnturov]

disabled-вкладки не должны быть все сразу подчеркнуты

https://react-koobiq-next--prs-406-pko8zgr4.web.app/?path=/story/components-tabs--editable-playground

[rmnturov]

На выбранную вкладку не нужен ховер

Спека https://www.figma.com/design/wHiyNIQkBkoomLDLEJEecV/%F0%9F%9F%A5-koobiq-%C2%B7-components-20?node-id=67861-6962&t=QleNFsLT0or2J3ja-4

[rmnturov]

в форме не нужны плейсхолдеры

[KamilEmeleev]

в форме не нужны плейсхолдеры

done

[KamilEmeleev]

На выбранную вкладку не нужен ховер

Спека https://www.figma.com/design/wHiyNIQkBkoomLDLEJEecV/%F0%9F%9F%A5-koobiq-%C2%B7-components-20?node-id=67861-6962&t=QleNFsLT0or2J3ja-4

done

[KamilEmeleev]

disabled-вкладки не должны быть все сразу подчеркнуты https://react-koobiq-next--prs-406-pko8zgr4.web.app/?path=/story/components-tabs--editable-playground

done

[KamilEmeleev]

При ховере вертикальных вкладок возникает эффект, когда крестик уже виден, а фон еще белый. Будто крестик без анимации появляется, а фон анимируется. Надо синхронно — анимация на фон и появление крестика не нужна

kbq-react-verical-tabs-animation.mp4

done

[KamilEmeleev]

Скроллбар бы стилизовать

Предлагаю пока использовать только стандартные CSS-свойства для скроллбара: scrollbar-width: auto, scrollbar-gutter: stable и scrollbar-color с нашими токенами. Это нативно поддерживаемый браузерами вариант и лучше чем скрол по умолчанию.

что думаешь?

[rmnturov]

Скроллбар бы стилизовать

Предлагаю пока использовать только стандартные CSS-свойства для скроллбара: scrollbar-width: auto, scrollbar-gutter: stable и scrollbar-color с нашими токенами. Это нативно поддерживаемый браузерами вариант и лучше чем скрол по умолчанию.

что думаешь?

Чет не понял, что я такого предложил, что выходит за пределы возможностей CSS? Ширина — не авто, а конкретная, цвет бегунка, скругление.

[rmnturov]

У выбранной вкладки должна быть всегда видна кнопка действия

Сейчас это не так

Спека

[rmnturov]

С Ангуляром есть важное отличие. Там при навигации по вкладкам не происходит автоматического переключения. В целом переключать автоматически — это нормально. Предлагаю для единства сделать переключение только при активации поведением по умолчанию. Переключение вместе с навигацией оставить опциональной возможностью. Это можно сделать отдельной задачей (вроде как эта особенность была в реакте и раньше).

[KamilEmeleev]

С Ангуляром есть важное отличие. Там при навигации по вкладкам не происходит автоматического переключения. В целом переключать автоматически — это нормально. Предлагаю для единства сделать переключение только при активации поведением по умолчанию. Переключение вместе с навигацией оставить опциональной возможностью. Это можно сделать отдельной задачей (вроде как эта особенность была в реакте и раньше).

За это поведение отвечает keyboardActivation (manual | automatic). Сейчас по умолчанию стоит automatic: вкладка активируется при фокусе с клавиатуры.

Добавил story. В дальнейшем отдельной доработкой можно будет поменять default на manual.

[KamilEmeleev]

У выбранной вкладки должна быть всегда видна кнопка действия

Сделал крестик видимым у выбранной вкладки, но есть нюанс: он может сразу перекрывать контент или аддон слева внутри таба.

[KamilEmeleev]

Спека

По WAI-ARIA APG, role="tab" сам является интерактивным элементом: он отвечает за выбор вкладки и навигацию внутри tablist. Поэтому вкладывать в него отдельное действие — не лучшая идея.

Кнопку закрытия можно оставить как визуальное исключение, но без отдельного фокуса. Действие закрытия при этом должно быть доступно с клавиатуры через Delete и Backspace.

Дополнительно посмотрел Taiga UI, Material UI, Chakra UI и Gravity UI — там тоже не закладывают отдельное фокусируемое действие внутрь tab.

[rmnturov]

Скроллбар бы стилизовать

Предлагаю пока использовать только стандартные CSS-свойства для скроллбара: scrollbar-width: auto, scrollbar-gutter: stable и scrollbar-color с нашими токенами. Это нативно поддерживаемый браузерами вариант и лучше чем скрол по умолчанию.

что думаешь?

Согласен