@instructure/ui-view 10.16.4-snapshot-3 → 10.16.4-snapshot-5

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.4-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.16.3...v10.16.4-snapshot-3) (2025-05-08)
+## [10.16.4-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.16.3...v10.16.4-snapshot-5) (2025-05-08)
 
 **Note:** Version bump only for package @instructure/ui-view
 

package/es/View/__new-tests__/View.test.js

@@ -1,4 +1,4 @@
-var _View, _View2, _h, _h2, _h3, _h4, _h5, _View3, _View4, _View5, _View6, _View7, _View8, _View9, _View10;
+var _View, _View2, _h, _h2, _h3, _h4, _h5, _View3, _View4, _View5, _View6, _View7, _View8;
 /*
  * The MIT License (MIT)
  *
@@ -210,32 +210,8 @@ describe('<View />', () => {
     const newStyles = getComputedStyle(view);
     expect(newStyles.maxWidth).toEqual('200px');
   });
-  describe('withFocusOutline', () => {
-    it('should warn when withFocusOutline is true without position=relative', () => {
-      render(_View8 || (_View8 = _jsx(View, {
-        withFocusOutline: true,
-        children: _jsx("h1", {
-          children: "View Content"
-        })
-      })));
-      const expectedErrorMessage = 'Warning: [View] the focus outline will only show if the `position` prop is `relative`.';
-      expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-    it('should warn when withFocusOutline is `true`, display is set to `inline`, and focusPosition is set to `offset`', () => {
-      render(_View9 || (_View9 = _jsx(View, {
-        withFocusOutline: true,
-        display: "inline",
-        focusPosition: "offset",
-        children: _jsx("h1", {
-          children: "View Content"
-        })
-      })));
-      const expectedErrorMessage = 'Warning: [View] when display is set to `inline` the focus outline will only show if `focusPosition` is set to `inset`.';
-      expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-  });
   it('should meet a11y standards', async () => {
-    const _render11 = render(_View10 || (_View10 = _jsx(View, {
+    const _render11 = render(_View8 || (_View8 = _jsx(View, {
         children: "View Content"
       }))),
       container = _render11.container;

package/es/View/props.js

@@ -61,11 +61,12 @@ const propTypes = {
   withVisualDebug: PropTypes.bool,
   dir: PropTypes.oneOf(Object.values(textDirectionContextConsumer.DIRECTION)),
   overscrollBehavior: PropTypes.oneOf(['auto', 'contain', 'none']),
-  focusRingBorderRadius: PropTypes.string
+  focusRingBorderRadius: PropTypes.string,
+  focusWithin: PropTypes.bool
 };
 
 // This variable will be attached as static property on the `View` component
 // so we don't rely on the `PropTypes` validators for our internal logic.
 // This means on prod builds the consuming applications can safely delete propTypes.
-const allowedProps = ['as', 'background', 'borderColor', 'borderRadius', 'borderWidth', 'children', 'cursor', 'dir', 'display', 'elementRef', 'focusColor', 'focusPosition', 'height', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflowX', 'overflowY', 'overscrollBehavior', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug', 'focusRingBorderRadius'];
+const allowedProps = ['as', 'background', 'borderColor', 'borderRadius', 'borderWidth', 'children', 'cursor', 'dir', 'display', 'elementRef', 'focusColor', 'focusPosition', 'height', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflowX', 'overflowY', 'overscrollBehavior', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug', 'focusRingBorderRadius', 'focusWithin'];
 export { propTypes, allowedProps };

package/es/View/styles.js

@@ -25,7 +25,7 @@
 import { DIRECTION } from '@instructure/ui-i18n';
 import { getShorthandPropValue, mirrorShorthandEdges, mirrorShorthandCorners } from '@instructure/emotion';
 import { pickProps } from '@instructure/ui-react-utils';
-import { logError as error } from '@instructure/console';
+import { alpha } from '@instructure/ui-color-utils';
 const getBorderStyle = ({
   borderRadius,
   borderWidth,
@@ -115,20 +115,6 @@ const getFocusRingRadius = (borderRadius, props) => {
   }
   return `${baseRadiusStyle}None`;
 };
-const getFocusOutline = props => {
-  const position = props.position,
-    display = props.display,
-    focusPosition = props.focusPosition,
-    shouldDisplayFocusOutline = props.withFocusOutline;
-  if (typeof shouldDisplayFocusOutline === 'undefined') {
-    return shouldDisplayFocusOutline;
-  }
-  if (shouldDisplayFocusOutline) {
-    error(display === 'inline' || position === 'relative', '[View] the focus outline will only show if the `position` prop is `relative`.');
-    error(display !== 'inline' || focusPosition === 'inset', '[View] when display is set to `inline` the focus outline will only show if `focusPosition` is set to `inset`.');
-  }
-  return shouldDisplayFocusOutline;
-};
 const withBorder = props => {
   const borderWidth = props.borderWidth;
   return borderWidth && borderWidth !== '0' && borderWidth !== 'none';
@@ -136,24 +122,18 @@ const withBorder = props => {
 const getFocusStyles = (props, componentTheme) => {
   const focusColor = props.focusColor,
     focusPosition = props.focusPosition,
-    position = props.position,
     shouldAnimateFocus = props.shouldAnimateFocus,
     borderRadius = props.borderRadius,
-    focusRingBorderRadius = props.focusRingBorderRadius;
-  const focusOutline = getFocusOutline(props);
-  const shouldUseBrowserFocus = typeof focusOutline === 'undefined';
+    focusRingBorderRadius = props.focusRingBorderRadius,
+    withFocusOutline = props.withFocusOutline,
+    focusWithin = props.focusWithin;
+  const focusPos = focusPosition == 'offset' || focusPosition == 'inset' ? focusPosition : 'offset';
   const focusPositionVariants = {
     offset: {
-      top: `calc(${componentTheme.focusOutlineOffset} * -1)`,
-      left: `calc(${componentTheme.focusOutlineOffset} * -1)`,
-      right: `calc(${componentTheme.focusOutlineOffset} * -1)`,
-      bottom: `calc(${componentTheme.focusOutlineOffset}* -1)`
+      outlineOffset: `calc(${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth})`
     },
     inset: {
-      top: `calc(${componentTheme.focusOutlineInset} * -1)`,
-      left: `calc(${componentTheme.focusOutlineInset} * -1)`,
-      right: `calc(${componentTheme.focusOutlineInset} * -1)`,
-      bottom: `calc(${componentTheme.focusOutlineInset} * -1)`
+      outlineOffset: `calc(${componentTheme.focusOutlineInset} - ${componentTheme.focusOutlineWidth})`
     }
   };
   const focusColorVariants = {
@@ -162,88 +142,68 @@ const getFocusStyles = (props, componentTheme) => {
     success: componentTheme.focusColorSuccess,
     danger: componentTheme.focusColorDanger
   };
-  if (position === 'relative') {
-    const focusRingRadius = getFocusRingRadius(borderRadius, props);
-    const focusRingVariants = {
-      'focusRing--radiusInherit': 'inherit',
-      'focusRing--radiusNone': 0
-    };
-    const borderRadiusByOffset = {
-      offset: {
-        'focusRing--radiusSmall': {
-          borderRadius: `calc(${componentTheme.borderRadiusSmall} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusMedium': {
-          borderRadius: `calc(${componentTheme.borderRadiusMedium} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusLarge': {
-          borderRadius: `calc(${componentTheme.borderRadiusLarge} + (${componentTheme.focusOutlineOffset} -  ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusCustom': {
-          borderRadius: `calc(${focusRingBorderRadius} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
-        }
+  const focusRingRadius = getFocusRingRadius(borderRadius, props);
+  const focusRingVariants = {
+    'focusRing--radiusInherit': 'inherit',
+    'focusRing--radiusNone': 0
+  };
+  const borderRadiusByOffset = {
+    offset: {
+      'focusRing--radiusSmall': {
+        borderRadius: `calc(${componentTheme.borderRadiusSmall} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
+      },
+      'focusRing--radiusMedium': {
+        borderRadius: `calc(${componentTheme.borderRadiusMedium} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
       },
-      inset: {
-        'focusRing--radiusSmall': {
-          borderRadius: `calc(${componentTheme.borderRadiusSmall} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusMedium': {
-          borderRadius: `calc(${componentTheme.borderRadiusMedium} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusLarge': {
-          borderRadius: `calc(${componentTheme.borderRadiusLarge} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusCustom': {
-          borderRadius: `calc(${focusRingBorderRadius} - (${componentTheme.focusOutlineOffset} + ${componentTheme.focusOutlineWidth}))`
-        }
+      'focusRing--radiusLarge': {
+        borderRadius: `calc(${componentTheme.borderRadiusLarge} + (${componentTheme.focusOutlineOffset} -  ${componentTheme.focusOutlineWidth}))`
+      },
+      'focusRing--radiusCustom': {
+        borderRadius: `calc(${focusRingBorderRadius} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
       }
-    };
-    return {
-      '&::before': {
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        borderStyle: componentTheme.focusOutlineStyle,
-        borderWidth: componentTheme.focusOutlineWidth,
-        borderColor: focusColorVariants[focusColor],
-        opacity: 0,
-        borderRadius: focusRingVariants[focusRingRadius],
-        ...borderRadiusByOffset[focusPosition][focusRingRadius],
-        ...focusPositionVariants[focusPosition],
-        ...(shouldAnimateFocus ? {
-          transition: 'all 0.2s',
-          transform: 'scale(0.95)'
-        } : {}),
-        ...(focusOutline ? {
-          opacity: 1,
-          transform: 'scale(1)'
-        } : {})
+    },
+    inset: {
+      'focusRing--radiusSmall': {
+        borderRadius: `calc(${componentTheme.borderRadiusSmall} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
+      },
+      'focusRing--radiusMedium': {
+        borderRadius: `calc(${componentTheme.borderRadiusMedium} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
+      },
+      'focusRing--radiusLarge': {
+        borderRadius: `calc(${componentTheme.borderRadiusLarge} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
       },
-      '&:focus': {
-        outline: 'none',
-        '&::before': {
-          ...(shouldUseBrowserFocus ? {
-            opacity: 1,
-            transform: 'scale(1)'
-          } : {})
-        }
+      'focusRing--radiusCustom': {
+        borderRadius: `calc(${focusRingBorderRadius} - (${componentTheme.focusOutlineOffset} + ${componentTheme.focusOutlineWidth}))`
       }
-    };
-  }
+    }
+  };
   return {
-    '&::before': {
-      borderStyle: 'none'
-    },
-    outlineStyle: 'none',
-    outlineColor: focusColorVariants[focusColor],
-    ...(focusOutline ? {
-      outlineWidth: componentTheme.focusOutlineWidth,
-      outlineStyle: componentTheme.focusOutlineStyle
+    outlineOffset: '-0.8rem',
+    // value when not in focus, its invisible
+    outlineColor: alpha(focusColorVariants[focusColor], 0),
+    outlineStyle: componentTheme.focusOutlineStyle,
+    outlineWidth: componentTheme.focusOutlineWidth,
+    borderRadius: focusRingVariants[focusRingRadius],
+    // inherit or none
+    ...borderRadiusByOffset[focusPos][focusRingRadius],
+    // border radius value
+    ...(shouldAnimateFocus ? {
+      transition: 'outline-color 0.2s, outline-offset 0.25s'
+    } : {}),
+    ...(withFocusOutline ? {
+      ...focusPositionVariants[focusPos],
+      outlineColor: focusColorVariants[focusColor]
     } : {}),
     '&:focus': {
-      ...(shouldUseBrowserFocus ? {
-        outlineWidth: componentTheme.focusOutlineWidth,
-        outlineStyle: componentTheme.focusOutlineStyle
+      ...(typeof withFocusOutline === 'undefined' ? {
+        ...focusPositionVariants[focusPos],
+        outlineColor: focusColorVariants[focusColor]
+      } : {})
+    },
+    '&:focus-within': {
+      ...(focusWithin ? {
+        ...focusPositionVariants[focusPos],
+        outlineColor: focusColorVariants[focusColor]
       } : {})
     }
   };
@@ -256,7 +216,6 @@ const getFocusStyles = (props, componentTheme) => {
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} extraArgs
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
@@ -266,7 +225,6 @@ const generateStyle = (componentTheme, props) => {
     padding = props.padding,
     position = props.position,
     display = props.display,
-    focusPosition = props.focusPosition,
     textAlign = props.textAlign,
     borderColor = props.borderColor,
     background = props.background,
@@ -306,7 +264,6 @@ const generateStyle = (componentTheme, props) => {
     insetInlineEnd,
     insetInlineStart
   });
-  const shouldUseFocusStyles = position === 'relative' || display === 'inline' && focusPosition === 'inset';
   const displayVariants = {
     inline: {
       label: 'view--inline',
@@ -459,7 +416,8 @@ const generateStyle = (componentTheme, props) => {
       position: position !== 'static' ? position : '',
       overscrollBehavior: overscrollBehavior ? overscrollBehavior : 'auto',
       ...(withVisualDebug ? {
-        outline: `0.0625rem dashed ${componentTheme.debugOutlineColor}`
+        //outline: `0.0625rem dashed ${componentTheme.debugOutlineColor}`
+        boxShadow: `0 0 0 1px ${componentTheme.debugOutlineColor}`
       } : {}),
       ...(withBorder(props) ? {
         borderStyle: componentTheme.borderStyle,
@@ -467,7 +425,7 @@ const generateStyle = (componentTheme, props) => {
           borderColor: borderColor
         })
       } : {}),
-      ...(shouldUseFocusStyles ? focusStyles : {})
+      ...focusStyles
     },
     inlineStyles: {
       //every '&' symbol will add another class to the rule, so it will be stronger

package/lib/View/__new-tests__/View.test.js

@@ -6,7 +6,7 @@ require("@testing-library/jest-dom");
 var _index = require("../../index");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _View, _View2, _h, _h2, _h3, _h4, _h5, _View3, _View4, _View5, _View6, _View7, _View8, _View9, _View10;
+var _View, _View2, _h, _h2, _h3, _h4, _h5, _View3, _View4, _View5, _View6, _View7, _View8;
 /*
  * The MIT License (MIT)
  *
@@ -211,32 +211,8 @@ describe('<View />', () => {
     const newStyles = getComputedStyle(view);
     expect(newStyles.maxWidth).toEqual('200px');
   });
-  describe('withFocusOutline', () => {
-    it('should warn when withFocusOutline is true without position=relative', () => {
-      (0, _react.render)(_View8 || (_View8 = (0, _jsxRuntime.jsx)(_index.View, {
-        withFocusOutline: true,
-        children: (0, _jsxRuntime.jsx)("h1", {
-          children: "View Content"
-        })
-      })));
-      const expectedErrorMessage = 'Warning: [View] the focus outline will only show if the `position` prop is `relative`.';
-      expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-    it('should warn when withFocusOutline is `true`, display is set to `inline`, and focusPosition is set to `offset`', () => {
-      (0, _react.render)(_View9 || (_View9 = (0, _jsxRuntime.jsx)(_index.View, {
-        withFocusOutline: true,
-        display: "inline",
-        focusPosition: "offset",
-        children: (0, _jsxRuntime.jsx)("h1", {
-          children: "View Content"
-        })
-      })));
-      const expectedErrorMessage = 'Warning: [View] when display is set to `inline` the focus outline will only show if `focusPosition` is set to `inset`.';
-      expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
-    });
-  });
   it('should meet a11y standards', async () => {
-    const _render11 = (0, _react.render)(_View10 || (_View10 = (0, _jsxRuntime.jsx)(_index.View, {
+    const _render11 = (0, _react.render)(_View8 || (_View8 = (0, _jsxRuntime.jsx)(_index.View, {
         children: "View Content"
       }))),
       container = _render11.container;

package/lib/View/props.js

@@ -68,10 +68,11 @@ const propTypes = exports.propTypes = {
   withVisualDebug: _propTypes.default.bool,
   dir: _propTypes.default.oneOf(Object.values(_textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION)),
   overscrollBehavior: _propTypes.default.oneOf(['auto', 'contain', 'none']),
-  focusRingBorderRadius: _propTypes.default.string
+  focusRingBorderRadius: _propTypes.default.string,
+  focusWithin: _propTypes.default.bool
 };
 
 // This variable will be attached as static property on the `View` component
 // so we don't rely on the `PropTypes` validators for our internal logic.
 // This means on prod builds the consuming applications can safely delete propTypes.
-const allowedProps = exports.allowedProps = ['as', 'background', 'borderColor', 'borderRadius', 'borderWidth', 'children', 'cursor', 'dir', 'display', 'elementRef', 'focusColor', 'focusPosition', 'height', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflowX', 'overflowY', 'overscrollBehavior', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug', 'focusRingBorderRadius'];
+const allowedProps = exports.allowedProps = ['as', 'background', 'borderColor', 'borderRadius', 'borderWidth', 'children', 'cursor', 'dir', 'display', 'elementRef', 'focusColor', 'focusPosition', 'height', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'overflowX', 'overflowY', 'overscrollBehavior', 'padding', 'position', 'shadow', 'shouldAnimateFocus', 'stacking', 'textAlign', 'width', 'withFocusOutline', 'withVisualDebug', 'focusRingBorderRadius', 'focusWithin'];

package/lib/View/styles.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _uiI18n = require("@instructure/ui-i18n");
 var _emotion = require("@instructure/emotion");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-var _console = require("@instructure/console");
+var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
 /*
  * The MIT License (MIT)
  *
@@ -121,20 +121,6 @@ const getFocusRingRadius = (borderRadius, props) => {
   }
   return `${baseRadiusStyle}None`;
 };
-const getFocusOutline = props => {
-  const position = props.position,
-    display = props.display,
-    focusPosition = props.focusPosition,
-    shouldDisplayFocusOutline = props.withFocusOutline;
-  if (typeof shouldDisplayFocusOutline === 'undefined') {
-    return shouldDisplayFocusOutline;
-  }
-  if (shouldDisplayFocusOutline) {
-    (0, _console.logError)(display === 'inline' || position === 'relative', '[View] the focus outline will only show if the `position` prop is `relative`.');
-    (0, _console.logError)(display !== 'inline' || focusPosition === 'inset', '[View] when display is set to `inline` the focus outline will only show if `focusPosition` is set to `inset`.');
-  }
-  return shouldDisplayFocusOutline;
-};
 const withBorder = props => {
   const borderWidth = props.borderWidth;
   return borderWidth && borderWidth !== '0' && borderWidth !== 'none';
@@ -142,24 +128,18 @@ const withBorder = props => {
 const getFocusStyles = (props, componentTheme) => {
   const focusColor = props.focusColor,
     focusPosition = props.focusPosition,
-    position = props.position,
     shouldAnimateFocus = props.shouldAnimateFocus,
     borderRadius = props.borderRadius,
-    focusRingBorderRadius = props.focusRingBorderRadius;
-  const focusOutline = getFocusOutline(props);
-  const shouldUseBrowserFocus = typeof focusOutline === 'undefined';
+    focusRingBorderRadius = props.focusRingBorderRadius,
+    withFocusOutline = props.withFocusOutline,
+    focusWithin = props.focusWithin;
+  const focusPos = focusPosition == 'offset' || focusPosition == 'inset' ? focusPosition : 'offset';
   const focusPositionVariants = {
     offset: {
-      top: `calc(${componentTheme.focusOutlineOffset} * -1)`,
-      left: `calc(${componentTheme.focusOutlineOffset} * -1)`,
-      right: `calc(${componentTheme.focusOutlineOffset} * -1)`,
-      bottom: `calc(${componentTheme.focusOutlineOffset}* -1)`
+      outlineOffset: `calc(${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth})`
     },
     inset: {
-      top: `calc(${componentTheme.focusOutlineInset} * -1)`,
-      left: `calc(${componentTheme.focusOutlineInset} * -1)`,
-      right: `calc(${componentTheme.focusOutlineInset} * -1)`,
-      bottom: `calc(${componentTheme.focusOutlineInset} * -1)`
+      outlineOffset: `calc(${componentTheme.focusOutlineInset} - ${componentTheme.focusOutlineWidth})`
     }
   };
   const focusColorVariants = {
@@ -168,88 +148,68 @@ const getFocusStyles = (props, componentTheme) => {
     success: componentTheme.focusColorSuccess,
     danger: componentTheme.focusColorDanger
   };
-  if (position === 'relative') {
-    const focusRingRadius = getFocusRingRadius(borderRadius, props);
-    const focusRingVariants = {
-      'focusRing--radiusInherit': 'inherit',
-      'focusRing--radiusNone': 0
-    };
-    const borderRadiusByOffset = {
-      offset: {
-        'focusRing--radiusSmall': {
-          borderRadius: `calc(${componentTheme.borderRadiusSmall} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusMedium': {
-          borderRadius: `calc(${componentTheme.borderRadiusMedium} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusLarge': {
-          borderRadius: `calc(${componentTheme.borderRadiusLarge} + (${componentTheme.focusOutlineOffset} -  ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusCustom': {
-          borderRadius: `calc(${focusRingBorderRadius} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
-        }
+  const focusRingRadius = getFocusRingRadius(borderRadius, props);
+  const focusRingVariants = {
+    'focusRing--radiusInherit': 'inherit',
+    'focusRing--radiusNone': 0
+  };
+  const borderRadiusByOffset = {
+    offset: {
+      'focusRing--radiusSmall': {
+        borderRadius: `calc(${componentTheme.borderRadiusSmall} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
+      },
+      'focusRing--radiusMedium': {
+        borderRadius: `calc(${componentTheme.borderRadiusMedium} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
       },
-      inset: {
-        'focusRing--radiusSmall': {
-          borderRadius: `calc(${componentTheme.borderRadiusSmall} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusMedium': {
-          borderRadius: `calc(${componentTheme.borderRadiusMedium} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusLarge': {
-          borderRadius: `calc(${componentTheme.borderRadiusLarge} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
-        },
-        'focusRing--radiusCustom': {
-          borderRadius: `calc(${focusRingBorderRadius} - (${componentTheme.focusOutlineOffset} + ${componentTheme.focusOutlineWidth}))`
-        }
+      'focusRing--radiusLarge': {
+        borderRadius: `calc(${componentTheme.borderRadiusLarge} + (${componentTheme.focusOutlineOffset} -  ${componentTheme.focusOutlineWidth}))`
+      },
+      'focusRing--radiusCustom': {
+        borderRadius: `calc(${focusRingBorderRadius} + (${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth}))`
       }
-    };
-    return {
-      '&::before': {
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        borderStyle: componentTheme.focusOutlineStyle,
-        borderWidth: componentTheme.focusOutlineWidth,
-        borderColor: focusColorVariants[focusColor],
-        opacity: 0,
-        borderRadius: focusRingVariants[focusRingRadius],
-        ...borderRadiusByOffset[focusPosition][focusRingRadius],
-        ...focusPositionVariants[focusPosition],
-        ...(shouldAnimateFocus ? {
-          transition: 'all 0.2s',
-          transform: 'scale(0.95)'
-        } : {}),
-        ...(focusOutline ? {
-          opacity: 1,
-          transform: 'scale(1)'
-        } : {})
+    },
+    inset: {
+      'focusRing--radiusSmall': {
+        borderRadius: `calc(${componentTheme.borderRadiusSmall} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
+      },
+      'focusRing--radiusMedium': {
+        borderRadius: `calc(${componentTheme.borderRadiusMedium} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
+      },
+      'focusRing--radiusLarge': {
+        borderRadius: `calc(${componentTheme.borderRadiusLarge} - (${componentTheme.focusOutlineInset} + ${componentTheme.focusOutlineWidth}))`
       },
-      '&:focus': {
-        outline: 'none',
-        '&::before': {
-          ...(shouldUseBrowserFocus ? {
-            opacity: 1,
-            transform: 'scale(1)'
-          } : {})
-        }
+      'focusRing--radiusCustom': {
+        borderRadius: `calc(${focusRingBorderRadius} - (${componentTheme.focusOutlineOffset} + ${componentTheme.focusOutlineWidth}))`
       }
-    };
-  }
+    }
+  };
   return {
-    '&::before': {
-      borderStyle: 'none'
-    },
-    outlineStyle: 'none',
-    outlineColor: focusColorVariants[focusColor],
-    ...(focusOutline ? {
-      outlineWidth: componentTheme.focusOutlineWidth,
-      outlineStyle: componentTheme.focusOutlineStyle
+    outlineOffset: '-0.8rem',
+    // value when not in focus, its invisible
+    outlineColor: (0, _alpha.alpha)(focusColorVariants[focusColor], 0),
+    outlineStyle: componentTheme.focusOutlineStyle,
+    outlineWidth: componentTheme.focusOutlineWidth,
+    borderRadius: focusRingVariants[focusRingRadius],
+    // inherit or none
+    ...borderRadiusByOffset[focusPos][focusRingRadius],
+    // border radius value
+    ...(shouldAnimateFocus ? {
+      transition: 'outline-color 0.2s, outline-offset 0.25s'
+    } : {}),
+    ...(withFocusOutline ? {
+      ...focusPositionVariants[focusPos],
+      outlineColor: focusColorVariants[focusColor]
     } : {}),
     '&:focus': {
-      ...(shouldUseBrowserFocus ? {
-        outlineWidth: componentTheme.focusOutlineWidth,
-        outlineStyle: componentTheme.focusOutlineStyle
+      ...(typeof withFocusOutline === 'undefined' ? {
+        ...focusPositionVariants[focusPos],
+        outlineColor: focusColorVariants[focusColor]
+      } : {})
+    },
+    '&:focus-within': {
+      ...(focusWithin ? {
+        ...focusPositionVariants[focusPos],
+        outlineColor: focusColorVariants[focusColor]
       } : {})
     }
   };
@@ -262,7 +222,6 @@ const getFocusStyles = (props, componentTheme) => {
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} extraArgs
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
@@ -272,7 +231,6 @@ const generateStyle = (componentTheme, props) => {
     padding = props.padding,
     position = props.position,
     display = props.display,
-    focusPosition = props.focusPosition,
     textAlign = props.textAlign,
     borderColor = props.borderColor,
     background = props.background,
@@ -312,7 +270,6 @@ const generateStyle = (componentTheme, props) => {
     insetInlineEnd,
     insetInlineStart
   });
-  const shouldUseFocusStyles = position === 'relative' || display === 'inline' && focusPosition === 'inset';
   const displayVariants = {
     inline: {
       label: 'view--inline',
@@ -465,7 +422,8 @@ const generateStyle = (componentTheme, props) => {
       position: position !== 'static' ? position : '',
       overscrollBehavior: overscrollBehavior ? overscrollBehavior : 'auto',
       ...(withVisualDebug ? {
-        outline: `0.0625rem dashed ${componentTheme.debugOutlineColor}`
+        //outline: `0.0625rem dashed ${componentTheme.debugOutlineColor}`
+        boxShadow: `0 0 0 1px ${componentTheme.debugOutlineColor}`
       } : {}),
       ...(withBorder(props) ? {
         borderStyle: componentTheme.borderStyle,
@@ -473,7 +431,7 @@ const generateStyle = (componentTheme, props) => {
           borderColor: borderColor
         })
       } : {}),
-      ...(shouldUseFocusStyles ? focusStyles : {})
+      ...focusStyles
     },
     inlineStyles: {
       //every '&' symbol will add another class to the rule, so it will be stronger