Merge pull request #707 from artsy/feat/flex-box

Unifies Box/Flex
artsy · Jun 15, 2020 · 115d48e · 115d48e
2 parents ec1d8ec + a8e56db
commit 115d48e
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 233 deletions.
diff --git a/packages/palette/src/elements/Avatar/Avatar.shared.tsx b/packages/palette/src/elements/Avatar/Avatar.shared.tsx
@@ -31,7 +31,7 @@ export const Size: SizeProps = {
 type SizeKey = "xs" | "sm" | "md"
 
 /** sizeValue */
-export const sizeValue = size => {
+export const sizeValue = (size: SizeKey) => {
   switch (size) {
     case "xs":
       return Size.xs
@@ -75,7 +75,6 @@ export const BaseAvatar = ({
         height={diameter}
         justifyContent={justifyContent}
         alignItems="center"
-        size={size}
       >
         <Sans
           size={typeSize}
@@ -93,11 +92,11 @@ export const BaseAvatar = ({
 }
 
 /** InitialsHolder */
-export const InitialsHolder = styledWrapper(Flex)<{ size: SizeKey }>`
+export const InitialsHolder = styledWrapper(Flex)`
   background-color: ${color("black10")};
-  border-radius: ${props => sizeValue(props.size).diameter};
   text-align: center;
   overflow: hidden;
+  border-radius: 50%;
 `
 
 InitialsHolder.displayName = "InitialsHolder"
diff --git a/packages/palette/src/elements/BarChart/BarChart.tsx b/packages/palette/src/elements/BarChart/BarChart.tsx
@@ -84,7 +84,7 @@ export const BarChart = ({ bars, minLabel, maxLabel }: BarChartProps) => {
       <Flex
         flexDirection="column"
         ref={wrapperRef as any}
-        flexGrow="1"
+        flexGrow={1}
         id="flex-wrapper"
       >
         <ChartContainer

diff --git a/packages/palette/src/elements/BorderBox/BorderBoxBase.tsx b/packages/palette/src/elements/BorderBox/BorderBoxBase.tsx
@@ -1,33 +1,11 @@
 // @ts-ignore
 import React from "react"
-
+import { border, BorderProps } from "styled-system"
 import { color, space } from "../../helpers"
 import { styledWrapper } from "../../platform/primitives"
 import { Flex, FlexProps } from "../Flex"
 
-import {
-  background,
-  BackgroundProps,
-  border,
-  BorderProps,
-  height,
-  HeightProps,
-  maxWidth,
-  MaxWidthProps,
-  space as styledSpace,
-  SpaceProps,
-  width,
-  WidthProps,
-} from "styled-system"
-
-export interface BorderBoxProps
-  extends BackgroundProps,
-    BorderProps,
-    FlexProps,
-    HeightProps,
-    MaxWidthProps,
-    SpaceProps,
-    WidthProps {
+export interface BorderBoxProps extends FlexProps, BorderProps {
   hover?: boolean
 }
 
@@ -39,10 +17,5 @@ export const BorderBoxBase = styledWrapper(Flex)<BorderBoxProps>`
   border: 1px solid ${color("black10")};
   border-radius: 2px;
   padding: ${space(2)}px;
-  ${background};
-  ${border};
-  ${height};
-  ${maxWidth};
-  ${styledSpace};
-  ${width};
+  ${border}
 `
diff --git a/packages/palette/src/elements/Box/Box.tsx b/packages/palette/src/elements/Box/Box.tsx
@@ -5,81 +5,45 @@ import { styled as primitives } from "../../platform/primitives"
 import {
   background,
   BackgroundProps,
-  bottom,
-  BottomProps,
-  color as styledColor,
+  border,
+  BorderProps,
+  color,
   ColorProps,
   compose,
-  display,
-  DisplayProps,
-  height,
-  HeightProps,
-  left,
-  LeftProps,
-  maxHeight,
-  MaxHeightProps,
-  maxWidth,
-  MaxWidthProps,
-  minHeight,
-  MinHeightProps,
-  minWidth,
-  MinWidthProps,
+  flexbox,
+  FlexboxProps,
+  layout,
+  LayoutProps,
   position,
   PositionProps,
-  right,
-  RightProps,
-  space as styledSpace,
+  space,
   SpaceProps,
   textAlign,
   TextAlignProps,
-  top,
-  TopProps,
-  width,
-  WidthProps,
-  zIndex,
-  ZIndexProps,
 } from "styled-system"
 
 export interface BoxProps
   extends BackgroundProps,
-    BottomProps,
-    ColorProps,
-    DisplayProps,
-    HeightProps,
-    LeftProps,
-    MaxWidthProps,
-    MinWidthProps,
-    MaxHeightProps,
-    MinHeightProps,
+    BorderProps,
+    Omit<ColorProps, "color">,
+    FlexboxProps,
+    LayoutProps,
     PositionProps,
-    RightProps,
     SpaceProps,
-    TextAlignProps,
-    TopProps,
-    WidthProps,
-    ZIndexProps {}
+    TextAlignProps {}
 
 /**
  * All the system functions for Box
  */
 export const boxMixin = compose(
   background,
-  bottom,
-  display,
-  height,
-  left,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
+  border,
+  color,
+  flexbox,
+  layout,
   position,
-  right,
-  styledColor,
-  styledSpace,
-  textAlign,
-  top,
-  width,
-  zIndex
+  space,
+  textAlign
 )
 
 /**

diff --git a/packages/palette/src/elements/Flex/Flex.tsx b/packages/palette/src/elements/Flex/Flex.tsx
@@ -1,129 +1,18 @@
-import { styled as primitives } from "../../platform/primitives"
+import { styledWrapper } from "../../platform/primitives"
+import { Box, BoxProps } from "../Box"
 
-import {
-  alignContent,
-  AlignContentProps,
-  alignItems,
-  AlignItemsProps,
-  alignSelf,
-  AlignSelfProps,
-  background,
-  BackgroundProps,
-  borderRadius,
-  BorderRadiusProps,
-  bottom,
-  BottomProps,
-  compose,
-  display,
-  DisplayProps,
-  flex,
-  flexBasis,
-  FlexBasisProps,
-  flexDirection,
-  FlexDirectionProps,
-  FlexProps as SystemFlexProps,
-  flexWrap,
-  FlexWrapProps,
-  height,
-  HeightProps,
-  justifyContent,
-  JustifyContentProps,
-  justifyItems,
-  JustifyItemsProps,
-  justifySelf,
-  JustifySelfProps,
-  maxHeight,
-  MaxHeightProps,
-  maxWidth,
-  MaxWidthProps,
-  order,
-  OrderProps,
-  position,
-  PositionProps,
-  space,
-  SpaceProps,
-  style,
-  top,
-  TopProps,
-  width,
-  WidthProps,
-  zIndex,
-  ZIndexProps,
-} from "styled-system"
-
-// @ts-ignore
-import { ClassAttributes, HTMLAttributes } from "react"
-
-const flexGrow = style({
-  prop: "flexGrow",
-})
-
-const flexShrink = style({
-  prop: "flexShrink",
-})
-
-export interface FlexProps
-  extends AlignContentProps,
-    AlignItemsProps,
-    AlignSelfProps,
-    BackgroundProps,
-    BorderRadiusProps,
-    BottomProps,
-    DisplayProps,
-    FlexBasisProps,
-    FlexDirectionProps,
-    FlexWrapProps,
-    HeightProps,
-    JustifyContentProps,
-    JustifyItemsProps,
-    JustifySelfProps,
-    MaxHeightProps,
-    MaxWidthProps,
-    OrderProps,
-    PositionProps,
-    SpaceProps,
-    SystemFlexProps,
-    TopProps,
-    WidthProps,
-    ZIndexProps {
-  flexGrow?: number | string
-  flexShrink?: number | string
-}
-
-const flexMixin = compose(
-  alignContent,
-  alignItems,
-  alignSelf,
-  background,
-  borderRadius,
-  bottom,
-  display,
-  flex,
-  flexBasis,
-  flexDirection,
-  flexWrap,
-  height,
-  justifyContent,
-  justifyItems,
-  justifySelf,
-  maxHeight,
-  maxWidth,
-  order,
-  position,
-  space,
-  top,
-  width,
-  zIndex
-)
+/**
+ * Flex is Box with display: flex
+ */
+export type FlexProps = BoxProps
 
 /**
- * A utility component that encapsulates flexbox behavior
+ * Flex is Box with display: flex
  */
-export const Flex = primitives.View<FlexProps>`
-  display: flex;
-  ${flexMixin}
-  ${flexGrow}
-  ${flexShrink}
-`
+export const Flex = styledWrapper(Box)<FlexProps>``
+
+Flex.defaultProps = {
+  display: "flex",
+}
 
 Flex.displayName = "Flex"
diff --git a/packages/palette/src/elements/Image/Image.story.tsx b/packages/palette/src/elements/Image/Image.story.tsx
@@ -8,7 +8,7 @@ storiesOf("Components/Image", module)
       <Image
         width="300px"
         height="200px"
-        src="https://picsum.photos/300/200/?random"
+        src="https://picsum.photos/300/200/?random=1"
       />
     )
   })

diff --git a/packages/palette/src/elements/Typography/Typography.tsx b/packages/palette/src/elements/Typography/Typography.tsx
@@ -26,9 +26,10 @@ import {
   MaxWidthProps,
   space,
   SpaceProps,
-  style,
   textAlign,
   TextAlignProps,
+  verticalAlign,
+  VerticalAlignProps,
 } from "styled-system"
 
 import { isReactNative } from "../../helpers/isReactNative"
@@ -38,24 +39,6 @@ import { determineFontSizes } from "./determineFontSizes"
  * Spec: https://www.notion.so/artsy/Typography-d1f9f6731f3d47c78003d6d016c30221
  */
 
-export interface VerticalAlignProps {
-  verticalAlign?:
-    | "baseline"
-    | "sub"
-    | "super"
-    | "text-top"
-    | "text-bottom"
-    | "middle"
-    | "top"
-    | "bottom"
-    | "inherit"
-    | "initial"
-    | "unset"
-}
-const verticalAlign = style({
-  prop: "verticalAlign",
-})
-
 /** renderFontValue */
 export const renderFontValue = (fontValue: FontValue) => {
   if (typeof fontValue === "string") {