[components] Proof of new slug concept (#585)

* [components] Show focus and open on press enter

* [components] Proof of new slug concept

* [form-builder] Remove old validation from slug.

* [test-studio] Preview of slug

* [form-builder] Not check slug agains unpublished slugs

* [form-builder] Test of using the validaiton system. Needs access to document

* [form-builder] Clean up imports/variables in SlugInput

* [form-builder] Add focus handling to slug input

* [form-builder] Simplify slug input significantly. Use validation infrastructure.

* [form-builder] Remove unused file

* [form-builder] Make sure _type is set on slug objects

* [form-builder] Make sure slug input is still mounted before setting state

* [form-builder] Make sure slugify always returns a promise

* [form-builder] Fix missing import

* [form-builder] Disable generate slug when no source

packages/@sanity/components/src/buttons/styles/InInput.css

@@ -32,37 +32,8 @@
   line-height: 1em;
 }
 
-.colored {
-  composes: root;
-  background-color: var(--brand-primary);
-  color: var(--white);
-}
-
-.small {
-  font-size: 0.8em;
-}
-
-.danger {
-  composes: root;
-  color: var(--state-danger-color);
-
-  &:hover {
-    background-color: var(--state-danger-color);
-    border-color: var(--state-danger-color);
-    color: var(--input-bg);
-  }
-}
-
-.delete {
-  composes: danger;
-}
-
-.add {
-  composes: colored;
-}
-
-.save {
-  composes: root;
+.button {
+  font-size: 0.7em;
 }
 
 .container {

packages/@sanity/components/src/toggles/Switch.js

@@ -13,6 +13,11 @@ export default class Switch extends React.Component {
     readOnly: PropTypes.bool
   }
 
+  static defaultProps = {
+    onFocus: () => {},
+    onBlur: () => {}
+  }
+
   state = {
     hasFocus: false
   }

packages/@sanity/components/src/validation/ValidationList.js

@@ -8,6 +8,7 @@ export default class ValidationList extends React.PureComponent {
     onFocus: PropTypes.func,
     onClose: PropTypes.func,
     showLink: PropTypes.bool,
+    isOpen: PropTypes.bool,
     documentType: PropTypes.shape({
       fields: PropTypes.arrayOf(PropTypes.shape({name: PropTypes.string.isRequired}))
     }),
@@ -65,7 +66,7 @@ export default class ValidationList extends React.PureComponent {
   }
 
   render() {
-    const {markers, showLink} = this.props
+    const {markers, showLink, isOpen} = this.props
     const validation = markers.filter(marker => marker.type === 'validation')
     const errors = validation.filter(marker => marker.level === 'error')
     const warnings = validation.filter(marker => marker.level === 'warning')
@@ -77,6 +78,7 @@ export default class ValidationList extends React.PureComponent {
               {errors.map((error, i) => (
                 <ValidationListItem
                   key={i}
+                  hasFocus={i === 0 && isOpen}
                   path={this.resolvePathTitle(error.path)}
                   marker={error}
                   onClick={this.handleClick}
@@ -86,6 +88,7 @@ export default class ValidationList extends React.PureComponent {
               {warnings.map((warning, i) => (
                 <ValidationListItem
                   key={i}
+                  hasFocus={i === 0 && isOpen}
                   marker={warning}
                   onClick={this.handleClick}
                   showLink={showLink}

packages/@sanity/components/src/validation/ValidationListItem.js

@@ -9,6 +9,7 @@ export default class ValidationListItem extends React.PureComponent {
     onClick: PropTypes.func,
     showLink: PropTypes.bool,
     path: PropTypes.string,
+    hasFocus: PropTypes.bool,
     marker: PropTypes.shape({
       path: PropTypes.arrayOf(
         PropTypes.oneOfType([
@@ -29,24 +30,57 @@ export default class ValidationListItem extends React.PureComponent {
     showLink: false
   }
 
+  componentDidMount() {
+    if (this.props.hasFocus) {
+      this.focus()
+    }
+  }
+
+
+  handleKeyPress = event => {
+    if (event.key === 'Enter') {
+      this.handleClick(event)
+    }
+  }
+
+  focus() {
+    setTimeout(() => {
+      this._element.focus()
+    }, 200)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.hasFocus) {
+      this.focus()
+    }
+  }
+
   handleClick = event => {
     const {marker, onClick} = this.props
     if (onClick) {
       onClick(event, marker.path)
     }
   }
 
+  setElement = element => {
+    this._element = element
+  }
+
   render() {
     const {marker, onClick, path, showLink} = this.props
     const shouldRenderLink = onClick && showLink
 
     return (
-      <li
+      <a
+        ref={this.setElement}
+        tabIndex={0}
+        onClick={this.handleClick}
+        onKeyPress={this.handleKeyPress}
         className={`
           ${onClick ? styles.interactiveItem : styles.item}
           ${styles[marker.level]}
         `}
-        onClick={this.handleClick}>
+      >
         <span className={styles.icon}>
           <WarningIcon />
         </span>
@@ -65,7 +99,7 @@ export default class ValidationListItem extends React.PureComponent {
             <LinkIcon />
           </span>
         )}
-      </li>
+      </a>
     )
   }
 }

packages/@sanity/components/src/validation/styles/ValidationListItem.css

@@ -9,6 +9,11 @@
   padding: var(--small-padding);
   cursor: pointer;
   box-sizing: border-box;
+  outline: none;
+
+  @nest &:focus {
+    background-color: color(var(--state-danger-color) a(15%));
+  }
 }
 
 .error {

packages/@sanity/desk-tool/src/pane/Editor.js

@@ -176,7 +176,7 @@ export default withRouterHOC(
       onDiscardDraft: PropTypes.func,
       onPublish: PropTypes.func,
       onUnpublish: PropTypes.func,
-      transactionResult: PropTypes.func,
+      transactionResult: PropTypes.shape({type: PropTypes.string}),
       onClearTransactionResult: PropTypes.func,
 
       validationPending: PropTypes.bool,
@@ -485,6 +485,7 @@ export default withRouterHOC(
                 <ValidationList
                   markers={validation}
                   showLink
+                  isOpen={showValidationTooltip}
                   documentType={type}
                   onClose={this.handleCloseValidationResults}
                   onFocus={this.handleFocus}

packages/@sanity/form-builder/src/index.js

@@ -1,15 +1,12 @@
-import * as SlugInput from './inputs/Slug'
-
 export {default as FormBuilder} from './FormBuilder'
 export {default as FormBuilderContext} from './FormBuilderContext'
 export {default as BlockEditor} from './inputs/BlockEditor-slate'
 export {default as ReferenceInput} from './inputs/ReferenceInput'
 export {default as FileInput} from './inputs/FileInput'
 export {default as ImageInput} from './inputs/ImageInput'
 
-// Input component factories
-export {SlugInput}
-
 export function createFormBuilder() {
-  throw new Error('The factory function createFormBuilder(...) has been removed. Please use <FormBuilder .../> instead')
+  throw new Error(
+    'The factory function createFormBuilder(...) has been removed. Please use <FormBuilder .../> instead'
+  )
 }