fix(react-positioning,react-tabster): update styles to not use CSS sh…

…orthands (#20842)
microsoft · Nov 30, 2021 · 967d6b7 · 967d6b7
1 parent 8cd4834
commit 967d6b7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 49 deletions.
diff --git a/change/@fluentui-react-positioning-a73e5056-5b35-45d3-b98a-637c6b67b2ec.json b/change/@fluentui-react-positioning-a73e5056-5b35-45d3-b98a-637c6b67b2ec.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabster-e69fb0b0-ee22-4d15-8450-ed01fc8cd402.json b/change/@fluentui-react-tabster-e69fb0b0-ee22-4d15-8450-ed01fc8cd402.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-positioning/src/createArrowStyles.ts b/packages/react-positioning/src/createArrowStyles.ts
@@ -1,3 +1,4 @@
+import { shorthands } from '@fluentui/react-make-styles';
 import type { MakeStylesStyleRule } from '@fluentui/react-make-styles';
 import type { Theme } from '@fluentui/react-theme';
 
@@ -26,58 +27,54 @@ import type { Theme } from '@fluentui/react-theme';
  * @param size - dimensions of the square arrow element in pixels.
  */
 export function createArrowStyles(size?: number): MakeStylesStyleRule<Theme> {
-  return theme => {
-    const arrowHCBorderStyle = `1px solid transparent`;
-    const arrowHCBorder = {
-      borderRight: arrowHCBorderStyle,
-      borderBottom: arrowHCBorderStyle,
-    };
+  return theme => ({
+    position: 'absolute',
+    backgroundColor: 'inherit',
+    visibility: 'hidden',
+    zIndex: -1,
 
-    return {
-      position: 'absolute',
-      background: 'inherit',
-      visibility: 'hidden',
-      zIndex: -1,
+    ...(size && {
+      aspectRatio: '1',
+      width: `${size}px`,
+    }),
 
-      ...(size && {
-        aspectRatio: '1',
-        width: `${size}px`,
-      }),
+    ':before': {
+      content: '""',
+      ...shorthands.borderRadius('4px'),
+      position: 'absolute',
+      width: 'inherit',
+      height: 'inherit',
+      backgroundColor: 'inherit',
+      visibility: 'visible',
+      borderBottomRightRadius: theme.borderRadiusSmall,
+      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',
+    },
 
+    ':global([data-popper-placement])': {
       ':before': {
-        content: '""',
-        borderRadius: '4px',
-        position: 'absolute',
-        width: 'inherit',
-        height: 'inherit',
-        background: 'inherit',
-        visibility: 'visible',
-        borderBottomRightRadius: theme.borderRadiusSmall,
-        transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',
-      },
-
-      ':global([data-popper-placement])': {
-        ':before': arrowHCBorder,
+        // Special border for High Contrast mode
+        ...shorthands.borderRight('1px', 'solid', 'transparent'),
+        ...shorthands.borderBottom('1px', 'solid', 'transparent'),
       },
+    },
 
-      // Popper sets data-popper-placement on the root element, which is used to align the arrow
-      ':global([data-popper-placement^="top"])': {
-        bottom: 0,
-        '--angle': '0',
-      },
+    // Popper sets data-popper-placement on the root element, which is used to align the arrow
+    ':global([data-popper-placement^="top"])': {
+      bottom: 0,
+      '--angle': '0',
+    },
 
-      ':global([data-popper-placement^="right"])': {
-        left: 0,
-        '--angle': '90deg',
-      },
-      ':global([data-popper-placement^="bottom"])': {
-        top: 0,
-        '--angle': '180deg',
-      },
-      ':global([data-popper-placement^="left"])': {
-        right: 0,
-        '--angle': '270deg',
-      },
-    };
-  };
+    ':global([data-popper-placement^="right"])': {
+      left: 0,
+      '--angle': '90deg',
+    },
+    ':global([data-popper-placement^="bottom"])': {
+      top: 0,
+      '--angle': '180deg',
+    },
+    ':global([data-popper-placement^="left"])': {
+      right: 0,
+      '--angle': '270deg',
+    },
+  });
 }
diff --git a/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts b/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts
@@ -74,7 +74,7 @@ export const createFocusOutlineStyle = (
   } & CreateFocusIndicatorStyleRuleOptions = { style: {}, ...defaultOptions },
 ): MakeStylesStyle => ({
   ':focus-visible': {
-    outline: 'none',
+    outlineStyle: 'none',
   },
   [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]: getFocusOutlineStyles({
     outlineColor: theme.colorStrokeFocus2,
@@ -96,7 +96,7 @@ export const createCustomFocusIndicatorStyle = (
   options: CreateFocusIndicatorStyleRuleOptions = defaultOptions,
 ): MakeStylesStyleRule<Theme> => theme => ({
   ':focus-visible': {
-    outline: 'none',
+    outlineStyle: 'none',
   },
   [`${KEYBOARD_NAV_SELECTOR} :${options.selector || defaultOptions.selector}`]:
     typeof rule === 'function' ? rule(theme) : rule,