@pareto-engineering/design-system 2.0.0-alpha.53 → 2.0.0-alpha.56

package/src/ui/f/common/Description/Description.jsx

@@ -3,6 +3,8 @@ import * as React from 'react'
 
 import { useLayoutEffect } from 'react'
 
+import { useField } from 'formik'
+
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem'
@@ -20,8 +22,8 @@ const Description = ({
   id,
   className:userClassName,
   style,
-  children,
-  isError,
+  description,
+  name,
   color,
   // ...otherProps
 }) => {
@@ -29,25 +31,27 @@ const Description = ({
     import('./styles.scss')
   }, [])
 
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-        isError ? 'x-error' : `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      {children}
-    </div>
-  )
+  const [field, meta] = useField(name)
+
+  if (description || ((meta.touched || field.value) && meta.error)) {
+    return (
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          meta.error ? 'x-error' : `x-${color}`,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={style}
+      >
+        { meta.error || description}
+      </div>
+    )
+  }
+  return null
 }
 
 Description.propTypes = {
@@ -67,22 +71,23 @@ Description.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   * The base color for the description
    */
-  children:PropTypes.node,
+  color:PropTypes.string,
+
   /**
-   * The base color for the description
+   * Input description - extra description to guide a use in filling the input
    */
-  color   :PropTypes.string,
+  description:PropTypes.string,
+
   /**
-   * isError
+   * The input name (html - and Formik state)
    */
-  isError :PropTypes.bool,
+  name:PropTypes.string.isRequired,
 }
 
 Description.defaultProps = {
-  isError:false,
-  color  :'metadata',
+  color:'metadata',
 }
 
 export default Description

package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx

@@ -43,7 +43,7 @@ const QueryCombobox = ({
 
   const { setValue, setError } = helpers
 
-  const { error, value } = meta
+  const { value } = meta
 
   const environment = useRelayEnvironment()
 
@@ -101,7 +101,6 @@ const QueryCombobox = ({
     label,
     description,
     setValue,
-    error,
     value,
     color,
     isFetching,

package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx

@@ -33,7 +33,6 @@ const Combobox = ({
   options:items,
   getOptions,
   setValue,
-  error,
   description,
   value,
   color,
@@ -121,11 +120,7 @@ const Combobox = ({
         />
       </Popover>
 
-      {(description || error) && (
-      <FormDescription isError={!!error}>
-        { error || description }
-      </FormDescription>
-      )}
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
     </div>
   )
 }
@@ -181,11 +176,6 @@ Combobox.propTypes = {
    */
   description:PropTypes.string,
 
-  /**
-   * The error object
-   */
-  error:PropTypes.objectOf(PropTypes.string),
-
   /**
    * The value of the custom select input
    */

package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx

@@ -46,7 +46,6 @@ const MultipleCombobox = ({
   options:items,
   getOptions,
   setValue,
-  error,
   description,
   value,
   color,
@@ -213,11 +212,7 @@ const MultipleCombobox = ({
         />
       </Popover>
 
-      {(description || error) && (
-      <FormDescription isError={!!error}>
-        { error || description }
-      </FormDescription>
-      )}
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
 
     </div>
   )
@@ -274,11 +269,6 @@ MultipleCombobox.propTypes = {
    */
   description:PropTypes.string,
 
-  /**
-   * The error object
-   */
-  error:PropTypes.objectOf(PropTypes.string),
-
   /**
    * The value of the custom select input
    */

package/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -34,13 +34,14 @@ const SelectInput = ({
   description,
   disabled,
   isLoading,
+  autoComplete,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
-  const [field, meta] = useField({ name, validate })
+  const [field] = useField({ name, validate })
 
   return (
     <div
@@ -60,7 +61,14 @@ const SelectInput = ({
     >
       <FormLabel name={name}>{label}</FormLabel>
       <div className="select-wrapper">
-        <select className="input" {...field} value={field.value || ''} id={name} disabled={disabled}>
+        <select
+          className="input"
+          {...field}
+          value={field.value || ''}
+          id={name}
+          disabled={disabled}
+          autoComplete={autoComplete}
+        >
           {
         options.map((option) => {
           // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
@@ -82,12 +90,7 @@ const SelectInput = ({
         <LoadingCircle className="x-main2" />
         )}
       </div>
-      {(description || (meta.touched && meta.error))
-      && (
-      <FormDescription isError={!!meta.error} className="v50 mt-v s-1">
-        { meta.error || description }
-      </FormDescription>
-      )}
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
     </div>
   )
 }
@@ -154,7 +157,11 @@ SelectInput.propTypes = {
   /*
   * Whether the query that is fetching the select options is still in flight
   */
-  isLoading:PropTypes.bool,
+  isLoading   :PropTypes.bool,
+  /**
+   * The autoComplete value that the browser should watch for the input
+   */
+  autoComplete:PropTypes.string,
 }
 
 SelectInput.defaultProps = {

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -35,13 +35,14 @@ const TextInput = ({
   disabled,
   placeholder,
   optional,
+  autoComplete,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
-  const [field, meta] = useField({ name, validate })
+  const [field] = useField({ name, validate })
 
   return (
     <div
@@ -73,14 +74,12 @@ const TextInput = ({
         type={type}
         disabled={disabled}
         placeholder={placeholder}
+        autoComplete={autoComplete}
         {...field}
       />
-      {(description || (meta.touched && meta.error))
-      && (
-      <FormDescription isError={!!meta.error} className="v50 mt-v s-1">
-        { meta.error || description }
-      </FormDescription>
-      )}
+
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
+
     </div>
   )
 }
@@ -130,6 +129,7 @@ TextInput.propTypes = {
     'month',
     'tel',
     'hidden',
+    'url',
   ]),
 
   /**
@@ -163,6 +163,12 @@ TextInput.propTypes = {
  * Whether the input is optional or not
  */
   optional:PropTypes.bool,
+
+  /**
+   * The autoComplete value that the browser should watch for the input
+   * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
+   */
+  autoComplete:PropTypes.string,
 }
 
 TextInput.defaultProps = {

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -35,13 +35,14 @@ const TextareaInput = ({
   description,
   disabled,
   placeholder,
+  autoComplete,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
-  const [field, meta] = useField({ name, validate })
+  const [field] = useField({ name, validate })
 
   return (
     <div
@@ -75,17 +76,12 @@ const TextareaInput = ({
         placeholder={placeholder}
         rows={rows}
         disabled={disabled}
+        autoComplete={autoComplete}
       >
         {/* It was a dark and stormy night... */}
       </textarea>
 
-      {(description || (meta.touched && meta.error))
-      && (
-      <FormDescription isError={!!meta.error} className="v50 mt-v s-1">
-        { meta.error || description }
-      </FormDescription>
-      )}
-      {' '}
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
     </div>
   )
 }
@@ -159,6 +155,11 @@ TextareaInput.propTypes = {
    * The textarea placeholder text
    */
   placeholder:PropTypes.string,
+
+  /**
+   * The autoComplete value that the browser should watch for the input
+   */
+  autoComplete:PropTypes.string,
 }
 
 TextareaInput.defaultProps = {