From ea026ec12244fa40097ede9cf3bc68fcf34eb321 Mon Sep 17 00:00:00 2001
From: sgendre <31214611+sgendre@users.noreply.github.com>
Date: Tue, 28 Nov 2023 10:26:08 +0100
Subject: [PATCH] feat(forms): migrate to DS Tabs + CollapsibleFieldset (#4928)

---
 .changeset/beige-terms-yell.md                |   5 +
 .changeset/few-months-tickle.md               |   5 +
 .../Tabs/Primitive/TabStyles.module.scss      |  20 +++
 .../src/components/Tabs/Primitive/Tabs.tsx    |   6 +-
 .../src/components/Tabs/variants/Tabs.tsx     |   9 +-
 .../src/stories/navigation/Tabs.stories.tsx   |  22 +++
 .../UIForm/fieldsets/Array/Array.component.js |   1 +
 .../CollapsibleFieldset.component.js          |  51 ++++--
 .../CollapsibleFieldset.component.test.js     |  26 +--
 ...CollapsibleFieldset.component.test.js.snap | 157 +++++++-----------
 .../UIForm/fieldsets/Tabs/Tabs.component.js   |  39 ++---
 .../__snapshots__/Tabs.component.test.js.snap |  92 ++++------
 packages/forms/src/UIForm/utils/array.js      |   1 +
 .../forms/stories/SchemaFieldsets.stories.tsx |  10 ++
 .../forms/stories/SchemaState.stories.tsx     |   4 +-
 .../UIFormStoriesSchemas/errors.schema.js     |  47 ++++++
 .../fieldsets/core-arrays-collapsible.json    |  89 ++++++++++
 .../forms/stories/json/fieldsets/index.ts     |   1 +
 18 files changed, 372 insertions(+), 213 deletions(-)
 create mode 100644 .changeset/beige-terms-yell.md
 create mode 100644 .changeset/few-months-tickle.md
 create mode 100644 packages/forms/stories/json/fieldsets/core-arrays-collapsible.json

diff --git a/.changeset/beige-terms-yell.md b/.changeset/beige-terms-yell.md
new file mode 100644
index 00000000000..44df4b4bf36
--- /dev/null
+++ b/.changeset/beige-terms-yell.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': minor
+---
+
+Use DS tabs in UIForm
diff --git a/.changeset/few-months-tickle.md b/.changeset/few-months-tickle.md
new file mode 100644
index 00000000000..e7c8d0af7ed
--- /dev/null
+++ b/.changeset/few-months-tickle.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+Error state for tabs
diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
index d0224816457..76737107486 100644
--- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
+++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
@@ -102,4 +102,24 @@
 			margin-right: tokens.$coral-spacing-s;
 		}
 	}
+
+	&_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/design-system/src/components/Tabs/Primitive/Tabs.tsx b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx
index 2efcab63ffe..4e221050612 100644
--- a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx
+++ b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx
@@ -28,6 +28,7 @@ export type TabPropTypes = {
 	icon?: IconNameWithSize<'S'>;
 	tag?: string | number;
 	tooltip?: string;
+	error?: boolean;
 };
 
 export function Tab(props: TabPropTypes) {
@@ -36,7 +37,10 @@ export function Tab(props: TabPropTypes) {
 		<button
 			role="tab"
 			aria-selected={props['aria-controls'] === context?.value}
-			className={classNames(style.tab, { [style.tab_large]: context?.size === 'L' })}
+			className={classNames(style.tab, {
+				[style.tab_large]: context?.size === 'L',
+				[style.tab_error]: props.error === true,
+			})}
 			onClick={e => context?.onChange(e, props['aria-controls'])}
 			disabled={props.disabled}
 			type="button"
diff --git a/packages/design-system/src/components/Tabs/variants/Tabs.tsx b/packages/design-system/src/components/Tabs/variants/Tabs.tsx
index 09ed87a02f0..10bee9adb7b 100644
--- a/packages/design-system/src/components/Tabs/variants/Tabs.tsx
+++ b/packages/design-system/src/components/Tabs/variants/Tabs.tsx
@@ -50,12 +50,9 @@ export function Tabs(props: TabsProps) {
 							tabProps['aria-controls'] = ids[index];
 							tabProps.title = tab.tabTitle;
 						} else if (typeof tab.tabTitle === 'object') {
-							tabProps['aria-controls'] = tab.tabTitle.id || ids[index];
-							tabProps.title = tab.tabTitle.title;
-							tabProps.icon = tab.tabTitle.icon;
-							tabProps.tag = tab.tabTitle.tag;
-							tabProps.tooltip = tab.tabTitle.tooltip;
-							tabProps.disabled = tab.tabTitle.disabled;
+							const { id, ...rest } = tab.tabTitle;
+							tabProps['aria-controls'] = id || ids[index];
+							Object.assign(tabProps, rest);
 						}
 						return <Tab key={index} {...(tabProps as TabPropTypes)} />;
 					})}
