@graphcommerce/next-ui 3.21.5 → 3.21.9

package/AnimatedRow/index.tsx

@@ -10,7 +10,7 @@ export default function AnimatedRow(props: AnimatedRowProps) {
   return (
     <m.div
       {...props}
-      layout='size'
+      layout
       initial={{ opacity: 0, height: 0 }}
       animate={{ opacity: 1, height: 'auto' }}
       exit={{ opacity: 0, height: 0 }}

package/AppShell/FixedFab.tsx

@@ -9,7 +9,6 @@ const useStyles = makeStyles(
       bottom: 20,
       right: 20,
       zIndex: 100,
-      boxShadow: theme.shadows[4],
       borderRadius: 99,
       maxWidth: 56,
       [theme.breakpoints.up('md')]: {
@@ -17,7 +16,6 @@ const useStyles = makeStyles(
         top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
         left: `calc((100vw - (100vw - 100%)) - ${theme.page.horizontal} - 56px)`,
         bottom: 'unset',
-        boxShadow: 'unset',
       },
     },
   }),

package/AppShell/Logo.tsx

@@ -8,7 +8,7 @@ import { UseStyles } from '../Styles'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     logo: {},
-    link: {
+    parent: {
       height: '100%',
       width: 'max-content',
       display: 'flex',
@@ -33,12 +33,12 @@ export default function Logo(props: LogoProps) {
   const classes = useStyles(props)
 
   return router.asPath === '/' ? (
-    <div className={classes.logo}>
+    <div className={classes.parent}>
       <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
     </div>
   ) : (
     <PageLink href={href ?? '/'} passHref>
-      <a className={classes.link} aria-label='Logo'>
+      <a className={classes.parent} aria-label='Logo'>
         <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
       </a>
     </PageLink>

package/AppShell/MenuFab.tsx

@@ -37,15 +37,27 @@ const useStyles = makeStyles(
       },
     },
     menuFab: {
+      boxShadow: 'none',
+      '&:hover, &:focus': {
+        boxShadow: 'none',
+        background: theme.palette.text.primary,
+      },
       background: theme.palette.text.primary,
       width: responsiveVal(42, 56),
       height: responsiveVal(42, 56),
       pointerEvents: 'all',
-      '&:hover, &:focus': {
-        background: theme.palette.text.primary,
-      },
-      '& svg': {
-        color: theme.palette.background.paper,
+      color: theme.palette.background.paper,
+    },
+    shadow: {
+      pointerEvents: 'none',
+      borderRadius: '99em',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      boxShadow: theme.shadows[6],
+      top: 0,
+      [theme.breakpoints.down('sm')]: {
+        opacity: '1 !important',
       },
     },
     menu: {
@@ -80,7 +92,7 @@ export default function MenuFab(props: MenuFabProps) {
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
-  const { filter, opacity, scale } = useFabAnimation()
+  const { opacity, scale, shadowOpacity } = useFabAnimation()
 
   useEffect(() => {
     const clear = () => setOpenEl(null)
@@ -89,9 +101,9 @@ export default function MenuFab(props: MenuFabProps) {
   }, [router])
 
   return (
-    <m.div className={classes.menuWrapper} style={{ opacity, scale, filter }}>
+    <m.div className={classes.menuWrapper} style={{ scale, opacity }}>
       <Fab
-        color='primary'
+        color='inherit'
         aria-label='Open Menu'
         size='medium'
         onClick={(event) => setOpenEl(event.currentTarget)}
@@ -104,6 +116,7 @@ export default function MenuFab(props: MenuFabProps) {
           <SvgImageSimple src={iconMenu} inverted style={{ display: openEl ? 'none' : 'block' }} />
         )}
       </Fab>
+      <m.div className={classes.shadow} style={{ opacity: shadowOpacity }} />
 
       <Menu
         anchorEl={openEl}

package/AppShell/useFabAnimation.ts

@@ -1,20 +1,11 @@
-import { useMediaQuery, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useTransform } from 'framer-motion'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export function useFabAnimation() {
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const scrollY = useScrollY()
-  const scrollTo = isMobile ? 0 : 130
 
-  const scale = useTransform(scrollY, [50, scrollTo], [0.4, 1])
-  const opacity = useTransform(scrollY, [50, scrollTo], [0, 1])
-  const opacity1 = useTransform(scrollY, [0, scrollTo], [0, 0.08])
-  const opacity2 = useTransform(scrollY, [0, scrollTo], [0, 0.1])
-  const filter = useMotionTemplate`
-    drop-shadow(0 1px 4px rgba(0,0,0,${opacity1}))
-    drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
-
-  return { filter, opacity, scale }
+  const scale = useTransform(scrollY, [50, 130], [0.4, 1])
+  const opacity = useTransform(scrollY, [50, 130], [0, 1])
+  const shadowOpacity = useTransform(scrollY, [131, 140], [0, 1])
+  return { opacity, scale, shadowOpacity }
 }

package/AppShell/useFixedFabAnimation.ts

@@ -1,16 +1,15 @@
 import { alpha, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useTransform } from 'framer-motion'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export function useFixedFabAnimation() {
   const theme = useTheme()
   const scrollY = useScrollY()
   const opacity = useTransform(scrollY, [50, 60], [0, 1])
-  const opacity1 = useTransform(
+  const backgroundColor = useTransform(
     scrollY,
     [0, 10],
     [alpha(theme.palette.background.paper, 0), alpha(theme.palette.background.paper, 1)],
   )
-  const backgroundColor = useMotionTemplate`${opacity1}`
   return { backgroundColor, opacity }
 }

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.21.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.8...@graphcommerce/next-ui@3.21.9) (2021-12-21)
+
+
+### Bug Fixes
+
+* layout overlay sometimes have a horizontal scrollbar ([a1cfe72](https://github.com/ho-nl/m2-pwa/commit/a1cfe72d207dcdf07948080b605b64e7f73939bf))
+* make sure the bottomsheet has enough space on android ([02d3e63](https://github.com/ho-nl/m2-pwa/commit/02d3e639388446423149461ae52d0ed12a962f5e))
+
+
+
+
+
+## [3.21.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.7...@graphcommerce/next-ui@3.21.8) (2021-12-21)
+
+
+### Bug Fixes
+
+* logo invert darkmode and consistent logo spacing ([2a80603](https://github.com/ho-nl/m2-pwa/commit/2a80603fd3255544f78d9da28aad17fb3fca0c9c))
+* menuFab, cartFab shadows, darkTheme color and opacity bug ([6c7afa7](https://github.com/ho-nl/m2-pwa/commit/6c7afa7d3b584b455476aa26d95041c4cf6c1d0c))
+
+
+
+
+
 ## [3.21.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.4...@graphcommerce/next-ui@3.21.5) (2021-12-20)
 
 

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -19,12 +19,6 @@ const useStyles = makeStyles(
       '@supports (-webkit-touch-callout: none)': {
         height: '-webkit-fill-available',
       },
-      [theme.breakpoints.down('sm')]: {
-        width: '100vw',
-      },
-      [theme.breakpoints.up('md')]: {
-        width: '100vw',
-      },
     },
     rootVariantSmLeft: {
       [theme.breakpoints.down('sm')]: {
@@ -118,7 +112,6 @@ const useStyles = makeStyles(
       pointerEvents: 'none',
       gridArea: 'overlay',
       scrollSnapAlign: 'start',
-      width: 'min-content',
       minHeight: '100vh',
       '@supports (-webkit-touch-callout: none)': {
         minHeight: '-webkit-fill-available',
@@ -144,17 +137,22 @@ const useStyles = makeStyles(
       boxShadow: theme.shadows[24],
       minWidth: 'min(800px, 90vw)',
       scrollSnapAlign: 'end',
+
+      // The top bar on Google Chrome is about 56 pixels high. If we do not provide this padding we'll run into the issue that the user can't scroll to the bottom.
+      // We can't change this value with JS as that causes much jank
+      [`@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) and (max-width:${theme.breakpoints.values.sm}px)`]:
+        {
+          paddingBottom: 56,
+        },
     },
     overlayPaneVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
-        width: '100vw',
         borderTopLeftRadius: theme.shape.borderRadius * 3,
         borderTopRightRadius: theme.shape.borderRadius * 3,
       },
     },
     overlayPaneVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
-        width: '100vw',
         borderTopLeftRadius: theme.shape.borderRadius * 3,
         borderTopRightRadius: theme.shape.borderRadius * 3,
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.21.5",
+  "version": "3.21.9",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.7",
-    "@graphcommerce/framer-scroller": "^1.1.15",
+    "@graphcommerce/framer-next-pages": "^2.108.9",
+    "@graphcommerce/framer-scroller": "^1.1.19",
     "@graphcommerce/framer-utils": "^2.103.20",
-    "@graphcommerce/graphql": "^2.105.11",
-    "@graphcommerce/image": "^2.105.10",
+    "@graphcommerce/graphql": "^2.105.12",
+    "@graphcommerce/image": "^2.105.11",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "ecbde6cbcb36e0e2429b6d777972c12c47822385"
+  "gitHead": "fbca834579f81b45ee062e85146535eb6d7ab079"
 }