Merge branch 'jmfrancois/feat/components-theme-tokens' into jmfrancoi…

…s/feat/forms-design-tokens-bis

.github/workflows/changeset.yml

@@ -30,7 +30,7 @@ jobs:
           persist-credentials: false
 
       - name: Setup Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"

.github/workflows/dependencies.yml

@@ -22,7 +22,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"

.github/workflows/design-system-component-testing.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
-      - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+      - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"

.github/workflows/icons.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           check-latest: true

.github/workflows/pr-demo.yml

@@ -28,7 +28,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"

.github/workflows/pr-lint.yml

@@ -28,7 +28,7 @@ jobs:
           fetch-depth: 0 # otherwise, you will failed to push refs to dest repo
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           check-latest: true
@@ -46,7 +46,7 @@ jobs:
 
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@54849deb963ca9f24185fb5de2965e002d066e6b #v37.0.5
+        uses: tj-actions/changed-files@2a968ff601949c81b47d9c1fdb789b0d25ddeea2 #v37.1.2
 
       - name: Merge lint
         run: node merge-report.js ${{ steps.changed-files.outputs.all_changed_files }}

.github/workflows/pr-playground.yml

@@ -27,7 +27,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"

.github/workflows/pr-test.yml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           check-latest: true

.github/workflows/surge-cleanup.yml

@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
 

.github/workflows/tests-cron.yml

@@ -20,7 +20,7 @@ jobs:
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"

.github/workflows/visual-testing.yml

@@ -32,7 +32,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+      - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           cache: "yarn"

.github/workflows/yarn-deduplicate.yml

@@ -29,7 +29,7 @@ jobs:
           fetch-depth: 0 # otherwise, you will failed to push refs to dest repo
 
       - name: Use Node.js
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 18
           registry-url: "https://registry.npmjs.org/"

packages/components/package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@talend/bootstrap-theme": "^7.0.1",
+    "@talend/design-tokens": "^2.7.3",
     "@talend/react-a11y": "^1.1.0",
     "@talend/icons": "^6.58.1",
     "@talend/utils": "^2.5.1",

packages/design-system/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @talend/design-system
 
+## 7.14.0
+
+### Minor Changes
+
+- cd79a04a8: Design System - InlineEdit and InlineEditMulti can now have a maxLength attribute
+
+### Patch Changes
+
+- 0789cda91: Design system - Form file will now update on files prop change and will trigger onChange when file is cleared
+
+## 7.13.0
+
+### Minor Changes
+
+- 4292de3ea: feat(TDC-7254/Stepper): Add a new props `currentStepIndex` to control current step. Set to zero by default.
+
+  This fix an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back on classic react patterns, make it pure and ask for a state
+
+## 7.12.2
+
+### Patch Changes
+
+- 1c53807b7: chore: update rich radio button
+
 ## 7.12.1
 
 ### Patch Changes

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talend/design-system",
-  "version": "7.12.1",
+  "version": "7.14.0",
   "description": "Talend Design System",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -60,7 +60,7 @@
     "@storybook/theming": "^6.5.16",
     "@svgr/webpack": "^5.5.0",
     "@talend/bootstrap-theme": "^7.0.1",
-    "@talend/icons": "^6.58.1",
+    "@talend/icons": "^6.59.0",
     "@talend/locales-design-system": "^7.3.0",
     "@talend/scripts-core": "^13.3.0",
     "@talend/scripts-config-react-webpack": "^15.4.0",

packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx

@@ -0,0 +1,36 @@
+import InputFile from './Input.File';
+
+context('<Form.File />', () => {
+	const defaultProps = {
+		label: 'Select file here',
+		name: 'file',
+	};
+	it('should render', () => {
+		cy.mount(<InputFile {...defaultProps} />);
+
+		cy.get('label').should('have.text', defaultProps.label);
+		cy.get('ol[role="list"]').should('not.exist');
+		cy.get('button').should('not.exist');
+	});
+
+	it('should render with filled value', () => {
+		cy.mount(<InputFile {...defaultProps} files={['file.js']} />);
+
+		cy.get('ol[role="list"]').should('have.text', 'file.js');
+		cy.get('button').should('exist');
+	});
+
+	it('should trigger dom events', () => {
+		cy.document().then(doc => {
+			doc.addEventListener('change', cy.stub().as('onChange'));
+		});
+
+		cy.mount(<InputFile {...defaultProps} />);
+
+		cy.get('input').selectFile(Cypress.Buffer.from('Hello world'));
+		cy.get('@onChange').should('have.been.calledOnce');
+
+		cy.get('button').click({ force: true });
+		cy.get('@onChange').should('have.been.calledTwice');
+	});
+});

