refactor: Update AdvancedSearch component to use design system text i…

…nput (#5191) * feat: Update AdvancedSearch component to use design system text input * Refactor AdvancedSearch component to improve accessibility and styling
Talend · Feb 19, 2024 · 420118f · 420118f
1 parent c1c9c5a
commit 420118f
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 28 deletions.
diff --git a/.changeset/poor-papayas-grab.md b/.changeset/poor-papayas-grab.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': minor
+---
+
+feat: use design system text input for the advanced search
diff --git a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.component.js
@@ -4,7 +4,8 @@ import { useState } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { ButtonIcon, Icon } from '@talend/design-system';
+import { ButtonIcon, Form, SizedIcon } from '@talend/design-system';
+import tokens from '@talend/design-tokens';
 
 import { USAGE_TRACKING_TAGS } from '../../constants';
 import { useFacetedSearchContext } from '../context/facetedSearch.context';
@@ -69,8 +70,15 @@ export function AdvancedSearch({
 	return (
 		<div id={advSearchId} className={styles['adv-search']}>
 			<form id={`${advSearchId}-form`} role="search" onSubmit={formSubmit}>
-				<Icon name="talend-filter" size="M" className={styles['adv-search-filter-icon']} />
-				<input
+				<div className={styles['adv-search-filter-icon']}>
+					<SizedIcon
+						name="filter"
+						size="M"
+						color={tokens.coralColorNeutralIconWeak}
+						className={styles['adv-search-filter-icon']}
+					/>
+				</div>
+				<Form.Text
 					id={`${id}-form`}
 					name="advanced-search-faceted"
 					type="search"
@@ -84,7 +92,6 @@ export function AdvancedSearch({
 					onKeyDown={onKeyDownHandler}
 					onChange={onChangeHandler}
 				/>
-
 				<div className={styles['adv-search-buttons']}>
 					<ButtonIcon
 						name="action-cancel-title"

diff --git a/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss b/packages/faceted-search/src/components/AdvancedSearch/AdvancedSearch.module.scss
@@ -11,9 +11,9 @@ $search-input-right-offset: 3.75rem;
 
 	.adv-search-filter-icon {
 		position: absolute;
-		color: tokens.$coral-color-neutral-icon-weak;
+		z-index: tokens.$coral-elevation-layer-standard-front;
 		top: tokens.$coral-spacing-m;
-		left: $search-icon-offset;
+		left: tokens.$coral-spacing-s;
 	}
 
 	&-error {
@@ -22,8 +22,6 @@ $search-input-right-offset: 3.75rem;
 	}
 
 	.adv-search-input {
-		border-radius: tokens.$coral-radius-s;
-		border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 		box-shadow: none;
 		color: tokens.$coral-color-neutral-text-weak;
 		height: tokens.$coral-sizing-m;
@@ -45,7 +43,7 @@ $search-input-right-offset: 3.75rem;
 
 	&-buttons {
 		position: absolute;
-		top: tokens.$coral-spacing-s;
+		top: tokens.$coral-spacing-xs;
 		right: tokens.$coral-spacing-m;
 	}
 }
diff --git a/...-search/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.component.test.js.snap b/...-search/src/components/AdvancedSearch/__snapshots__/AdvancedSearch.component.test.js.snap
@@ -9,25 +9,44 @@ exports[`AdvancedSearch should render by default 1`] = `
     id="some-id-adv-search-form"
     role="search"
   >
-    <svg
-      aria-hidden="true"
-      class="tc-svg-icon tc-icon theme-svg theme-adv-search-filter-icon tc-icon-name-talend-filter"
-      focusable="false"
-      name="talend-filter"
-      pointer-events="none"
-      shape-rendering="geometricPrecision"
-    />
-    <input
-      aria-label="Advanced Faceted Search"
-      autocomplete="off"
-      class="theme-adv-search-input"
-      id="some-id-form"
-      name="advanced-search-faceted"
-      placeholder="Enter your query"
-      role="searchbox"
-      type="search"
-      value=""
-    />
+    <div
+      class="theme-adv-search-filter-icon"
+    >
+      <svg
+        aria-hidden="true"
+        color="var(--coral-color-neutral-icon-weak, hsla(0, 0%, 38%, 1))"
+        pointer-events="none"
+        shape-rendering="geometricPrecision"
+        style="width: 1rem; height: 1rem;"
+      >
+        <use
+          xlink:href="#filter:M"
+        />
+      </svg>
+    </div>
+    <div
+      class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+    >
+      <label
+        class="theme-label"
+        for="some-id-form"
+      />
+      <div
+        class="theme-inputShell"
+      >
+        <input
+          aria-label="Advanced Faceted Search"
+          autocomplete="off"
+          class="theme-input theme-adv-search-input"
+          id="some-id-form"
+          name="advanced-search-faceted"
+          placeholder="Enter your query"
+          role="searchbox"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
     <div
       class="theme-adv-search-buttons"
     >

diff --git a/packages/faceted-search/stories/facetedSearch.stories.js b/packages/faceted-search/stories/facetedSearch.stories.js
@@ -198,6 +198,12 @@ export const Default = () => (
 	</FacetedSearch.Faceted>
 );
 
+export const Advanced = () => (
+	<FacetedSearch.Faceted id="my-faceted-search">
+		<FacetedSearch.AdvancedSearch onSubmit={action('onSubmit')} />
+	</FacetedSearch.Faceted>
+);
+
 export const Initialized = () => (
 	<FacetedSearch.Faceted id="my-faceted-search">
 		{currentFacetedMode =>