add margin props to flex item

userlike · May 16, 2024 · 33969ed · 33969ed
1 parent 14aa5ad
commit 33969ed
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/.changeset/eleven-baboons-film.md b/.changeset/eleven-baboons-film.md
@@ -0,0 +1,5 @@
+---
+"@moblin/chakra-ui": patch
+---
+
+add margin props to flex item
diff --git a/packages/chakra-ui/src/Flex.tsx b/packages/chakra-ui/src/Flex.tsx
@@ -11,10 +11,10 @@ import {
   unsafeCoerce,
 } from "@moblin/core";
 
-import { ContainerProps } from "./props";
+import { ContainerProps, SafeFlexItemProps } from "./props";
 import { WithChildren } from "./react";
 
-export interface FlexItemProps extends WithChildren {
+export interface FlexItemProps extends WithChildren, SafeFlexItemProps {
   alignSelf?: AlignSelf;
   grow?: number;
   shrink?: number;
@@ -29,6 +29,7 @@ export const FlexItem = ({
   basis = "auto",
   children,
   overflowAnchor,
+  ...props
 }: FlexItemProps) => {
   return (
     <chakra.div
@@ -59,6 +60,7 @@ export const FlexItem = ({
         },
         overflowAnchor,
       }}
+      {...props}
     >
       {children}
     </chakra.div>

diff --git a/packages/chakra-ui/src/props.ts b/packages/chakra-ui/src/props.ts
@@ -72,6 +72,34 @@ export type SafeSpaceProps = Pick<
   | "py"
 >;
 
+export type SafeFlexItemProps = Pick<
+  SpaceProps,
+  | "m"
+  | "margin"
+  | "mt"
+  | "marginBlockStart"
+  | "marginTop"
+  | "mr"
+  | "marginInlineEnd"
+  | "marginEnd"
+  | "me"
+  | "marginRight"
+  | "mb"
+  | "marginBlockEnd"
+  | "marginBottom"
+  | "ml"
+  | "marginInlineStart"
+  | "marginStart"
+  | "ms"
+  | "marginLeft"
+  | "mx"
+  | "marginInline"
+  | "marginX"
+  | "my"
+  | "marginBlock"
+  | "marginY"
+>;
+
 export type ContainerProps<T extends As> = Omit<
   HTMLChakraProps<T>,
   keyof StyleProps