From 489ad4180721415e0825f7851a37b0cee5a56718 Mon Sep 17 00:00:00 2001
From: Samuel Gendre <sgendre@talend.com>
Date: Wed, 11 Oct 2023 15:37:20 +0200
Subject: [PATCH] - DS tab error style - form tab using DS ones

---
 .../WIP/Tabs/Primitive/TabStyles.module.scss  | 18 ++++++++-
 .../UIForm/fieldsets/Tabs/Tabs.component.js   |  1 +
 .../UIFormStoriesSchemas/errors.schema.js     | 39 +++++++++++++++++++
 3 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/WIP/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/WIP/Tabs/Primitive/TabStyles.module.scss
index 8123fe8850c..6662b4ac4ba 100644
--- a/packages/design-system/src/components/WIP/Tabs/Primitive/TabStyles.module.scss
+++ b/packages/design-system/src/components/WIP/Tabs/Primitive/TabStyles.module.scss
@@ -83,7 +83,23 @@
 		}
 	}
 
-	&_error{
+	&_error {
 		color: tokens.$coral-color-danger-text;
+
+		&[aria-selected='true'] {
+			color: tokens.$coral-color-danger-text;
+		}
+	}
+
+	&_error::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		border-top: tokens.$coral-border-m-solid tokens.$coral-color-danger-text;
+		opacity: 0;
+		transition: tokens.$coral-transition-fast;
+		transform: translateY(100%);
 	}
 }
diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
index 1e853691044..592df8efcbe 100644
--- a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
+++ b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
@@ -19,6 +19,7 @@ function TabsAdapter(props) {
 			tabTitle: {
 				title: item.title,
 				id: `${restProps.id}-tabs-${index}`,
+				error: !tabIsValid,
 			},
 			tabContent: tabIsValid ? (
 				<Widget
diff --git a/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js b/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js
index ef86ec63d6f..3e258f05dd2 100644
--- a/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js
+++ b/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js
@@ -2,7 +2,17 @@ export const errorsSchema = {
 	jsonSchema: {
 		type: 'object',
 		title: 'Comment',
+		required: ['fieldname'],
 		properties: {
+			fieldname: {
+				type: 'string',
+			},
+			description: {
+				type: 'string',
+			},
+			tabs: {
+				type: 'tabs',
+			},
 			arrayOfObjects: {
 				type: 'array',
 				items: {
@@ -84,6 +94,35 @@ export const errorsSchema = {
 		},
 	},
 	uiSchema: [
+		{
+			key: 'tabs',
+			title: '2 Tabs',
+			widget: 'tabs',
+			items: [
+				{
+					key: 'tab-settings-tab-main',
+					title: 'Configuration',
+					widget: 'fieldset',
+					items: [
+						{
+							key: 'fieldname',
+							title: 'Field Name',
+						},
+					],
+				},
+				{
+					key: 'tab-info',
+					title: 'Info',
+					widget: 'fieldset',
+					items: [
+						{
+							key: 'description',
+							title: 'Description',
+						},
+					],
+				},
+			],
+		},
 		{
 			key: 'arrayOfObjects',
 			title: 'Array of objects',