updating Box and Stack api

kadena-community · Aug 9, 2023 · 5c353b1 · 5c353b1
1 parent 484f296
commit 5c353b1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/libs/react-ui/src/components/Box/Box.tsx b/packages/libs/react-ui/src/components/Box/Box.tsx
@@ -5,6 +5,7 @@ export interface IBoxProps
   extends Partial<
     Pick<
       Sprinkles,
+      | 'display'
       | 'margin'
       | 'marginX'
       | 'marginY'
@@ -14,12 +15,13 @@ export interface IBoxProps
       | 'marginRight'
     >
   > {
-  component?: ElementType;
+  as?: ElementType;
   children?: React.ReactNode;
 }
 
 export const Box = ({
-  component = 'div',
+  as = 'div',
+  display = 'block',
   margin = undefined,
   marginX = undefined,
   marginY = undefined,
@@ -30,9 +32,10 @@ export const Box = ({
   children,
 }: IBoxProps): React.ReactElement => {
   return createElement(
-    component,
+    as,
     {
       className: sprinkles({
+        display,
         margin,
         marginX,
         marginY,

diff --git a/packages/libs/react-ui/src/components/Stack/Stack.tsx b/packages/libs/react-ui/src/components/Stack/Stack.tsx
@@ -25,12 +25,12 @@ export interface IStackProps
   direction?: Sprinkles['flexDirection'];
   wrap?: Sprinkles['flexWrap'];
   spacing?: Sprinkles['gap'];
-  component?: ElementType;
+  as?: ElementType;
   children?: React.ReactNode;
 }
 
 export const Stack = ({
-  component = 'div',
+  as = 'div',
   margin = undefined,
   marginX = undefined,
   marginY = undefined,
@@ -54,7 +54,7 @@ export const Stack = ({
   children,
 }: IStackProps): React.ReactElement => {
   return createElement(
-    component,
+    as,
     {
       className: sprinkles({
         display: 'flex',