feat(DS): Allow StackItem to have a isFullWidth option (#5179)

Talend · Feb 13, 2024 · 7c4f1e1 · 7c4f1e1
1 parent 8e1dc18
commit 7c4f1e1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/three-jobs-repeat.md b/.changeset/three-jobs-repeat.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+Design System - Allow StackItem to have a `isFullWidth` option to have 100% width style
diff --git a/packages/design-system/src/components/Stack/StackItem.module.scss b/packages/design-system/src/components/Stack/StackItem.module.scss
@@ -10,6 +10,10 @@
 		flex-shrink: 1;
 	}
 
+	&.fullWidth {
+		width: 100%;
+	}
+
 	&.align {
 		&-auto {
 			align-self: auto;

diff --git a/packages/design-system/src/components/Stack/StackItem.tsx b/packages/design-system/src/components/Stack/StackItem.tsx
@@ -30,6 +30,7 @@ export type ItemProps = {
 	align?: keyof typeof alignOptions;
 	overflow?: keyof typeof overflowOptions;
 	as?: (typeof possibleAsTypes)[number];
+	isFullWidth?: boolean;
 };
 
 export const StackItem = forwardRef(function StackItem(
@@ -40,6 +41,7 @@ export const StackItem = forwardRef(function StackItem(
 		shrink = true,
 		align = 'auto',
 		overflow = 'auto',
+		isFullWidth,
 		...props
 	}: ItemProps,
 	ref: Ref<any>,
@@ -52,6 +54,7 @@ export const StackItem = forwardRef(function StackItem(
 				styles.item,
 				styles[alignOptions[align]],
 				styles[overflowOptions[overflow]],
+				isFullWidth && styles.fullWidth,
 				{
 					[styles.grow]: grow,
 					[styles.shrink]: shrink,

diff --git a/packages/design-system/src/stories/layout/Stack.stories.tsx b/packages/design-system/src/stories/layout/Stack.stories.tsx
@@ -159,7 +159,7 @@ export const StackWithStackItem: StoryFn<typeof StackItem> = args => {
 				<Block width="3.75rem" />
 			</li>
 			<StackItem {...args}>
-				<Block width="2.5rem" />
+				<Block width="100%" />
 			</StackItem>
 			<li>
 				<Block width="5rem" />
@@ -173,6 +173,7 @@ StackWithStackItem.args = {
 	align: 'center',
 	overflow: 'auto',
 	as: 'li',
+	isFullWidth: false,
 };
 
 StackWithStackItem.argTypes = {
@@ -190,4 +191,5 @@ StackWithStackItem.argTypes = {
 		options: [...possibleAsTypes],
 		control: { type: 'select' },
 	},
+	isFullWidth: { control: { type: 'boolean' } },
 };