Skip to content

Add kirbyXComboboxItemTemplate directive with clear documentation - #4519

Open
HootERasmus wants to merge 9 commits into
developfrom
bug/4518-combobox-module
Open

Add kirbyXComboboxItemTemplate directive with clear documentation#4519
HootERasmus wants to merge 9 commits into
developfrom
bug/4518-combobox-module

Conversation

@HootERasmus

@HootERasmus HootERasmus commented Jun 8, 2026

Copy link
Copy Markdown
Collaborator

Which issue does this PR close?

This PR closes #4518

What is the new behavior?

Added kirbyXComboboxItemTemplate directive to enable custom item templating in the Combobox component. This directive provides context variables (item, selected, focused) for templated items and must be applied to the kirby-item element when using custom templates.

The directive follows the naming convention of prefixing with 'X' (like kirby-x-combobox), and comprehensive storybook documentation has been added to make it clear when and how to use this directive.

Does this PR introduce a breaking change?

  • Yes
  • No

Key Changes

  • Renamed template selector to kirbyXComboboxItemTemplate for consistency
  • Updated storybook stories (WithTemplate, CustomSearchFunction, LargeList) to demonstrate the directive usage
  • Added prominent documentation notes in all affected stories explaining the importance of the directive
  • Enhanced JSDoc comments to clarify that this directive is required for custom item templates

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Reminders

  • Make sure you have implemented tests following the guidelines in: "The good: Test".
  • Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

  • Determine if your changes are a fix, feature or breaking-change, and add the matching label to your PR. If it is tooling, dependency updates or similar, add ignore-for-release.
  • Do a self-review.
  • Request that the changes are code-reviewed
  • Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

@Fuzzy3

Fuzzy3 commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

ListItemTemplate is also marked as standalone and should be imported directly where needed.
import { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';

@Fuzzy3 Fuzzy3 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice ! I have one comment about adding an "X" to the template name, and then I'd like if we could update the storybook documentation, such that it is very clear that this template directive is needed.

Also the title and description should be updated in this PR to reflect the solution 🤓

Comment thread libs/extensions/angular/combobox/src/combobox.component.stories.ts Outdated
@HootERasmus HootERasmus changed the title Create ComboboxModule to encapsulate ListItemTemplateDirective Add kirbyXComboboxItemTemplate directive with clear documentation Aug 25, 2026
Rasmus Ølholm and others added 3 commits August 25, 2026 10:34
- Renamed template directive from kirbyComboboxItemTemplate to kirbyXComboboxItemTemplate
- Updated storybook stories to use the new directive name
- Added prominent documentation in WithTemplate, CustomSearchFunction, and LargeList stories
- Enhanced JSDoc comments to clarify that the directive is required for custom item templates
- All examples now clearly show the *kirbyXComboboxItemTemplate syntax on kirby-item elements

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Combobox does not contain ListComponent

4 participants