Merge pull request #391 from rackerlabs/surf-1236-invert-pill-dismissible

fix(hx-pill): invert dismissible behaviour with persist

Author: CITguy

docs/components/pills/index.html

@@ -25,15 +25,19 @@ <h2 id="basic-pill">Basic Pill</h2>
           <fieldset>
             <legend>Options</legend>
             <label>
-              <input type="checkbox" v-model="isDismissable" />
-              Dismissable
+              <input type="checkbox" v-model="isPersistent" />
+              Persist
             </label>
           </fieldset>
         </form>
       </header>
 
       <div>
-        <hx-pill :dismissable="isDismissable" v-text="content"></hx-pill>
+        <hx-pill
+          :persist="isPersistent"
+          v-text="content"
+          @dismiss="onEvent"
+        ></hx-pill>
       </div>
 
       <footer>

docs/components/pills/pill-demo.js

@@ -5,13 +5,19 @@ if (document.getElementById('vue-pillDemo')) {
         el: '#vue-pillDemo',
         data: {
             content: 'status: unicorns!',
-            isDismissable: false,
+            isPersistent: false,
+        },
+        methods: {
+            onEvent: function (evt) {
+                evt.preventDefault();
+                alert(`Event: "${evt.type}"`);
+            },
         },
         computed: {
             snippet: function () {
                 return Util.snippet(`
                     <hx-pill
-                      ${this.isDismissable ? 'dismissable' : ''}
+                      ${this.isPersistent ? 'persist' : ''}
                     >
                       ${this.content}
                     </hx-pill>

docs/components/pills/test.html

@@ -14,8 +14,8 @@
   <section>
     <h2>Outside Tables</h2>
     <p>
-      <hx-pill>Persistent</hx-pill>
-      <hx-pill dismissable>Dismissible</hx-pill>
+      <hx-pill persist>Persistent</hx-pill>
+      <hx-pill>Dismissible</hx-pill>
     </p>
   </section>
 
@@ -25,12 +25,12 @@ <h2>Inside Tables</h2>
       <tbody>
         <tr>
           <td>
-            <hx-pill>Persistent</hx-pill>
+            <hx-pill persist>Persistent</hx-pill>
           </td>
         </tr>
         <tr>
           <td>
-            <hx-pill dismissable>Dismissable</hx-pill>
+            <hx-pill>Dismissable</hx-pill>
           </td>
         </tr>
       </tbody>
@@ -43,12 +43,12 @@ <h2>Inside Tables (Condensed)</h2>
       <tbody>
         <tr>
           <td>
-            <hx-pill>Persistent</hx-pill>
+            <hx-pill persist>Persistent</hx-pill>
           </td>
         </tr>
         <tr>
           <td>
-            <hx-pill dismissable>Dismissable</hx-pill>
+            <hx-pill>Dismissable</hx-pill>
           </td>
         </tr>
       </tbody>

docs/elements/hx-pill/index.html

@@ -51,18 +51,18 @@ <h2 id="methods">Methods</h2>
 
 {% block attributes %}
   <dl>
-    <dt>dismissable {Boolean [false]} <i>(optional)</i></dt>
+    <dt>persist {Boolean}</dt>
     <dd>
-      When present, pill will be dismissable.
+      When present, pill will not be dismissable.
     </dd>
   </dl>
 {% endblock %}
 
 {% block properties %}
   <dl>
-    <dt>dismissable {Boolean [false]}</dt>
+    <dt>persist {Boolean [false]}</dt>
     <dd>
-      When <code>true</code>, pill will be dismissable.
+      When <code>true</code>, pill will not be dismissable.
     </dd>
   </dl>
 {% endblock %}

src/helix-ui/elements/HXPillElement.js

@@ -32,17 +32,36 @@ export class HXPillElement extends HXElement {
 
     $onConnect () {
         this._btnDismiss.addEventListener('click', this._onDismiss);
+        this.$upgradeProperty('persist');
     }
 
     $onDisconnect () {
         this._btnDismiss.removeEventListener('click', this._onDismiss);
     }
 
+    /**
+     * Property reflecting the `persist` HTML attribute, indicating whether the
+     * pill may be dismissed. If true, the dismiss button will not be shown.
+     *
+     * @default false
+     * @type {Boolean}
+     */
+    get persist () {
+        return this.hasAttribute('persist');
+    }
+    set persist (value) {
+        if (value) {
+            this.setAttribute('persist', '');
+        } else {
+            this.removeAttribute('persist');
+        }
+    }
+
     /**
      * Dismiss the pill (removes element from the DOM)
      */
     dismiss () {
-        if (this.$emit('dismiss')) {
+        if (!this.persist && this.$emit('dismiss')) {
             // only if event was not canceled by consumer
             this.remove();
         }

src/helix-ui/elements/HXPillElement.less

@@ -17,7 +17,7 @@
     #Button.reset();
     align-items: center;
     color: @gray-600;
-    display: none;
+    display: inline-flex;
     height: 1.5em;
     justify-content: center;
     margin: 0 -0.5rem 0 0;
@@ -33,8 +33,8 @@
   }
 }
 
-:host([dismissable]) {
+:host([persist]) {
   #hxDismiss {
-    display: inline-flex;
+    display: none;
   }
 }