Merge branch 'master' into sromain/fix/faceted-tags

Talend · Feb 19, 2024 · 2783fa2 · 2783fa2
2 parents 9412617 + 420118f
commit 2783fa2
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 29 deletions.
diff --git a/.changeset/four-islands-brake.md b/.changeset/four-islands-brake.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+chore: add data-test attr on stacks
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/design-system/src/components/Stack/Primitive/StackPrimitive.test.tsx b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.test.tsx
@@ -0,0 +1,25 @@
+import { expect } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+
+import StackPrimitive from './StackPrimitive';
+
+describe('StackPrimitive', () => {
+	it('Should render with data-test attributes', async () => {
+		render(
+			<StackPrimitive
+				data-test="my-stack"
+				data-testid="my-stack-testid"
+				data-feature="my-stack-feature"
+				gap={0}
+			>
+				text
+			</StackPrimitive>,
+		);
+
+		const stack = screen.getByTestId('my-stack-testid');
+		expect(stack).toBeInTheDocument();
+
+		expect(stack).toHaveAttribute('data-test', 'my-stack');
+		expect(stack).toHaveAttribute('data-feature', 'my-stack-feature');
+	});
+});
diff --git a/packages/design-system/src/components/Stack/Primitive/StackPrimitive.tsx b/packages/design-system/src/components/Stack/Primitive/StackPrimitive.tsx
@@ -3,6 +3,8 @@ import type { ReactNode, Ref } from 'react';
 
 import classnames from 'classnames';
 
+import { DataAttributes } from '../../../types';
+
 import styles from './StackPrimitive.module.scss';
 
 export const justifyOptions = {
@@ -112,7 +114,7 @@ export type StackPrimitiveProps = {
 	isFullWidth?: boolean;
 	noShrink?: boolean;
 	noGrow?: boolean;
-};
+} & DataAttributes;
 
 const StackPrimitive = forwardRef(function StackPrimitive(
 	{

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 =>