From 052eca0ce9a75eb2d6cf5491b06cc5c5be80813f Mon Sep 17 00:00:00 2001 From: Alan Zou Date: Thu, 14 Apr 2022 09:37:45 +0800 Subject: [PATCH] refactor(WebKit154): rename all related method to isWebKit154 --- .../Tooltip/__stories__/Tooltip.story.tsx | 4 +- .../Virtuoso/utils/useHighlightScroll.tsx | 4 +- .../juno-core/src/foundation/isWebKit154.ts | 46 +++++++++++-------- .../src/foundation/theme/ThemeProvider.tsx | 18 ++++---- sync-github.json | 2 +- 5 files changed, 41 insertions(+), 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 index b973b3e0..786cf46a 100644 --- 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 = ({ children, ...args }) => { <> {!isTestEnv && ( <> - current is {isSafari154 ? '' : 'not'} safari 15.4~15.9 + current is {isWebKit154 ? '' : 'not'} webkit 15.4~15.9 {navigator.userAgent} )} diff --git a/packages/juno-core/src/components/Virtuoso/utils/useHighlightScroll.tsx b/packages/juno-core/src/components/Virtuoso/utils/useHighlightScroll.tsx index ce3789eb..475e7c74 100644 --- 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 index 84c47e0c..496a11af 100644 --- 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>( +const FixWebKit154Classes = RcClasses>( ['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 index 6722aca1..6f57c9b6 100644 --- 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 = ({ 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 ( <> - {(safari154Fix ?? isSafari154) && } + {(fixWebKit154 ?? isWebKit154) && } {children} diff --git a/sync-github.json b/sync-github.json index ce480684..6712edd1 100644 --- a/sync-github.json +++ b/sync-github.json @@ -1,3 +1,3 @@ { - "latestCommitSHA": "29fa58430c49b86569a66f16dbd148117be166b5" + "latestCommitSHA": "5dcda33361db9d93617f04a05054c53ff5ce2336" } \ No newline at end of file