refactor(WebKit154): rename all related method to isWebKit154

ringcentral · Apr 14, 2022 · 052eca0 · 052eca0
1 parent 1965753
commit 052eca0
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 33 deletions.
diff --git a/packages/juno-core/src/components/Tooltip/__stories__/Tooltip.story.tsx b/packages/juno-core/src/components/Tooltip/__stories__/Tooltip.story.tsx
@@ -25,7 +25,7 @@ import {
   RcTypography,
   styled,
   useTheme,
-  isSafari154,
+  isWebKit154,
 } from '@ringcentral/juno';
 import { Add, Videocam } from '@ringcentral/juno-icon';
 import {
@@ -67,7 +67,7 @@ export const Tooltip: Story<TooltipProps> = ({ children, ...args }) => {
     <>
       {!isTestEnv && (
         <>
-          <Title>current is {isSafari154 ? '' : 'not'} safari 15.4~15.9</Title>
+          <Title>current is {isWebKit154 ? '' : 'not'} webkit 15.4~15.9</Title>
           <Title variant="body1">{navigator.userAgent}</Title>
         </>
       )}

diff --git a/packages/juno-core/src/components/Virtuoso/utils/useHighlightScroll.tsx b/packages/juno-core/src/components/Virtuoso/utils/useHighlightScroll.tsx
@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 
 import { IndexLocationWithAlign, ListItem } from 'react-virtuoso';
 
-import { fixSafariTransitionStyle } from '../../../foundation';
+import { fixWebKitTransitionStyle } from '../../../foundation';
 
 type UseHighlightScrollParams = {
   /** function to call to scroll to target index */
@@ -137,7 +137,7 @@ export function modifyVlScrollerStyle(
   position: 'absolute' | 'unset' = 'absolute',
 ) {
   if (scrollElm) {
-    scrollElm.style.transition = fixSafariTransitionStyle;
+    scrollElm.style.transition = fixWebKitTransitionStyle;
 
     if (position) {
       const viewPortElm = scrollElm.firstChild as HTMLElement;

diff --git a/packages/juno-core/src/foundation/isWebKit154.ts b/packages/juno-core/src/foundation/isWebKit154.ts
@@ -3,48 +3,54 @@ import { createGlobalStyle } from 'styled-components';
 import { RcClasses, RcClassesProps } from './utils/classes';
 import { combineProps } from './utils/combineProps';
 
+// * this whole file should be remove after webkit154 issue be fixed
+
 /**
- * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
- * Remove this workaround once the Safari bug is fixed.
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+ * Remove this workaround once the WebKit bug fix is released.
+ *
+ * follow up:
+ * https://github.com/mui/material-ui/pull/31975/files
+ * https://github.com/mui/material-ui/pull/32202/files
  */
-export const isSafari154 =
+export const isWebKit154 =
   typeof navigator !== 'undefined' &&
-  /(^((?!chrome|android).)*safari)|(iPhone|iPad)/i.test(navigator.userAgent) &&
-  /15\.[4-9]|OS 15_[4-9]/i.test(navigator.userAgent);
+  /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) &&
+  /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
 
-const FixSafari154Classes = RcClasses<RcClassesProps<'paper'>>(
+const FixWebKit154Classes = RcClasses<RcClassesProps<'paper'>>(
   ['paper'],
-  'RcFixSafari154',
+  'RcFixWebKit154',
 );
 
 /**
  * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
  * Remove this workaround once the Safari bug is fixed.
  */
-export const getSafari154Theme = (theme: any, enable?: boolean) => {
-  if (enable ?? isSafari154) {
+export const getWebKit154Theme = (theme: any, enable?: boolean) => {
+  if (enable ?? isWebKit154) {
     return combineProps(
       {
         props: {
           // * set all grow related to only have one transition to make animation not shake after safari 15.4
           MuiMenu: {
-            PopoverClasses: { paper: FixSafari154Classes.paper },
+            PopoverClasses: { paper: FixWebKit154Classes.paper },
           },
           RcVirtualizedMenu: {
-            PopoverClasses: { paper: FixSafari154Classes.paper },
+            PopoverClasses: { paper: FixWebKit154Classes.paper },
           },
           MuiPopover: {
-            PaperProps: { className: FixSafari154Classes.paper },
+            PaperProps: { className: FixWebKit154Classes.paper },
           },
           // mui tooltip prop will cover all existing props
           RcTooltip: {
             classes: {
-              tooltip: FixSafari154Classes.paper,
+              tooltip: FixWebKit154Classes.paper,
             },
           },
           // mui grow not accept global prop
           RcGrow: {
-            className: FixSafari154Classes.paper,
+            className: FixWebKit154Classes.paper,
           },
         },
       },
@@ -55,13 +61,15 @@ export const getSafari154Theme = (theme: any, enable?: boolean) => {
   return theme;
 };
 
-export const fixSafariTransitionStyle =
+export const fixWebKitTransitionStyle =
   'all 159ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
+
 /**
- * A global style that can be used to apply a workaround for the CSS transition bug in Safari 15.4.
+ * A global style that can be used to
+ * apply a workaround for the CSS transition bug after WebKit 15.4.
  */
-export const GlobalFixSafariStyle = createGlobalStyle`
-  .${FixSafari154Classes.paper} {
-    transition: ${fixSafariTransitionStyle} !important;
+export const GlobalFixWebKitStyle = createGlobalStyle`
+  .${FixWebKit154Classes.paper} {
+    transition: ${fixWebKitTransitionStyle} !important;
   }
 `;
diff --git a/packages/juno-core/src/foundation/theme/ThemeProvider.tsx b/packages/juno-core/src/foundation/theme/ThemeProvider.tsx
@@ -15,10 +15,10 @@ import {
 
 import { useResultRef } from '../hooks';
 import {
-  getSafari154Theme,
-  GlobalFixSafariStyle,
-  isSafari154,
-} from '../isSafari154';
+  getWebKit154Theme,
+  GlobalFixWebKitStyle,
+  isWebKit154,
+} from '../isWebKit154';
 import {
   ThemeProvider as StyledThemeProvider,
   useTheme,
@@ -35,7 +35,7 @@ type SubThemeProviderProps = {
    *
    * use for when your environment need that fix but userAgent not have safari
    */
-  fixSafari154?: boolean;
+  fixWebKit154?: boolean;
   children?: ReactNode;
 };
 
@@ -56,23 +56,23 @@ const NestedThemeContext = createContext(false);
 const SubThemeProvider: FunctionComponent<SubThemeProviderProps> = ({
   theme: themeProp,
   children,
-  fixSafari154: safari154Fix,
+  fixWebKit154,
 }) => {
   const parentTheme = useTheme();
 
   const isHaveParentRcTheme = parentTheme.palette?.content?.brand;
 
   // TODO: can be remove after safari fix that bug, maybe after v16
-  const theme = getSafari154Theme(
+  const theme = getWebKit154Theme(
     !themeProp && isHaveParentRcTheme ? parentTheme : createTheme(themeProp),
-    safari154Fix,
+    fixWebKit154,
   );
 
   return (
     <MuiThemeProvider theme={theme}>
       <StyledThemeProvider theme={theme}>
         <>
-          {(safari154Fix ?? isSafari154) && <GlobalFixSafariStyle />}
+          {(fixWebKit154 ?? isWebKit154) && <GlobalFixWebKitStyle />}
           {children}
         </>
       </StyledThemeProvider>

diff --git a/sync-github.json b/sync-github.json
@@ -1,3 +1,3 @@
 {
-  "latestCommitSHA": "29fa58430c49b86569a66f16dbd148117be166b5"
+  "latestCommitSHA": "5dcda33361db9d93617f04a05054c53ff5ce2336"
 }