feat(dropdown): align dropdown checkmark (#1265)

allianz · Aug 7, 2024 · 5fed95d · 5fed95d
1 parent 1e4c2e7
commit 5fed95d
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 17 deletions.
diff --git a/...entation/examples/dropdown/dropdown-rendering-items/dropdown-rendering-items-example.html b/...entation/examples/dropdown/dropdown-rendering-items/dropdown-rendering-items-example.html
@@ -2,9 +2,35 @@
     <div nxRow>
         <div nxCol="12, 12, 4">
             <nx-formfield label="Car brand">
-                <nx-dropdown [valueFormatter]="toText">
-                    @for (brand of demoData; track brand) {
-                    <nx-dropdown-item [value]="brand"></nx-dropdown-item>
+                <nx-dropdown
+                    [valueFormatter]="toText"
+                    verticalAlignCheckmark="center"
+                    [(ngModel)]="value"
+                >
+                    <ng-template nxClosedLabel>
+                        <span>{{ value?.brand }}</span>
+                    </ng-template>
+                    @for (car of demoData; track car.id) {
+                    <nx-dropdown-item [value]="car">
+                        <div style="display: flex; align-items: center">
+                            <div
+                                nxAvatar
+                                size="small"
+                                class="nx-margin-right-m"
+                            >
+                                {{ car.avatar }}
+                            </div>
+
+                            <div style="display: flex; flex-direction: column">
+                                <span class="nx-font-weight-semibold">
+                                    {{ car.brand }}
+                                </span>
+                                <span class="nx-font-weight-light">
+                                    {{ car.year }}
+                                </span>
+                            </div>
+                        </div>
+                    </nx-dropdown-item>
                     }
                 </nx-dropdown>
             </nx-formfield>

diff --git a/...umentation/examples/dropdown/dropdown-rendering-items/dropdown-rendering-items-example.ts b/...umentation/examples/dropdown/dropdown-rendering-items/dropdown-rendering-items-example.ts
@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NxAvatarModule } from '@aposin/ng-aquila/avatar';
 import {
+    NxDropdownClosedLabelDirective,
     NxDropdownComponent,
     NxDropdownItemComponent,
 } from '@aposin/ng-aquila/dropdown';
@@ -25,23 +28,26 @@ import {
         NxFormfieldComponent,
         NxDropdownComponent,
         NxDropdownItemComponent,
+        NxAvatarModule,
+        FormsModule,
+        NxDropdownClosedLabelDirective,
     ],
 })
 export class DropdownRenderingItemsExampleComponent {
+    value: any;
+
     demoData = [
-        'BMW',
-        'Audi',
-        'VW',
-        'Mercedes',
-        'Porsche',
-        'Tesla',
-        'Lada',
-        'Opel',
-        'Fiat',
-        'Ford',
-        'Kia',
-        'Toyota',
-        'Ferrari',
+        { id: '1', avatar: 'B', brand: 'BMW', year: '1983' },
+        { id: '2', avatar: 'A', brand: 'Audi', year: '2009' },
+        { id: '3', avatar: 'V', brand: 'VW', year: '2024' },
+        { id: '4', avatar: 'T', brand: 'Tesla', year: '2004' },
+        { id: '5', avatar: 'L', brand: 'Lada', year: '2005' },
+        { id: '6', avatar: 'O', brand: 'Opel', year: '2013' },
+        { id: '7', avatar: 'F', brand: 'Fiat', year: '2017' },
+        { id: '8', avatar: 'F', brand: 'Ford', year: '1979' },
+        { id: '9', avatar: 'K', brand: 'Kia', year: '2000' },
+        { id: '10', avatar: 'T', brand: 'Toyota', year: '2021' },
+        { id: '11', avatar: 'F', brand: 'Ferrari', year: '2023' },
     ];
 
     toText(value: string): string | null {

diff --git a/projects/ng-aquila/src/dropdown/dropdown.html b/projects/ng-aquila/src/dropdown/dropdown.html
@@ -40,6 +40,7 @@
         class="nx-dropdown__panel"
         [class.has-filter]="showFilter"
         [class.nx-dropdown__panel--in-outline-field]="_isInOutlineField"
+        [class.centered-checkmark]='verticalAlignCheckmark === "center"'
         (keydown)="_handleKeydown($event)"
         [dir]="dir"
         #panel

diff --git a/projects/ng-aquila/src/dropdown/dropdown.md b/projects/ng-aquila/src/dropdown/dropdown.md
@@ -46,6 +46,8 @@ The items inside the dropdown can be rendered either by `[valueFormatter]` or by
 
 If there is ng-content projected by nx-dropdown-item, this content will be used by the dropdown to display the items (middle). The library implements a fallback if you do not provide `[valueFormatter]` and ng-content. In this case, `[value]` will be used by .toString() as value for the item (right).
 
+For more advanced content see the first dropdown where `[verticalAlignCheckmark]` is used to center the checkmark vertically.
+
 <!-- example(dropdown-rendering-items) -->
 
 ### Custom closed label dropdown

diff --git a/projects/ng-aquila/src/dropdown/dropdown.scss b/projects/ng-aquila/src/dropdown/dropdown.scss
@@ -69,6 +69,14 @@ $dropdown-border-size: nx-border-size(xs);
         outline: none;
     }
 
+    &.centered-checkmark {
+        ::ng-deep nx-dropdown-item {
+            .nx-dropdown-results__option {
+                align-items: center;
+            }
+        }
+    }
+
     &--in-outline-field {
         .nx-dropdown__panel-body {
             // (6 * line-height of item + padding of item) + 16px for top and bottom padding of first and last element

diff --git a/projects/ng-aquila/src/dropdown/dropdown.spec.ts b/projects/ng-aquila/src/dropdown/dropdown.spec.ts
@@ -1646,6 +1646,21 @@ describe('NxDropdownComponent', () => {
             expect(renderedResult.textContent).toBe('DE');
         }));
     });
