Merge branch 'master' into gbacc/fix/jsfc-input-number-validation-fix

packages/components/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @talend/react-components
 
+## 15.2.6
+
+### Patch Changes
+
+- 6305ea9: fix: enlarge drawer using back breakpoints
+
+## 15.2.5
+
+### Patch Changes
+
+- c0c434c: fix: loadash imports
+- Updated dependencies [c0c434c]
+  - @talend/utils@3.0.2
+
 ## 15.2.4
 
 ### Patch Changes

packages/components/package.json

@@ -41,7 +41,7 @@
     "@talend/icons": "^7.7.0",
     "@talend/react-a11y": "^3.0.0",
     "@talend/react-bootstrap": "^2.2.1",
-    "@talend/utils": "^3.0.1",
+    "@talend/utils": "^3.0.2",
     "ally.js": "^1.4.1",
     "classnames": "^2.3.2",
     "d3": "^7.8.5",
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@storybook/addon-actions": "^7.6.4",
     "@talend/bootstrap-theme": "^9.1.0",
-    "@talend/design-system": "^9.5.0",
+    "@talend/design-system": "^9.7.0",
     "@talend/eslint-config": "^13.0.2",
     "@talend/eslint-plugin": "^1.1.0",
     "@talend/locales-design-system": "^7.15.1",
@@ -120,5 +120,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "15.2.4"
+  "version": "15.2.6"
 }

packages/components/src/Drawer/Drawer.module.scss

@@ -22,6 +22,18 @@ $tc-drawer-z-index: tokens.$coral-elevation-layer-standard-front !default;
 	z-index: $tc-drawer-z-index;
 }
 
