Design system improvements (#5984)

christianbaroni · web-flow · commit d0608929b5ea · 2024-08-09T13:27:19.000-04:00
diff --git a/src/__swaps__/screens/Swap/components/ReviewPanel.tsx b/src/__swaps__/screens/Swap/components/ReviewPanel.tsx
@@ -471,7 +471,7 @@ export function ReviewPanel() {
           <Inline horizontalSpace="10px" alignVertical="center" alignHorizontal="justify">
             <ButtonPressAnimation onPress={openGasExplainer} scaleTo={0.925}>
               <Stack space="10px">
-                <Inline alignVertical="center" horizontalSpace="6px">
+                <Inline alignVertical="center" horizontalSpace="6px" wrap={false}>
                   <View style={sx.chainBadgeContainer}>
                     <AnimatedChainImage showMainnetBadge assetType="input" size={16} />
                   </View>
diff --git a/src/design-system/color/AccentColorContext.tsx b/src/design-system/color/AccentColorContext.tsx
@@ -1,5 +1,6 @@
 import chroma from 'chroma-js';
 import React, { createContext, ReactNode, useContext, useMemo } from 'react';
+import { useBackgroundColor } from '../components/BackgroundProvider/BackgroundProvider';
 import { BackgroundColorValue } from './palettes';
 
 export const AccentColorContext = createContext<BackgroundColorValue | null>(null);
@@ -21,14 +22,14 @@ export function useAccentColor(): BackgroundColorValue {
  * @description Sets the `"accent"` color for an entire subtree of the app.
  */
 export function AccentColorProvider({ color, children }: AccentColorProviderProps) {
-  const contextValue = useMemo(
-    () =>
-      ({
-        color,
-        mode: chroma.contrast(color, '#fff') > 2.125 ? 'darkTinted' : 'lightTinted',
-      }) as const,
-    [color]
-  );
+  const blue = useBackgroundColor('blue');
+  const contextValue = useMemo(() => {
+    const isValid = chroma.valid(color);
+    return {
+      color: isValid ? color : blue,
+      mode: isValid && chroma.contrast(color, '#fff') > 2.125 ? 'darkTinted' : 'lightTinted',
+    } as const;
+  }, [blue, color]);
 
   return <AccentColorContext.Provider value={contextValue}>{children}</AccentColorContext.Provider>;
 }
diff --git a/src/design-system/components/Border/Border.tsx b/src/design-system/components/Border/Border.tsx
@@ -1,38 +1,66 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Cover, useColorMode, useForegroundColor } from '@/design-system';
 import { ForegroundColor } from '@/design-system/color/palettes';
 import { CustomColor } from '@/design-system/color/useForegroundColor';
 import { IS_IOS } from '@/env';
 
-export interface BorderProps {
+export type BorderProps = {
+  borderBottomLeftRadius?: number;
+  borderBottomRightRadius?: number;
   borderColor?: ForegroundColor | CustomColor;
-  borderRadius: number;
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+  borderRadius?: number;
   borderWidth?: number;
   enableInLightMode?: boolean;
   enableOnAndroid?: boolean;
-}
+} & (
+  | {
+      borderBottomRadius?: number;
+      borderLeftRadius?: never;
+      borderRightRadius?: never;
+      borderTopRadius?: number;
+    }
+  | {
+      borderBottomRadius?: never;
+      borderLeftRadius?: number;
+      borderRightRadius?: number;
+      borderTopRadius?: never;
+    }
+);
 
-export const Border = ({
+export const Border = memo(function Border({
+  borderBottomLeftRadius,
+  borderBottomRadius,
+  borderBottomRightRadius,
   borderColor = 'separatorSecondary',
+  borderLeftRadius,
   borderRadius,
+  borderRightRadius,
+  borderTopLeftRadius,
+  borderTopRadius,
+  borderTopRightRadius,
   borderWidth = 1,
   enableInLightMode,
   enableOnAndroid = true,
-}: BorderProps) => {
+}: BorderProps) {
   const { isDarkMode } = useColorMode();
 
   const color = useForegroundColor(borderColor);
 
   return (isDarkMode || enableInLightMode) && (IS_IOS || enableOnAndroid) ? (
     <Cover
       style={{
+        borderBottomLeftRadius: borderBottomLeftRadius ?? borderBottomRadius ?? borderLeftRadius ?? borderRadius,
+        borderBottomRightRadius: borderBottomRightRadius ?? borderBottomRadius ?? borderRightRadius ?? borderRadius,
         borderColor: color,
         borderCurve: 'continuous',
-        borderRadius,
+        borderTopLeftRadius: borderTopLeftRadius ?? borderTopRadius ?? borderLeftRadius ?? borderRadius,
+        borderTopRightRadius: borderTopRightRadius ?? borderTopRadius ?? borderRightRadius ?? borderRadius,
         borderWidth,
         overflow: 'hidden',
         pointerEvents: 'none',
       }}
     />
   ) : null;
-};
+});
diff --git a/src/design-system/components/Box/Box.tsx b/src/design-system/components/Box/Box.tsx
@@ -1,11 +1,13 @@
 import React, { forwardRef, ReactNode, useMemo } from 'react';
 import { View, ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { useForegroundColor, useForegroundColors } from '../../color/useForegroundColor';
 import { useColorMode } from '../../color/ColorMode';
 import { Shadow, shadows } from '../../layout/shadow';
 import { Height, heights, Width, widths } from '../../layout/size';
 import { NegativeSpace, negativeSpace, positionSpace, PositionSpace, Space, space } from '../../layout/space';
 import { BackgroundProvider, BackgroundProviderProps } from '../BackgroundProvider/BackgroundProvider';
+import { Border, BorderProps } from '../Border/Border';
 import { ApplyShadow } from '../private/ApplyShadow/ApplyShadow';
 import type * as Polymorphic from './polymorphic';
 
@@ -26,6 +28,8 @@ export type BoxProps = {
   borderTopRightRadius?: number;
   borderBottomLeftRadius?: number;
   borderBottomRightRadius?: number;
+  borderColor?: BorderProps['borderColor'];
+  borderWidth?: BorderProps['borderWidth'];
   bottom?: PositionSpace;
   children?: ReactNode;
   flexBasis?: 0;
@@ -45,6 +49,7 @@ export type BoxProps = {
   marginRight?: NegativeSpace;
   marginTop?: NegativeSpace;
   marginVertical?: NegativeSpace;
+  overflow?: 'visible' | 'hidden' | 'scroll';
   padding?: Space;
   paddingBottom?: Space;
   paddingHorizontal?: Space;
@@ -61,7 +66,6 @@ export type BoxProps = {
   elevation?: number;
   shadowOpacity?: number;
   shadowRadius?: number;
-  overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
 } & (
   | {
       borderBottomRadius?: number;
@@ -103,12 +107,14 @@ export const Box = forwardRef(function Box(
     borderBottomLeftRadius,
     borderBottomRadius,
     borderBottomRightRadius,
+    borderColor,
     borderLeftRadius,
     borderRadius,
     borderRightRadius,
     borderTopLeftRadius,
     borderTopRadius,
     borderTopRightRadius,
+    borderWidth,
     bottom: bottomProp,
     children,
     flexBasis,
@@ -165,14 +171,25 @@ export const Box = forwardRef(function Box(
   const right = resolveToken(positionSpace, rightProp);
   const top = resolveToken(positionSpace, topProp);
 
-  const width = resolveToken(widths, widthProp);
-  const height = resolveToken(heights, heightProp);
+  const width = typeof widthProp === 'number' ? widthProp : resolveToken(widths, widthProp);
+  const height = typeof heightProp === 'number' ? heightProp : resolveToken(heights, heightProp);
+
+  const isView = Component === View || Component === Animated.View;
+
+  const shadowStylesExist =
+    !!styleProp &&
+    ('shadowColor' in styleProp ||
+      'shadowOffset' in styleProp ||
+      'shadowOpacity' in styleProp ||
+      'shadowRadius' in styleProp ||
+      'elevation' in styleProp);
 
   const shadows = useShadow(shadow);
 
   const styles = useMemo(() => {
     return {
       alignItems,
+      borderRadius: borderRadius, // Apply this first as certain components don't support individual corner radii
       borderBottomLeftRadius: borderBottomLeftRadius ?? borderBottomRadius ?? borderLeftRadius ?? borderRadius,
       borderBottomRightRadius: borderBottomRightRadius ?? borderBottomRadius ?? borderRightRadius ?? borderRadius,
       borderCurve: 'continuous' as ViewStyle['borderCurve'],
@@ -194,6 +211,7 @@ export const Box = forwardRef(function Box(
       marginRight,
       marginTop,
       marginVertical,
+      ...((isView || borderRadius) && !shadowStylesExist && { overflow: borderRadius ? 'hidden' : overflow }),
       padding,
       paddingBottom,
       paddingHorizontal,
@@ -224,6 +242,7 @@ export const Box = forwardRef(function Box(
     flexShrink,
     flexWrap,
     height,
+    isView,
     justifyContent,
     left,
     margin,
@@ -233,6 +252,7 @@ export const Box = forwardRef(function Box(
     marginRight,
     marginTop,
     marginVertical,
+    overflow,
     padding,
     paddingBottom,
     paddingHorizontal,
@@ -242,6 +262,7 @@ export const Box = forwardRef(function Box(
     paddingVertical,
     position,
     right,
+    shadowStylesExist,
     top,
     width,
   ]);
@@ -254,13 +275,35 @@ export const Box = forwardRef(function Box(
         <ApplyShadow backgroundColor={backgroundColor} shadows={shadows}>
           <Component style={backgroundStyle} {...restProps} ref={ref}>
             {children}
+            {borderColor || borderWidth ? (
+              <Border
+                borderBottomLeftRadius={styles.borderBottomLeftRadius}
+                borderBottomRightRadius={styles.borderBottomRightRadius}
+                borderColor={borderColor}
+                borderTopLeftRadius={styles.borderTopLeftRadius}
+                borderTopRightRadius={styles.borderTopRightRadius}
+                borderWidth={borderWidth}
+                enableInLightMode
+              />
+            ) : null}
           </Component>
         </ApplyShadow>
       )}
     </BackgroundProvider>
   ) : (
     <Component style={style} {...restProps} ref={ref}>
       {children}
+      {borderColor || borderWidth ? (
+        <Border
+          borderBottomLeftRadius={styles.borderBottomLeftRadius}
+          borderBottomRightRadius={styles.borderBottomRightRadius}
+          borderColor={borderColor}
+          borderTopLeftRadius={styles.borderTopLeftRadius}
+          borderTopRightRadius={styles.borderTopRightRadius}
+          borderWidth={borderWidth}
+          enableInLightMode
+        />
+      ) : null}
     </Component>
   );
 }) as PolymorphicBox;
diff --git a/src/design-system/components/Inline/Inline.tsx b/src/design-system/components/Inline/Inline.tsx
@@ -1,8 +1,7 @@
-import React, { Children, ReactElement, ReactNode, useMemo } from 'react';
-import flattenChildren from 'react-flatten-children';
+import React, { Children, ReactElement, ReactNode } from 'react';
 import { AlignHorizontal, alignHorizontalToFlexAlign, AlignVertical, alignVerticalToFlexAlign } from '../../layout/alignment';
-import { negateSpace, Space } from '../../layout/space';
-import { Box } from '../Box/Box';
+import { Space, space as spaceTokens } from '../../layout/space';
+import { Box, resolveToken } from '../Box/Box';
 
 export type InlineProps = {
   children: ReactNode;
@@ -39,34 +38,28 @@ export function Inline({
   const verticalSpace = verticalSpaceProp ?? space;
   const horizontalSpace = horizontalSpaceProp ?? space;
 
-  const flattenedChildren = useMemo(() => flattenChildren(children), [children]);
-
   return (
     <Box
       alignItems={alignVertical ? alignVerticalToFlexAlign[alignVertical] : undefined}
       flexDirection="row"
       flexWrap={wrap ? 'wrap' : undefined}
       justifyContent={alignHorizontal ? alignHorizontalToFlexAlign[alignHorizontal] : undefined}
-      marginRight={wrap && horizontalSpace ? negateSpace(horizontalSpace) : undefined}
-      marginTop={wrap && verticalSpace ? negateSpace(verticalSpace) : undefined}
+      style={{
+        columnGap: horizontalSpace ? resolveToken(spaceTokens, horizontalSpace) : undefined,
+        rowGap: verticalSpace ? resolveToken(spaceTokens, verticalSpace) : undefined,
+      }}
     >
-      {Children.map(flattenedChildren, (child, index) => {
-        if (wrap) {
-          return (
-            <Box paddingRight={horizontalSpace} paddingTop={verticalSpace}>
-              {child}
-            </Box>
-          );
-        }
-
-        const isLastChild = index === flattenedChildren.length - 1;
-        return (
-          <>
-            {horizontalSpace && !isLastChild ? <Box paddingRight={horizontalSpace}>{child}</Box> : child}
-            {separator && !isLastChild ? <Box paddingRight={horizontalSpace}>{separator}</Box> : null}
-          </>
-        );
-      })}
+      {wrap || !separator
+        ? children
+        : Children.map(children, (child, index) => {
+            if (!child) return null;
+            return (
+              <>
+                {index > 0 && separator}
+                {child}
+              </>
+            );
+          })}
     </Box>
   );
 }
diff --git a/src/design-system/components/Stack/Stack.tsx b/src/design-system/components/Stack/Stack.tsx
@@ -1,7 +1,6 @@
 import React, { Children, isValidElement, ReactElement, ReactNode } from 'react';
-import flattenChildren from 'react-flatten-children';
-import { Space } from '../../layout/space';
-import { Box } from '../Box/Box';
+import { Space, space as spaceTokens } from '../../layout/space';
+import { Box, resolveToken } from '../Box/Box';
 import { Width } from '@/design-system/layout/size';
 
 const alignHorizontalToFlexAlign = {
@@ -28,33 +27,28 @@ export type StackProps = {
  * within each other for layouts with differing amounts of space between groups
  * of content.
  */
-export function Stack({ children: childrenProp, alignHorizontal, separator, space, width }: StackProps) {
+export function Stack({ children, alignHorizontal, separator, space, width }: StackProps) {
   if (__DEV__ && separator && !isValidElement(separator)) {
     throw new Error(`Stack: The 'separator' prop must be a React element`);
   }
 
-  const children = flattenChildren(childrenProp).filter(child => isValidElement(child));
-
   return (
-    <Box width={width} alignItems={alignHorizontal ? alignHorizontalToFlexAlign[alignHorizontal] : undefined}>
-      {Children.map(children, (child, index) => {
-        const isLastChild = index === children.length - 1;
-
-        return (
-          <>
-            {space && !isLastChild ? <Box paddingBottom={space}>{child}</Box> : child}
-            {separator && !isLastChild ? (
-              <Box
-                alignItems={alignHorizontal ? alignHorizontalToFlexAlign[alignHorizontal] : undefined}
-                paddingBottom={space}
-                width="full"
-              >
-                {separator}
-              </Box>
-            ) : null}
-          </>
-        );
-      })}
+    <Box
+      alignItems={alignHorizontal ? alignHorizontalToFlexAlign[alignHorizontal] : undefined}
+      gap={resolveToken(spaceTokens, space)}
+      width={width}
+    >
+      {!separator
+        ? children
+        : Children.map(children, (child, index) => {
+            if (!child) return null;
+            return (
+              <>
+                {index > 0 && separator}
+                {child}
+              </>
+            );
+          })}
     </Box>
   );
 }
diff --git a/src/design-system/components/private/ApplyShadow/AndroidShadow.tsx b/src/design-system/components/private/ApplyShadow/AndroidShadow.tsx
diff --git a/src/design-system/components/private/ApplyShadow/ApplyShadow.tsx b/src/design-system/components/private/ApplyShadow/ApplyShadow.tsx
diff --git a/src/design-system/components/private/ApplyShadow/IOSShadow.tsx b/src/design-system/components/private/ApplyShadow/IOSShadow.tsx
