fix(TMC-1657): handle FloatingDrawer overflow (#5475)

* fix(TMC-1657): handle FloatingDrawer overflow * changeset * snapshot
Talend · Dec 17, 2024 · ed7c9ca · ed7c9ca
1 parent d161cab
commit ed7c9ca
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 17 deletions.
diff --git a/.changeset/shy-coats-invite.md 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
@@ -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
@@ -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
@@ -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
@@ -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