Use consts for above/below, add set/get for positioning

Author: tomnez

addon/components/polaris-popover.js

@@ -6,6 +6,8 @@ import { warn } from '@ember/debug';
 import layout from '../templates/components/polaris-popover';
 
 const { ViewUtils } = Ember;
+const ABOVE = 'above';
+const BELOW = 'below';
 
 /**
  * Polaris popover component.
@@ -39,9 +41,7 @@ export default Component.extend({
    * @type {string}
    * @default 'below'
    */
-  preferredPosition: computed(function() {
-    return 'below';
-  }),
+  preferredPosition: BELOW,
 
   /**
    * Show or hide the Popover
@@ -95,17 +95,29 @@ export default Component.extend({
   /*
    * Internal properties.
    */
-  verticalPosition: computed('preferredPosition', function() {
-    let preferredPosition = this.get('preferredPosition');
+  verticalPosition: computed('preferredPosition', {
+    // If `preferredPosition` is set to `mostSpace`, the value
+    // will be calculated and set when the user opens the popover.
+    // The only allowed values are 'above' and 'below', so we
+    // return null for anything other than those values and let
+    // ember-basic-dropdown use its default value.
+    get() {
+      let preferredPosition = this.get('preferredPosition');
 
-    if (preferredPosition === 'above' || preferredPosition === 'below') {
-      return preferredPosition;
-    }
+      if (preferredPosition === ABOVE || preferredPosition === BELOW) {
+        return preferredPosition;
+      }
 
-    // If set to `mostSpace`, the value will be calculated
-    // and set when the user opens the popover.
+      return null;
+    },
 
-    return null;
+    set(key, value) {
+      if (value === ABOVE || value === BELOW) {
+        return value;
+      }
+
+      return null;
+    }
   }),
 
   triggerStyle: computed(function() {
@@ -137,7 +149,7 @@ export default Component.extend({
 
     if (activators.length > 1) {
       warn('Multiple popover activators found. Defaulting to `preferredPosition` of `below`');
-      return 'below';
+      return BELOW;
     }
 
     let [activator] = activators;
@@ -146,7 +158,7 @@ export default Component.extend({
     let bottomSpace = windowHeight - bottom;
 
     // Use `below` if distance is equal
-    return bottomSpace >= top ? 'below' : 'above';
+    return bottomSpace >= top ? BELOW : ABOVE;
   },
 
   actions: {

addon/templates/components/polaris-popover.hbs

@@ -1,6 +1,6 @@
 {{#basic-dropdown
   verticalPosition=verticalPosition
-  onOpen=(action 'onOpen')
+  onOpen=(action "onOpen")
   as |dd|
 }}
   {{yield (hash