From a436d52174d03fd27d1716607492d783b39debb9 Mon Sep 17 00:00:00 2001
From: Nathan Lafrance-Berger <nathan.lafranceb@gmail.com>
Date: Wed, 23 Aug 2023 15:31:11 -0400
Subject: [PATCH] feat(atomic): added textarea search box (#3118)

* feat(atomic): added text area

* feat(atomic): added search text area

* feat(atomic): added new buttons

* feat(atomic): absolute positioning

* feat(atomic): layout

* feat(atomic): removed need for fixed height

* feat(atomic): spacer in own function

* feat(atomic): added full searchbox test suite

* feat(atomic): added tsdoc for new prop

* feat(atomic): udpated prop in test

* Add generated files

* feat(atomic): moved z-index out

* feat(atomic): calling handlers

* feat(atomic): apply new styles only when textarea prop

* feat(atomic): feedback implementation

* feat(atomic): feedback implementation

* feat(atomic): fixed undefined parent error

---------

Co-authored-by: GitHub Actions Bot <>
---
 .../src/lib/stencil-generated/components.ts   |   4 +-
 .../e2e/search-box/search-box-actions.ts      |   9 +
 .../e2e/search-box/search-box-assertions.ts   |  13 +-
 .../e2e/search-box/search-box-selectors.ts    |   1 +
 .../text-area-search-box.cypress.ts           | 159 +++++++++++++++++
 packages/atomic/src/components.d.ts           |   8 +
 .../common/search-box/clear-button.tsx        |   4 +-
 .../common/search-box/search-box-wrapper.tsx  |  33 ++--
 .../common/search-box/search-box.pcss         |  23 +++
 .../common/search-box/search-text-area.tsx    | 151 ++++++++++++++++
 .../common/search-box/submit-button.tsx       |   2 +-
 .../search-box/text-area-clear-button.tsx     |  39 +++++
 .../search-box/text-area-submit-button.tsx    |  36 ++++
 .../atomic-search-box/atomic-search-box.pcss  |   4 +
 .../atomic-search-box/atomic-search-box.tsx   | 161 +++++++++++++-----
 packages/atomic/src/images/clear-slim.svg     |   4 +
 packages/atomic/src/images/search-slim.svg    |   4 +
 packages/atomic/src/pages/examples/genqa.html |   4 +-
 18 files changed, 596 insertions(+), 63 deletions(-)
 create mode 100644 packages/atomic/cypress/e2e/search-box/text-area-search-box.cypress.ts
 create mode 100644 packages/atomic/src/components/common/search-box/search-text-area.tsx
 create mode 100644 packages/atomic/src/components/common/search-box/text-area-clear-button.tsx
 create mode 100644 packages/atomic/src/components/common/search-box/text-area-submit-button.tsx
 create mode 100644 packages/atomic/src/images/clear-slim.svg
 create mode 100644 packages/atomic/src/images/search-slim.svg

diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
index 2222535dce4..9156001e581 100644
--- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
+++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
@@ -1490,13 +1490,13 @@ Example:
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['clearFilters', 'disableSearch', 'enableQuerySyntax', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionTimeout']
+  inputs: ['clearFilters', 'disableSearch', 'enableQuerySyntax', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionTimeout', 'textarea']
 })
 @Component({
   selector: 'atomic-search-box',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['clearFilters', 'disableSearch', 'enableQuerySyntax', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionTimeout']
+  inputs: ['clearFilters', 'disableSearch', 'enableQuerySyntax', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionTimeout', 'textarea']
 })
 export class AtomicSearchBox {
   protected el: HTMLElement;
diff --git a/packages/atomic/cypress/e2e/search-box/search-box-actions.ts b/packages/atomic/cypress/e2e/search-box/search-box-actions.ts
index 16ad941d58e..c4ed1a73298 100644
--- a/packages/atomic/cypress/e2e/search-box/search-box-actions.ts
+++ b/packages/atomic/cypress/e2e/search-box/search-box-actions.ts
@@ -61,3 +61,12 @@ export function typeSearchInput(query: string, verifyInput = '') {
   SearchBoxSelectors.inputBox().type(`${query}{enter}`, {force: true});
   SearchBoxAssertions.assertHasText(verifyInput || query);
 }
+
+export function typeSearchTextArea(query: string, verifyInput = '') {
+  SearchBoxSelectors.textArea().click();
+  SearchBoxSelectors.textArea().type(`${query}{enter}`, {force: true});
+  SearchBoxAssertions.assertHasText(
+    verifyInput || query,
+    SearchBoxSelectors.textArea
+  );
+}
diff --git a/packages/atomic/cypress/e2e/search-box/search-box-assertions.ts b/packages/atomic/cypress/e2e/search-box/search-box-assertions.ts
index 655f884d5b4..51a4de8dd69 100644
--- a/packages/atomic/cypress/e2e/search-box/search-box-assertions.ts
+++ b/packages/atomic/cypress/e2e/search-box/search-box-assertions.ts
@@ -1,14 +1,19 @@
 import {SearchBoxSelectors} from './search-box-selectors';
 
-export function assertFocusSearchBox() {
+export function assertFocusSearchBox(
+  searchBoxSelector = SearchBoxSelectors.inputBox
+) {
   it('should focus on the search box', () => {
-    SearchBoxSelectors.inputBox().should('be.focused');
+    searchBoxSelector().should('be.focused');
   });
 }
 
-export function assertHasText(text: string) {
+export function assertHasText(
+  text: string,
+  searchBoxSelector = SearchBoxSelectors.inputBox
+) {
   it(`should contain "${text}"`, () => {
-    SearchBoxSelectors.inputBox().should('have.value', text);
+    searchBoxSelector().should('have.value', text);
   });
 }
 
diff --git a/packages/atomic/cypress/e2e/search-box/search-box-selectors.ts b/packages/atomic/cypress/e2e/search-box/search-box-selectors.ts
index 07694a37f7f..550157b9c9b 100644
--- a/packages/atomic/cypress/e2e/search-box/search-box-selectors.ts
+++ b/packages/atomic/cypress/e2e/search-box/search-box-selectors.ts
@@ -6,6 +6,7 @@ export const SearchBoxSelectors = {
   host: () => cy.get(searchBoxComponent),
   shadow: () => cy.get(searchBoxComponent).shadow(),
   inputBox: () => SearchBoxSelectors.shadow().find('[part="input"]'),
+  textArea: () => SearchBoxSelectors.shadow().find('[part="textarea"]'),
   submitButton: () =>
     SearchBoxSelectors.shadow().find('[part="submit-button"]'),
   querySuggestionsWrapper: () =>
diff --git a/packages/atomic/cypress/e2e/search-box/text-area-search-box.cypress.ts b/packages/atomic/cypress/e2e/search-box/text-area-search-box.cypress.ts
new file mode 100644
index 00000000000..865cbcb028d
--- /dev/null
+++ b/packages/atomic/cypress/e2e/search-box/text-area-search-box.cypress.ts
@@ -0,0 +1,159 @@
+import {
+  SafeStorage,
+  StorageItems,
+} from '../../../src/utils/local-storage-utils';
+import {RouteAlias} from '../../fixtures/fixture-common';
+import {TestFixture} from '../../fixtures/test-fixture';
+import * as CommonAssertions from '../common-assertions';
+import {selectIdleCheckboxValueAt} from '../facets/facet-common-actions';
+import * as FacetCommonAssertions from '../facets/facet-common-assertions';
+import {addFacet, field} from '../facets/facet/facet-actions';
+import {FacetSelectors} from '../facets/facet/facet-selectors';
+import {addQuerySummary} from '../query-summary-actions';
+import * as QuerySummaryAssertions from '../query-summary-assertions';
+import {
+  addSearchBox,
+  AddSearchBoxOptions,
+  typeSearchTextArea,
+} from './search-box-actions';
+import * as SearchBoxAssertions from './search-box-assertions';
+import {searchBoxComponent, SearchBoxSelectors} from './search-box-selectors';
+
+const setSuggestions = (count: number) => () => {
+  cy.intercept(
+    {method: 'POST', path: '**/rest/search/v2/querySuggest?*'},
+    (request) => {
+      request.reply((response) => {
+        const newResponse = response.body;
+        newResponse.completions = Array.from({length: count}, (_, i) => ({
+          expression: `query-suggestion-${i}`,
+          executableConfidence: 0,
+          highlighted: `Suggestion ${i}`,
+          score: 0,
+        }));
+        response.send(200, newResponse);
+      });
+    }
+  ).as(TestFixture.interceptAliases.QuerySuggestions.substring(1));
+};
+
+const setRecentQueries = (count: number) => () => {
+  new SafeStorage().setJSON(
+    StorageItems.RECENT_QUERIES,
+    Array.from({length: count}, (_, i) => `Recent query ${i}`)
+  );
+};
+
+const addTextAreaSearchBox = (options: AddSearchBoxOptions = {}) => {
+  const textAreaProp = {textarea: 'true'};
+  const props = options?.props
+    ? {...options.props, ...textAreaProp}
+    : textAreaProp;
+  return addSearchBox(options ? {...options, props} : {props});
+};
+
+describe('TextArea Search Box Test Suites', () => {
+  describe('with no suggestions nor recentQueries', () => {
+    beforeEach(() => {
+      new TestFixture()
+        .with(setSuggestions(0))
+        .with(setRecentQueries(0))
+        .with(addTextAreaSearchBox())
+        .init();
+    });
+
+    it('should be accessible', () => {
+      SearchBoxSelectors.textArea().click();
+      CommonAssertions.assertAriaLiveMessage(
+        SearchBoxSelectors.searchBoxAriaLive,
+        ' no '
+      );
+      CommonAssertions.assertAccessibility(searchBoxComponent);
+    });
+  });
+
+  describe('with default textarea search box', () => {
+    beforeEach(() => {
+      new TestFixture()
+        .with(addTextAreaSearchBox())
+        .with(addQuerySummary())
+        .withoutFirstAutomaticSearch()
+        .init();
+      SearchBoxSelectors.textArea().click();
+      SearchBoxSelectors.textArea().type('test{enter}', {force: true});
+      cy.wait(RouteAlias.UA);
+    });
+
+    it('search button is enabled to start with', () => {
+      SearchBoxSelectors.textArea().should('be.empty');
+      SearchBoxSelectors.submitButton().should('be.enabled');
+    });
+
+    CommonAssertions.assertConsoleError(false);
+  });
+
+  describe('with disableSearch set to true', () => {
+    beforeEach(() => {
+      new TestFixture()
+        .with(
+          addTextAreaSearchBox({
+            props: {
+              'disable-search': 'true',
+              'minimum-query-length': 1, // disable-search should override this setting
+            },
+          })
+        )
+        .with(addQuerySummary())
+        .withoutFirstAutomaticSearch()
+        .init();
+    });
+
+    it('should be accessible', () => {
+      CommonAssertions.assertAccessibility(searchBoxComponent);
+    });
+
+    it('there are no search suggestions or errors on query input', () => {
+      typeSearchTextArea('test');
+      SearchBoxSelectors.submitButton().should('be.disabled');
+      SearchBoxAssertions.assertNoSuggestionGenerated();
+      QuerySummaryAssertions.assertHasPlaceholder();
+      CommonAssertions.assertConsoleError(false);
+    });
+  });
+
+  describe('with a facet & clear-filters set to false', () => {
+    beforeEach(() => {
+      new TestFixture()
+        .with(addTextAreaSearchBox({props: {'clear-filters': 'false'}}))
+        .with(addFacet({field}))
+        .init();
+      selectIdleCheckboxValueAt(FacetSelectors, 0);
+      cy.wait(TestFixture.interceptAliases.Search);
+      SearchBoxSelectors.submitButton().click({force: true});
+      cy.wait(TestFixture.interceptAliases.Search);
+    });
+
+    FacetCommonAssertions.assertNumberOfSelectedCheckboxValues(
+      FacetSelectors,
+      1
+    );
+  });
+
+  describe('with a facet & clear-filters set to true', () => {
+    beforeEach(() => {
+      new TestFixture()
+        .with(addTextAreaSearchBox({props: {'clear-filters': 'true'}}))
+        .with(addFacet({field}))
+        .init();
+      selectIdleCheckboxValueAt(FacetSelectors, 0);
+      cy.wait(TestFixture.interceptAliases.Search);
+      SearchBoxSelectors.submitButton().click({force: true});
+      cy.wait(TestFixture.interceptAliases.Search);
+    });
+
+    FacetCommonAssertions.assertNumberOfSelectedCheckboxValues(
+      FacetSelectors,
+      0
+    );
+  });
+});
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
index e2d818c5407..3adf865ad95 100644
--- a/packages/atomic/src/components.d.ts
+++ b/packages/atomic/src/components.d.ts
@@ -1655,6 +1655,10 @@ export namespace Components {
           * The timeout for suggestion queries, in milliseconds. If a suggestion query times out, the suggestions from that particular query won't be shown.
          */
         "suggestionTimeout": number;
+        /**
+          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
+         */
+        "textarea": boolean;
     }
     interface AtomicSearchBoxInstantResults {
         /**
@@ -4583,6 +4587,10 @@ declare namespace LocalJSX {
           * The timeout for suggestion queries, in milliseconds. If a suggestion query times out, the suggestions from that particular query won't be shown.
          */
         "suggestionTimeout"?: number;
+        /**
+          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
+         */
+        "textarea"?: boolean;
     }
     interface AtomicSearchBoxInstantResults {
         /**
diff --git a/packages/atomic/src/components/common/search-box/clear-button.tsx b/packages/atomic/src/components/common/search-box/clear-button.tsx
index 41634804f6a..e761c8487ef 100644
--- a/packages/atomic/src/components/common/search-box/clear-button.tsx
+++ b/packages/atomic/src/components/common/search-box/clear-button.tsx
@@ -5,7 +5,7 @@ import {AnyBindings} from '../interface/bindings';
 
 interface Props extends Partial<ButtonProps> {
   bindings: AnyBindings;
-  inputRef: HTMLInputElement | null;
+  inputRef: HTMLInputElement | HTMLTextAreaElement | null;
 }
 
 export const ClearButton: FunctionalComponent<Props> = ({
@@ -17,7 +17,7 @@ export const ClearButton: FunctionalComponent<Props> = ({
   <Button
     style="text-transparent"
     part="clear-button"
-    class="w-8 h-8 mr-1.5 text-neutral-dark"
+    class="w-8 h-8 mr-1.5 text-neutral-dark shrink-0"
     onClick={() => {
       onClick?.();
       inputRef?.focus();
diff --git a/packages/atomic/src/components/common/search-box/search-box-wrapper.tsx b/packages/atomic/src/components/common/search-box/search-box-wrapper.tsx
index 5b1af897d03..09eada02270 100644
--- a/packages/atomic/src/components/common/search-box/search-box-wrapper.tsx
+++ b/packages/atomic/src/components/common/search-box/search-box-wrapper.tsx
@@ -2,20 +2,29 @@ import {FunctionalComponent, h} from '@stencil/core';
 
 interface Props {
   disabled: boolean;
+  textArea?: boolean;
 }
 
 export const SearchBoxWrapper: FunctionalComponent<Props> = (
   props,
   children
-) => (
-  <div
-    part="wrapper"
-    class={`relative flex bg-background h-full w-full border border-neutral rounded-md focus-within:ring ${
-      props.disabled
-        ? 'focus-within:border-disabled focus-within:ring-neutral'
-        : 'focus-within:border-primary focus-within:ring-ring-primary'
-    }`}
-  >
-    {children}
-  </div>
-);
+) => {
+  const getClasses = () => {
+    const baseClasses =
+      'flex bg-background w-full border border-neutral rounded-md focus-within:ring';
+    const focusClasses = props.disabled
+      ? 'focus-within:border-disabled focus-within:ring-neutral'
+      : 'focus-within:border-primary focus-within:ring-ring-primary';
+    const inputTypeClasses = props.textArea
+      ? 'absolute top-0 left-0'
+      : 'relative h-full';
+
+    return [baseClasses, focusClasses, inputTypeClasses].join(' ');
+  };
+
+  return (
+    <div part="wrapper" class={getClasses()}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/atomic/src/components/common/search-box/search-box.pcss b/packages/atomic/src/components/common/search-box/search-box.pcss
index 93612d98b3d..3a116acdaa8 100644
--- a/packages/atomic/src/components/common/search-box/search-box.pcss
+++ b/packages/atomic/src/components/common/search-box/search-box.pcss
@@ -8,3 +8,26 @@
   content: '';
   @apply absolute w-5/6 h-5/6 bg-background rounded-full;
 }
+
+.grow-wrap {
+  &::after {
+    /* Space needed to prevent jumpy behavior */
+    content: attr(data-replicated-value) ' ';
+    visibility: hidden;
+  }
+
+  > [part='textarea'],
+  &::after {
+    @apply whitespace-nowrap z-10 h-full outline-none resize-none bg-transparent text-neutral-dark text-lg grow p-3.5 px-4 overflow-x-hidden overflow-y-auto;
+    /* Place on top of each other */
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  &.expanded {
+    > [part='textarea'],
+    &::after {
+      @apply whitespace-pre-wrap;
+      max-height: 8em;
+    }
+  }
+}
diff --git a/packages/atomic/src/components/common/search-box/search-text-area.tsx b/packages/atomic/src/components/common/search-box/search-text-area.tsx
new file mode 100644
index 00000000000..7b9a332350a
--- /dev/null
+++ b/packages/atomic/src/components/common/search-box/search-text-area.tsx
@@ -0,0 +1,151 @@
+import {FunctionalComponent, h} from '@stencil/core';
+import {JSXBase} from '@stencil/core/internal';
+import {AnyBindings} from '../interface/bindings';
+import {TextAreaClearButton} from './text-area-clear-button';
+
+interface Props extends JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  textAreaRef: HTMLTextAreaElement;
+  loading: boolean;
+  bindings: AnyBindings;
+  value: string;
+  ariaLabel: string;
+  onClear(): void;
+  popup?: {
+    id: string;
+    activeDescendant: string;
+    expanded: boolean;
+    hasSuggestions: boolean;
+  };
+}
+
+function getPopupAttributes(props: Required<Props>['popup']) {
+  return {
+    role: 'combobox',
+    autocomplete: 'off',
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    'aria-activedescendant': props.activeDescendant,
+    'aria-expanded': `${props.hasSuggestions && props.expanded}`,
+    'aria-autocomplete': 'both',
+    'aria-haspopup': 'true',
+    'aria-controls': props.id,
+  };
+}
+
+function syncTextWithReplica(elem: HTMLTextAreaElement, value?: string) {
+  const parent = elem?.parentNode as HTMLElement;
+  if (!parent) {
+    return;
+  }
+  if (elem.value === '\n') {
+    return;
+  }
+  parent.dataset.replicatedValue = value ?? elem.value;
+}
+
+function resetReplicaText(elem: HTMLTextAreaElement) {
+  const parent = elem?.parentNode as HTMLElement;
+  if (parent) {
+    delete parent.dataset.replicatedValue;
+  }
+}
+
+function collapseTextArea(elem: HTMLTextAreaElement) {
+  const parent = elem?.parentNode as HTMLElement;
+  if (parent) {
+    parent.classList.remove('expanded');
+  }
+}
+
+function expandTextArea(elem: HTMLTextAreaElement) {
+  const parent = elem?.parentNode as HTMLElement;
+  if (parent) {
+    parent.classList.add('expanded');
+  }
+}
+
+export const SearchTextArea: FunctionalComponent<Props> = ({
+  textAreaRef,
+  loading,
+  bindings,
+  onInput,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  onKeyUp,
+  value,
+  ariaLabel,
+  onClear,
+  popup,
+  ...defaultInputProps
+}) => (
+  <div class="grow flex overflow-hidden">
+    <div class="grow-wrap grow grid overflow-hidden">
+      <textarea
+        part="textarea"
+        aria-label={ariaLabel}
+        placeholder={bindings.i18n.t('search')}
+        class="placeholder-neutral-dark"
+        rows={1}
+        onInput={(e) => {
+          onInput?.(e);
+          syncTextWithReplica(textAreaRef);
+        }}
+        onKeyDown={(e) => {
+          onKeyDown?.(e);
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            return;
+          }
+          syncTextWithReplica(textAreaRef);
+        }}
+        onKeyUp={(e) => {
+          onKeyUp?.(e);
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            return;
+          }
+          syncTextWithReplica(textAreaRef);
+        }}
+        onBlur={(e) => {
+          onBlur?.(e);
+          collapseTextArea(textAreaRef);
+          syncTextWithReplica(textAreaRef);
+        }}
+        onChange={(e) => {
+          onChange?.(e);
+          syncTextWithReplica(textAreaRef);
+        }}
+        onFocus={(e) => {
+          onFocus?.(e);
+          syncTextWithReplica(textAreaRef);
+          expandTextArea(textAreaRef);
+        }}
+        autocomplete="off"
+        {...(popup && getPopupAttributes(popup))}
+        {...defaultInputProps}
+        value={value}
+      />
+    </div>
+
+    {loading && (
+      <div class="searchbox-button-wrapper flex items-center justify-center ml-2">
+        <span
+          part="loading"
+          class="loading w-5 h-5 rounded-full bg-gradient-to-r animate-spin mr-2 grid place-items-center"
+        ></span>
+      </div>
+    )}
+    {!loading && value && (
+      <TextAreaClearButton
+        inputRef={textAreaRef}
+        bindings={bindings}
+        onClick={() => {
+          onClear();
+          resetReplicaText(textAreaRef);
+        }}
+      />
+    )}
+  </div>
+);
diff --git a/packages/atomic/src/components/common/search-box/submit-button.tsx b/packages/atomic/src/components/common/search-box/submit-button.tsx
index 733df143846..7d87a8d11f1 100644
--- a/packages/atomic/src/components/common/search-box/submit-button.tsx
+++ b/packages/atomic/src/components/common/search-box/submit-button.tsx
@@ -14,7 +14,7 @@ export const SubmitButton: FunctionalComponent<Props> = ({
 }) => (
   <Button
     style="primary"
-    class="flex items-center justify-center w-12 h-auto rounded-r-md rounded-l-none -my-px -mr-px"
+    class="flex items-center justify-center w-12 h-auto rounded-r-md rounded-l-none -my-px -mr-px shrink-0"
     part="submit-button"
     ariaLabel={bindings.i18n.t('search')}
     onClick={() => {
diff --git a/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx b/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx
new file mode 100644
index 00000000000..0378483d5fb
--- /dev/null
+++ b/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx
@@ -0,0 +1,39 @@
+import {FunctionalComponent, h} from '@stencil/core';
+import ClearSlim from '../../../images/clear-slim.svg';
+import {Button, ButtonProps} from '../button';
+import {AnyBindings} from '../interface/bindings';
+
+interface Props extends Partial<ButtonProps> {
+  bindings: AnyBindings;
+  inputRef: HTMLInputElement | HTMLTextAreaElement | null;
+}
+
+export const TextAreaClearButton: FunctionalComponent<Props> = ({
+  inputRef,
+  bindings,
+  onClick,
+  ...defaultButtonProps
+}) => (
+  <div
+    part="clear-button-wrapper"
+    class="py-2 flex items-start justify-center ml-2"
+  >
+    <Button
+      style="text-transparent"
+      part="clear-button"
+      class="flex items-center justify-center w-8 h-8 text-neutral-dark shrink-0"
+      onClick={() => {
+        onClick?.();
+        inputRef?.focus();
+      }}
+      ariaLabel={bindings.i18n.t('clear')}
+      {...defaultButtonProps}
+    >
+      <atomic-icon
+        part="clear-icon"
+        icon={ClearSlim}
+        class="w-4 h-4"
+      ></atomic-icon>
+    </Button>
+  </div>
+);
diff --git a/packages/atomic/src/components/common/search-box/text-area-submit-button.tsx b/packages/atomic/src/components/common/search-box/text-area-submit-button.tsx
new file mode 100644
index 00000000000..ee4d3b11a5e
--- /dev/null
+++ b/packages/atomic/src/components/common/search-box/text-area-submit-button.tsx
@@ -0,0 +1,36 @@
+import {FunctionalComponent, h} from '@stencil/core';
+import SearchSlimIcon from '../../../images/search-slim.svg';
+import {Button, ButtonProps} from '../button';
+import {AnyBindings} from '../interface/bindings';
+
+interface Props extends Partial<ButtonProps> {
+  bindings: AnyBindings;
+}
+
+export const TextAreaSubmitButton: FunctionalComponent<Props> = ({
+  bindings,
+  onClick,
+  ...defaultButtonProps
+}) => (
+  <div
+    part="submit-button-wrapper"
+    class="py-2 flex items-start justify-center mr-2"
+  >
+    <Button
+      style="text-primary"
+      class="flex items-center justify-center w-8 h-8 rounded-full shrink-0"
+      part="submit-button"
+      ariaLabel={bindings.i18n.t('search')}
+      onClick={() => {
+        onClick?.();
+      }}
+      {...defaultButtonProps}
+    >
+      <atomic-icon
+        part="submit-icon"
+        icon={SearchSlimIcon}
+        class="w-4 h-4"
+      ></atomic-icon>
+    </Button>
+  </div>
+);
diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss
index 864030a6509..0e749594523 100644
--- a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss
+++ b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss
@@ -25,3 +25,7 @@
     flex-direction: row;
   }
 }
+
+:host([textarea]) {
+  @apply relative z-10;
+}
diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
index cd7b11cf125..a52ef778fdd 100644
--- a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
+++ b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
@@ -20,6 +20,7 @@ import {
   Element,
   Event,
   EventEmitter,
+  Host,
 } from '@stencil/core';
 import {AriaLiveRegion} from '../../../utils/accessibility-utils';
 import {isMacOS} from '../../../utils/device-utils';
@@ -38,7 +39,9 @@ import {once, randomID} from '../../../utils/utils';
 import {SearchBoxCommon} from '../../common/search-box/search-box-common';
 import {SearchBoxWrapper} from '../../common/search-box/search-box-wrapper';
 import {SearchInput} from '../../common/search-box/search-input';
+import {SearchTextArea} from '../../common/search-box/search-text-area';
 import {SubmitButton} from '../../common/search-box/submit-button';
+import {TextAreaSubmitButton} from '../../common/search-box/text-area-submit-button';
 import {Bindings} from '../atomic-search-interface/atomic-search-interface';
 import {
   SearchBoxSuggestionElement,
@@ -105,6 +108,7 @@ export class AtomicSearchBox {
   private searchBox!: SearchBox | StandaloneSearchBox;
   private id!: string;
   private inputRef!: HTMLInputElement;
+  private textAreaRef!: HTMLTextAreaElement;
   private leftPanelRef: HTMLElement | undefined;
   private rightPanelRef: HTMLElement | undefined;
   private querySetActions!: QuerySetActionCreators;
@@ -182,6 +186,30 @@ export class AtomicSearchBox {
    */
   @Prop({reflect: true}) public enableQuerySyntax = false;
 
+  /**
+   * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element.
+   * The resulting component will expand to support multi-line queries.
+   * When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part.
+   * The buttons within the search box are likely to need adjusting as well.
+   *
+   * Example:
+   * ```css
+   * <style>
+   *   atomic-search-box::part(textarea),
+   *   atomic-search-box::part(textarea)::after,
+   *   atomic-search-box::part(textarea-spacer) {
+   *     font-size: x-large;
+   *   }
+   *
+   *   atomic-search-box::part(submit-button-wrapper),
+   *   atomic-search-box::part(clear-button-wrapper) {
+   *     padding-top: 0.75rem;
+   *   }
+   * </style>
+   * ```
+   */
+  @Prop({reflect: true}) public textarea = false;
+
   /**
    * Event that is emitted when a standalone search box redirection is triggered. By default, the search box will directly change the URL and redirect accordingly, so if you want to handle the redirection differently, use this event.
    *
@@ -613,6 +641,11 @@ export class AtomicSearchBox {
     }
   }
 
+  private triggerTextAreaChange(value: string) {
+    this.textAreaRef.value = value;
+    this.textAreaRef.dispatchEvent(new window.Event('change'));
+  }
+
   private renderSuggestion(
     item: SearchBoxSuggestionElement,
     index: number,
@@ -655,6 +688,9 @@ export class AtomicSearchBox {
         isDoubleList={this.isDoubleList}
         onClick={(e: Event) => {
           this.searchBoxCommon.onSuggestionClick(item, e);
+          if (this.textarea) {
+            this.triggerTextAreaChange(item.query ?? '');
+          }
         }}
         onMouseOver={() => {
           this.onSuggestionMouseOver(item, side, id);
@@ -747,51 +783,96 @@ export class AtomicSearchBox {
     );
   }
 
+  private renderTextBox = (searchLabel: string) => {
+    const props = {
+      loading: this.searchBoxState.isLoading,
+      bindings: this.bindings,
+      value: this.searchBoxState.value,
+      title: searchLabel,
+      ariaLabel: searchLabel,
+      onFocus: () => this.onFocus(),
+      onInput: (e: Event) =>
+        this.onInput(
+          (e.target as HTMLInputElement | HTMLTextAreaElement).value
+        ),
+      onKeyDown: (e: KeyboardEvent) => this.onKeyDown(e),
+      onClear: () => this.searchBox.clear(),
+      popup: {
+        id: this.searchBoxCommon.popupId,
+        activeDescendant: this.activeDescendant,
+        expanded: this.isExpanded,
+        hasSuggestions: this.searchBoxCommon.hasSuggestions,
+      },
+    };
+
+    return this.textarea ? (
+      <SearchTextArea
+        textAreaRef={this.textAreaRef}
+        ref={(el) => (this.textAreaRef = el as HTMLTextAreaElement)}
+        {...props}
+        onClear={() => {
+          props.onClear();
+          this.triggerTextAreaChange('');
+        }}
+      />
+    ) : (
+      <SearchInput
+        inputRef={this.inputRef}
+        ref={(el) => (this.inputRef = el as HTMLInputElement)}
+        {...props}
+      />
+    );
+  };
+
+  private renderAbsolutePositionSpacer() {
+    return (
+      <textarea
+        aria-hidden
+        part="textarea-spacer"
+        class="invisible text-lg py-3.5 px-4 w-full"
+        rows={1}
+      ></textarea>
+    );
+  }
+
   public render() {
     this.updateBreakpoints();
+
     const searchLabel = this.searchBoxCommon.getSearchInputLabel(
       this.minimumQueryLength
     );
-    return [
-      <SearchBoxWrapper disabled={this.isSearchDisabled}>
-        <atomic-focus-detector
-          style={{display: 'contents'}}
-          onFocusExit={() => this.clearSuggestions()}
-        >
-          <SearchInput
-            inputRef={this.inputRef}
-            loading={this.searchBoxState.isLoading}
-            ref={(el) => (this.inputRef = el as HTMLInputElement)}
-            bindings={this.bindings}
-            value={this.searchBoxState.value}
-            title={searchLabel}
-            ariaLabel={searchLabel}
-            onFocus={() => this.onFocus()}
-            onInput={(e) => this.onInput((e.target as HTMLInputElement).value)}
-            onKeyDown={(e) => this.onKeyDown(e)}
-            onClear={() => this.searchBox.clear()}
-            popup={{
-              id: this.searchBoxCommon.popupId,
-              activeDescendant: this.activeDescendant,
-              expanded: this.isExpanded,
-              hasSuggestions: this.searchBoxCommon.hasSuggestions,
-            }}
-          />
-          {this.renderSuggestions()}
-          <SubmitButton
-            bindings={this.bindings}
+    const Submit = this.textarea ? TextAreaSubmitButton : SubmitButton;
+
+    return (
+      <Host>
+        {this.textarea ? this.renderAbsolutePositionSpacer() : null}
+        {[
+          <SearchBoxWrapper
             disabled={this.isSearchDisabled}
-            onClick={() => this.searchBox.submit()}
-            title={searchLabel}
-          />
-        </atomic-focus-detector>
-      </SearchBoxWrapper>,
-      !this.suggestions.length && (
-        <slot>
-          <atomic-search-box-recent-queries></atomic-search-box-recent-queries>
-          <atomic-search-box-query-suggestions></atomic-search-box-query-suggestions>
-        </slot>
-      ),
-    ];
+            textArea={this.textarea}
+          >
+            <atomic-focus-detector
+              style={{display: 'contents'}}
+              onFocusExit={() => this.clearSuggestions()}
+            >
+              {this.renderTextBox(searchLabel)}
+              <Submit
+                bindings={this.bindings}
+                disabled={this.isSearchDisabled}
+                onClick={() => this.searchBox.submit()}
+                title={searchLabel}
+              />
+              {this.renderSuggestions()}
+            </atomic-focus-detector>
+          </SearchBoxWrapper>,
+          !this.suggestions.length && (
+            <slot>
+              <atomic-search-box-recent-queries></atomic-search-box-recent-queries>
+              <atomic-search-box-query-suggestions></atomic-search-box-query-suggestions>
+            </slot>
+          ),
+        ]}
+      </Host>
+    );
   }
 }
diff --git a/packages/atomic/src/images/clear-slim.svg b/packages/atomic/src/images/clear-slim.svg
new file mode 100644
index 00000000000..b440275e7cd
--- /dev/null
+++ b/packages/atomic/src/images/clear-slim.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 1.00012L1.00012 14.9999" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.999878 1L14.9999 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/atomic/src/images/search-slim.svg b/packages/atomic/src/images/search-slim.svg
new file mode 100644
index 00000000000..0984e7c98b2
--- /dev/null
+++ b/packages/atomic/src/images/search-slim.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.5" stroke="currentColor"/>
+<path d="M16 16L12 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/atomic/src/pages/examples/genqa.html b/packages/atomic/src/pages/examples/genqa.html
index 7557eb67c35..59db1c548bf 100644
--- a/packages/atomic/src/pages/examples/genqa.html
+++ b/packages/atomic/src/pages/examples/genqa.html
@@ -46,8 +46,8 @@
     <atomic-search-interface fields-to-include='["snrating", "sncost"]'>
       <atomic-search-layout>
         <div class="header-bg"></div>
-        <atomic-layout-section section="search">
-          <atomic-search-box></atomic-search-box>
+        <atomic-layout-section section="search" expanding>
+          <atomic-search-box textarea></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>