@instructure/ui-view 10.5.1-snapshot-2 → 10.5.1-snapshot-4

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.5.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-2) (2024-11-13)
+## [10.5.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-4) (2024-11-14)
 
-**Note:** Version bump only for package @instructure/ui-view
+
+### Features
+
+* **ui-view:** add borderColor prop to ContextView; make borderColor accept HEX code as a string in View ([a823d51](https://github.com/instructure/instructure-ui/commit/a823d51b16f237629e3342ed4195a41a09eefbac))
 
 
 

package/es/ContextView/index.js

@@ -74,7 +74,8 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       stacking = _this$props3.stacking,
       style = _this$props3.style,
       textAlign = _this$props3.textAlign,
-      styles = _this$props3.styles;
+      styles = _this$props3.styles,
+      borderColor = _this$props3.borderColor;
     return jsx(View, Object.assign({}, omitProps(this.props, ContextView.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.contextView,
       style: style,
@@ -90,7 +91,7 @@ let ContextView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       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,

package/es/ContextView/props.js

@@ -81,7 +81,12 @@ const propTypes = {
    * 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 = ['as', 'elementRef', 'margin', 'padding', 'height', 'width', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'children', 'textAlign', 'shadow', 'stacking', 'background', 'placement', 'debug'];
+const allowedProps = ['as', 'elementRef', 'margin', 'padding', 'height', 'width', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'children', 'textAlign', 'shadow', 'stacking', 'background', 'placement', 'debug', 'borderColor'];
 export { propTypes, allowedProps };

package/es/ContextView/styles.js

@@ -90,9 +90,10 @@ const getArrowCorrections = (placement, theme) => {
   }
   return {};
 };
-const getArrowPlacementVariant = (placement, background, theme) => {
+const getArrowPlacementVariant = (placement, background, theme, props) => {
   const transformedPlacement = mirrorPlacement(placement, ' ');
   const isInversed = background === 'inverse';
+  const borderColor = props.borderColor;
   if (endPlacements.includes(transformedPlacement)) {
     return {
       main: {
@@ -102,7 +103,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
         marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
         borderInlineEndWidth: '0',
         borderInlineEndColor: 'transparent',
-        borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
+        borderInlineStartColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
         borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
@@ -129,7 +130,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
         marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
         borderInlineStartWidth: '0',
         borderInlineStartColor: 'transparent',
-        borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
+        borderInlineEndColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
         borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
@@ -205,7 +206,8 @@ const getArrowPlacementVariant = (placement, background, theme) => {
  */
 const generateStyle = (componentTheme, props) => {
   const placement = props.placement,
-    background = props.background;
+    background = props.background,
+    borderColor = props.borderColor;
   const arrowBaseStyles = {
     content: '""',
     height: '0',
@@ -220,7 +222,7 @@ const generateStyle = (componentTheme, props) => {
     default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
     inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
   };
-  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme);
+  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme, props);
   return {
     contextView: {
       label: 'contextView',
@@ -237,7 +239,7 @@ const generateStyle = (componentTheme, props) => {
       ...arrowBaseStyles,
       display: 'block',
       borderWidth: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} + ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderWidth})`,
-      borderColor: arrowBackGroundVariants[background],
+      borderColor: borderColor || arrowBackGroundVariants[background],
       ...arrowPlacementVariant.main,
       ...getArrowCorrections(placement, componentTheme),
       '&::after': {

package/es/View/props.js

@@ -44,7 +44,7 @@ const propTypes = {
   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', 'secondary', 'primary-inverse', 'brand', 'info', 'alert', 'success', 'danger', 'warning']),
   shadow: ThemeablePropTypes.shadow,
   stacking: ThemeablePropTypes.stacking,

package/es/View/styles.js

@@ -453,7 +453,9 @@ const generateStyle = (componentTheme, props) => {
       } : {}),
       ...(withBorder(props) ? {
         borderStyle: componentTheme.borderStyle,
-        ...borderColorVariants[borderColor]
+        ...(borderColorVariants[borderColor] || {
+          borderColor: borderColor
+        })
       } : {}),
       ...(shouldUseFocusStyles ? focusStyles : {})
     },

package/lib/ContextView/index.js

@@ -80,7 +80,8 @@ let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.
       stacking = _this$props3.stacking,
       style = _this$props3.style,
       textAlign = _this$props3.textAlign,
-      styles = _this$props3.styles;
+      styles = _this$props3.styles,
+      borderColor = _this$props3.borderColor;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _omitProps.omitProps)(this.props, ContextView.allowedProps), {
       css: styles === null || styles === void 0 ? void 0 : styles.contextView,
       style: style,
@@ -96,7 +97,7 @@ let ContextView = exports.ContextView = (_dec = (0, _emotion.withStyle)(_styles.
       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,

package/lib/ContextView/props.js

@@ -88,6 +88,11 @@ const propTypes = exports.propTypes = {
    * Activate an outline around the component to make building your
    * layout easier
    */
-  debug: _propTypes.default.bool
+  debug: _propTypes.default.bool,
+  /**
+   * Sets the color of the ContextView border.
+   * Accepts a color string value (e.g., "#FFFFFF", "red")
+   */
+  borderColor: _propTypes.default.string
 };
-const allowedProps = exports.allowedProps = ['as', 'elementRef', 'margin', 'padding', 'height', 'width', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'children', 'textAlign', 'shadow', 'stacking', 'background', 'placement', 'debug'];
+const allowedProps = exports.allowedProps = ['as', 'elementRef', 'margin', 'padding', 'height', 'width', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'children', 'textAlign', 'shadow', 'stacking', 'background', 'placement', 'debug', 'borderColor'];

package/lib/ContextView/styles.js

@@ -96,9 +96,10 @@ const getArrowCorrections = (placement, theme) => {
   }
   return {};
 };
-const getArrowPlacementVariant = (placement, background, theme) => {
+const getArrowPlacementVariant = (placement, background, theme, props) => {
   const transformedPlacement = (0, _mirrorPlacement.mirrorPlacement)(placement, ' ');
   const isInversed = background === 'inverse';
+  const borderColor = props.borderColor;
   if (endPlacements.includes(transformedPlacement)) {
     return {
       main: {
@@ -108,7 +109,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
         marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
         borderInlineEndWidth: '0',
         borderInlineEndColor: 'transparent',
-        borderInlineStartColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
+        borderInlineStartColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
         borderInlineStartWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
@@ -135,7 +136,7 @@ const getArrowPlacementVariant = (placement, background, theme) => {
         marginTop: `calc(-1 * (${theme === null || theme === void 0 ? void 0 : theme.arrowSize} + ${theme === null || theme === void 0 ? void 0 : theme.arrowBorderWidth}))`,
         borderInlineStartWidth: '0',
         borderInlineStartColor: 'transparent',
-        borderInlineEndColor: isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor,
+        borderInlineEndColor: borderColor || (isInversed ? theme === null || theme === void 0 ? void 0 : theme.arrowBorderColorInverse : theme === null || theme === void 0 ? void 0 : theme.arrowBorderColor),
         borderTopColor: 'transparent',
         borderBottomColor: 'transparent',
         borderInlineEndWidth: theme === null || theme === void 0 ? void 0 : theme.arrowSize
@@ -211,7 +212,8 @@ const getArrowPlacementVariant = (placement, background, theme) => {
  */
 const generateStyle = (componentTheme, props) => {
   const placement = props.placement,
-    background = props.background;
+    background = props.background,
+    borderColor = props.borderColor;
   const arrowBaseStyles = {
     content: '""',
     height: '0',
@@ -226,7 +228,7 @@ const generateStyle = (componentTheme, props) => {
     default: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColor,
     inverse: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderColorInverse
   };
-  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme);
+  const arrowPlacementVariant = getArrowPlacementVariant(placement, background, componentTheme, props);
   return {
     contextView: {
       label: 'contextView',
@@ -243,7 +245,7 @@ const generateStyle = (componentTheme, props) => {
       ...arrowBaseStyles,
       display: 'block',
       borderWidth: `calc(${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowSize} + ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.arrowBorderWidth})`,
-      borderColor: arrowBackGroundVariants[background],
+      borderColor: borderColor || arrowBackGroundVariants[background],
       ...arrowPlacementVariant.main,
       ...getArrowCorrections(placement, componentTheme),
       '&::after': {

package/lib/View/props.js

@@ -51,7 +51,7 @@ const propTypes = exports.propTypes = {
   textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
   borderWidth: _emotion.ThemeablePropTypes.borderWidth,
   borderRadius: _emotion.ThemeablePropTypes.borderRadius,
-  borderColor: _propTypes.default.oneOf(['transparent', 'primary', 'secondary', 'brand', 'info', 'success', 'warning', 'alert', 'danger']),
+  borderColor: _propTypes.default.string,
   background: _propTypes.default.oneOf(['transparent', 'primary', 'secondary', 'primary-inverse', 'brand', 'info', 'alert', 'success', 'danger', 'warning']),
   shadow: _emotion.ThemeablePropTypes.shadow,
   stacking: _emotion.ThemeablePropTypes.stacking,

package/lib/View/styles.js

@@ -459,7 +459,9 @@ const generateStyle = (componentTheme, props) => {
       } : {}),
       ...(withBorder(props) ? {
         borderStyle: componentTheme.borderStyle,
-        ...borderColorVariants[borderColor]
+        ...(borderColorVariants[borderColor] || {
+          borderColor: borderColor
+        })
       } : {}),
       ...(shouldUseFocusStyles ? focusStyles : {})
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-view",
-  "version": "10.5.1-snapshot-2",
+  "version": "10.5.1-snapshot-4",
   "description": "A component for basic styles including spacing, sizing, borders, display, positioning, and focus states.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,22 +24,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/console": "10.5.1-snapshot-2",
-    "@instructure/emotion": "10.5.1-snapshot-2",
-    "@instructure/shared-types": "10.5.1-snapshot-2",
-    "@instructure/ui-color-utils": "10.5.1-snapshot-2",
-    "@instructure/ui-dom-utils": "10.5.1-snapshot-2",
-    "@instructure/ui-i18n": "10.5.1-snapshot-2",
-    "@instructure/ui-position": "10.5.1-snapshot-2",
-    "@instructure/ui-prop-types": "10.5.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.5.1-snapshot-2",
+    "@instructure/console": "10.5.1-snapshot-4",
+    "@instructure/emotion": "10.5.1-snapshot-4",
+    "@instructure/shared-types": "10.5.1-snapshot-4",
+    "@instructure/ui-color-utils": "10.5.1-snapshot-4",
+    "@instructure/ui-dom-utils": "10.5.1-snapshot-4",
+    "@instructure/ui-i18n": "10.5.1-snapshot-4",
+    "@instructure/ui-position": "10.5.1-snapshot-4",
+    "@instructure/ui-prop-types": "10.5.1-snapshot-4",
+    "@instructure/ui-react-utils": "10.5.1-snapshot-4",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.5.1-snapshot-2",
-    "@instructure/ui-babel-preset": "10.5.1-snapshot-2",
-    "@instructure/ui-test-utils": "10.5.1-snapshot-2",
-    "@instructure/ui-themes": "10.5.1-snapshot-2",
+    "@instructure/ui-axe-check": "10.5.1-snapshot-4",
+    "@instructure/ui-babel-preset": "10.5.1-snapshot-4",
+    "@instructure/ui-test-utils": "10.5.1-snapshot-4",
+    "@instructure/ui-themes": "10.5.1-snapshot-4",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.1"

package/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}

package/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 }

package/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': {

package/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 }

package/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 : {})