+@media (min-width: 992px) and (max-width: 1199px) {
+	.tc-drawer {
+		width: 40vw;
+	}
+}
+
+@media (min-width: 1200px) {
+	.tc-drawer {
+		width: 30vw;
+	}
+}
+
 .tc-drawer-container {
 	display: flex;
 	flex-direction: column;

packages/components/src/FormatValue/FormatValue.component.js

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
 import classNames from 'classnames';
-import { escapeRegExp } from 'lodash';
+import escapeRegExp from 'lodash/escapeRegExp';
 import PropTypes from 'prop-types';
 
 import I18N_DOMAIN_COMPONENTS from '../constants';

packages/design-system/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @talend/design-system
 
+## 9.7.1
+
+### Patch Changes
+
+- 106b735: fix: height for input wrapper
+
+## 9.7.0
+
+### Minor Changes
+
+- c1c9c5a: chore: add data-test attr on stacks
+
+### Patch Changes
+
+- ca74483: Design System - Select element should now take `required` attribute into account
+- Updated dependencies [c0c434c]
+  - @talend/utils@3.0.2
+
+## 9.6.0
+
+### Minor Changes
+
+- 1a06e6f: data-testid on select suffix and input primitive
+
 ## 9.5.0
 
 ### Minor Changes

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talend/design-system",
-  "version": "9.5.0",
+  "version": "9.7.1",
   "description": "Talend Design System",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -35,7 +35,7 @@
     "@floating-ui/react": "^0.24.8",
     "@talend/assets-api": "^1.3.1",
     "@talend/design-tokens": "^3.1.0",
-    "@talend/utils": "^3.0.1",
+    "@talend/utils": "^3.0.2",
     "classnames": "^2.3.2",
     "modern-css-reset": "^1.4.0",
     "react-transition-group": "^2.9.0",

packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx

@@ -1,20 +1,23 @@
 import { forwardRef } from 'react';
 import type { MouseEvent, Ref } from 'react';
+
 import classnames from 'classnames';
+
 // eslint-disable-next-line @talend/import-depth
 import { IconNameWithSize } from '@talend/icons/dist/typeUtils';
 
+import { mergeRefs } from '../../../../mergeRef';
 import { DeprecatedIconNames } from '../../../../types';
-import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip';
-import { StackHorizontal } from '../../../Stack';
 import { Clickable, ClickableProps } from '../../../Clickable';
-import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper';
 import { SizedIcon } from '../../../Icon';
+import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper';
+import { StackHorizontal } from '../../../Stack';
+import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip';
 
 import styles from '../AffixStyles.module.scss';
-import { mergeRefs } from '../../../../mergeRef';
 
 type CommonAffixButtonPropsType = {
+	dataTestid?: string;
 	children: string;
 	isDropdown?: boolean;
 	onClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;

packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx

@@ -1,12 +1,15 @@
 import { forwardRef, Ref } from 'react';
+
+import { DataAttributes } from 'src/types';
+
+import { useId } from '../../../../useId';
 import FieldPrimitive, { FieldPropsPrimitive } from '../../Primitives/Field/Field';
 import SelectNoWrapper, { SelectNoWrapperProps } from '../../Primitives/Select/SelectNoWrapper';
-import { useId } from '../../../../useId';
 
 export type AffixSelectPropsType = Omit<FieldPropsPrimitive, 'hasError' | 'description'> &
 	Omit<SelectNoWrapperProps, 'isAffix' | 'className' | 'style'> & {
 		isSuffix: boolean;
-	};
+	} & Partial<DataAttributes>;
 
 const AffixSelect = forwardRef((props: AffixSelectPropsType, ref: Ref<HTMLSelectElement>) => {
 	const { label, children, name, id, isSuffix, ...rest } = props;

packages/design-system/src/components/Form/Primitives/Input/Input.tsx

@@ -1,22 +1,26 @@
 import {
+	FocusEvent,
 	forwardRef,
 	InputHTMLAttributes,
 	Ref,
 	useImperativeHandle,
 	useRef,
-	FocusEvent,
 } from 'react';
+
 import classnames from 'classnames';
-import InputWrapper, { AffixesProps } from '../InputWrapper/InputWrapper';
-import { FieldStatusProps } from '../Field/Field';
+import { DataAttributes } from 'src/types';
+
 import useRevealPassword from '../../../Form/Field/Input/hooks/useRevealPassword';
 import { SizedIcon } from '../../../Icon';
+import { FieldStatusProps } from '../Field/Field';
+import InputWrapper, { AffixesProps } from '../InputWrapper/InputWrapper';
 
 import styles from './Input.module.scss';
 
 export type InputPrimitiveProps = Omit<InputHTMLAttributes<any>, 'prefix' | 'suffix'> &
 	AffixesProps &
-	Omit<FieldStatusProps, 'errorMessage'>;
+	Omit<FieldStatusProps, 'errorMessage'> &
+	Partial<DataAttributes>;
 
 const Input = forwardRef((props: InputPrimitiveProps, ref: Ref<HTMLInputElement | null>) => {
 	const {

packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss

@@ -3,7 +3,7 @@
 
 .inputShell {
 	@include Form.border-styles();
-	height: tokens.$coral-sizing-m;
+	height: 2rem;
 	display: flex;
 	flex-flow: row;
 	gap: 0;

packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, ReactElement, Ref } from 'react';
 import { isElement } from 'react-is';
+
 import classnames from 'classnames';
+
 import AffixButton, { AffixButtonPropsType } from '../../../Form/Affix/variations/AffixButton';
 import AffixReadOnly, {
 	AffixReadOnlyPropsType,

packages/design-system/src/components/Form/Primitives/Select/SelectNoWrapper.tsx

@@ -12,6 +12,7 @@ export type SelectNoWrapperProps = Omit<SelectHTMLAttributes<any>, 'prefix'> & {
 	hasError?: boolean;
 	isAffix?: boolean;
 	isSuffix?: boolean;
+	dataTestid?: string;
 };
 
 const SelectNoWrapper = forwardRef((props: SelectNoWrapperProps, ref: Ref<HTMLSelectElement>) => {
@@ -25,13 +26,16 @@ const SelectNoWrapper = forwardRef((props: SelectNoWrapperProps, ref: Ref<HTMLSe
 		isAffix = false,
 		isSuffix = false,
 		id,
+		dataTestid,
 		...rest
 	} = props;
 	return (
 		<div className={styles.select__wrapper}>
 			<select
 				{...rest}
+				data-testid={dataTestid}
 				disabled={disabled}
+				required={required}
 				ref={ref}
 				id={id}
 				className={classnames(

packages/design-system/src/components/Form/Primitives/_mixins.scss

@@ -1,8 +1,8 @@
 @use '~@talend/design-tokens/lib/tokens';
 
-$standard-input-height: calc(#{tokens.$coral-sizing-m} - 0.125rem);
+$standard-input-height: calc(2rem - 0.125rem);
 
-@mixin base-input () {
+@mixin base-input() {
 	background: transparent;
 	color: tokens.$coral-color-neutral-text;
 	padding: tokens.$coral-spacing-xs;
@@ -51,7 +51,7 @@ $standard-input-height: calc(#{tokens.$coral-sizing-m} - 0.125rem);
 	}
 }
 
-@mixin border-styles () {
+@mixin border-styles() {
 	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	box-shadow: 0 0 0 0 transparent;
 	border-radius: tokens.$coral-radius-s;
@@ -98,5 +98,4 @@ $standard-input-height: calc(#{tokens.$coral-sizing-m} - 0.125rem);
 			box-shadow: 0 0 0 0.0625rem tokens.$coral-color-danger-border;
 		}
 	}
-
 }

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');
+	});
+});

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(
 	{

packages/faceted-search/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 17.2.0
+
+### Minor Changes
+
+- 420118f: feat: use design system text input for the advanced search
+
+### Patch Changes
+
+- c0c434c: fix: loadash imports
+- 5cd9cde: fix: make checkbox badge with values work again (without fetching the tags all the time)
+- Updated dependencies [c0c434c]
+  - @talend/utils@3.0.2
+
 ## 17.1.1
 
 ### Patch Changes

packages/faceted-search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talend/react-faceted-search",
-  "version": "17.1.1",
+  "version": "17.2.0",
   "description": "Faceted search",
   "main": "lib/index.js",
   "mainSrc": "src/index.js",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@talend/daikon-tql-client": "^1.3.1",
-    "@talend/utils": "^3.0.1",
+    "@talend/utils": "^3.0.2",
     "@talend/design-tokens": "^3.1.0",
     "classnames": "^2.3.2",
     "date-fns": "^3.0.0",
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@storybook/addon-actions": "^7.6.4",
     "@storybook/testing-library": "^0.2.2",
-    "@talend/design-system": "^9.4.1",
+    "@talend/design-system": "^9.7.0",
     "@talend/eslint-config": "^13.0.2",
     "@talend/eslint-plugin": "^1.1.0",
     "@talend/icons": "^7.7.0",

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"