Skip to content

refactor(dropdown-item-value): rename to OptionContent #491 #741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
intermetric wants to merge 1 commit into
base: rc
Choose a base branch
from
+626 −632
Open

refactor(dropdown-item-value): rename to OptionContent #491 #741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/tedi/components/buttons/button-group/button-group.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
[class.tedi-dropdown-item--selected]="item.selected()"
(itemSelect)="onDropdownItemSelect(item)"
>
<tedi-dropdown-item-value>
<tedi-option-content>
@if (item.iconLeft()) {
<tedi-icon
[name]="item.iconLeft()!"
Expand All @@ -37,17 +37,17 @@
} @else if (item.icon()) {
<tedi-icon [name]="item.icon()!" color="inherit" [size]="18" />
}
<tedi-dropdown-item-value-label>{{
<tedi-option-content-label>{{
item.label()
}}</tedi-dropdown-item-value-label>
}}</tedi-option-content-label>
@if (item.iconRight()) {
<tedi-icon
[name]="item.iconRight()!"
color="inherit"
[size]="18"
/>
}
</tedi-dropdown-item-value>
</tedi-option-content>
</li>
}
</tedi-dropdown-content>
Expand Down
8 changes: 4 additions & 4 deletions src/tedi/components/buttons/button-group/button-group.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ import { DropdownComponent } from "../../overlay/dropdown/dropdown.component";
import { DropdownTriggerDirective } from "../../overlay/dropdown/dropdown-trigger/dropdown-trigger.directive";
import { DropdownContentComponent } from "../../overlay/dropdown/dropdown-content/dropdown-content.component";
import { DropdownItemComponent } from "../../overlay/dropdown/dropdown-item/dropdown-item.component";
import { DropdownItemValueComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value.component";
import { DropdownItemValueLabelComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component";
import { OptionContentComponent } from "../../helpers/option-content/option-content.component";
import { OptionContentLabelComponent } from "../../helpers/option-content/option-content-label.component";
import { TediTranslationService } from "../../../services/translation/translation.service";

export type ButtonGroupDropdownLabelMode = "selected" | "static";
Expand All @@ -42,8 +42,8 @@ export type ButtonGroupDropdownLabelMode = "selected" | "static";
DropdownTriggerDirective,
DropdownContentComponent,
DropdownItemComponent,
DropdownItemValueComponent,
DropdownItemValueLabelComponent,
OptionContentComponent,
OptionContentLabelComponent,
],
templateUrl: "./button-group.component.html",
styleUrl: "./button-group.component.scss",
Expand Down
8 changes: 4 additions & 4 deletions src/tedi/components/content/table/table-columns-menu/table-columns-menu.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@
[closeOnSelect]="false"
(itemSelect)="handleToggle(column)"
>
<tedi-dropdown-item-value
<tedi-option-content
type="checkbox"
[selected]="isVisible"
[disabled]="isLastVisible"
>
<tedi-dropdown-item-value-label>
<tedi-option-content-label>
{{ resolveHeader(column) }}
</tedi-dropdown-item-value-label>
</tedi-dropdown-item-value>
</tedi-option-content-label>
</tedi-option-content>
</li>
}
</tedi-dropdown-content>
Expand Down
8 changes: 4 additions & 4 deletions src/tedi/components/content/table/table-columns-menu/table-columns-menu.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import { DropdownComponent } from "../../../overlay/dropdown/dropdown.component"
import { DropdownContentComponent } from "../../../overlay/dropdown/dropdown-content/dropdown-content.component";
import { DropdownItemComponent } from "../../../overlay/dropdown/dropdown-item/dropdown-item.component";
import { DropdownTriggerDirective } from "../../../overlay/dropdown/dropdown-trigger/dropdown-trigger.directive";
import { DropdownItemValueComponent } from "../../../overlay/dropdown/dropdown-item-value/dropdown-item-value.component";
import { DropdownItemValueLabelComponent } from "../../../overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component";
import { OptionContentComponent } from "../../../helpers/option-content/option-content.component";
import { OptionContentLabelComponent } from "../../../helpers/option-content/option-content-label.component";
import { TediTranslationService } from "../../../../services/translation/translation.service";
import { TEDI_TABLE_CONTEXT } from "../table.context";
import type { TediTableContextValue } from "../table.types";
Expand All @@ -29,8 +29,8 @@ import type { TediTableContextValue } from "../table.types";
DropdownContentComponent,
DropdownItemComponent,
DropdownTriggerDirective,
DropdownItemValueComponent,
DropdownItemValueLabelComponent,
OptionContentComponent,
OptionContentLabelComponent,
],
templateUrl: "./table-columns-menu.component.html",
styleUrl: "./table-columns-menu.component.scss",
Expand Down
24 changes: 12 additions & 12 deletions src/tedi/components/filter/filter.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,14 @@
[id]="getOptionId(i)"
(click)="!option.disabled && selectOption(option.value)"
>
<tedi-dropdown-item-value
<tedi-option-content
[selected]="isOptionSelected(option.value)"
[disabled]="!!option.disabled"
>
<tedi-dropdown-item-value-label>{{
<tedi-option-content-label>{{
option.label
}}</tedi-dropdown-item-value-label>
</tedi-dropdown-item-value>
}}</tedi-option-content-label>
</tedi-option-content>
</div>
}
</div>
Expand Down Expand Up @@ -126,15 +126,15 @@
(keydown.space)="$event.preventDefault(); toggleSelectAll()"
tabindex="0"
>
<tedi-dropdown-item-value
<tedi-option-content
type="checkbox"
[selected]="allFilteredSelected()"
[indeterminate]="someFilteredSelected()"
>
<tedi-dropdown-item-value-label>{{
<tedi-option-content-label>{{
resolvedSelectAllLabel()
}}</tedi-dropdown-item-value-label>
</tedi-dropdown-item-value>
}}</tedi-option-content-label>
</tedi-option-content>
</div>
<tedi-separator />
}
Expand Down Expand Up @@ -169,15 +169,15 @@
[id]="getOptionId(i)"
(click)="!option.disabled && toggleOption(option.value)"
>
<tedi-dropdown-item-value
<tedi-option-content
type="checkbox"
[selected]="isOptionSelected(option.value)"
[disabled]="!!option.disabled"
>
<tedi-dropdown-item-value-label>{{
<tedi-option-content-label>{{
option.label
}}</tedi-dropdown-item-value-label>
</tedi-dropdown-item-value>
}}</tedi-option-content-label>
</tedi-option-content>
</div>
}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/tedi/components/filter/filter.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,8 @@
color: var(--dropdown-item-active-text);
background: var(--dropdown-item-active-background);