diff --git a/packages/design-system/src/stories/navigation/Tabs.stories.tsx b/packages/design-system/src/stories/navigation/Tabs.stories.tsx
index 08b72c89e94..3394c2a5886 100644
--- a/packages/design-system/src/stories/navigation/Tabs.stories.tsx
+++ b/packages/design-system/src/stories/navigation/Tabs.stories.tsx
@@ -34,6 +34,28 @@ export const Styles = () => (
 	</StackHorizontal>
 );
 
+export const TabsWithError = () => (
+	<Tabs
+		tabs={[
+			{
+				tabTitle: {
+					icon: 'user',
+					title: 'User',
+					error: true,
+				},
+				tabContent: <h2>Users tab content</h2>,
+			},
+			{
+				tabTitle: {
+					icon: 'calendar',
+					title: 'Calendar',
+				},
+				tabContent: <h2>Calendar tab content</h2>,
+			},
+		]}
+	/>
+);
+
 export const TabsWithIcon = () => (
 	<Tabs.Container defaultActiveKey="profile">
 		<Tabs.List>
diff --git a/packages/forms/src/UIForm/fieldsets/Array/Array.component.js b/packages/forms/src/UIForm/fieldsets/Array/Array.component.js
index 74895faf08c..ba7595f29c2 100644
--- a/packages/forms/src/UIForm/fieldsets/Array/Array.component.js
+++ b/packages/forms/src/UIForm/fieldsets/Array/Array.component.js
@@ -124,6 +124,7 @@ export default class ArrayWidget extends Component {
 			<Widget
 				{...this.props}
 				{...extraProps}
+				index={index}
 				disabled={this.props.schema.disabled}
 				id={this.props.id && `${this.props.id}-${index}`}
 				schema={getArrayElementSchema(this.props.schema, index)}
diff --git a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js
index e826de7fecb..d588e5e08e4 100644
--- a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js
+++ b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js
@@ -1,7 +1,8 @@
+import { useCallback } from 'react';
+
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { InlineMessageInformation } from '@talend/design-system';
-import CollapsiblePanel from '@talend/react-components/lib/CollapsiblePanel';
+import { InlineMessageInformation, CollapsiblePanel } from '@talend/design-system';
 import get from 'lodash/get';
 import Widget from '../../Widget';
 import { generateDescriptionId } from '../../Message/generateId';
@@ -72,11 +73,18 @@ export function defaultTitle(formData, schema, options) {
  * @param {function} title the function called by the component to compute the title
  * @return {function} CollapsibleFieldset react component
  */
+// eslint-disable-next-line @typescript-eslint/default-param-last
 export default function createCollapsibleFieldset(title = defaultTitle) {
 	function CollapsibleFieldset(props) {
-		function toggle(event) {
-			event.stopPropagation();
-			event.preventDefault();
+		const { id, schema, value, actions, index, ...restProps } = props;
+		const { items, managed } = schema;
+
+		function onToggleClick(event) {
+			if (event) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
+
 			const payload = {
 				schema: props.schema,
 				value: {
@@ -87,22 +95,31 @@ export default function createCollapsibleFieldset(title = defaultTitle) {
 			props.onChange(event, payload);
 		}
 
-		const { id, schema, value, actions, ...restProps } = props;
-		const { items } = schema;
-		const displayAction = actions.map(action => ({
-			...action,
-			displayMode: CollapsiblePanel.displayModes.TYPE_ACTION,
-		}));
+		const getAction = useCallback(() => {
+			if (!actions || actions.length === 0 || actions[0] === undefined) {
+				return undefined;
+			}
+
+			const action = actions[0];
+
+			return {
+				...action,
+				tooltip: action.tooltip || action.label,
+				callback: action.onClick,
+			};
+		}, [actions]);
 
 		return (
 			<fieldset
 				className={classNames('form-group', theme['collapsible-panel'], 'collapsible-panel')}
 			>
 				<CollapsiblePanel
-					id={`${id}`}
-					header={[{ label: title(value, schema) }, displayAction]}
-					onToggle={toggle}
+					title={title(value, schema)}
+					onToggleExpanded={onToggleClick}
+					index={index}
+					managed={!!managed}
 					expanded={!value.isClosed}
+					action={getAction()}
 				>
 					{schema.description ? (
 						<InlineMessageInformation
@@ -115,8 +132,8 @@ export default function createCollapsibleFieldset(title = defaultTitle) {
 					) : (
 						''
 					)}
-					{items.map((itemSchema, index) => (
-						<Widget {...restProps} id={id} key={index} schema={itemSchema} value={value} />
+					{items.map((itemSchema, idx) => (
+						<Widget {...restProps} id={id} key={`${id}-${idx}`} schema={itemSchema} value={value} />
 					))}
 				</CollapsiblePanel>
 			</fieldset>
@@ -132,9 +149,11 @@ export default function createCollapsibleFieldset(title = defaultTitle) {
 	if (process.env.NODE_ENV !== 'production') {
 		CollapsibleFieldset.propTypes = {
 			id: PropTypes.string,
+			index: PropTypes.number,
 			onChange: PropTypes.func.isRequired,
 			schema: PropTypes.shape({
 				items: PropTypes.array.isRequired,
+				managed: PropTypes.bool,
 				description: PropTypes.string,
 			}).isRequired,
 			value: PropTypes.object,
diff --git a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js
index 70f377b60a9..620cc7cad9d 100644
--- a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js
+++ b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.test.js
@@ -90,7 +90,7 @@ describe('CollapsibleFieldset', () => {
 				<CollapsibleFieldset {...props} value={{ ...value, isClosed: true }} />
 			</WidgetContext.Provider>,
 		);
-		expect(screen.getByRole('tab')).toHaveTextContent('Jimmy, Somsanith');
+		expect(screen.getByText('Jimmy, Somsanith')).toBeInTheDocument();
 		expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
 	});
 	it('should render a custom title', () => {
@@ -101,7 +101,7 @@ describe('CollapsibleFieldset', () => {
 				<CollapsibleFieldset {...props} />
 			</WidgetContext.Provider>,
 		);
-		expect(screen.getByRole('tab')).toHaveTextContent('Basic: Jimmy Somsanith');
+		expect(screen.getByText('Basic: Jimmy Somsanith')).toBeInTheDocument();
 	});
 	it('should render without value', () => {
 		const CollapsibleFieldset = createCollapsibleFieldset();
@@ -110,16 +110,26 @@ describe('CollapsibleFieldset', () => {
 				<CollapsibleFieldset {...props} value={{}} />
 			</WidgetContext.Provider>,
 		);
-		expect(screen.getByRole('tab')).toHaveTextContent('Basic');
+		expect(screen.getByText('Basic')).toBeInTheDocument();
 	});
 
 	it('should toggle', async () => {
 		// given
 		const CollapsibleFieldset = createCollapsibleFieldset();
 
+		const extendedSchema = {
+			...props.schema,
+			managed: true,
+		};
+
 		render(
 			<WidgetContext.Provider value={widgets}>
-				<CollapsibleFieldset {...props} value={{ ...value, isClosed: true }} />
+				<CollapsibleFieldset
+					{...props}
+					value={{ ...value, isClosed: true }}
+					schema={extendedSchema}
+					index={0}
+				/>
 			</WidgetContext.Provider>,
 		);
 		// when
@@ -127,17 +137,14 @@ describe('CollapsibleFieldset', () => {
 
 		// then
 		expect(props.onChange).toBeCalledWith(expect.anything(), {
-			schema,
+			schema: extendedSchema,
 			value: { ...value, isClosed: false },
 		});
 	});
 
 	it('should render Actions component if actions are provided', () => {
 		const CollapsibleFieldset = createCollapsibleFieldset();
-		const actions = [
-			{ id: 'action1', label: 'Action1', onClick: jest.fn() },
-			{ id: 'action2', label: 'Action 2', onClick: jest.fn() },
-		];
+		const actions = [{ id: 'action1', label: 'Action1', onClick: jest.fn(), icon: 'talend-trash' }];
 
 		render(
 			<WidgetContext.Provider value={widgets}>
@@ -145,7 +152,6 @@ describe('CollapsibleFieldset', () => {
 			</WidgetContext.Provider>,
 		);
 		expect(screen.getByRole('button', { name: 'Action1' })).toBeVisible();
-		expect(screen.getByRole('button', { name: 'Action 2' })).toBeVisible();
 	});
 
 	it('should not render Actions component if actions are not provided', () => {
diff --git a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/__snapshots__/CollapsibleFieldset.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/__snapshots__/CollapsibleFieldset.component.test.js.snap
index e7807ec50d5..cb967368eb4 100644
--- a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/__snapshots__/CollapsibleFieldset.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/__snapshots__/CollapsibleFieldset.component.test.js.snap
@@ -5,116 +5,85 @@ exports[`CollapsibleFieldset should render 1`] = `
   class="form-group theme-collapsible-panel collapsible-panel"
 >
   <div
-    class="panel panel-default theme-tc-collapsible-panel theme-default-panel theme-open panel panel-default"
-    id="my-fieldset"
+    class="theme-panelWrapper theme-panelWrapper__alone"
   >
-    <div
-      class="panel-heading"
-      id="my-fieldset--heading"
-      role="tab"
+    <button
+      aria-controls="CollapsiblePanel__content--id-42"
+      aria-expanded="true"
+      class="theme-headerWrapper theme-headerWrapper__clickable"
+      data-test="panel.header"
+      data-testid="panel.header"
+      id="CollapsiblePanel__control--id-42"
     >
       <div
-        class="panel-title"
+        class="theme-iconWrapper"
       >
-        <div
-          class="theme-panel-header-content panel-header-content"
+        <svg
+          aria-hidden="true"
+          color="var(--coral-color-accent-icon, hsla(204, 88%, 40%, 1))"
+          pointer-events="none"
+          shape-rendering="geometricPrecision"
+          style="width: 1.6rem; height: 1.6rem;"
         >
-          <div
-            class="theme-panel-title"
-          >
-            <div
-              class="theme-undefined theme-col-2"
-            >
-              <div
-                aria-describedby="42"
-                class="theme-undefined"
-              >
-                Jimmy, Somsanith
-              </div>
-            </div>
-            <div
-              class="theme-group theme-col-2"
-            />
-          </div>
-          <button
-            aria-describedby="id-42"
-            aria-expanded="true"
-            aria-label="Collapse panel"
-            class="theme-clickable theme-buttonIcon"
-            id="my-fieldset__collapse"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="theme-buttonIcon__icon"
-            >
-              <svg
-                aria-hidden="true"
-                pointer-events="none"
-                shape-rendering="geometricPrecision"
-                style="width: 1.6rem; height: 1.6rem;"
-              >
-                <use
-                  xlink:href="#chevron-down-stroke:M"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
+          <use
+            xlink:href="#chevron-up:M"
+          />
+        </svg>
       </div>
-    </div>
+      <span
+        class="theme-headerTitle"
+      >
+        Jimmy, Somsanith
+      </span>
+    </button>
     <div
-      aria-expanded="true"
-      aria-labelledby="my-fieldset--heading"
-      class="panel-collapse collapse in"
-      id="my-fieldset--body"
-      role="tabpanel"
+      aria-labelledby="CollapsiblePanel__control--id-42"
+      class="theme-panelContent"
+      data-test="panel.section"
+      data-testid="panel.section"
+      id="CollapsiblePanel__content--id-42"
+      role="region"
     >
       <div
-        class="panel-body"
+        aria-live="polite"
+        class="theme-inlineMessage"
+        id="my-fieldset-description"
+        role="status"
       >
-        <div
-          aria-live="polite"
-          class="theme-inlineMessage"
-          id="my-fieldset-description"
-          role="status"
+        <span
+          class="theme-icon theme-information__icon"
         >
-          <span
-            class="theme-icon theme-information__icon"
+          <svg
+            aria-hidden="true"
+            pointer-events="none"
+            shape-rendering="geometricPrecision"
+            style="width: 1.6rem; height: 1.6rem;"
           >
-            <svg
-              aria-hidden="true"
-              pointer-events="none"
-              shape-rendering="geometricPrecision"
-              style="width: 1.6rem; height: 1.6rem;"
-            >
-              <use
-                xlink:href="#information-filled:M"
-              />
-            </svg>
-          </span>
-          <p
-            class="theme-inlineMessage__contents"
-          >
-            <span>
-              This is description
-            </span>
-          </p>
-        </div>
-        <p
-          class="text-danger"
-        >
-          Widget not found 
-          string
-        </p>
+            <use
+              xlink:href="#information-filled:M"
+            />
+          </svg>
+        </span>
         <p
-          class="text-danger"
+          class="theme-inlineMessage__contents"
         >
-          Widget not found 
-          string
+          <span>
+            This is description
+          </span>
         </p>
       </div>
+      <p
+        class="text-danger"
+      >
+        Widget not found 
+        string
+      </p>
+      <p
+        class="text-danger"
+      >
+        Widget not found 
+        string
+      </p>
     </div>
   </div>
 </fieldset>
diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
index 86c65244bdd..3b54f097f7b 100644
--- a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
+++ b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js
@@ -1,29 +1,22 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
-import TabBar from '@talend/react-components/lib/TabBar';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
+import { Tabs } from '@talend/design-system';
 
 import Widget from '../../Widget';
 import { isValid } from '../../utils/validation';
-import theme from './Tabs.module.scss';
-import { I18N_DOMAIN_FORMS } from '../../../constants';
-
-function Tabs(props) {
-	const [selectedKey, setSelectedKey] = useState(0);
-	const { t } = useTranslation(I18N_DOMAIN_FORMS);
 
+function TabsAdapter(props) {
 	const { schema, ...restProps } = props;
+
 	const tabs = schema.items.map((item, index) => {
 		const tabIsValid = isValid(item, restProps.errors);
 		return {
 			key: index,
-			label: item.title,
-			className: classNames({ [theme['has-error']]: !tabIsValid }),
-			'aria-label': tabIsValid
-				? undefined
-				: `${item.title} (${t('TF_TABS_HAS_ERRORS', { defaultValue: 'has errors' })})`,
-			children: (
+			tabTitle: {
+				title: item.title,
+				id: `${restProps.id}-tabs-${index}`,
+				error: !tabIsValid,
+			},
+			tabContent: (
 				<Widget
 					{...restProps}
 					schema={{ widget: 'fieldset', ...item, options: { ...item.options, hideTitle: true } }}
@@ -32,19 +25,11 @@ function Tabs(props) {
 		};
 	});
 
-	return (
-		<TabBar
-			className={classNames(theme['tf-tabs'], 'tf-tabs')}
-			id={`${restProps.id}-tabs`}
-			items={tabs}
-			onSelect={(_, item) => setSelectedKey(item.key)}
-			selectedKey={selectedKey}
-		/>
-	);
+	return <Tabs id={`${restProps.id}-tabs`} tabs={tabs} />;
 }
 
 if (process.env.NODE_ENV !== 'production') {
-	Tabs.propTypes = {
+	TabsAdapter.propTypes = {
 		errors: PropTypes.object,
 		schema: PropTypes.shape({
 			items: PropTypes.arrayOf(
@@ -57,4 +42,4 @@ if (process.env.NODE_ENV !== 'production') {
 	};
 }
 
-export default Tabs;
+export default TabsAdapter;
diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap
index 816fb2e547e..f05c1ee2664 100644
--- a/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap
@@ -1,77 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tabs widget should render tabs 1`] = `
-<div
-  class="theme-tf-tabs tf-tabs"
+<nav
   id="undefined-tabs"
 >
   <div
-    class="theme-tc-tab-bar-menu tc-tab-bar-menu"
+    class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0"
   >
-    <ul
-      class="theme-tc-tab-bar tc-tab-bar theme-tc-tab-bar-responsive tc-tab-bar-responsive nav nav-tabs"
+    <div
+      class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-row theme-block theme-gap-x-M theme-gap-y-M"
       role="tablist"
     >
-      <li
-        class="active"
-        role="presentation"
+      <button
+        aria-selected="true"
+        class="theme-tab"
+        role="tab"
+        type="button"
       >
-        <button
-          aria-controls="undefined-tabs-pane-0"
-          aria-selected="true"
-          href="#"
-          id="undefined-tabs-tab-0"
-          label="User"
-          role="tab"
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
         >
           <span
-            aria-describedby="42"
-            class="theme-tc-tab-bar-item-container tc-tab-bar-item-container"
+            class="theme-tab__copy"
           >
-            <span
-              class="theme-tc-tab-bar-item-label"
-            >
-              User
-            </span>
+            User
           </span>
-        </button>
-      </li>
-      <li
-        class=""
-        role="presentation"
+        </div>
+      </button>
+      <button
+        aria-selected="false"
+        class="theme-tab"
+        role="tab"
+        type="button"
       >
-        <button
-          aria-controls="undefined-tabs-pane-1"
-          aria-selected="false"
-          href="#"
-          id="undefined-tabs-tab-1"
-          label="Other"
-          role="tab"
-          tabindex="-1"
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
         >
           <span
-            aria-describedby="42"
-            class="theme-tc-tab-bar-item-container tc-tab-bar-item-container"
+            class="theme-tab__copy"
           >
-            <span
-              class="theme-tc-tab-bar-item-label"
-            >
-              Other
-            </span>
+            Other
           </span>
-        </button>
-      </li>
-    </ul>
-  </div>
-  <div
-    class="tab-content"
-  >
+        </div>
+      </button>
+    </div>
     <div
-      aria-hidden="false"
-      aria-labelledby="undefined-tabs-tab-0"
-      class="fade tab-pane active in"
-      id="undefined-tabs-pane-0"
+      class="theme-tabpanel"
+      id="undefined-tabs-0"
       role="tabpanel"
+      tabindex="0"
     >
       <fieldset
         class="form-group"
@@ -112,11 +89,10 @@ exports[`Tabs widget should render tabs 1`] = `
       </fieldset>
     </div>
     <div
-      aria-hidden="true"
-      aria-labelledby="undefined-tabs-tab-1"
-      class="fade tab-pane"
-      id="undefined-tabs-pane-1"
+      class="theme-tabpanel theme-tabpanel--hidden"
+      id="undefined-tabs-1"
       role="tabpanel"
+      tabindex="0"
     >
       <fieldset
         class="form-group"
@@ -143,5 +119,5 @@ exports[`Tabs widget should render tabs 1`] = `
       </fieldset>
     </div>
   </div>
-</div>
+</nav>
 `;
diff --git a/packages/forms/src/UIForm/utils/array.js b/packages/forms/src/UIForm/utils/array.js
index cd0a78e6e03..bc8c3eb4f63 100644
--- a/packages/forms/src/UIForm/utils/array.js
+++ b/packages/forms/src/UIForm/utils/array.js
@@ -131,5 +131,6 @@ export function getArrayElementSchema(arraySchema, elementIndex) {
 		items: getArrayElementItems(arraySchema, elementIndex),
 		widget: arraySchema.itemWidget || 'fieldset',
 		title: arraySchema.itemTitle,
+		managed: arraySchema.itemManaged,
 	};
 }
diff --git a/packages/forms/stories/SchemaFieldsets.stories.tsx b/packages/forms/stories/SchemaFieldsets.stories.tsx
index 0eb5518003f..a5210c59db4 100644
--- a/packages/forms/stories/SchemaFieldsets.stories.tsx
+++ b/packages/forms/stories/SchemaFieldsets.stories.tsx
@@ -54,6 +54,16 @@ export const CoreCollapsibleFieldset = {
 		data: fieldsets.coreCollapsibleFieldset,
 	},
 };
+export const CoreArraysCollapsibleFieldset = {
+	parameters: {
+		formStoryDisplayMode: {
+			doc: 'ArraysCollapsibleFieldset/README.md',
+		},
+	},
+	args: {
+		data: fieldsets.coreArraysCollapsibleFieldset,
+	},
+};
 export const CoreColumns = {
 	parameters: {
 		formStoryDisplayMode: {
diff --git a/packages/forms/stories/SchemaState.stories.tsx b/packages/forms/stories/SchemaState.stories.tsx
index d8fe62fec2a..cfbc81dfd73 100644
--- a/packages/forms/stories/SchemaState.stories.tsx
+++ b/packages/forms/stories/SchemaState.stories.tsx
@@ -85,7 +85,9 @@ const errorsProps = errorsSchema.uiSchema.reduce(
 		...acc,
 		[current.key.split('.').join(',')]: 'There is an error',
 	}),
-	{},
+	{
+		tabConfiguration: 'There is an error',
+	},
 );
 
 export const Errors: Story = {
diff --git a/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js b/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js
index ef86ec63d6f..4f0454aa8f9 100644
--- a/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js
+++ b/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js
@@ -2,7 +2,25 @@ export const errorsSchema = {
 	jsonSchema: {
 		type: 'object',
 		title: 'Comment',
+		required: ['fieldname'],
 		properties: {
+			tabConfiguration: {
+				type: 'object',
+				properties: {
+					fieldname: {
+						type: 'string',
+					},
+				},
+			},
+			fieldname: {
+				type: 'string',
+			},
+			description: {
+				type: 'string',
+			},
+			tabs: {
+				type: 'tabs',
+			},
 			arrayOfObjects: {
 				type: 'array',
 				items: {
@@ -84,6 +102,35 @@ export const errorsSchema = {
 		},
 	},
 	uiSchema: [
+		{
+			key: 'tabs',
+			title: '2 Tabs',
+			widget: 'tabs',
+			items: [
+				{
+					key: 'tabConfiguration',
+					title: 'Configuration',
+					widget: 'fieldset',
+					items: [
+						{
+							key: 'fieldname',
+							title: 'Field Name',
+						},
+					],
+				},
+				{
+					key: 'tabInfo',
+					title: 'Info',
+					widget: 'fieldset',
+					items: [
+						{
+							key: 'description',
+							title: 'Description',
+						},
+					],
+				},
+			],
+		},
 		{
 			key: 'arrayOfObjects',
 			title: 'Array of objects',
diff --git a/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json b/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json
new file mode 100644
index 00000000000..143aaa96341
--- /dev/null
+++ b/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json
@@ -0,0 +1,89 @@
+{
+  "jsonSchema": {
+    "type": "object",
+    "title": "Comment",
+    "required": ["comments"],
+    "properties": {
+      "groupBy": {
+        "type": "array",
+        "minItems": 1,
+        "maxItems": 5,
+        "items": {
+          "type": "object",
+          "properties": {
+            "fieldName": {
+              "type": "string",
+              "enum": ["First Field", "Second Field", "Third Field"]
+            }
+          }
+        }
+      },
+      "operations": {
+        "type": "array",
+        "minItems": 1,
+        "maxItems": 5,
+        "items": {
+          "type": "object",
+          "properties": {
+            "fieldName": {
+              "type": "string",
+              "enum": ["First Field", "Second Field", "Third Field"]
+            },
+            "operation": {
+              "type": "string",
+              "enum": ["First Operation", "Second Operation", "Third Operation"]
+            }
+          }
+        }
+      }
+    }
+  },
+  "uiSchema": [
+    {
+      "key": "operations",
+      "title": "Operations",
+      "itemWidget": "collapsibleFieldset",
+      "itemManaged": false,
+      "items": [
+        {
+          "key": "operations[].fieldName",
+          "title": "Field"
+        },
+        {
+          "key": "operations[].operation",
+          "title": "Operation"
+        }
+      ]
+    },
+    {
+      "key": "groupBy",
+      "title": "Group by",
+      "items": [
+        {
+          "key": "groupBy[].fieldName",
+          "title": "Field"
+        }
+      ]
+    }
+  ],
+  "properties": {
+    "groupBy": [
+      {
+        "fieldName": "First Field"
+      },
+      {
+        "fieldName": "Second Field"
+      }
+    ],
+    "operations": [
+      {
+        "fieldName": "First Field",
+        "operation": "First Operation"
+      },
+      {
+        "fieldName": "Second Field",
+        "operation": "First Operation"
+      }
+    ]
+  }
+}
diff --git a/packages/forms/stories/json/fieldsets/index.ts b/packages/forms/stories/json/fieldsets/index.ts
index fec5e66d191..74927719732 100644
--- a/packages/forms/stories/json/fieldsets/index.ts
+++ b/packages/forms/stories/json/fieldsets/index.ts
@@ -2,6 +2,7 @@ export { default as coreArraysComplex } from './core-arrays-complex.json';
 export { default as coreArraysWithCustomOptions } from './core-arrays-with-custom-options.json';
 export { default as coreArrays } from './core-arrays.json';
 export { default as coreCollapsibleFieldset } from './core-collapsibleFieldset.json';
+export { default as coreArraysCollapsibleFieldset } from './core-arrays-collapsible.json';
 export { default as coreColumns } from './core-columns.json';
 export { default as coreFieldset } from './core-fieldset.json';
 export { default as coreTabs } from './core-tabs.json';