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

Author: Cathy Siller

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>

src/helix-ui/elements/HXPillElement.js

@@ -32,12 +32,35 @@ export class HXPillElement extends HXElement {
 
     $onConnect () {
         this._btnDismiss.addEventListener('click', this._onDismiss);
+        this.$upgradeProperty('persist');
     }
 
     $onDisconnect () {
         this._btnDismiss.removeEventListener('click', this._onDismiss);
     }
 
+    static get $observedAttributes () {
+        return [ 'persist' ];
+    }
+
+    /**
+     * 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', ''); // boolean
+        } else {
+            this.removeAttribute('persist');
+        }
+    }
+
     /**
      * Dismiss the pill (removes element from the DOM)
      */

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,10 @@
   }
 }
 
-:host([dismissable]) {
-  #hxDismiss {
-    display: inline-flex;
+:host([persist]) {
+  #hxPill {
+    #hxDismiss {
+      display: none;
+    }
   }
 }