[components] Fixing styling bugs and removing focus completly from va… (

#714) * [storybook] Pin version of @storybook/react (#705) * [components] Fixing styling bugs and removing focus completly from validation
sanity-io · Apr 23, 2018 · d037bda · d037bda
1 parent 13a999c
commit d037bda
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 17 deletions.
diff --git a/packages/@sanity/components/src/validation/ValidationList.js b/packages/@sanity/components/src/validation/ValidationList.js
@@ -33,7 +33,7 @@ export default class ValidationList extends React.PureComponent {
     documentType: null,
     onClose: () => undefined,
     showLink: false,
-    onFocus: undefined
+    onFocus: () => undefined
   }
 
   componentWillUnmount() {
@@ -70,33 +70,42 @@ export default class ValidationList extends React.PureComponent {
     const validation = markers.filter(marker => marker.type === 'validation')
     const errors = validation.filter(marker => marker.level === 'error')
     const warnings = validation.filter(marker => marker.level === 'warning')
+
+    if (errors.length === 0 && warnings.length === 0) {
+      return <div />
+    }
+
     return (
       <div className={styles.root}>
-        {errors.length > 0 && (
-          <div className={styles.items}>
-            <ul>
-              {errors.map((error, i) => (
+        <div className={styles.items}>
+          <ul>
+            {errors.length > 0 &&
+              errors.map((error, i) => (
                 <ValidationListItem
                   key={i}
-                  hasFocus={i === 0 && isOpen}
+                  // focus is not ready yet
+                  // hasFocus={i === 0 && isOpen}
                   path={this.resolvePathTitle(error.path)}
                   marker={error}
                   onClick={this.handleClick}
                   showLink={showLink}
                 />
               ))}
-              {warnings.map((warning, i) => (
+
+            {warnings.length > 0 &&
+              warnings.map((warning, i) => (
                 <ValidationListItem
                   key={i}
-                  hasFocus={i === 0 && isOpen}
+                  // focus is not ready yet
+                  // hasFocus={i === 0 && isOpen}
+                  path={this.resolvePathTitle(warning.path)}
                   marker={warning}
                   onClick={this.handleClick}
                   showLink={showLink}
                 />
               ))}
-            </ul>
-          </div>
-        )}
+          </ul>
+        </div>
       </div>
     )
   }

diff --git a/packages/@sanity/components/src/validation/ValidationStatus.js b/packages/@sanity/components/src/validation/ValidationStatus.js
@@ -55,10 +55,14 @@ export default class ValidationStatus extends React.PureComponent {
       tooltipText = warningText
     }
 
-    if (errors.length === 1) {
+    if (errors.length === 1 && warnings.length === 0) {
       tooltipText = errors[0].item.message
     }
 
+    if (warnings.length === 1 && errors.length === 0) {
+      tooltipText = warnings[0].item.message
+    }
+
     return (
       <Tooltip
         title={tooltipText}

diff --git a/packages/@sanity/components/src/validation/styles/ValidationListItem.css b/packages/@sanity/components/src/validation/styles/ValidationListItem.css
@@ -10,15 +10,15 @@
   cursor: pointer;
   box-sizing: border-box;
   outline: none;
-
-  @nest &:focus {
-    background-color: color(var(--state-danger-color) a(15%));
-  }
 }
 
 .error {
   color: var(--state-danger-color);
 
+  @nest &:focus {
+    background-color: color(var(--state-danger-color) a(15%));
+  }
+
   @nest &:not(:last-child) {
     border-bottom: 1px solid color(var(--state-danger-color) a(10%));
   }
@@ -27,6 +27,11 @@
 .warning {
   color: var(--state-warning-color);
 
+  @nest &:hover,
+  &:focus {
+    background-color: color(var(--state-warning-color) a(10%));
+  }
+
   @nest &:not(:last-child) {
     border-bottom: 1px solid color(var(--state-warning-color) a(10%));
   }

diff --git a/packages/@sanity/desk-tool/src/pane/Editor.js b/packages/@sanity/desk-tool/src/pane/Editor.js
@@ -510,7 +510,10 @@ export default withRouterHOC(
                 padding="small"
                 onClick={this.handleToggleValidationResults}
               >
-                {errors.length} <ChevronDown />
+                {errors.length}
+                <span style={{paddingLeft: '0.5em'}}>
+                  <ChevronDown />
+                </span>
               </Button>
             </Tooltip>
           )}