From ed7c9cadc5c27fdde970ef04e011ba6192edd584 Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Tue, 17 Dec 2024 15:12:59 +0100
Subject: [PATCH] fix(TMC-1657): handle FloatingDrawer overflow (#5475)

* fix(TMC-1657): handle FloatingDrawer overflow

* changeset

* snapshot
---
 .changeset/shy-coats-invite.md                |  5 ++++
 .../Primitive/PrimitiveDrawer.module.scss     |  6 ++++-
 .../Drawer/Primitive/PrimitiveDrawer.tsx      | 11 ++++-----
 .../Drawer/__snapshots__/Drawer.test.tsx.snap | 12 ++++------
 .../navigation/FloatingDrawer.stories.tsx     | 24 ++++++++++++++++++-
 5 files changed, 41 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/shy-coats-invite.md

diff --git a/.changeset/shy-coats-invite.md b/.changeset/shy-coats-invite.md
new file mode 100644
index 00000000000..3272ad44bd8
--- /dev/null
+++ b/.changeset/shy-coats-invite.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+TMC-1657 - Handle FloatingDrawer overflow
diff --git a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss
index d8f04058b0b..99ad57d8c80 100644
--- a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss
+++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss
@@ -5,6 +5,10 @@
 	height: 100%;
 	background: tokens.$coral-color-neutral-background;
 	display: flex;
+	flex-flow: column;
+	justify-content: stretch;
+	align-items: stretch;
+	flex-wrap: nowrap;
 
 	.header {
 		flex-grow: 0;
@@ -20,7 +24,7 @@
 		flex-shrink: 1;
 		flex-basis: 0;
 		overflow: auto;
-
+		flex-flow: column;
 		display: flex;
 	}
 
diff --git a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx
index 3d85e2affde..7dab5fe3749 100644
--- a/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx
+++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-import type { Ref, ReactNode } from 'react';
-import { StackVertical } from '../../Stack';
+import type { ReactNode, Ref } from 'react';
 
 import theme from './PrimitiveDrawer.module.scss';
 
@@ -13,11 +12,9 @@ export type DrawerProps = {
 export const PrimitiveDrawer = forwardRef(
 	({ header, children, footer }: DrawerProps, ref: Ref<HTMLDivElement>) => (
 		<div className={theme.drawer} ref={ref}>
-			<StackVertical gap={0} align="stretch" justify="stretch">
-				{header && <div className={theme.header}>{header}</div>}
-				<div className={theme.body}>{children}</div>
-				{footer && <div className={theme.footer}>{footer}</div>}
-			</StackVertical>
+			{header && <div className={theme.header}>{header}</div>}
+			<div className={theme.body}>{children}</div>
+			{footer && <div className={theme.footer}>{footer}</div>}
 		</div>
 	),
 );
diff --git a/packages/design-system/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap b/packages/design-system/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
index 0b34e03fcd2..5f76d31f674 100644
--- a/packages/design-system/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/design-system/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap
@@ -22,15 +22,11 @@ exports[`FloatingDrawer should render a11y html 1`] = `
         class="theme-drawer"
       >
         <div
-          class="theme-stack theme-justify-stretch theme-align-stretch theme-nowrap theme-column theme-block theme-gap-x-0 theme-gap-y-0"
+          class="theme-body"
         >
-          <div
-            class="theme-body"
-          >
-            <p>
-              content of the drawer
-            </p>
-          </div>
+          <p>
+            content of the drawer
+          </p>
         </div>
       </div>
     </div>
diff --git a/packages/design-system/src/stories/navigation/FloatingDrawer.stories.tsx b/packages/design-system/src/stories/navigation/FloatingDrawer.stories.tsx
index 6002de75ee7..3c077ae4f02 100644
--- a/packages/design-system/src/stories/navigation/FloatingDrawer.stories.tsx
+++ b/packages/design-system/src/stories/navigation/FloatingDrawer.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { screen, userEvent } from '@storybook/testing-library';
 
-import { ButtonPrimary, FloatingDrawer, FloatingDrawerProps } from '../../';
+import { ButtonPrimary, FloatingDrawer, FloatingDrawerProps, InlineEditing } from '../../';
 import { Area } from '../docs/Area';
 
 export default {
@@ -55,6 +55,17 @@ const defaultProps = {
 	footer: <Area>Footer</Area>,
 };
 
+const overflowProps = {
+	...defaultProps,
+	children: (
+		<InlineEditing.Textarea
+			defaultValue="Haaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+			placeholder="Type something..."
+			label="Iniline edit that overflows"
+		/>
+	),
+};
+
 const playOpenDrawer = async () => {
 	const openButton = screen.getByRole('button');
 	await userEvent.click(openButton);
@@ -75,6 +86,17 @@ export const Simple: StoryFn<typeof FloatingDrawer> = (
 );
 Simple.args = defaultProps;
 
+export const Overflow: StoryFn<typeof FloatingDrawer> = ({
+	disclosure,
+	visible,
+	...props
+}: FloatingDrawerProps) => (
+	<FloatingDrawer.Container style={containerStyle}>
+		<FloatingDrawer {...props} visible />
+	</FloatingDrawer.Container>
+);
+Overflow.args = overflowProps;
+
 export const WithDisclosure: StoryFn<typeof FloatingDrawer> = () => (
 	<FloatingDrawer.Container style={containerStyle}>
 		<FloatingDrawer