Merge branch 'autosuggest-input-refactor' into 'develop'

Refactor Input input to accept 'theme' prop, pass down from Autosuggest components

See merge request soapbox-pub/soapbox!1815

app/soapbox/components/autosuggest_account_input.tsx

@@ -7,6 +7,7 @@ import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Menu } from 'soapbox/components/dropdown_menu';
+import type { InputThemes } from 'soapbox/components/ui/input/input';
 
 const noOp = () => {};
 
@@ -19,6 +20,7 @@ interface IAutosuggestAccountInput {
   autoSelect?: boolean,
   menu?: Menu,
   onKeyDown?: React.KeyboardEventHandler,
+  theme?: InputThemes,
 }
 
 const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({

app/soapbox/components/autosuggest_input.tsx

@@ -6,10 +6,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest_emoji';
 import Icon from 'soapbox/components/icon';
+import { Input } from 'soapbox/components/ui';
 import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest_account';
 import { isRtl } from 'soapbox/rtl';
 
 import type { Menu, MenuItem } from 'soapbox/components/dropdown_menu';
+import type { InputThemes } from 'soapbox/components/ui/input/input';
 
 type CursorMatch = [
   tokenStart: number | null,
@@ -59,6 +61,7 @@ interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>,
   maxLength?: number,
   menu?: Menu,
   resultsPosition: string,
+  theme?: InputThemes,
 }
 
 export default class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
@@ -284,7 +287,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
   }
 
   render() {
-    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props;
+    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
     const { suggestionsHidden } = this.state;
     const style: React.CSSProperties = { direction: 'ltr' };
 
@@ -298,11 +301,10 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
       <div key='input' className='relative w-full'>
         <label className='sr-only'>{placeholder}</label>
 
-        <input
+        <Input
           type='text'
-          className={classNames({
-            'block w-full sm:text-sm border-gray-200 dark:border-gray-800 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:border-gray-200 dark:focus-border-gray-800 focus:ring-primary-500 focus:ring-2': true,
-          }, className)}
+          className={className}
+          outerClassName='mt-0'
           ref={this.setInput}
           disabled={disabled}
           placeholder={placeholder}
@@ -318,6 +320,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
           id={id}
           maxLength={maxLength}
           data-testid='autosuggest-input'
+          theme={theme}
         />
       </div>,
       <Portal key='portal'>

app/soapbox/components/ui/input/input.tsx

@@ -11,7 +11,10 @@ const messages = defineMessages({
   hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
 });
 
-interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern'> {
+/** Possible theme names for an Input. */
+type InputThemes = 'normal' | 'search' | 'transparent';
+
+interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'style' | 'id'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean,
   /** The initial text in the input. */
@@ -36,8 +39,8 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   prepend?: React.ReactElement,
   /** An element to display as suffix to input. Cannot be used with password type. */
   append?: React.ReactElement,
-  /** Adds specific styling to denote a searchabe input. */
-  isSearch?: boolean,
+  /** Theme to style the input with. */
+  theme?: InputThemes,
 }
 
 /** Form input element. */
@@ -45,7 +48,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
 
-    const { type = 'text', icon, className, outerClassName, hasError, append, prepend, isSearch, ...filteredProps } = props;
+    const { type = 'text', icon, className, outerClassName, hasError, append, prepend, theme = 'normal', ...filteredProps } = props;
 
     const [revealed, setRevealed] = React.useState(false);
 
@@ -59,8 +62,8 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
       <div
         className={
           classNames('mt-1 relative shadow-sm', outerClassName, {
-            'rounded-md': !isSearch,
-            'rounded-full': isSearch,
+            'rounded-md': theme !== 'search',
+            'rounded-full': theme === 'search',
           })
         }
       >
@@ -82,9 +85,10 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           ref={ref}
           className={classNames({
             'text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
-              true,
-            'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': !isSearch,
-            'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': isSearch,
+              ['normal', 'search'].includes(theme),
+            'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
+            'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search',
+            'bg-transparent border-none': theme === 'transparent',
             'pr-7': isPassword || append,
             'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',
@@ -127,4 +131,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
   },
 );
 
-export default Input;
+export {
+  Input as default,
+  InputThemes,
+};

app/soapbox/features/compose/components/search.tsx

@@ -15,6 +15,7 @@ import {
   submitSearch,
 } from 'soapbox/actions/search';
 import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
+import { Input } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppSelector } from 'soapbox/hooks';
 
@@ -117,7 +118,6 @@ const Search = (props: ISearch) => {
 
   const hasValue = value.length > 0 || submitted;
   const componentProps: any = {
-    className: 'block w-full pl-3 pr-10 py-2 border border-gray-200 dark:border-gray-800 rounded-full leading-5 bg-gray-200 dark:bg-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm',
     type: 'text',
     id: 'search',
     placeholder: intl.formatMessage(messages.placeholder),
@@ -126,6 +126,7 @@ const Search = (props: ISearch) => {
     onKeyDown: handleKeyDown,
     onFocus: handleFocus,
     autoFocus: autoFocus,
+    theme: 'search',
   };
 
   if (autosuggest) {
@@ -142,7 +143,7 @@ const Search = (props: ISearch) => {
         {autosuggest ? (
           <AutosuggestAccountInput {...componentProps} />
         ) : (
-          <input {...componentProps} />
+          <Input {...componentProps} />
         )}
 
         <div