feat(Box): allow flexShrink prop

einride · Apr 5, 2023 · 575c4de · 575c4de
1 parent f9a359a
commit 575c4de
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/thick-gifts-build.md b/.changeset/thick-gifts-build.md
@@ -0,0 +1,5 @@
+---
+"@einride/ui": minor
+---
+
+Allow `flexShrink` prop on Box.
diff --git a/packages/einride-ui/src/components/layout/Box/Box.tsx b/packages/einride-ui/src/components/layout/Box/Box.tsx
@@ -18,6 +18,7 @@ import {
   Display,
   FlexDirection,
   FlexGrow,
+  FlexShrink,
   FlexWrap,
   FontFamily,
   Gap,
@@ -77,9 +78,12 @@ export interface BoxProps extends Omit<ComponentPropsWithoutRef<"div">, "color">
   /** `flex-direction` CSS property. */
   flexDirection?: FlexDirection
 
-  /** `flex-direction` CSS property. */
+  /** `flex-grow` CSS property. */
   flexGrow?: FlexGrow
 
+  /** `flex-shrink` CSS property. */
+  flexShrink?: FlexShrink
+
   /** `flex-wrap` CSS property. */
   flexWrap?: FlexWrap
 
@@ -189,6 +193,7 @@ interface WrapperProps {
   display?: Display
   flexDirection?: FlexDirection
   flexGrow?: FlexGrow
+  flexShrink?: FlexShrink
   flexWrap?: FlexWrap
   fontFamily?: FontFamily
   gap?: Gap
@@ -238,6 +243,7 @@ const Wrapper = styled("div", {
   display: ${({ display }) => display};
   flex-direction: ${({ flexDirection }) => flexDirection};
   flex-grow: ${({ flexGrow }) => flexGrow};
+  flex-shrink: ${({ flexShrink }) => flexShrink};
   flex-wrap: ${({ flexWrap }) => flexWrap};
   font-family: ${({ fontFamily, theme }) => fontFamily && getFont(fontFamily, theme)};
   gap: ${({ gap, theme }) => gap && getSpacing(gap, theme)};

diff --git a/packages/einride-ui/src/lib/theme/props.ts b/packages/einride-ui/src/lib/theme/props.ts
@@ -20,6 +20,7 @@ export type Color = ContentColor | Omit<string, ContentColor>
 export type Display = CSSProperties["display"]
 export type FlexDirection = CSSProperties["flexDirection"]
 export type FlexGrow = CSSProperties["flexGrow"]
+export type FlexShrink = CSSProperties["flexShrink"]
 export type FlexWrap = CSSProperties["flexWrap"]
 export type FontFamily = Font | Omit<string, Font>
 export type FontSize = FontSizeType | Omit<string, FontSizeType> | number