0.8.3 - Improve styling

deskpro · Jan 10, 2019 · 4fbf344 · 4fbf344
1 parent 4159179
commit 4fbf344
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,9 @@
-## 0.8.3 - 2019-01-08
+## 0.8.3 - 2019-01-10
 
 * Fix navigation in child menu
 * Improve scope
 * Fix search with menuStructure
+* Improve styling
 
 ## 0.8.2 - 2019-01-08
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deskpro/token-field",
-  "version": "0.8.3-beta.5",
+  "version": "0.8.3",
   "description": "",
   "main": "dist/index.js",
   "private": false,

diff --git a/src/Components/TokenField.jsx b/src/Components/TokenField.jsx
@@ -209,7 +209,7 @@ export default class TokenField extends React.Component {
         let valueScope = [];
         if (t.scope) {
           valueScope = [t.scope];
-        } else if (token.scopes) {
+        } else if (token && token.scopes) {
           valueScope = token.scopes;
         }
         if (token && valueScope.length && scopes.length === 0) {

diff --git a/src/Components/TokenFieldInput.jsx b/src/Components/TokenFieldInput.jsx
@@ -180,6 +180,13 @@ export default class TokenFieldInput extends React.Component {
     const match = value.match(/ ?([-a-z:]+)$/i);
     let tokens = [];
     const keyword = '';
+    if (value === '') {
+      this.setState({
+        value
+      });
+      this.handleAllTokens();
+      return true;
+    }
     if (match) {
       const regexp = new RegExp(match[1], 'i');
       tokens = this.props.tokenTypes.filter((token) => {
@@ -227,6 +234,7 @@ export default class TokenFieldInput extends React.Component {
       keyword,
       selectedToken,
     });
+    return true;
   };
 
   handleAllTokens = () => {
@@ -460,8 +468,11 @@ export default class TokenFieldInput extends React.Component {
       return this.renderAllTokens();
     }
     const { keyword, selectedToken } = this.state;
+    if (this.state.tokens.length === 0) {
+      return null;
+    }
     return (
-      <div className="dp-select">
+      <div className={classNames(styles['dp-select'], 'dp-select')}>
         <div className="dp-select__content">
           <Scrollbar>
             <List className="dp-selectable-list">

diff --git a/src/styles/colours.css b/src/styles/colours.css
@@ -44,4 +44,8 @@
 @value greyscale200: #ebecec;
 @value greyscale150: #f4f5f5;
 @value greyscale100: #fcfcfc;
-@value greyscale00: #ffffff;
+@value greyscale00: #ffffff;
+
+@value selected: #e9eef8;
+@value extendIcon: #8e8e8e;
+@value extendBackground: #dee0df;
diff --git a/src/styles/style.css b/src/styles/style.css
@@ -1,5 +1,8 @@
 @value (
+    extendBackground,
+    extendIcon,
     morningSky,
+    selected,
     sunShine,
     sonicPrimary,
     greyscale00,
@@ -111,7 +114,7 @@
 }
 .selected {
     color: sonicPrimary;
-    background-color: morningSky;
+    background-color: selected;
 }
 .current-value {
     color: greyscale00;
@@ -151,11 +154,17 @@
     position: static;
     color: inherit;
 }
+.dp-select,
 .dp-select__all-tokens {
     & > :global(.dp-select__content) {
-        padding: 5px 0 0 !important;
+        padding: 4px 0 0 !important;
+        min-width: 100px;
+        border-radius: 3px;
         & :global(.dp-list__element) {
             padding: 0 6px;
+            &:hover {
+              background-color: selected;
+            }
             &:global(.separator) {
                 border-bottom: solid 1px greyscale500;
             }
@@ -174,6 +183,11 @@
         }
     }
 }
+.dp-select {
+    & > :global(.dp-select__content) {
+        padding: 4px 0 !important;
+    }
+}
 .select {
     & > :global(.dp-select__content) {
         padding: 0;
@@ -218,7 +232,7 @@
 }
 .extend-tokens {
     text-align: center;
-    background-color: greyscale200;
+    background-color: extendBackground;
     border-top: solid 1px greyscale500;
     &:hover, &:focus {
         background-color: greyscale400;
@@ -229,7 +243,8 @@
 }
 .extend-tokens :global(.dp-icon) {
     position: relative;
-    color: greyscale850;
+    left: 0;
+    color: extendIcon;
 }
 .token-subcategory {
     position: absolute;

diff --git a/tests/storybook/components/TokenField.jsx b/tests/storybook/components/TokenField.jsx
@@ -458,7 +458,7 @@ class TokenFieldStory extends React.Component {
           onBlur={action('Blur')}
           placeholder="Search ..."
           showTokensOnFocus={this.props.showTokensOnFocus}
-          nbCollapsed={3}
+          nbCollapsed={2}
         />
         <br />
         <Button onClick={this.addCountryToken}>Add country token</Button>