chore: added add-tab-example's (#DS-5231)#1717
Conversation
|
Visit the preview URL for this PR (updated for commit b0ba4d8): https://koobiq-next--prs-1717-x7dpgp89.web.app (expires Sun, 12 Jul 2026 20:51:28 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
|
/redeploy-preview |
|
🔄 Redeploying documentation preview. |
There was a problem hiding this comment.
Pull request overview
Adds new documentation examples demonstrating “browser-like” tab creation/removal for KbqTabNavBar, including a vertical variant, and wires them into the docs/dev examples so they can be rendered in the site and dev app.
Changes:
- Added two new tabs examples: horizontal “add/remove tab” and vertical “add/remove tab” (with associated CSS).
- Exposed the new examples via
packages/docs-examples/components/tabs/index.tsand included them in the tabs dev sandbox. - Documented the new examples in both English and Russian tabs docs pages.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/docs-examples/components/tabs/tabs-add-tab/tabs-add-tab-example.ts | New horizontal add/remove tab example for KbqTabNavBar. |
| packages/docs-examples/components/tabs/tabs-add-tab/tabs-add-tab-example.css | Styling for the horizontal add/remove tab example (close affordance overlay). |
| packages/docs-examples/components/tabs/tabs-add-tab-vertical/tabs-add-tab-vertical-example.ts | New vertical add/remove tab example, including a content panel. |
| packages/docs-examples/components/tabs/tabs-add-tab-vertical/tabs-add-tab-vertical-example.css | Styling for the vertical add/remove tab example layout and close affordance. |
| packages/docs-examples/components/tabs/index.ts | Exports/aggregates the new examples into the tabs examples module. |
| packages/components/tabs/tabs.ru.md | Adds RU docs section and embeds the new examples. |
| packages/components/tabs/tabs.en.md | Adds EN docs section and embeds the new examples. |
| packages/components-dev/tabs/module.ts | Renders the new examples in the tabs dev app page for manual verification. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| template: ` | ||
| <nav kbqTabNavBar class="example-tab-nav-bar"> | ||
| @for (tab of tabs; track tab) { | ||
| <a kbqTabLink [active]="activeTab === tab" (click)="activeTab = tab"> |
There was a problem hiding this comment.
нажатие по enter/space тоже должно менять activeTab в соответствии со спекой
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .example-tab-close { |
There was a problem hiding this comment.
Может сделать это как один из дефолтных вариантов табов вместо реализации в примере? Стили реализовать внутри компоненты , а обработчики addTab/removeTab оставить пользователям
В #1696 занес стили из примеров под новый тип button-toggle-group, можно сделать аналогично
|
С дизайном не совпадает. Кнопка очень далеко от стрелки |
|
Плюсик залипать должен. Глянь в реакте или в спеке 
|
No description provided.