feat: Flex and View

Arize-ai · May 12, 2023 · 8d242ed · 8d242ed
1 parent 995e88d
commit 8d242ed
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 53 deletions.
diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
@@ -140,6 +140,7 @@ export const globalCSS = css`
     --ac-global-background-color-dark: var(--ac-global-color-gray-900);
     --ac-global-background-color-danger: var(--ac-global-color-danger);
 
+    --ac-global-border-color-default: var(--ac-global-color-gray-100);
     --ac-global-border-color-light: var(--ac-global-color-gray-100);
     --ac-global-border-color-dark: var(--ac-global-color-gray-400);
 

diff --git a/src/types/core.ts b/src/types/core.ts
@@ -91,7 +91,7 @@ export type DimensionValue =
   | (string & {});
 
 export type BorderRadiusValue = 'small' | 'medium';
-export type BorderColorValue = 'light' | 'dark';
+export type BorderColorValue = 'default' | 'light' | 'dark';
 export type BorderSizeValue = 'thin' | 'thick' | 'thicker' | 'thickest';
 export type BackgroundColorValue = 'light' | 'dark';
 

diff --git a/src/types/style.ts b/src/types/style.ts
@@ -2,6 +2,7 @@ import {
   BackgroundColorValue,
   BorderColorValue,
   BorderRadiusValue,
+  BorderSizeValue,
   DimensionValue,
 } from './core';
 
@@ -125,21 +126,21 @@ export interface ViewStyleProps extends StyleProps {
   backgroundColor?: Responsive<BackgroundColorValue>;
 
   /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  // borderWidth?: Responsive<BorderSizeValue>;
+  borderWidth?: Responsive<BorderSizeValue>;
   /** The width of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width). */
-  // borderStartWidth?: Responsive<BorderSizeValue>;
+  borderStartWidth?: Responsive<BorderSizeValue>;
   /** The width of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width). */
-  // borderEndWidth?: Responsive<BorderSizeValue>;
+  borderEndWidth?: Responsive<BorderSizeValue>;
   // borderLeftWidth?: BorderSizeValue,
-  // borderRightWidth?: BorderSizeValue,
+  borderRightWidth?: BorderSizeValue;
   /** The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width). */
-  // borderTopWidth?: Responsive<BorderSizeValue>;
+  borderTopWidth?: Responsive<BorderSizeValue>;
   /** The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width). */
-  // borderBottomWidth?: Responsive<BorderSizeValue>;
+  borderBottomWidth?: Responsive<BorderSizeValue>;
   /** The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  // borderXWidth?: Responsive<BorderSizeValue>;
+  borderXWidth?: Responsive<BorderSizeValue>;
   /** The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */
-  // borderYWidth?: Responsive<BorderSizeValue>;
+  borderYWidth?: Responsive<BorderSizeValue>;
 
   /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */
   borderColor?: Responsive<BorderColorValue>;
@@ -197,6 +198,14 @@ export interface ViewStyleProps extends StyleProps {
   // transforms?
 }
 
+const borderStyleProps = {
+  borderWidth: 'borderStyle',
+  borderLeftWidth: 'borderLeftStyle',
+  borderRightWidth: 'borderRightStyle',
+  borderTopWidth: 'borderTopStyle',
+  borderBottomWidth: 'borderBottomStyle',
+};
+
 export interface BoxAlignmentStyleProps {
   /**
    * The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).

diff --git a/src/utils/styleProps.ts b/src/utils/styleProps.ts
@@ -218,19 +218,19 @@ function colorValue(value: ColorValue, type: ColorType = 'default') {
 }
 
 function backgroundColorValue(value: BackgroundColorValue) {
-  return `var(--ac-alias-background-color-${value}, ${colorValue(
+  return `var(--ac-global-background-color-${value}, ${colorValue(
     value as ColorValue,
     'background'
   )})`;
 }
 
 function borderColorValue(value: BorderColorValue) {
   // TODO support default color
-  // if (value === 'default') {
-  //   return 'var(--ac-alias-border-color)';
-  // }
+  if (value === 'default') {
+    return 'var(--ac-global-border-color)';
+  }
 
-  return `var(--ac-alias-border-color-${value}, ${colorValue(
+  return `var(--ac-global-border-color-${value}, ${colorValue(
     value as ColorValue,
     'border'
   )})`;
@@ -245,7 +245,7 @@ export function passthroughStyle(value) {
 }
 
 function borderRadiusValue(value: BorderRadiusValue) {
-  return `var(--ac-alias-border-radius-${value})`;
+  return `var(--ac-global-rounding-${value})`;
 }
 
 function hiddenValue(value: boolean) {

diff --git a/src/view/View.tsx b/src/view/View.tsx
@@ -1,16 +1,11 @@
 import React, { JSXElementConstructor, ReactNode, forwardRef } from 'react';
 import { css } from '@emotion/react';
-import {
-  BackgroundColorValue,
-  BorderColorValue,
-  BorderRadiusValue,
-  DOMRef,
-  DimensionValue,
-} from '../types';
+import { DOMProps, DOMRef, ViewStyleProps } from '../types';
 import { useDOMRef } from '../utils';
-import { dimensionValue } from '../utils/styleProps';
+import { useStyleProps, viewStyleProps } from '../utils';
+import { filterDOMProps } from '@react-aria/utils';
 
-export interface ViewProps {
+export interface ViewProps extends ViewStyleProps, DOMProps {
   /**
    * The children to be displayed in the View.
    */
@@ -20,49 +15,24 @@ export interface ViewProps {
    * @default 'div'
    */
   elementType?: string | JSXElementConstructor<any>;
-  padding?: Extract<
-    DimensionValue,
-    'static-size-50' | 'static-size-100' | 'static-size-200'
-  >;
-  borderRadius?: BorderRadiusValue;
-  borderColor?: BorderColorValue;
-  backgroundColor?: BackgroundColorValue;
-  width?: DimensionValue;
-  height?: DimensionValue;
-  id?: string;
 }
 
 function View(props: ViewProps, ref: DOMRef) {
   const {
     children,
     elementType: ElementType = 'div',
-    padding,
-    borderRadius,
-    borderColor,
-    backgroundColor,
-    width,
-    height,
     id,
+    ...otherProps
   } = props;
+  const { styleProps } = useStyleProps(props, viewStyleProps);
   const domRef = useDOMRef(ref);
   return (
     <ElementType
+      {...filterDOMProps(otherProps as DOMProps)}
+      {...styleProps}
       ref={domRef}
       css={css`
         overflow: hidden;
-        padding: ${padding != null ? dimensionValue(padding) : 0};
-        border: 1px solid
-          ${borderColor != null
-            ? `var(--ac-global-border-color-${borderColor})`
-            : 'transparent'};
-        background-color: ${backgroundColor != null
-          ? `var(--ac-global-background-color-${backgroundColor})`
-          : 'transparent'};
-        border-radius: ${borderRadius != null
-          ? `var(--ac-global-rounding-${borderRadius})`
-          : 0};
-        width: ${width != null ? dimensionValue(width) : 'auto'};
-        height: ${height != null ? dimensionValue(height) : 'auto'};
       `}
       className="ac-view"
       id={id}

diff --git a/stories/Flex.stories.tsx b/stories/Flex.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Meta, Story } from '@storybook/react';
+import { withDesign } from 'storybook-addon-designs';
+import { Flex, Heading, Provider, View } from '../src';
+
+const meta: Meta = {
+  title: 'Flex',
+  component: Flex,
+  decorators: [withDesign],
+};
+
+export default meta;
+
+export const Gallery: Story = () => (
+  <Provider>
+    <Heading>Column</Heading>
+    <Flex gap="size-100" direction="column" width="size-2000">
+      <View backgroundColor="light" height="size-800" />
+      <View backgroundColor="light" height="size-800" />
+      <View backgroundColor="light" height="size-800" />
+    </Flex>
+    <Heading>Row</Heading>
+    <Flex gap="size-100" direction="row" height="size-2000">
+      <View backgroundColor="light" width="size-800" />
+      <View backgroundColor="light" width="size-800" />
+      <View backgroundColor="light" width="size-800" />
+    </Flex>
+  </Provider>
+);
diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx
@@ -17,6 +17,7 @@ import {
   View,
   Heading,
   ButtonGroup,
+  Flex,
 } from '../src';
 import { Icon, Icons, SearchOutline } from '../src/icon';
 // @ts-ignore
@@ -204,6 +205,27 @@ const Template: Story = args => {
             `}
           />
         </View>
+        <View
+          backgroundColor="dark"
+          borderWidth="thin"
+          borderRadius="medium"
+          borderColor="dark"
+        >
+          <Flex direction="row">
+            <View flex>
+              <img
+                src={chartFile}
+                alt="chart image"
+                css={css`
+                  margin: 24px;
+                `}
+              />
+            </View>
+            <View width="size-2400" backgroundColor="light">
+              <Heading>Statistic</Heading>
+            </View>
+          </Flex>
+        </View>
         {holder}
       </div>
     </Provider>

diff --git a/stories/View.stories.tsx b/stories/View.stories.tsx
@@ -113,6 +113,7 @@ export const Gallery = args => {
         </Card>
         <View
           backgroundColor="light"
+          borderWidth="thin"
           padding="static-size-100"
           borderRadius="medium"
           borderColor="light"
@@ -138,6 +139,7 @@ export const Gallery = args => {
         </View>
         <View
           backgroundColor="light"
+          borderWidth="thin"
           padding="static-size-100"
           borderRadius="medium"
           borderColor="light"