Skip to content

feat(select): new tedi-ready component #15#343

Open
mart-sessman wants to merge 3 commits intorcfrom
feat/15-select-tedi-ready-component
Open

feat(select): new tedi-ready component #15#343
mart-sessman wants to merge 3 commits intorcfrom
feat/15-select-tedi-ready-component

Conversation

@mart-sessman
Copy link
Contributor

No description provided.

@codecov
Copy link

codecov bot commented Mar 9, 2026

Codecov Report

❌ Patch coverage is 97.79817% with 12 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
...mponents/form/select/select-templates.directive.ts 46.15% 7 Missing ⚠️
tedi/components/form/select/select.component.ts 98.99% 5 Missing ⚠️

📢 Thoughts on this report? Let us know!

],
})
export class SelectComponent<T = unknown> implements AfterContentChecked, AfterViewChecked, ControlValueAccessor {
inputId = input.required<string>();
Copy link
Contributor

Choose a reason for hiding this comment

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

add descriptions like in other components

>
@if (searchable()) {
<div class="tedi-select__search-wrapper">
@if (!searchTerm() && selectedValues().length && !multiple()) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe extract this to a computed?

</span>
}
@if (multiple() && selectedValues().length) {
<div
Copy link
Contributor

Choose a reason for hiding this comment

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

Line 53-105 seems to be exactly the same as line 110-140, maybe let's extract this part to a ng-template?

Copy link
Contributor

Choose a reason for hiding this comment

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

This template is quite large and nested which makes it harder to read and maintain. Maybe extract it into smaller components?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

seems like good idea, but might actually add complexity, as elements are quite tightly coupled (state/signals, KB navigation, angular CDK)

@@ -0,0 +1,283 @@
@let listboxId = inputId() + "-listbox";
Copy link
Contributor

Choose a reason for hiding this comment

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

I noticed that Select is the only component where we compute values with @let in the template. For consistency, maybe it would make sense to keep them in the ts file instead?

* Whether to show a clear button when a value is selected.
* @default true
*/
clearable = input<boolean>(true);
Copy link
Contributor

Choose a reason for hiding this comment

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

For TextField component Kärolin said that this should be false by default.

* Whether to show a "Select All" option in multiselect mode.
* @default false
*/
selectAll = input<boolean>(false);
Copy link
Contributor

Choose a reason for hiding this comment

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

I would rename this to showSelectAll or something similar.


&__group-name {
display: block;
padding: var(--dropdown-group-label-padding-y, 8px) var(--dropdown-group-label-padding-x, 12px) var(--layout-grid-gutters-04, 4px);
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove px values.

@@ -0,0 +1,129 @@
tedi-dropdown-item-value,
.tedi-dropdown-item-value {
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need both selectors?

tedi-dropdown-item-value,
.tedi-dropdown-item-value {
display: flex;
gap: var(--dropdown-item-inner-spacing, 8px);
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove px value.

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.

3 participants