feat(js): turn search label into submit button

examples/js/autocomplete.css

@@ -8,7 +8,6 @@
   cursor: initial;
   display: flex;
   height: 100%;
-  padding: 0 0.5rem;
   position: absolute;
   z-index: 2;
 }
@@ -57,12 +56,16 @@
   outline: currentcolor none medium;
 }
 
+.aa-SubmitButton,
 .aa-ResetButton {
   background: none;
   border: 0;
   cursor: pointer;
   height: 100%;
   padding: 0 0.5rem;
+}
+
+.aa-ResetButton {
   position: absolute;
   right: 0;
   z-index: 2;

packages/autocomplete-js/src/components/Label.ts

@@ -3,8 +3,6 @@ import { AutocompleteApi as AutocompleteCoreApi } from '@algolia/autocomplete-co
 import { Component, WithClassNames } from '../types/Component';
 import { concatClassNames, setProperties } from '../utils';
 
-import { SearchIcon } from './SearchIcon';
-
 type LabelProps = WithClassNames<
   ReturnType<AutocompleteCoreApi<any>['getLabelProps']>
 >;
@@ -19,7 +17,5 @@ export const Label: Component<LabelProps, HTMLLabelElement> = ({
     class: concatClassNames(['aa-Label', classNames.label]),
   });
 
-  element.appendChild(SearchIcon({}));
-
   return element;
 };

packages/autocomplete-js/src/components/SubmitButton.ts

@@ -0,0 +1,20 @@
+import { Component, WithClassNames } from '../types/Component';
+import { concatClassNames, setProperties } from '../utils';
+
+import { SearchIcon } from './SearchIcon';
+
+type SubmitButtonProps = WithClassNames<{}>;
+
+export const SubmitButton: Component<SubmitButtonProps, HTMLButtonElement> = ({
+  classNames,
+}) => {
+  const element = document.createElement('button');
+  setProperties(element, {
+    type: 'submit',
+    class: concatClassNames(['aa-SubmitButton', classNames.submitButton]),
+  });
+
+  element.appendChild(SearchIcon({}));
+
+  return element;
+};

packages/autocomplete-js/src/components/index.ts

@@ -13,3 +13,4 @@ export * from './SourceFooter';
 export * from './SourceHeader';
 export * from './SourceItem';
 export * from './SourceList';
+export * from './SubmitButton';

packages/autocomplete-js/src/createAutocompleteDom.ts

@@ -11,6 +11,7 @@ import {
   Panel,
   ResetButton,
   Root,
+  SubmitButton,
 } from './components';
 import { AutocompleteClassNames, AutocompleteDom } from './types';
 
@@ -30,10 +31,12 @@ export function createAutocompleteDom<TItem extends BaseItem>({
   const inputWrapper = InputWrapper({ classNames });
   const label = Label({ classNames, ...getLabelProps({}) });
   const input = Input({ classNames, getInputProps });
+  const submitButton = SubmitButton({ classNames });
   const resetButton = ResetButton({ classNames });
   const form = Form({ classNames, ...getFormProps({ inputElement: input }) });
   const panel = Panel({ classNames, ...getPanelProps({}) });
 
+  label.appendChild(submitButton);
   inputWrapper.appendChild(input);
   inputWrapper.appendChild(label);
   inputWrapper.appendChild(resetButton);
@@ -46,6 +49,7 @@ export function createAutocompleteDom<TItem extends BaseItem>({
     root,
     form,
     label,
+    submitButton,
     resetButton,
     panel,
   };

packages/autocomplete-js/src/types/index.ts

@@ -72,6 +72,7 @@ export type AutocompleteClassNames = Partial<{
   label: string;
   inputWrapper: string;
   input: string;
+  submitButton: string;
   resetButton: string;
   panel: string;
   panelLayout: string;
@@ -88,6 +89,7 @@ export type AutocompleteDom = {
   root: HTMLDivElement;
   form: HTMLFormElement;
   label: HTMLLabelElement;
+  submitButton: HTMLButtonElement;
   resetButton: HTMLButtonElement;
   panel: HTMLDivElement;
 };