feat(dropdown): adapt new expert styling (#373)

allianz · Sep 2, 2021 · edf2389 · edf2389
1 parent 7c2b014
commit edf2389
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 31 deletions.
diff --git a/projects/ng-aquila/src/dropdown/dropdown.scss b/projects/ng-aquila/src/dropdown/dropdown.scss
@@ -59,10 +59,6 @@ $dropdown-border-size: nx-border-size(xs);
   }
 
   &--in-outline-field {
-    .nx-dropdown__panel-header {
-      @include type-style(formfield-outline-label);
-    }
-
     .nx-dropdown__panel-body {
       // (6 * line-height of item + padding of item) + 16px for top and bottom padding of first and last element
       max-height: calc(6 * (#{v(dropdown-item-outline-line-height)} + 16px) + 16px);

diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -72,24 +72,6 @@ export class NxDropdownSelectChange<T = any> {
     public value: T) { }
 }
 
-function getPositions(): ConnectionPositionPair[] {
-  return [{
-    originX: 'start',
-    originY: 'top',
-    overlayX: 'start',
-    overlayY: 'top'
-  }, {
-    originX: 'start',
-    originY: 'center',
-    overlayX: 'start',
-    overlayY: 'center'
-  }, {
-    originX: 'start',
-    originY: 'bottom',
-    overlayX: 'start',
-    overlayY: 'bottom'
-  }];
-}
 @Component({
   selector: 'nx-dropdown',
   templateUrl: 'dropdown.html',
@@ -140,6 +122,38 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
   /** Whether or not the overlay panel is open. */
   private _panelOpen = false;
 
+  private _defaultPositions: ConnectionPositionPair[] = [{
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'top'
+  }, {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'start',
+    overlayY: 'center'
+  }, {
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'bottom'
+  }];
+
+  private _outlinePositions: ConnectionPositionPair[] = [{
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetY: 8
+  },
+  {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    offsetY: -8
+  }];
+
   /** @docs-private */
   errorState: boolean = false;
 
@@ -297,7 +311,9 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
    * the trigger completely). If the panel cannot fit below the trigger, it
    * will fall back to a position above the trigger.
    */
-  _positions: ConnectionPositionPair[];
+  get _positions(): ConnectionPositionPair[] {
+    return this._isInOutlineField ? this._outlinePositions : this._defaultPositions;
+  }
 
   /**
    * @docs-private
@@ -367,6 +383,10 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
 
   /** @docs-private */
   get label(): string {
+    if (this._isInOutlineField) {
+      return '';
+    }
+
     return this.overlayLabel ? this.overlayLabel : (this.formFieldComponent ? this.formFieldComponent.label : '');
   }
 
@@ -453,7 +473,6 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
       this.ngControl.valueAccessor = this;
     }
 
-    this._positions = getPositions();
     this.tabIndex = parseInt(tabIndex, 10) || 0;
   }
 
@@ -696,17 +715,21 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
 
   /** Adds a offset to the overlay position, so the formfield label and the dropdown panel header are vertically aligned. */
   private _updatePositionOffset() {
+    if (this._isInOutlineField) {
+      return;
+    }
+
     let offset = 0;
 
-    if (this.formFieldComponent !== null) {
+    if (this.formFieldComponent) {
       const formFieldRect = this.formFieldComponent.elementRef.nativeElement.getBoundingClientRect();
       const dropdownRect = this._elementRef.nativeElement.getBoundingClientRect();
       const panelHeader = this.overlayDir.overlayRef.overlayElement.querySelector('.nx-dropdown__panel-header');
       const panelHeaderPaddingTop = panelHeader ? parseInt(getComputedStyle(panelHeader).paddingTop, 10) : 0;
       offset = formFieldRect.top - dropdownRect.top - panelHeaderPaddingTop;
     }
 
-    this._positions[0].offsetY = offset;
+    this._defaultPositions[0].offsetY = offset;
   }
 
   /** Focuses the select element. */

diff --git a/projects/ng-aquila/src/shared-styles/theming/tokens.scss b/projects/ng-aquila/src/shared-styles/theming/tokens.scss
@@ -837,11 +837,6 @@ $nx-theme: (
   formfield-outline-control-font-weight: paragraph-03-font-weight,
   formfield-outline-control-letter-spacing: paragraph-03-letter-spacing,
 
-  formfield-outline-label-font-size: paragraph-03-font-size,
-  formfield-outline-label-line-height: paragraph-03-line-height,
-  formfield-outline-label-font-weight: 600,
-  formfield-outline-label-letter-spacing: paragraph-03-letter-spacing,
-
   formfield-outline-label-height: 28px,
   formfield-outline-floating-distance: -29px,