Change prop name

Author: =

react/components/AutocompleteInput/README.md

@@ -39,7 +39,7 @@ const UsersAutocomplete = () => {
             ? user.toLowerCase().includes(term.toLowerCase())
             : user.label.toLowerCase().includes(term.toLowerCase())
         ),
-    display: 'small',
+    size: 'small',
   }
 
   const input = {
@@ -107,7 +107,7 @@ const UsersAutocomplete = () => {
       onChange: option =>
         option && setLastSearched(uniq([...lastSearched, option])),
     },
-    display: 'regular',
+    size: 'regular',
   }
 
   const input = {
@@ -226,7 +226,7 @@ const UsersAutocomplete = () => {
     },
     // --- This is what makes the custom option work!
     renderOption: props => <CustomOption {...props} />,
-    display: 'large',
+    size: 'large',
   }
 
   const input = {

react/components/AutocompleteInput/SearchInput/index.tsx

@@ -25,12 +25,12 @@ const propTypes = {
   /** Determine if the input and the button should be disabled */
   disabled: PropTypes.bool,
   /** Determine the search bar size */
-  display: PropTypes.string,
+  barSize: PropTypes.string,
 }
 
 const defaultProps = {
   roundedBottom: true,
-  display: 'regular',
+  barSize: 'regular',
 }
 
 const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
@@ -44,7 +44,7 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
     onFocus,
     onBlur,
     disabled,
-    display,
+    barSize,
     ...inputProps
   } = props
 
@@ -78,7 +78,7 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
 
   const buttonClasses = classNames(
     activeClass,
-    `bg-base br2 br--right w3 bw1 ba pa0 bl-0' h-${display}`,
+    `bg-base br2 br--right w3 bw1 ba pa0 bl-0' h-${barSize}`,
     {
       'c-link pointer': !disabled,
       'c-disabled': disabled,
@@ -89,7 +89,7 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
     <div className="flex flex-row">
       <div className="relative w-100">
         <input
-          className={`${activeClass} w-100 ma0 border-box bw1 br2 ba outline-0 c-on-base t-body ph5 pr8 br--left h-${display}`}
+          className={`${activeClass} w-100 ma0 border-box bw1 br2 ba outline-0 c-on-base t-body ph5 pr8 br--left h-${barSize}`}
           value={value}
           onFocus={handleFocus}
           onBlur={handleBlur}

react/components/AutocompleteInput/index.tsx

@@ -75,7 +75,7 @@ const propTypes = {
      * Selects a size of the input bar, could be set to `small`, `regular` or `large`.
      * `regular` is the default value.
      */
-    display: PropTypes.string,
+    size: PropTypes.string,
   }).isRequired,
 }
 
@@ -92,7 +92,7 @@ const AutocompleteInput: React.FunctionComponent<PropTypes.InferProps<
     loading,
     lastSearched = {},
     icon,
-    display,
+    size,
   },
 }) => {
   const [term, setTerm] = useState(value || '')
@@ -216,7 +216,7 @@ const AutocompleteInput: React.FunctionComponent<PropTypes.InferProps<
         onSearch={() => onSearch(term)}
         onClear={handleClear}
         onChange={handleTermChange}
-        display={display}
+        barSize={size}
       />
       {popoverOpened ? (
         <div className="relative">