.tedi-dropdown-item-value__label,
.tedi-dropdown-item-value__meta {
.tedi-option-content__label,
.tedi-option-content__meta {
color: inherit;
}

Expand Down
44 changes: 19 additions & 25 deletions src/tedi/components/filter/filter.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,67 +423,63 @@ describe("FilterComponent", () => {
fixture.detectChanges();
});

it("should render dropdown-item-value for each option", () => {
it("should render option-content for each option", () => {
const items = fixture.debugElement.queryAll(
By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
By.css(".tedi-filter-dropdown__options tedi-option-content"),
);
expect(items.length).toBe(TEST_OPTIONS.length);
});

it("should render dropdown-item-value with checkbox type", () => {
it("should render option-content with checkbox type", () => {
const items = fixture.debugElement.queryAll(
By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
By.css(".tedi-filter-dropdown__options tedi-option-content"),
);
items.forEach((item) => {
expect(item.componentInstance.type()).toBe("checkbox");
});
});

it("should render dropdown-item-value-label for each option", () => {
it("should render option-content-label for each option", () => {
const labels = fixture.debugElement.queryAll(
By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value-label"),
By.css(".tedi-filter-dropdown__options tedi-option-content-label"),
);
expect(labels.length).toBe(TEST_OPTIONS.length);
expect(labels[0].nativeElement.textContent.trim()).toBe("Option A");
});

it("should pass selected state to dropdown-item-value", () => {
it("should pass selected state to option-content", () => {
fixture.componentRef.setInput("value", ["a"]);
fixture.detectChanges();

const items = fixture.debugElement.queryAll(
By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
By.css(".tedi-filter-dropdown__options tedi-option-content"),
);
expect(items[0].componentInstance.selected()).toBe(true);
expect(items[1].componentInstance.selected()).toBe(false);
});

it("should pass disabled state to dropdown-item-value", () => {
it("should pass disabled state to option-content", () => {
const items = fixture.debugElement.queryAll(
By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
By.css(".tedi-filter-dropdown__options tedi-option-content"),
);
expect(items[3].componentInstance.disabled()).toBe(true);
expect(items[0].componentInstance.disabled()).toBe(false);
});

it("should render select-all with dropdown-item-value checkbox type", () => {
it("should render select-all with option-content checkbox type", () => {
const selectAll = fixture.debugElement.query(
By.css(
".tedi-filter-dropdown__item--select-all tedi-dropdown-item-value",
),
By.css(".tedi-filter-dropdown__item--select-all tedi-option-content"),
);
expect(selectAll).toBeTruthy();
expect(selectAll.componentInstance.type()).toBe("checkbox");
});

it("should pass indeterminate state to select-all dropdown-item-value", () => {
it("should pass indeterminate state to select-all option-content", () => {
fixture.componentRef.setInput("value", ["a"]);
fixture.detectChanges();

const selectAll = fixture.debugElement.query(
By.css(
".tedi-filter-dropdown__item--select-all tedi-dropdown-item-value",
),
By.css(".tedi-filter-dropdown__item--select-all tedi-option-content"),
);
expect(selectAll.componentInstance.indeterminate()).toBe(true);
expect(selectAll.componentInstance.selected()).toBe(false);
Expand All @@ -494,9 +490,7 @@ describe("FilterComponent", () => {
fixture.detectChanges();

const selectAll = fixture.debugElement.query(
By.css(
".tedi-filter-dropdown__item--select-all tedi-dropdown-item-value",
),
By.css(".tedi-filter-dropdown__item--select-all tedi-option-content"),
);
expect(selectAll.componentInstance.selected()).toBe(true);
expect(selectAll.componentInstance.indeterminate()).toBe(false);
Expand Down Expand Up @@ -853,7 +847,7 @@ describe("FilterComponent", () => {
expect(options.nativeElement.getAttribute("tabindex")).toBe("0");
});

it("should not have tabbable checkbox inputs inside dropdown-item-value", () => {
it("should not have tabbable checkbox inputs inside option-content", () => {
const checkboxes = fixture.debugElement.queryAll(
By.css(".tedi-filter-dropdown__options input[type='checkbox']"),
);
Expand Down Expand Up @@ -1257,9 +1251,9 @@ describe("FilterComponent", () => {
expect(badge).toBeNull();
});

it("should render default type dropdown-item-value", () => {
it("should render default type option-content", () => {
const items = fixture.debugElement.queryAll(
By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
By.css(".tedi-filter-dropdown__options tedi-option-content"),
);
expect(items.length).toBe(TEST_OPTIONS.length);
items.forEach((item) => {
Expand Down Expand Up @@ -1493,7 +1487,7 @@ describe("FilterComponent", () => {

it("should not render multiselect checkboxes", () => {
const checkboxes = hostFixture.debugElement.queryAll(
By.css("tedi-dropdown-item-value"),
By.css("tedi-option-content"),
);
expect(checkboxes.length).toBe(0);
});
Expand Down
8 changes: 4 additions & 4 deletions src/tedi/components/filter/filter.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ import { SeparatorComponent } from "../helpers/separator/separator.component";
import { DropdownComponent } from "../overlay/dropdown/dropdown.component";
import { DropdownTriggerDirective } from "../overlay/dropdown/dropdown-trigger/dropdown-trigger.directive";
import { DropdownContentComponent } from "../overlay/dropdown/dropdown-content/dropdown-content.component";
import { DropdownItemValueComponent } from "../overlay/dropdown/dropdown-item-value/dropdown-item-value.component";
import { DropdownItemValueLabelComponent } from "../overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component";
import { OptionContentComponent } from "../helpers/option-content/option-content.component";
import { OptionContentLabelComponent } from "../helpers/option-content/option-content-label.component";
import { FormFieldComponent } from "../form/form-field/form-field.component";
import { TextFieldComponent } from "../form/text-field/text-field.component";
import { FilterContentDirective } from "./filter-content.directive";
Expand Down Expand Up @@ -53,8 +53,8 @@ export interface FilterOption {
DropdownComponent,
DropdownTriggerDirective,
DropdownContentComponent,
DropdownItemValueComponent,
DropdownItemValueLabelComponent,
OptionContentComponent,
OptionContentLabelComponent,
FormFieldComponent,
TextFieldComponent,
FilterContentDirective,
Expand Down
28 changes: 14 additions & 14 deletions src/tedi/components/form/input-group/input-group.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ import { DropdownComponent } from "../../overlay/dropdown/dropdown.component";
import { DropdownTriggerDirective } from "../../overlay/dropdown/dropdown-trigger/dropdown-trigger.directive";
import { DropdownContentComponent } from "../../overlay/dropdown/dropdown-content/dropdown-content.component";
import { DropdownItemComponent } from "../../overlay/dropdown/dropdown-item/dropdown-item.component";
import { DropdownItemValueComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value.component";
import { DropdownItemValueLabelComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component";
import { DropdownItemValueMetaComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value-meta.component";
import { OptionContentComponent } from "../../helpers/option-content/option-content.component";
import { OptionContentLabelComponent } from "../../helpers/option-content/option-content-label.component";
import { OptionContentMetaComponent } from "../../helpers/option-content/option-content-meta.component";
import { SelectOptionTemplateDirective } from "../select/select-templates.directive";

/**
Expand Down Expand Up @@ -69,9 +69,9 @@ const meta: Meta<InputGroupComponent> = {
DropdownTriggerDirective,
DropdownContentComponent,
DropdownItemComponent,
DropdownItemValueComponent,
DropdownItemValueLabelComponent,
DropdownItemValueMetaComponent,
OptionContentComponent,
OptionContentLabelComponent,
OptionContentMetaComponent,
SelectOptionTemplateDirective,
],
}),
Expand Down Expand Up @@ -212,10 +212,10 @@ export const StartDynamic: Story = {
ellipsis="end"
>
<ng-template tediSelectOption let-item>
<tedi-dropdown-item-value layout="vertical">
<tedi-dropdown-item-value-label>{{ item.name }}</tedi-dropdown-item-value-label>
<tedi-dropdown-item-value-meta>{{ item.number }}</tedi-dropdown-item-value-meta>
</tedi-dropdown-item-value>
<tedi-option-content layout="vertical">
<tedi-option-content-label>{{ item.name }}</tedi-option-content-label>
<tedi-option-content-meta>{{ item.number }}</tedi-option-content-meta>
</tedi-option-content>
</ng-template>
</tedi-select>
</tedi-input-group>
Expand Down Expand Up @@ -498,10 +498,10 @@ export const AllControls: StoryObj = {
ellipsis="end"
>
<ng-template tediSelectOption let-item>
<tedi-dropdown-item-value layout="vertical">
<tedi-dropdown-item-value-label>{{ item.name }}</tedi-dropdown-item-value-label>
<tedi-dropdown-item-value-meta>{{ item.number }}</tedi-dropdown-item-value-meta>
</tedi-dropdown-item-value>
<tedi-option-content layout="vertical">
<tedi-option-content-label>{{ item.name }}</tedi-option-content-label>
<tedi-option-content-meta>{{ item.number }}</tedi-option-content-meta>
</tedi-option-content>
</ng-template>
</tedi-select>
<span tediInputGroupSuffix>EUR</span>
Expand Down
Loading
Loading