+
+    describe('vertical align checkmark', () => {
+        beforeEach(fakeAsync(() => {
+            configureNxDropdownTestingModule([VerticalAlignCheckmarkComponent]);
+        }));
+
+        it('dropdown should have class centered-checkmark', fakeAsync(() => {
+            createTestComponent(VerticalAlignCheckmarkComponent);
+            dropdownInstance.verticalAlignCheckmark = 'center';
+            fixture.detectChanges();
+            openDropdownByClick();
+
+            expect(getDropdown()).toHaveClass('centered-checkmark');
+        }));
+    });
 });
 
 interface DropdownTestItem {
@@ -2241,3 +2256,14 @@ class DropdownLazy extends DropdownTest {
         },
     ];
 }
+
+@Component({
+    template: `<nx-dropdown nxLabel="Car brand" [(value)]="selectedValue" [placeholder]="placeholder" [verticalAlignCheckmark]="verticalAlignCheckmark">
+        <nx-dropdown-item value="BMW">BMW</nx-dropdown-item>
+    </nx-dropdown>`,
+    standalone: true,
+    imports: [NxDropdownModule],
+})
+class VerticalAlignCheckmarkComponent extends DropdownTest {
+    verticalAlignCheckmark = 'top';
+}
diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -72,6 +72,9 @@ export interface NxDropdownOption {
 
 export type NxDropdownPanelMinWidth = 'trigger' | 'none';
 
+/** Vertical alignment of dropdown checkmark */
+export type VerticalAlignCheckmark = 'top' | 'center';
+
 /** Dropdown data that requires internationalization. */
 @Injectable({ providedIn: 'root' })
 export class NxDropdownIntl {
@@ -200,6 +203,8 @@ export class NxDropdownComponent
 
     @Input() ariaLabelledBy: string | null = null;
 
+    @Input() verticalAlignCheckmark: VerticalAlignCheckmark = 'top';
+
     private _selectionModel!: SelectionModel<NxDropdownOption>;
 
     /** The ID of rendered dropdown html element. */

diff --git a/projects/ng-aquila/src/dropdown/item/dropdown-item.scss b/projects/ng-aquila/src/dropdown/item/dropdown-item.scss
@@ -64,14 +64,23 @@ nx-checkbox {
 
     nx-icon {
         line-height: v(dropdown-item-line-height);
-        font-size: nx-font-size(3xs);
+        font-size: nx-font-size(xs);
+
+        ::ng-deep .nx-dropdown__panel--in-outline-field & {
+            font-size: nx-font-size(3xs) !important;
+        }
+
+        &:has(svg) {
+            height: v(dropdown-item-line-height);
+        }
     }
 
     :host-context([dir='rtl']) & {
         margin-right: initial;
         margin-left: nx-spacer(2xs);
     }
 }
+
 // focus style
 /* clean-css ignore:start */