feat(Box): add margin-inline and margin-block props

einride · May 5, 2023 · 05f1c15 · 05f1c15
1 parent 7239cac
commit 05f1c15
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/.changeset/pretty-rice-hear.md b/.changeset/pretty-rice-hear.md
@@ -0,0 +1,5 @@
+---
+"@einride/ui": minor
+---
+
+Box: Add margin-block and margin-inline props.
diff --git a/packages/einride-ui/src/components/layout/Box/Box.tsx b/packages/einride-ui/src/components/layout/Box/Box.tsx
@@ -31,9 +31,11 @@ import {
   InsetInlineStart,
   JustifyContent,
   Margin,
+  MarginBlock,
   MarginBlockEnd,
   MarginBlockStart,
   MarginBottom,
+  MarginInline,
   MarginInlineEnd,
   MarginInlineStart,
   MarginLeft,
@@ -121,6 +123,9 @@ export interface BoxProps extends Omit<ComponentPropsWithoutRef<"div">, "color">
   /** Margin of the box. */
   margin?: Margin
 
+  /** Block margin of the box. */
+  marginBlock?: MarginBlock
+
   /** Block end margin of the box. */
   marginBlockEnd?: MarginBlockEnd
 
@@ -130,6 +135,9 @@ export interface BoxProps extends Omit<ComponentPropsWithoutRef<"div">, "color">
   /** Bottom margin of the box. */
   marginBottom?: MarginBottom
 
+  /** Inline margin of the box. */
+  marginInline?: MarginInline
+
   /** Inline end margin of the box. */
   marginInlineEnd?: MarginInlineEnd
 
@@ -210,9 +218,11 @@ interface WrapperProps {
   insetInlineStart?: InsetInlineStart
   justifyContent?: JustifyContent
   margin?: Margin
+  marginBlock?: MarginBlock
   marginBlockEnd?: MarginBlockEnd
   marginBlockStart?: MarginBlockStart
   marginBottom?: MarginBottom
+  marginInline?: MarginInline
   marginInlineEnd?: MarginInlineEnd
   marginInlineStart?: MarginInlineStart
   marginLeft?: MarginLeft
@@ -265,11 +275,14 @@ const Wrapper = styled("div", {
     insetInlineStart && getSpacing(insetInlineStart, theme)};
   justify-content: ${({ justifyContent }) => justifyContent};
   margin: ${({ margin, theme }) => margin && getSpacing(margin, theme)};
+  margin-block: ${({ marginBlock, theme }) => marginBlock && getSpacing(marginBlock, theme)};
   margin-block-end: ${({ marginBlockEnd, theme }) =>
     marginBlockEnd && getSpacing(marginBlockEnd, theme)};
   margin-block-start: ${({ marginBlockStart, theme }) =>
     marginBlockStart && getSpacing(marginBlockStart, theme)};
   margin-bottom: ${({ marginBottom, theme }) => marginBottom && getSpacing(marginBottom, theme)};
+  margin-inline-end: ${({ marginInline, theme }) =>
+    marginInline && getSpacing(marginInline, theme)};
   margin-inline-end: ${({ marginInlineEnd, theme }) =>
     marginInlineEnd && getSpacing(marginInlineEnd, theme)};
   margin-inline-start: ${({ marginInlineStart, theme }) =>

diff --git a/packages/einride-ui/src/lib/theme/props.ts b/packages/einride-ui/src/lib/theme/props.ts
@@ -36,8 +36,10 @@ export type InsetInlineStart = SpacingInput
 export type JustifyContent = CSSProperties["justifyContent"]
 export type Margin = SpacingInput
 export type MarginBottom = SpacingInput
+export type MarginBlock = SpacingInput
 export type MarginBlockEnd = SpacingInput
 export type MarginBlockStart = SpacingInput
+export type MarginInline = SpacingInput
 export type MarginInlineEnd = SpacingInput
 export type MarginInlineStart = SpacingInput
 export type MarginLeft = SpacingInput