From cf13ee146678b69f1477b6aee2366962de9986a8 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Wed, 28 Oct 2020 10:03:50 -0700
Subject: [PATCH] Adjusted styling of chip list and editable label. Cleaned up
 CSS and simplified a few things.

---
 chip-list.js      | 19 ++++++++++++-------
 editable-label.js | 18 +++++++++---------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/chip-list.js b/chip-list.js
index 33f2a0b..d839569 100644
--- a/chip-list.js
+++ b/chip-list.js
@@ -15,10 +15,13 @@ class ChipList extends IgniteElement {
                 flex-direction: row;
                 flex-wrap: wrap;
                 gap: 12px;
-                border: solid 0.13rem transparent;
+                border: solid 0.15rem transparent;
                 border-radius: 0.3rem;
-                padding: 0.2rem;
-                margin-left: calc((0.13rem + 0.2rem) * -1);
+                padding: 0.4rem;
+            }
+
+            mt-chip-list:focus {
+                outline: none;
             }
 
             mt-chip-list:hover {
@@ -26,7 +29,7 @@ class ChipList extends IgniteElement {
             }
 
             mt-chip-list.editing {
-                border: solid 0.13rem #ced4da;
+                border: solid 0.15rem rgba(0,0,0,0.1);
                 border-radius: 0.3rem;
             }
 
@@ -144,6 +147,11 @@ class ChipList extends IgniteElement {
                                 //will focus the next avaiable element.
                                 if (e.key == "Tab") {
                                     this.searching = false;
+
+                                    if (this.stopEditingOnBlur) {
+                                        this.editing = false;
+                                    }
+
                                     this.input.innerHTML = "";
                                     return;
                                 }
@@ -192,8 +200,6 @@ class ChipList extends IgniteElement {
     }
 
     onFocus() {
-        console.log("ChpiList, focus called");
-
         if (!this.editing) {
             this.editing = true;
             this.input.focus();
@@ -218,7 +224,6 @@ class ChipList extends IgniteElement {
     }
 
     searchResultClick(item) {
-        console.log("Search result click");
         if (this.items == null) {
             this.items = [];
         }
diff --git a/editable-label.js b/editable-label.js
index ddfaaa2..e2f4db4 100644
--- a/editable-label.js
+++ b/editable-label.js
@@ -9,26 +9,25 @@ class EditableLabel extends IgniteElement {
 
     get styles() {
         return `
+            mt-editable-label.editing {
+                border: solid 0.15rem rgba(0,0,0,0.1);
+            }
+
             mt-editable-label {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-            }
-
-            mt-editable-label>div.focus {
-                border: solid 0.13rem #ced4da;
-                padding: 0.2rem;
                 border-radius: 0.3rem;
+                border: solid 0.15rem transparent;
+                padding: 0.4rem;
             }
 
             mt-editable-label:hover {
                 cursor: pointer;
             }
 
-            mt-editable-label>div {
-                outline: unset;
-                border: solid 0.13rem transparent;
-                padding: 0.2rem;
+            mt-editable-label>div:focus {
+                outline: none;
             }
 
             mt-editable-label>div:empty:before {
@@ -70,6 +69,7 @@ class EditableLabel extends IgniteElement {
     render() {
         return this.template
             .attribute("tabindex", "0")
+            .class(this.editing, value => value ? "editing" : null)
             .onFocus(e => this.onFocus())
             .child(
                 new div()