feat(ui-view): add borderColor prop to ContextView; make borderColor accept HEX code as a string in View

Closes: INSTUI-4346

Author: ToMESSKa

packages/ui-view/src/ContextView/index.tsx

@@ -97,7 +97,8 @@ class ContextView extends Component<ContextViewProps> {
       stacking,
       style,
       textAlign,
-      styles
+      styles,
+      borderColor
     } = this.props
 
     return (
@@ -118,7 +119,10 @@ class ContextView extends Component<ContextViewProps> {
           display="block"
           borderRadius="medium"
           borderWidth="small"
-          borderColor={background === 'default' ? 'primary' : 'transparent'}
+          borderColor={
+            borderColor ||
+            (background === 'default' ? 'primary' : 'transparent')
+          }
           background={background === 'default' ? 'primary' : 'primary-inverse'}
           withVisualDebug={debug}
           height={height}

packages/ui-view/src/ContextView/props.ts

@@ -61,6 +61,7 @@ type ContextViewOwnProps = {
   shadow?: Shadow
   stacking?: Stacking
   placement?: PlacementPropValues
+  borderColor?: string
 }
 
 type PropKeys = keyof ContextViewOwnProps
@@ -141,7 +142,13 @@ const propTypes: PropValidators<PropKeys> = {
    * Activate an outline around the component to make building your
    * layout easier
    */
-  debug: PropTypes.bool
+  debug: PropTypes.bool,
+
+  /**
+   * Sets the color of the ContextView border.
+   * Accepts a color string value (e.g., "#FFFFFF", "red")
+   */
+  borderColor: PropTypes.string
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -161,7 +168,8 @@ const allowedProps: AllowedPropKeys = [
   'stacking',
   'background',
   'placement',
-  'debug'
+  'debug',
+  'borderColor'
 ]
 
 export type { ContextViewProps, ContextViewStyle }

packages/ui-view/src/ContextView/styles.ts

@@ -126,10 +126,12 @@ const getArrowCorrections = (
 const getArrowPlacementVariant = (
   placement: PlacementPropValues,
   background: ContextViewProps['background'],
-  theme: ContextViewTheme
+  theme: ContextViewTheme,
+  props: ContextViewProps
 ) => {
   const transformedPlacement = mirrorPlacement(placement, ' ')
   const isInversed = background === 'inverse'
+  const { borderColor } = props
 
   if (endPlacements.includes(transformedPlacement)) {
     return {
@@ -140,9 +142,11 @@ const getArrowPlacementVariant = (
         marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
         borderInlineEndWidth: '0',
         borderInlineEndColor: 'transparent',
-        borderInlineStartColor: isInversed
-          ? theme?.arrowBorderColorInverse
-          : theme?.arrowBorderColor,
+        borderInlineStartColor:
+          borderColor ||
+          (isInversed
+            ? theme?.arrowBorderColorInverse
+            : theme?.arrowBorderColor),
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
         borderInlineStartWidth: theme?.arrowSize
@@ -173,9 +177,11 @@ const getArrowPlacementVariant = (
         marginTop: `calc(-1 * (${theme?.arrowSize} + ${theme?.arrowBorderWidth}))`,
         borderInlineStartWidth: '0',
         borderInlineStartColor: 'transparent',
-        borderInlineEndColor: isInversed
-          ? theme?.arrowBorderColorInverse
-          : theme?.arrowBorderColor,
+        borderInlineEndColor:
+          borderColor ||
+          (isInversed
+            ? theme?.arrowBorderColorInverse
+            : theme?.arrowBorderColor),
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
         borderInlineEndWidth: theme?.arrowSize
@@ -261,7 +267,7 @@ const generateStyle = (
   componentTheme: ContextViewTheme,
   props: ContextViewProps
 ): ContextViewStyle => {
-  const { placement, background } = props
+  const { placement, background, borderColor } = props
 
   const arrowBaseStyles = {
     content: '""',
@@ -282,7 +288,8 @@ const generateStyle = (
   const arrowPlacementVariant = getArrowPlacementVariant(
     placement!,
     background,
-    componentTheme
+    componentTheme,
+    props
   )
 
   return {
@@ -301,7 +308,7 @@ const generateStyle = (
       ...arrowBaseStyles,
       display: 'block',
       borderWidth: `calc(${componentTheme?.arrowSize} + ${componentTheme?.arrowBorderWidth})`,
-      borderColor: arrowBackGroundVariants[background!],
+      borderColor: borderColor || arrowBackGroundVariants[background!],
       ...arrowPlacementVariant.main,
       ...getArrowCorrections(placement!, componentTheme),
       '&::after': {

packages/ui-view/src/View/props.ts

@@ -47,6 +47,18 @@ import type {
   StyleObject
 } from '@instructure/emotion'
 
+type BorderColor =
+  | string
+  | 'transparent'
+  | 'primary'
+  | 'secondary'
+  | 'brand'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'alert'
+  | 'danger'
+
 type ViewOwnProps = {
   /**
    * The element to render as the component root, `span` by default
@@ -84,18 +96,10 @@ type ViewOwnProps = {
    */
   textAlign?: 'start' | 'center' | 'end'
   /**
-   * Sets the color of the View border
+   * Sets the color of the View border.
+   * Accepts a color string value (e.g., "#FFFFFF", "red") or one of the predefined theme color options.
    */
-  borderColor?:
-    | 'transparent'
-    | 'primary'
-    | 'secondary'
-    | 'brand'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'alert'
-    | 'danger'
+  borderColor?: BorderColor
   /**
    * Designates the background style of the `<View />`
    */
@@ -234,17 +238,7 @@ const propTypes: PropValidators<PropKeys> = {
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
   borderWidth: ThemeablePropTypes.borderWidth,
   borderRadius: ThemeablePropTypes.borderRadius,
-  borderColor: PropTypes.oneOf([
-    'transparent',
-    'primary',
-    'secondary',
-    'brand',
-    'info',
-    'success',
-    'warning',
-    'alert',
-    'danger'
-  ]),
+  borderColor: PropTypes.string,
   background: PropTypes.oneOf([
     'transparent',
     'primary',
@@ -321,4 +315,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export { propTypes, allowedProps }
-export type { ViewProps, ViewOwnProps, ViewStyle }
+export type { ViewProps, ViewOwnProps, ViewStyle, BorderColor }

packages/ui-view/src/View/styles.ts

@@ -36,7 +36,7 @@ import type {
   PartialRecord,
   ViewTheme
 } from '@instructure/shared-types'
-import type { ViewProps, ViewStyle } from './props'
+import type { ViewProps, ViewStyle, BorderColor } from './props'
 
 const getBorderStyle = ({
   borderRadius,
@@ -468,7 +468,7 @@ const generateStyle = (
     end: { textAlign: 'end' }
   }
 
-  const borderColorVariants = {
+  const borderColorVariants: Record<BorderColor, { borderColor: string }> = {
     transparent: {
       borderColor: componentTheme.borderColorTransparent
     },
@@ -596,7 +596,9 @@ const generateStyle = (
       ...(withBorder(props)
         ? {
             borderStyle: componentTheme.borderStyle,
-            ...borderColorVariants[borderColor!]
+            ...(borderColorVariants[borderColor!] || {
+              borderColor: borderColor
+            })
           }
         : {}),
       ...(shouldUseFocusStyles ? focusStyles : {})