[components] Improve validation components

sanity-io · Oct 6, 2020 · be4e960 · be4e960
1 parent 0e94de8
commit be4e960
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/packages/@sanity/components/src/validation/ValidationListItem.css b/packages/@sanity/components/src/validation/ValidationListItem.css
@@ -12,7 +12,7 @@
   line-height: 0;
 }
 
-.root[data-item-type='simple'] {
+.root.kind_simple {
   user-select: none;
   cursor: unset;
   padding: var(--extra-small-padding) var(--medium-padding);
@@ -35,12 +35,11 @@
   composes: root;
   cursor: pointer;
 
-  @nest &.error:not([data-item-type='simple']):hover, &.error:not([data-item-type='simple']):focus {
+  @nest &.error:not(.kind_simple):hover, &.error:not(.kind_simple):focus {
     background-color: color(var(--state-danger-color) a(10%));
   }
 
-  @nest &.warning:not([data-item-type='simple']):hover,
-    &.warning:not([data-item-type='simple']):focus {
+  @nest &.warning:not(.kind_simple):hover, &.warning:not(.kind_simple):focus {
     background-color: color(var(--state-warning-color) a(10%));
   }
 }
@@ -49,7 +48,7 @@
   display: block;
   margin: -3px 0 -3px -3px;
 
-  @nest & svg {
+  @nest & > svg {
     font-size: calc(17 / 16 * 1em);
 
     @nest &[data-sanity-icon='true'] {

diff --git a/packages/@sanity/components/src/validation/ValidationListItem.tsx b/packages/@sanity/components/src/validation/ValidationListItem.tsx
@@ -2,6 +2,7 @@ import {Marker, Path} from '@sanity/types'
 import classNames from 'classnames'
 import React, {useRef, useEffect, useCallback} from 'react'
 import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
+import WarningOutlineIcon from 'part:@sanity/base/warning-outline-icon'
 
 import styles from './ValidationListItem.css'
 
@@ -46,7 +47,8 @@ function ValidationListItem(props: ValidationListItemProps) {
   const children = (
     <>
       <span className={styles.icon}>
-        <ErrorOutlineIcon />
+        {marker.level === 'error' && <ErrorOutlineIcon />}
+        {marker.level === 'warning' && <WarningOutlineIcon />}
       </span>
 
       <div className={styles.content}>
@@ -59,7 +61,8 @@ function ValidationListItem(props: ValidationListItemProps) {
   const className = classNames(
     hasOnClick ? styles.interactive : styles.root,
     marker.level && styles[marker.level],
-    truncate && styles.truncate
+    truncate && styles.truncate,
+    styles[`kind_${kind}`]
   )
 
   if (!hasOnClick) {
@@ -73,7 +76,7 @@ function ValidationListItem(props: ValidationListItemProps) {
   return (
     // @todo: use a <button> element
     <div
-      data-item-type={kind}
+      // data-item-type={kind}
       ref={rootRef}
       tabIndex={0}
       onClick={handleClick}

diff --git a/packages/@sanity/components/src/validation/ValidationStatus.css b/packages/@sanity/components/src/validation/ValidationStatus.css
@@ -3,11 +3,26 @@
 .root {
   display: flex;
   align-items: center;
+  outline: none;
+  border-radius: var(--border-radius-small);
 
-  @nest & > button {
+  @nest & > svg {
     display: block;
+    font-size: calc(25 / 16 * 1rem);
     pointer-events: none;
   }
+
+  @nest &:focus-visible {
+    box-shadow: 0 0 0 2px var(--focus-color);
+  }
+
+  @nest &.error {
+    color: var(--state-danger-color);
+  }
+
+  @nest &.warning {
+    color: var(--state-warning-color);
+  }
 }
 
 .tooltip {

diff --git a/packages/@sanity/components/src/validation/ValidationStatus.tsx b/packages/@sanity/components/src/validation/ValidationStatus.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import React from 'react'
 import {
   isValidationErrorMarker,
@@ -6,7 +7,7 @@ import {
   Marker
 } from '@sanity/types'
 import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
-import Button from 'part:@sanity/components/buttons/default'
+import WarningOutlineIcon from 'part:@sanity/base/warning-outline-icon'
 import {Tooltip} from 'part:@sanity/components/tooltip'
 import ValidationList from './ValidationList'
 
@@ -18,8 +19,8 @@ interface ValidationStatusProps {
   markers: Marker[]
 }
 
-function ValidationStatus(props: ValidationStatusProps) {
-  const {markers = [], showSummary = false, hideTooltip = false} = props
+function ValidationStatus(props: ValidationStatusProps & React.HTMLProps<HTMLDivElement>) {
+  const {className, markers = [], showSummary = false, hideTooltip = false, ...restProps} = props
   const validationMarkers = markers.filter(isValidationMarker)
 
   if (validationMarkers.length === 0) {
@@ -39,8 +40,18 @@ function ValidationStatus(props: ValidationStatusProps) {
   const hasBoth = hasErrors && hasWarnings
 
   const children = (
-    <div className={styles.root}>
-      <Button color="danger" icon={ErrorOutlineIcon} kind="simple" padding="none" />
+    <div
+      {...restProps}
+      className={classNames(
+        styles.root,
+        className,
+        hasErrors && styles.error,
+        !hasErrors && hasWarnings && styles.warning
+      )}
+      tabIndex={0}
+    >
+      {hasErrors && <ErrorOutlineIcon />}
+      {!hasErrors && hasWarnings && <WarningOutlineIcon />}
     </div>
   )
 
@@ -89,7 +100,8 @@ function ValidationSummaryTooltipContent({
       <div
         className={!hasErrors && hasWarnings ? styles.tooltipWarningIcon : styles.tooltipErrorIcon}
       >
-        <ErrorOutlineIcon />
+        {hasErrors && <ErrorOutlineIcon />}
+        {!hasErrors && hasWarnings && <WarningOutlineIcon />}
       </div>
       <div className={styles.tooltipText}>{text}</div>
     </div>