Import the BadgeComponent (not the entire KirbyModule)
Use the Badge with themeColor applied: <kirby-badge themeColor="danger">I'm not red :(</kirby-badge>
See the Badge not being rendered with danger color
Which Kirby version was used?
9.0.0
What was the expected behavior?
Themecolor being applied correctly when importing the Badge as a standalone component.
Are there any additional context?
The test for Badge imports the ThemeColorDirective which gives a false positive on the theme color tests. This should be removed.
This also applies to the Avatar component.
Additionally the ModalFooter component uses the ThemeColorDirective only to apply the light css class. This could/should be changed to a HostBinding attribute instead for simplicity.
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Verification
To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.
[ ] Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done
Implementation
The contributor who wants to implement this issue should:
Describe the bug
When importing Badge as a standalone component the
ThemeColorDirective
is not applied because of the way Angular works with imported directives in standalone components.TL;DR Imported directives in standalone components are only applied to the component's template, not the component itself. For this to work the directive needs to be specified in the component decorator's
hostDirectives
property.Describe how to reproduce the bug
BadgeComponent
(not the entireKirbyModule
)<kirby-badge themeColor="danger">I'm not red :(</kirby-badge>
Which Kirby version was used?
9.0.0
What was the expected behavior?
Themecolor being applied correctly when importing the Badge as a standalone component.
Are there any additional context?
The test for Badge imports the
ThemeColorDirective
which gives a false positive on the theme color tests. This should be removed. This also applies to the Avatar component.Additionally the ModalFooter component uses the
ThemeColorDirective
only to apply thelight
css class. This could/should be changed to aHostBinding
attribute instead for simplicity.Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Verification
To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.
NOT verified
label has been removed by a member of team Kirby; do not proceed until this is doneImplementation
The contributor who wants to implement this issue should:
Review
Once the issue has been implemented and is ready for review: