Use paEllipsisTooltip in paSelect and paOption

### Breaking change - **paEllipsisTooltip**: Rename `content` attribute to `paEllipsisContent` ### Bugfix - **Select**: Use `paEllipsisTooltip` and `paEllipsisContent` to properly display long selected value - **Option**: Use `paEllipsisContent` to properly display the tooltip on hover when the option has an ellipsis
plone · Dec 11, 2023 · 057400f · 057400f
1 parent a937f23
commit 057400f
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+# 2.64.0 (2023-12-11)
+
+### Breaking change
+
+- **paEllipsisTooltip**: Rename `content` attribute to `paEllipsisContent`
+
+### Bugfix
+
+- **Select**: Use `paEllipsisTooltip` and `paEllipsisContent` to properly display long selected value
+- **Option**: Use `paEllipsisContent` to properly display the tooltip on hover when the option has an ellipsis 
+
 # 2.63.3 (2023-12-11)
 
 ### Bugfix

diff --git a/projects/demo/src/app/demo/pages/ellipsis-tooltip-page/ellipsis-tooltip-page.component.html b/projects/demo/src/app/demo/pages/ellipsis-tooltip-page/ellipsis-tooltip-page.component.html
@@ -30,7 +30,7 @@
 
     <h3>Inputs and outputs</h3>
     <dl>
-      <dt>content</dt>
+      <dt>paEllipsisContent</dt>
       <dd>
         Triggers a
         <code>hasEllipsis</code>
@@ -44,7 +44,7 @@ <h3>Inputs and outputs</h3>
         and then anytime
         <code>content</code>
         changed (when
-        <code>content</code>
+        <code>paEllipsisContent</code>
         Input is applied).
         <small>
           (Event emitted from

diff --git a/projects/demo/src/app/demo/pages/select-page/select-page.component.html b/projects/demo/src/app/demo/pages/select-page/select-page.component.html
@@ -67,6 +67,14 @@ <h3>Dynamic options</h3>
       <pa-option value="value3">Option 3</pa-option>
     </pa-select>
 
+    <div style="max-width: 400px">
+      <p>Show how select handle long selected value:</p>
+      <pa-select label="Long options">
+        <pa-option value="long1">This is a quite long option which should show an ellipsis</pa-option>
+        <pa-option value="long2">This option is even longer and should also show an ellipsis</pa-option>
+      </pa-select>
+    </div>
+
     <pa-tabs>
       <pa-tab
         (click)="selectedTab = 'standalone'"

diff --git a/projects/pastanaga-angular/package.json b/projects/pastanaga-angular/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.63.3",
+    "version": "2.64.0",
     "license": "MIT",
     "keywords": [
         "angular",

diff --git a/projects/pastanaga-angular/src/lib/controls/textfield/select/select.component.html b/projects/pastanaga-angular/src/lib/controls/textfield/select/select.component.html
@@ -16,6 +16,8 @@
       tabindex="0"
       cdkMonitorElementFocus
       sameWidth
+      paEllipsisTooltip
+      [paEllipsisContent]="displayedValue"
       [class.pa-field-control-filled]="hasValue || isOpened"
       [class.read-only]="readonly"
       [class.disabled]="control.disabled"

diff --git a/projects/pastanaga-angular/src/lib/controls/textfield/select/select.component.spec.ts b/projects/pastanaga-angular/src/lib/controls/textfield/select/select.component.spec.ts
@@ -191,6 +191,7 @@ describe('SelectComponent', () => {
     initWithTemplate(`<pa-select [(ngModel)]="value">${optionsInTemplate}</pa-select>`);
     tick(300);
     whenFirstOptionClicked();
+    tick();
     thenSelectHasValue('first', 'first label');
     expect(host.value).toEqual('first');
     discardPeriodicTasks();
@@ -223,6 +224,7 @@ describe('SelectComponent', () => {
     tick(300);
     expect(spectator.query('.pa-select-value')?.innerHTML.trim()).toEqual('placeholder');
     whenFirstOptionClicked();
+    tick();
     expect(spectator.query('.pa-select-value')?.innerHTML.trim()).toEqual('first label');
     discardPeriodicTasks();
   }));
@@ -381,6 +383,7 @@ describe('SelectComponent', () => {
     tick(300);
     expect(spectator.query('.pa-field-container.pa-dim')).toBeTruthy();
     whenFirstOptionClicked();
+    tick();
     expect(spectator.query('label.pa-sr-only')).toBeTruthy();
     discardPeriodicTasks();
   }));

diff --git a/projects/pastanaga-angular/src/lib/controls/textfield/text-field.module.ts b/projects/pastanaga-angular/src/lib/controls/textfield/text-field.module.ts
@@ -14,6 +14,7 @@ import { NativeTextFieldDirective } from './native-text-field.directive';
 import { OptionComponent, OptionHeaderComponent, PaDropdownModule, SeparatorComponent } from '../../dropdown';
 import { TextFieldDirective } from './text-field.directive';
 import { TypeaheadSelectComponent } from './typeahead-select/typeahead-select.component';
+import { PaTooltipModule } from '../../tooltip';
 
 @NgModule({
   declarations: [
@@ -37,6 +38,7 @@ import { TypeaheadSelectComponent } from './typeahead-select/typeahead-select.co
     ReactiveFormsModule,
     PaFocusableModule,
     PaFormFieldModule,
+    PaTooltipModule,
   ],
   exports: [
     InputComponent,

diff --git a/...ga-angular/src/lib/controls/textfield/typeahead-select/typeahead-select.component.spec.ts b/...ga-angular/src/lib/controls/textfield/typeahead-select/typeahead-select.component.spec.ts
@@ -194,6 +194,7 @@ describe('TypeaheadSelectComponent', () => {
     initWithTemplate(`<pa-typeahead-select [(ngModel)]="value">${optionsInTemplate}</pa-typeahead-select>`);
     tick(300);
     whenFirstOptionClicked();
+    tick();
     thenSelectHasValue('first', 'first label');
     expect(host.value).toEqual('first');
     discardPeriodicTasks();
@@ -228,6 +229,7 @@ describe('TypeaheadSelectComponent', () => {
     tick(300);
     expect((spectator.query('.pa-field-control') as HTMLInputElement)?.value).toEqual('placeholder');
     whenFirstOptionClicked();
+    tick();
     expect((spectator.query('.pa-field-control') as HTMLInputElement)?.value).toEqual('first label');
     discardPeriodicTasks();
   }));
@@ -392,6 +394,7 @@ describe('TypeaheadSelectComponent', () => {
     tick(300);
     expect(spectator.query('.pa-field-container.pa-dim')).toBeTruthy();
     whenFirstOptionClicked();
+    tick();
     expect(spectator.query('label.pa-sr-only')).toBeTruthy();
     discardPeriodicTasks();
   }));

diff --git a/projects/pastanaga-angular/src/lib/dropdown/option/option.component.html b/projects/pastanaga-angular/src/lib/dropdown/option/option.component.html
@@ -24,7 +24,8 @@
     [class.smaller-wrapper]="!!icon || !!avatar">
     <div
       class="pa-option-content body-m"
-      paEllipsisTooltip>
+      paEllipsisTooltip
+      [paEllipsisContent]="text">
       <ng-content></ng-content>
     </div>
     @if (!!description) {

diff --git a/projects/pastanaga-angular/src/lib/dropdown/option/option.component.scss b/projects/pastanaga-angular/src/lib/dropdown/option/option.component.scss
@@ -10,7 +10,10 @@
   cursor: pointer;
   display: flex;
   justify-content: space-between;
-  padding: $padding-menu-option-top $padding-menu-option-side;
+
+  .pa-option-content {
+    padding: $padding-menu-option-top $padding-menu-option-side;
+  }
 
   &.pa-option-with-description {
     padding: rhythm(0.5) $padding-menu-option-side;

diff --git a/projects/pastanaga-angular/src/lib/dropdown/option/option.component.ts b/projects/pastanaga-angular/src/lib/dropdown/option/option.component.ts
@@ -1,5 +1,5 @@
 import {
-  AfterContentInit,
+  AfterViewInit,
   booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -29,7 +29,7 @@ function iconAttribute(value: string | IconModel | null | undefined): IconModel
   styleUrls: ['./option.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OptionComponent implements AfterContentInit {
+export class OptionComponent implements AfterViewInit {
   @Input({ transform: booleanAttribute }) destructive = false;
   @Input({ transform: booleanAttribute }) disabled = false;
   @Input({ transform: booleanAttribute }) dontCloseOnSelect = false;
@@ -63,7 +63,7 @@ export class OptionComponent implements AfterContentInit {
     private cdr: ChangeDetectorRef,
   ) {}
 
-  ngAfterContentInit() {
+  ngAfterViewInit() {
     this.text = this.element.nativeElement.textContent.trim();
   }
 

diff --git a/projects/pastanaga-angular/src/lib/tooltip/ellipsis-tooltip.directive.spec.ts b/projects/pastanaga-angular/src/lib/tooltip/ellipsis-tooltip.directive.spec.ts
@@ -55,23 +55,23 @@ describe('EllipsisTooltipDirective', () => {
       tick();
       expect(updateEllipsisTooltipSpy).not.toHaveBeenCalled();
 
-      directive.ngOnChanges({ content: { currentValue: undefined } as SimpleChange });
+      directive.ngOnChanges({ paEllipsisContent: { currentValue: undefined } as SimpleChange });
       tick();
       expect(updateEllipsisTooltipSpy).not.toHaveBeenCalled();
     }));
 
     it('should do nothing on first content change', fakeAsync(() => {
-      directive.ngOnChanges({ content: { currentValue: 'content', firstChange: true } as SimpleChange });
+      directive.ngOnChanges({ paEllipsisContent: { currentValue: 'content', firstChange: true } as SimpleChange });
       tick();
       expect(updateEllipsisTooltipSpy).not.toHaveBeenCalled();
     }));
 
     it('should call updateEllipsisTooltip on second content change and following ones', fakeAsync(() => {
-      directive.ngOnChanges({ content: { currentValue: 'content', firstChange: false } as SimpleChange });
+      directive.ngOnChanges({ paEllipsisContent: { currentValue: 'content', firstChange: false } as SimpleChange });
       tick();
       expect(updateEllipsisTooltipSpy).toHaveBeenCalled();
 
-      directive.ngOnChanges({ content: { currentValue: 'new Content', firstChange: false } as SimpleChange });
+      directive.ngOnChanges({ paEllipsisContent: { currentValue: 'new Content', firstChange: false } as SimpleChange });
       tick();
       expect(updateEllipsisTooltipSpy).toHaveBeenCalledTimes(2);
     }));

diff --git a/projects/pastanaga-angular/src/lib/tooltip/ellipsis-tooltip.directive.ts b/projects/pastanaga-angular/src/lib/tooltip/ellipsis-tooltip.directive.ts
@@ -20,7 +20,7 @@ export class ExtendedTooltipDirective extends TooltipDirective {}
   selector: '[paEllipsisTooltip]',
 })
 export class EllipsisTooltipDirective implements AfterViewInit, OnChanges {
-  @Input() content?: string;
+  @Input() paEllipsisContent?: string;
 
   @Output() hasEllipsis: EventEmitter<boolean> = new EventEmitter();
 
@@ -37,7 +37,7 @@ export class EllipsisTooltipDirective implements AfterViewInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (!!changes['content']?.currentValue && !changes['content'].firstChange) {
+    if (!!changes['paEllipsisContent']?.currentValue && !changes['paEllipsisContent'].firstChange) {
       setTimeout(() => this.updateEllipsisTooltip(), 0);
     }
   }