wip

Author: balzss

packages/emotion/src/styleUtils/calcFocusOutlineStyles.ts

@@ -53,12 +53,14 @@ const calcFocusOutlineStyles = (
     focusPosition?: 'offset' | 'inset'
     shouldAnimateFocus?: boolean
     focusWithin?: boolean
+    withFocusOutline?: boolean
   }
 ) => {
   const focusColor = params?.focusColor ?? 'info'
   const focusPosition = params?.focusPosition ?? 'offset'
   const shouldAnimateFocus = params?.shouldAnimateFocus ?? true
   const focusWithin = params?.focusWithin ?? false
+  const withFocusOutline = params?.withFocusOutline ?? false
 
   const focusColorVariants = {
     info: theme.infoColor,
@@ -80,6 +82,7 @@ const calcFocusOutlineStyles = (
     outlineOffset: '-0.8rem',
     outlineStyle: 'solid',
     outlineColor: alpha(outlineStyle.outlineColor, 0),
+    ...(withFocusOutline && outlineStyle),
     '&:focus': {
       ...outlineStyle,
       '&:hover, &:active': {

packages/emotion/src/styleUtils/calcMarginFromShorthand.ts

@@ -65,9 +65,8 @@ export function calcMarginFromShorthand(
   value: Spacing | undefined,
   spacingMap: DeepStringRecord
 ) {
-  if (value === undefined) {
-    return '0'
-  }
+  if (!value) return
+
   const tokens = value.trim().split(' ')
 
   // Map each token to its resolved CSS value

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

@@ -26,14 +26,14 @@ import { DIRECTION } from '@instructure/ui-i18n'
 import {
   calcMarginFromShorthand,
   mirrorShorthandEdges,
-  mirrorShorthandCorners
+  mirrorShorthandCorners,
+  calcFocusOutlineStyles
 } from '@instructure/emotion'
 import { pickProps } from '@instructure/ui-react-utils'
 
 import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { ViewProps, ViewStyle, BorderColor } from './props'
-import { alpha } from '@instructure/ui-color-utils'
 import { elevationTokenToBoxShadow } from '@instructure/ui-themes'
 
 const processBorderRadiusValue = (
@@ -219,66 +219,6 @@ const withBorder = (props: ViewProps) => {
   return borderWidth && borderWidth !== '0' && borderWidth !== 'none'
 }
 
-const getFocusStyles = (
-  props: ViewProps,
-  componentTheme: NewComponentTypes['View']
-) => {
-  const {
-    focusColor,
-    focusPosition,
-    shouldAnimateFocus,
-    withFocusOutline,
-    focusWithin
-  } = props
-
-  const focusPos =
-    focusPosition == 'offset' || focusPosition == 'inset'
-      ? focusPosition
-      : 'offset'
-  const focusPositionVariants = {
-    offset: {
-      outlineOffset: `calc(${componentTheme.focusOutlineOffset} - ${componentTheme.focusOutlineWidth})`
-    },
-    inset: {
-      outlineOffset: `calc(${componentTheme.focusOutlineInset} - ${componentTheme.focusOutlineWidth})`
-    }
-  }
-  const focusColorVariants = {
-    info: componentTheme.focusColorInfo,
-    inverse: componentTheme.focusColorInverse,
-    success: componentTheme.focusColorSuccess,
-    danger: componentTheme.focusColorDanger
-  }
-  const visibleFocusStyle = {
-    ...focusPositionVariants[focusPos],
-    outlineColor: focusColorVariants[focusColor!]
-  }
-  const outlineStyle = {
-    outlineOffset: '-0.8rem', // value when not in focus, its invisible
-    outlineColor: alpha(focusColorVariants[focusColor!], 0),
-    outlineStyle: componentTheme.focusOutlineStyle,
-    outlineWidth: componentTheme.focusOutlineWidth,
-    ...(withFocusOutline && visibleFocusStyle)
-  }
-  return {
-    ...(shouldAnimateFocus && {
-      transition: 'outline-color 0.2s, outline-offset 0.25s'
-    }),
-    ...outlineStyle,
-    '&:hover, &:active': {
-      // apply the same style so it's not overridden by some global style
-      ...outlineStyle
-    },
-    ...(typeof withFocusOutline === 'undefined' && {
-      // user focuses the element
-      '&:focus': visibleFocusStyle
-    }),
-    ...(focusWithin && {
-      '&:focus-within': visibleFocusStyle
-    })
-  }
-}
-
 /**
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
@@ -473,7 +413,14 @@ const generateStyle = (
     none: {}
   }
 
-  const focusStyles = getFocusStyles(props, componentTheme)
+  const { focusColor, focusPosition, shouldAnimateFocus, withFocusOutline } =
+    props
+  const focusOutline = calcFocusOutlineStyles(sharedTokens.focusOutline, {
+    focusColor,
+    focusPosition,
+    shouldAnimateFocus,
+    withFocusOutline
+  })
   return {
     view: {
       label: 'view',
@@ -509,16 +456,16 @@ const generateStyle = (
       //every '&' symbol will add another class to the rule, so it will be stronger
       //making an accidental override less likely
       '&&&&&&&&&&': {
-        ...spacingStyle,
         ...offsetStyle,
-        ...focusStyles,
+        ...focusOutline,
         width,
         height,
         minWidth,
         minHeight,
         maxWidth,
         maxHeight,
-        ...getStyleProps(props)
+        ...getStyleProps(props),
+        ...spacingStyle
       }
     }
   }