fix(ui-view,ui-file-drop,ui-buttons): make focus ring radius fit the enclosed element's radius

INSTUI-4375

Author: ToMESSKa

packages/ui-buttons/src/BaseButton/index.tsx

@@ -280,6 +280,9 @@ class BaseButton extends Component<BaseButtonProps> {
         tabIndex={onClick && as ? tabIndex || 0 : tabIndex}
         disabled={isDisabled || isReadOnly}
         css={isEnabled ? styles?.baseButton : null}
+        focusRingBorderRadius={String(
+          (styles?.content as { borderRadius?: string | number })?.borderRadius
+        )}
       >
         <span css={styles?.content}>{this.renderChildren()}</span>
       </View>

packages/ui-file-drop/src/FileDrop/index.tsx

@@ -335,6 +335,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       margin,
       onDropAccepted,
       onDropRejected,
+      styles,
       ...props
     } = this.props
     const id = this.props.id || this.defaultId!
@@ -368,6 +369,10 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
             borderRadius="large"
             focusColor={focusColor}
             height={height}
+            focusRingBorderRadius={String(
+              (styles?.fileDropLayout as { borderRadius?: string | number })
+                ?.borderRadius
+            )}
           >
             <span css={this.props.styles?.fileDropLabelContent}>
               <span css={this.props.styles?.fileDropLayout}>

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

@@ -199,6 +199,14 @@ type ViewOwnProps = {
    * Valid values are `auto`, `contain`, `none`.
    */
   overscrollBehavior?: 'auto' | 'contain' | 'none'
+  /**
+   * Sets the radius of the focus border ring.
+   *
+   * For offset type, the given value is increased by the difference between the focus ring' offset and the focus ring's width.
+   *
+   * For inset type, the given value is decreased by the sum of the focus ring' offset and the focus ring's width.
+   */
+  focusRingBorderRadius?: string
 }
 
 type PropKeys = keyof ViewOwnProps
@@ -271,7 +279,8 @@ const propTypes: PropValidators<PropKeys> = {
   shouldAnimateFocus: PropTypes.bool,
   withVisualDebug: PropTypes.bool,
   dir: PropTypes.oneOf(Object.values(textDirectionContextConsumer.DIRECTION)),
-  overscrollBehavior: PropTypes.oneOf(['auto', 'contain', 'none'])
+  overscrollBehavior: PropTypes.oneOf(['auto', 'contain', 'none']),
+  focusRingBorderRadius: PropTypes.string
 }
 
 // This variable will be attached as static property on the `View` component
@@ -311,7 +320,8 @@ const allowedProps: AllowedPropKeys = [
   'textAlign',
   'width',
   'withFocusOutline',
-  'withVisualDebug'
+  'withVisualDebug',
+  'focusRingBorderRadius'
 ]
 
 export { propTypes, allowedProps }

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

@@ -185,12 +185,17 @@ type FocusRingRadius =
   | 'focusRing--radiusSmall'
   | 'focusRing--radiusMedium'
   | 'focusRing--radiusLarge'
+  | 'focusRing--radiusCustom'
 
-const getFocusRingRadius = (borderRadius: ViewProps['borderRadius']) => {
+const getFocusRingRadius = (
+  borderRadius: ViewProps['borderRadius'],
+  props: ViewProps
+) => {
   const baseRadiusStyle = 'focusRing--radius'
-
   const initialValue = (borderRadius || '').trim().split(' ')[0]
-
+  if (props.focusRingBorderRadius) {
+    return `${baseRadiusStyle}Custom`
+  }
   if (verifyUniformValues(initialValue, borderRadius)) {
     const capitalize = (str: string) =>
       `${str.charAt(0).toUpperCase()}${str.slice(1)}`
@@ -242,7 +247,8 @@ const getFocusStyles = (props: ViewProps, componentTheme: ViewTheme) => {
     focusPosition,
     position,
     shouldAnimateFocus,
-    borderRadius
+    borderRadius,
+    focusRingBorderRadius
   } = props
   const focusOutline = getFocusOutline(props)
   const shouldUseBrowserFocus = typeof focusOutline === 'undefined'
@@ -269,7 +275,7 @@ const getFocusStyles = (props: ViewProps, componentTheme: ViewTheme) => {
   }
 
   if (position === 'relative') {
-    const focusRingRadius = getFocusRingRadius(borderRadius)
+    const focusRingRadius = getFocusRingRadius(borderRadius, props)
     const focusRingVariants: PartialRecord<FocusRingRadius, string | 0> = {
       'focusRing--radiusInherit': 'inherit',
       'focusRing--radiusNone': 0
@@ -289,6 +295,9 @@ const getFocusStyles = (props: ViewProps, componentTheme: ViewTheme) => {
         },
         'focusRing--radiusLarge': {
           borderRadius: `calc(${componentTheme.borderRadiusLarge} + (${componentTheme.focusOutlineOffset} -  ${componentTheme.focusOutlineWidth}))`
+        },
+        'focusRing--radiusCustom': {
+          borderRadius: `calc(${focusRingBorderRadius} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
         }
       },
       inset: {
@@ -300,6 +309,9 @@ const getFocusStyles = (props: ViewProps, componentTheme: ViewTheme) => {
         },
         'focusRing--radiusLarge': {
           borderRadius: `calc(${componentTheme.borderRadiusLarge} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
+        },
+        'focusRing--radiusCustom': {
+          borderRadius: `calc(${focusRingBorderRadius} - (${componentTheme.focusOutlineOffset} + ${componentTheme.focusOutlineWidth}))`
         }
       }
     }