Merge pull request #321 from SAP/feature/#320

#320 refactored to add dropdown alignment and no arrow options
SAP · Nov 26, 2018 · 5cfbe12 · 5cfbe12
2 parents 66a205a + 8694d61
commit 5cfbe12
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/docs/modules/documentation/containers/popover/examples/popover-example.component.html b/docs/modules/documentation/containers/popover/examples/popover-example.component.html
@@ -59,4 +59,46 @@
             </fd-menu-list>
         </fd-menu>
     </fd-popover-body>
-</fd-popover>
+</fd-popover>
+
+<fd-popover [alignment]="'right'">
+    <fd-popover-control>
+        <button fd-button>Button</button>
+    </fd-popover-control>
+    <fd-popover-body>
+        <fd-menu>
+            <fd-menu-list>
+                <fd-menu-item>
+                    <a [attr.href]="'#'">Option 1</a>
+                </fd-menu-item>
+                <fd-menu-item>
+                    <a [routerLink]="'#'">Option 2</a>
+                </fd-menu-item>
+                <fd-menu-item>
+                    Option 3
+                </fd-menu-item>
+            </fd-menu-list>
+        </fd-menu>
+    </fd-popover-body>
+</fd-popover>
+
+<fd-popover [arrow]='false' [alignment]="'right'">
+    <fd-popover-control>
+      <fd-image [size]="'l'" [circle]="true" [photo]="'https://placeimg.com/400/400/tech'"></fd-image>
+    </fd-popover-control>
+    <fd-popover-body>
+        <fd-menu>
+            <fd-menu-list>
+                <fd-menu-item>
+                    <a [attr.href]="'#'">Option 1</a>
+                </fd-menu-item>
+                <fd-menu-item>
+                    <a [routerLink]="'#'">Option 2</a>
+                </fd-menu-item>
+                <fd-menu-item>
+                    Option 3
+                </fd-menu-item>
+            </fd-menu-list>
+        </fd-menu>
+    </fd-popover-body>
+</fd-popover>
diff --git a/library/src/lib/popover/popover.component.html b/library/src/lib/popover/popover.component.html
@@ -21,7 +21,8 @@
         <ng-container *ngTemplateOutlet="popoverBodyTpl"></ng-container>
     </div>
 </div>
-<div *ngIf="!isDropdown" class="fd-popover">
+<div *ngIf="!isDropdown" class="fd-popover"
+    [ngClass]="{ 'fd-popover--right' : alignment == 'right'}">
     <div
         #popoverControlWrapper
         class="fd-popover__control"
@@ -40,7 +41,8 @@
 <ng-template #popoverBodyTpl>
     <div
         class="fd-popover__body"
-        [ngClass]="{ 'fd-popover__body--no-arrow': isDropdown }"
+        [ngClass]="{  'fd-popover__body--no-arrow': isDropdown || !arrow,
+                      'fd-popover__body--right' : alignment == 'right' }"
         [attr.aria-hidden]="disabled ? true : !isOpen"
     >
         <ng-content select="fd-popover-body"></ng-content>

diff --git a/library/src/lib/popover/popover.component.ts b/library/src/lib/popover/popover.component.ts
@@ -17,6 +17,10 @@ import { HashService } from '../utils/hash.service';
     templateUrl: './popover.component.html'
 })
 export class PopoverComponent implements OnInit, AfterViewInit {
+    @Input()
+    alignment: string = '';
+    @Input()
+    arrow: boolean = true;
     @Input()
     disabled: boolean = false;
     @Input()