fix: view border styling

packages/components/src/spectrum/View.tsx

@@ -1,13 +1,23 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { forwardRef, useMemo } from 'react';
+import { CSSProperties, forwardRef, useMemo } from 'react';
 import {
   View as SpectrumView,
   type ViewProps as SpectrumViewProps,
 } from '@adobe/react-spectrum';
 import type { DOMRefValue } from '@react-types/shared';
 import { type ColorValue, colorValueStyle } from '../theme/colorUtils';
 
-export type ViewProps = Omit<SpectrumViewProps<6>, 'backgroundColor'> & {
+export type ViewProps = Omit<
+  SpectrumViewProps<6>,
+  | 'backgroundColor'
+  | 'borderColor'
+  | 'borderStartColor'
+  | 'borderEndColor'
+  | 'borderTopColor'
+  | 'borderBottomColor'
+  | 'borderXColor'
+  | 'borderYColor'
+> & {
   backgroundColor?: ColorValue;
   borderColor?: ColorValue;
   borderStartColor?: ColorValue;
@@ -21,13 +31,12 @@ export type ViewProps = Omit<SpectrumViewProps<6>, 'backgroundColor'> & {
 /**
  * A View component that re-exports the Spectrum View component.
  * However, it overrides ColorValues to accept CSS color strings and
- * our custom variable names from our color paletee and semantic colors.
+ * our custom variable names from our color palette and semantic colors.
  *
  * @param props The props for the View component
  * @returns The View component
  *
  */
-
 export const View = forwardRef<DOMRefValue<HTMLElement>, ViewProps>(
   (props, forwardedRef): JSX.Element => {
     const {
@@ -43,34 +52,48 @@ export const View = forwardRef<DOMRefValue<HTMLElement>, ViewProps>(
       ...rest
     } = props;
 
-    // Using shorthand to define border styling. Removing a style property during rerender can lead to styling bugs
-    // ex. changing from borderXColor = blue to borderColor = blue will cause the left and right borders to disappear
-    const defaultBorderColor = colorValueStyle(borderColor) ?? 'transparent';
-    const defaultBorderXColor =
-      colorValueStyle(borderXColor) ?? defaultBorderColor;
-    const defaultBorderYColor =
-      colorValueStyle(borderYColor) ?? defaultBorderColor;
-    const topColor = colorValueStyle(borderTopColor) ?? defaultBorderYColor;
-    const bottomColor =
-      colorValueStyle(borderBottomColor) ?? defaultBorderYColor;
-    const leftColor = colorValueStyle(borderStartColor) ?? defaultBorderXColor;
-    const rightColor = colorValueStyle(borderEndColor) ?? defaultBorderXColor;
+    const style = useMemo(() => {
+      const borderStyle: CSSProperties = {};
+      if (borderColor !== undefined) {
+        borderStyle.borderColor = colorValueStyle(borderColor);
+      }
+      if (borderXColor !== undefined) {
+        borderStyle.borderLeftColor = colorValueStyle(borderXColor);
+        borderStyle.borderRightColor = colorValueStyle(borderXColor);
+      }
+      if (borderYColor !== undefined) {
+        borderStyle.borderTopColor = colorValueStyle(borderYColor);
+        borderStyle.borderBottomColor = colorValueStyle(borderYColor);
+      }
+      if (borderStartColor !== undefined) {
+        borderStyle.borderLeftColor = colorValueStyle(borderStartColor);
+      }
+      if (borderEndColor !== undefined) {
+        borderStyle.borderRightColor = colorValueStyle(borderEndColor);
+      }
+      if (borderTopColor !== undefined) {
+        borderStyle.borderTopColor = colorValueStyle(borderTopColor);
+      }
+      if (borderBottomColor !== undefined) {
+        borderStyle.borderBottomColor = colorValueStyle(borderBottomColor);
+      }
 
-    const style = useMemo(
-      () => ({
+      return {
         ...UNSAFE_style,
         backgroundColor: colorValueStyle(backgroundColor),
-        borderColor: `${topColor} ${rightColor} ${bottomColor} ${leftColor}`,
-      }),
-      [
-        backgroundColor,
-        UNSAFE_style,
-        topColor,
-        rightColor,
-        bottomColor,
-        leftColor,
-      ]
-    );
+        ...borderStyle,
+      };
+    }, [
+      backgroundColor,
+      UNSAFE_style,
+      borderColor,
+      borderStartColor,
+      borderEndColor,
+      borderTopColor,
+      borderBottomColor,
+      borderXColor,
+      borderYColor,
+    ]);
 
     return <SpectrumView {...rest} ref={forwardedRef} UNSAFE_style={style} />;
   }