@graphcommerce/next-ui 4.2.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 4.2.1
+
+### Patch Changes
+
+- [#1294](https://github.com/ho-nl/m2-pwa/pull/1294)
+  [`19f33e0aa`](https://github.com/ho-nl/m2-pwa/commit/19f33e0aaf4e3121edd444926d08b6459d3ef400)
+  Thanks [@paales](https://github.com/paales)! - Make sure the minHeight of overlays always have the
+  correct height, even if the content changes size
+
+* [#1294](https://github.com/ho-nl/m2-pwa/pull/1294)
+  [`aea787542`](https://github.com/ho-nl/m2-pwa/commit/aea787542484a0480a48031fcc4a9a5566c6bfc7)
+  Thanks [@paales](https://github.com/paales)! - Make sure the labels of LayoutHeaderBack/Close
+  aren’t rendered on mobile
+
+* Updated dependencies
+  [[`4e28c8afd`](https://github.com/ho-nl/m2-pwa/commit/4e28c8afd9cead3577dd0eff97b5c44ba4c1c862),
+  [`afb993244`](https://github.com/ho-nl/m2-pwa/commit/afb993244aabc8135ce54a79743cbf63bc5677d3)]:
+  - @graphcommerce/framer-scroller@2.0.5
+  - @graphcommerce/framer-next-pages@3.1.1
+
 ## 4.2.0
 
 ### Minor Changes

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,5 +1,6 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
 import { t } from '@lingui/macro'
+import { Box } from '@mui/material'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
@@ -45,7 +46,9 @@ export default function LayoutHeaderBack(props: BackProps) {
         aria-label={label}
         {...props}
       >
-        {label}
+        <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
+          {label}
+        </Box>
       </LinkOrButton>
     )
   }
@@ -60,7 +63,9 @@ export default function LayoutHeaderBack(props: BackProps) {
           color='inherit'
           {...props}
         >
-          {up.title}
+          <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
+            {up.title}
+          </Box>
         </LinkOrButton>
       </PageLink>
     )

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,5 +1,6 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { Trans } from '@lingui/macro'
+import { Box } from '@mui/material'
 import { LinkOrButton } from '../../Button/LinkOrButton'
 import { IconSvg } from '../../IconSvg'
 import { iconClose } from '../../icons'
@@ -19,10 +20,12 @@ export default function LayoutHeaderClose() {
       color='inherit'
       onClick={onClick}
       aria-label='Close'
-      startIcon={<IconSvg src={iconClose} />}
+      startIcon={<IconSvg src={iconClose} size='medium' />}
       // className={classes.close}
     >
-      <Trans>Close</Trans>
+      <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
+        <Trans>Close</Trans>
+      </Box>
     </LinkOrButton>
   )
 }

package/LayoutDefault/components/LayoutDefault.tsx

@@ -86,7 +86,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         >
           {header}
         </Box>
-        {(menuFab || cartFab) && (
+        {menuFab || cartFab ? (
           <Box
             className={classes.fabs}
             sx={(theme) => ({
@@ -115,6 +115,8 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             {menuFab}
             {cartFab}
           </Box>
+        ) : (
+          <div />
         )}
         <div className={classes.children}>{children}</div>
         <div className={classes.footer}>{footer}</div>

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -342,7 +342,9 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                  * can't change this value with JS as that causes much jank
                  */
                 '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: 56 },
-                '&.variantSmBottom.sizeSmFull': { minHeight: 'calc(100vh - 56px)' },
+                '&.variantSmBottom.sizeSmFull': {
+                  minHeight: `calc(100vh - ${theme.appShell.headerHeightSm} * 0.5)`,
+                },
 
                 '&.variantSmBottom': {
                   borderTopLeftRadius: `${theme.shape.borderRadius * 4}px`,
@@ -373,7 +375,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                 },
 
                 '&.sizeMdFull.variantMdBottom': {
-                  minHeight: `calc(100vh - ${theme.appShell.headerHeightMd})`,
+                  minHeight: `calc(100vh + ${theme.appShell.headerHeightMd} - (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
                 },
                 '&.sizeMdFull.variantMdLeft': {
                   paddingBottom: '1px',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,8 +19,8 @@
     "@emotion/react": "^11.7.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "^3.1.0",
-    "@graphcommerce/framer-scroller": "^2.0.4",
+    "@graphcommerce/framer-next-pages": "^3.1.1",
+    "@graphcommerce/framer-scroller": "^2.0.5",
     "@graphcommerce/framer-utils": "^3.0.3",
     "@graphcommerce/image": "^3.1.0",
     "react-is": "^17.0.2",