- DS tab error style

- form tab using DS ones
Talend · Oct 11, 2023 · 489ad41 · 489ad41
1 parent 699144c
commit 489ad41
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 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
@@ -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
@@ -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
@@ -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',