diff --git a/.changeset/three-jobs-repeat.md b/.changeset/three-jobs-repeat.md new file mode 100644 index 00000000000..83121eb0e33 --- /dev/null +++ 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 index 51ec530e3f4..6f168060524 100644 --- 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 index cec438ead5a..7aa69196728 100644 --- 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, @@ -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 index 3e2647a6780..51294e75899 100644 --- 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 = args => { - +
  • @@ -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' } }, };