Merge branch 'master' into gbacc/fix/TDOPS-4682-input-file-fixes

.changeset/fast-hornets-run.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+Design System - InlineEdit and InlineEditMulti can now have a maxLength attribute

packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx

@@ -43,6 +43,7 @@ export type InlineEditingPrimitiveProps = {
 	onToggle?: (isEditionMode: boolean) => void;
 	label: string;
 	required?: boolean;
+	maxLength?: number;
 	placeholder: string;
 	ariaLabel?: string;
 	renderValueAs?: ElementType | ReactElement;
@@ -85,6 +86,7 @@ const InlineEditingPrimitive = forwardRef(
 			onCancel = () => {},
 			onToggle = () => {},
 			required = false,
+			maxLength,
 			label,
 			hasError,
 			description,
@@ -176,6 +178,7 @@ const InlineEditingPrimitive = forwardRef(
 			label,
 			name: label.replace(/\s/g, ''),
 			required,
+			maxLength,
 			placeholder,
 			onChange: (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>): void => {
 				if (onChangeValue) {

packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx

@@ -0,0 +1,41 @@
+import InlineEditingMulti from './InlineEditing.textarea';
+
+context('<InlineEditing.Textarea />', () => {
+	const defaultProps = {
+		label: 'Textarea inline edit',
+		placeholder: 'Type here',
+	};
+
+	it('should render with filled value', () => {
+		cy.mount(<InlineEditingMulti {...defaultProps} defaultValue="Some text" />);
+
+		cy.get('[data-testid="inlineediting.button.edit"]').should('exist');
+		cy.get('p').should('have.text', 'Some text');
+	});
+
+	it('should allow inline editing', () => {
+		cy.mount(<InlineEditingMulti {...defaultProps} />);
+
+		// Switch to edit mode
+		cy.get('[data-testid="inlineediting.button.edit"]').click();
+		cy.get('[data-testid="inlineediting.textarea"]').should('be.visible');
+		cy.get('[data-testid="inlineediting.button.cancel"]').should('be.visible');
+		cy.get('[data-testid="inlineediting.button.submit"]').should('be.visible');
+
+		// Input some text and submit
+		cy.get('[data-testid="inlineediting.textarea"]').type('Here is a description');
+		cy.get('[data-testid="inlineediting.button.submit"]').click();
+
+		cy.get('p').should('have.text', 'Here is a description');
+	});
+
+	it('should allow to have some constraints', () => {
+		cy.mount(<InlineEditingMulti {...defaultProps} required={true} maxLength={10} />);
+
+		cy.get('[data-testid="inlineediting.button.edit"]').click();
+		cy.get('[data-testid="inlineediting.textarea"]').should('have.attr', 'required');
+		cy.get('[data-testid="inlineediting.textarea"]')
+			.invoke('attr', 'maxLength')
+			.should('equal', '10');
+	});
+});