packages/design-system/src/components/Form/Field/Input/Input.File.tsx

@@ -29,18 +29,22 @@ function getFileSize(size: number, t: TFunction) {
 
 type InputType = Omit<InputPrimitiveProps, 'type' | 'className' | 'style' | 'prefix' | 'suffix'>;
 type FileProps = InputType & {
-	files?: string[] | FileList;
+	files?: string[] | FileList | null;
 };
 
 const InputFile = forwardRef((props: FileProps, ref: Ref<HTMLInputElement>) => {
 	const [drag, setDrag] = useState(false);
-	const [files, setFiles] = useState(props.files || null);
+	const [files, setFiles] = useState<string[] | FileList | null>();
 
 	const inputRef = useRef<HTMLInputElement | null>(null);
 	const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM);
 
 	const { hasError, ...rest } = props;
 
+	useEffect(() => {
+		setFiles(props.files);
+	}, [props.files]);
+
 	function handleChange() {
 		const input = inputRef.current;
 		if (input) {
@@ -52,6 +56,7 @@ const InputFile = forwardRef((props: FileProps, ref: Ref<HTMLInputElement>) => {
 		const input = inputRef.current;
 		if (input) {
 			input.value = '';
+			input.dispatchEvent(new Event('change', { bubbles: true }));
 		}
 		setFiles(() => null);
 	}

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

packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx

@@ -7,25 +7,24 @@ import {
 import { StackVertical, StackHorizontal } from '../Stack';
 import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper';
 import style from './RichRadioButton.module.scss';
-import classnames from 'classnames';
 import { Tag } from '../Tag';
 import { Icon } from '../Icon';
 import { DataAttributes } from 'src/types';
 
 function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset | IconAsset }) {
 	if (asset?.illustration) {
 		return (
-			<span className={classnames([style['rich-radio-button__illustration']])}>
+			<span className={style['rich-radio-button__illustration']}>
 				<asset.illustration />
 			</span>
 		);
 	}
 	if (asset?.logo) {
-		return <Icon name={asset.logo} className={classnames([style['rich-radio-button__logo']])} />;
+		return <Icon name={asset.logo} className={style['rich-radio-button__logo']} />;
 	}
 	if (asset?.name) {
 		return (
-			<span className={classnames([style['rich-radio-button__icon']])}>
+			<span className={style['rich-radio-button__icon']}>
 				{getIconWithDeprecatedSupport({
 					iconSrc: asset.name || '',
 					size: 'L',
@@ -68,6 +67,12 @@ const RichRadioButton = ({
 				data-test={dataTest}
 				onChange={() => onChange(id)}
 				data-checked={isChecked}
+				onKeyDown={event => {
+					if (event.key === 'Enter') {
+						event.preventDefault();
+						onChange(id);
+					}
+				}}
 			/>
 			<span className={style['rich-radio-button']}>
 				<StackVertical as="span" gap="XS">

packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss

@@ -34,12 +34,17 @@
 	&__wrapper {
 		display: flex;
 		flex: 1;
+		height: 100%;
 		margin: 0;
 		max-width: 400px;
 		min-height: 77px;
 		min-width: 220px;
 		position: relative;
 		width: 100%;
+
+		input {
+			margin: 0;
+		}
 	}
 
 	&__input {
@@ -152,6 +157,11 @@
 
 		&:checked {
 			&:not(:disabled, [readonly]) {
+				+ .rich-radio-button {
+					background-color: tokens.$coral-color-accent-background-selected;
+					border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border;
+				}
+
 				&:hover {
 					+ .rich-radio-button {
 						border-color: tokens.$coral-color-accent-border-hover;
@@ -164,9 +174,10 @@
 					}
 				}
 
-				+ .rich-radio-button {
-					background-color: tokens.$coral-color-accent-background-selected;
-					border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border;
+				&:focus {
+					+ .rich-radio-button {
+						outline-offset: -2px;
+					}
 				}
 			}