chore(@kadena/react-ui): Add overflow as a prop to layout components

Author: eileenmguo

.changeset/five-rockets-beg.md

@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': patch
+---
+
+Added overflow prop to the Box, Stack, and Grid components

packages/libs/react-ui/src/components/Layout/Box/Box.stories.tsx

@@ -3,7 +3,7 @@ import { Box } from '@components/Layout/Box';
 import type { Meta, StoryObj } from '@storybook/react';
 import { vars } from '@theme/vars.css';
 import React from 'react';
-import { containerClass, itemClass } from '../stories.css';
+import { componentClass, containerClass, itemClass } from '../stories.css';
 
 const spaceOptions: (keyof typeof vars.sizes | undefined)[] = [
   undefined,
@@ -17,6 +17,7 @@ const dimensionOptions: string[] = ['100%', 'min-content', 'max-content'];
 
 const meta: Meta<IBoxProps> = {
   title: 'Layout/Box',
+  component: Box,
   parameters: {
     docs: {
       description: {
@@ -27,6 +28,13 @@ const meta: Meta<IBoxProps> = {
     },
   },
   argTypes: {
+    overflow: {
+      options: ['hidden', 'visible', 'scroll', 'auto'],
+      control: {
+        type: 'select',
+      },
+      description: 'Overflow css property.',
+    },
     width: {
       options: [...spaceOptions, ...dimensionOptions, ...contentWidthOptions],
       control: {
@@ -218,7 +226,7 @@ export const Primary: Story = {
     marginBottom,
     marginLeft,
     marginRight,
-    padding = '$6',
+    padding,
     paddingX,
     paddingY,
     paddingTop,
@@ -231,6 +239,7 @@ export const Primary: Story = {
     height,
     minHeight,
     maxHeight,
+    overflow,
   }) => (
     <div className={containerClass}>
       <Box
@@ -254,9 +263,10 @@ export const Primary: Story = {
         height={height}
         minHeight={minHeight}
         maxHeight={maxHeight}
-        className={itemClass}
+        overflow={overflow}
+        className={componentClass}
       >
-        Box Content
+        <div className={itemClass}>Box Content</div>
       </Box>
     </div>
   ),

packages/libs/react-ui/src/components/Layout/Box/Box.tsx

@@ -22,6 +22,7 @@ export interface IBoxProps
       | 'maxWidth'
       | 'minHeight'
       | 'minWidth'
+      | 'overflow'
       | 'padding'
       | 'paddingBottom'
       | 'paddingLeft'
@@ -54,6 +55,7 @@ export const Box = ({
   maxWidth,
   minHeight,
   minWidth,
+  overflow,
   padding,
   paddingBottom,
   paddingLeft,
@@ -81,6 +83,7 @@ export const Box = ({
           maxWidth,
           minHeight,
           minWidth,
+          overflow,
           padding,
           paddingBottom,
           paddingLeft,

packages/libs/react-ui/src/components/Layout/Grid/Grid.stories.tsx

@@ -35,6 +35,13 @@ const meta: Meta<StoryType> = {
   },
   component: Grid.Root,
   argTypes: {
+    overflow: {
+      options: ['hidden', 'visible', 'scroll', 'auto'],
+      control: {
+        type: 'select',
+      },
+      description: 'Overflow css property.',
+    },
     gap: {
       options: Object.keys(gapVariants) as (keyof typeof gapVariants)[],
       control: { type: 'select' },
@@ -249,6 +256,7 @@ const defaultArgs: Record<string, string | undefined> = {
   paddingBottom: undefined,
   paddingLeft: undefined,
   paddingRight: undefined,
+  overflow: undefined,
 };
 
 export const GridRoot: Story = {

packages/libs/react-ui/src/components/Layout/Grid/GridRoot.tsx

@@ -25,6 +25,7 @@ export interface IGridRootProps
     | 'maxWidth'
     | 'minHeight'
     | 'minWidth'
+    | 'overflow'
     | 'padding'
     | 'paddingBottom'
     | 'paddingLeft'
@@ -71,6 +72,7 @@ export const GridRoot: FC<IGridRootProps> = ({
   maxWidth,
   minHeight,
   minWidth,
+  overflow,
   padding,
   paddingBottom,
   paddingLeft,
@@ -97,6 +99,7 @@ export const GridRoot: FC<IGridRootProps> = ({
       maxWidth,
       minHeight,
       minWidth,
+      overflow,
       padding,
       paddingBottom,
       paddingLeft,

packages/libs/react-ui/src/components/Layout/Stack/Stack.stories.tsx

@@ -31,6 +31,13 @@ const meta: Meta<typeof Stack> = {
     },
   },
   argTypes: {
+    overflow: {
+      options: ['hidden', 'visible', 'scroll', 'auto'],
+      control: {
+        type: 'select',
+      },
+      description: 'Overflow css property',
+    },
     width: {
       options: [...spaceOptions, ...dimensionOptions, ...contentWidthOptions],
       control: {
@@ -263,6 +270,7 @@ const defaultArgs: Record<keyof typeof Stack, string | undefined> = {
   paddingBottom: undefined,
   paddingLeft: undefined,
   paddingRight: undefined,
+  overflow: undefined,
 };
 
 export const Horizontal: Story = {

packages/libs/react-ui/src/components/Layout/Stack/Stack.tsx

@@ -23,6 +23,7 @@ export interface IStackProps
     | 'maxWidth'
     | 'minHeight'
     | 'minWidth'
+    | 'overflow'
     | 'padding'
     | 'paddingBottom'
     | 'paddingLeft'
@@ -59,6 +60,7 @@ export const Stack = ({
   maxWidth,
   minHeight,
   minWidth,
+  overflow,
   padding,
   paddingBottom,
   paddingLeft,
@@ -92,6 +94,7 @@ export const Stack = ({
           maxWidth,
           minHeight,
           minWidth,
+          overflow,
           padding,
           paddingBottom,
           paddingLeft,