feat(dropdown): added KbqDropdownFooter directive (#DS-3699)#1780
feat(dropdown): added KbqDropdownFooter directive (#DS-3699)#1780artembelik wants to merge 5 commits into
Conversation
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
Visit the preview URL for this PR (updated for commit e199274): https://koobiq-next--prs-1780-557k62z8.web.app (expires Mon, 27 Jul 2026 13:08:50 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
There was a problem hiding this comment.
Pull request overview
Adds a new KbqDropdownFooter directive to the dropdown component so consumers can project a dedicated footer region under the options, aligning dropdown capabilities with other panel-like components (e.g. autocomplete) and documenting the new API via examples and docs updates.
Changes:
- Introduces
KbqDropdownFooterdirective and wires up footer content projection inKbqDropdown. - Updates dropdown styling to separate content padding from the panel and styles the footer using the shared
%kbq-select-footerpattern. - Adds docs/dev/examples and e2e demo markup to showcase the new footer.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/dropdown.api.md | Public API snapshot updated to include KbqDropdownFooter and updated content selectors. |
| packages/docs-examples/components/dropdown/index.ts | Registers and exports the new “with footer” example. |
| packages/docs-examples/components/dropdown/dropdown-with-footer/dropdown-with-footer-example.ts | New example demonstrating footer usage (including links and multiline footer content). |
| packages/components/dropdown/e2e.ts | Updates e2e demo templates to include dropdown footers. |
| packages/components/dropdown/dropdown.scss | Moves padding to .kbq-dropdown__content and adds .kbq-dropdown-footer styling. |
| packages/components/dropdown/dropdown.ru.md | Documents the new footer section (RU). |
| packages/components/dropdown/dropdown.module.ts | Exports KbqDropdownFooter from the module. |
| packages/components/dropdown/dropdown.html | Adds a dedicated <ng-content> slot for the footer. |
| packages/components/dropdown/dropdown.en.md | Documents the new footer section (EN). |
| packages/components/dropdown/dropdown.component.ts | Adds the KbqDropdownFooter directive definition. |
| packages/components-dev/dropdown/module.ts | Includes the new footer example in the dev app module/template. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /** Footer that is rendered below the dropdown options panel. */ | ||
| @Directive({ | ||
| selector: '[kbqDropdownFooter], kbq-dropdown-footer', | ||
| host: { class: 'kbq-dropdown-footer' } | ||
| }) | ||
| export class KbqDropdownFooter {} |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
No description provided.