@graphcommerce/next-ui 3.12.0 → 3.12.4

package/AppShell/AppShellHeader/index.tsx

@@ -113,10 +113,13 @@ const useStyles = makeStyles(
     sheetHeaderActionRight: {
       justifySelf: 'flex-end',
       '& > .Mui-disabled': {
-        opacity: 0.25,
-        color: `${theme.palette.primary.contrastText} !important`,
-        [theme.breakpoints.up('md')]: {
+        // color: `${theme.palette.primary.contrastText} !important`,
+        [theme.breakpoints.up('sm')]: {
+          opacity: 0.25,
           color: `${theme.palette.secondary.contrastText} !important`,
+          '& svg': {
+            stroke: `${theme.palette.secondary.contrastText} !important`,
+          },
         },
       },
     },
@@ -339,6 +342,7 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
       <Button
         onClick={historyOnClick}
         variant='pill-link'
+        size='small'
         className={classes.backButton}
         startIcon={backIcon}
       >

package/AppShell/MenuFab.tsx

@@ -67,10 +67,14 @@ const useStyles = makeStyles(
 )
 
 export type MenuFabProps = MenuProps &
-  UseStyles<typeof useStyles> & { children?: React.ReactNode; search?: React.ReactNode }
+  UseStyles<typeof useStyles> & {
+    children?: React.ReactNode
+    search?: React.ReactNode
+    menuIcon?: React.ReactNode
+  }
 
 export default function MenuFab(props: MenuFabProps) {
-  const { menu, children, search } = props
+  const { menu, children, search, menuIcon } = props
   const classes = useStyles(props)
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
@@ -88,7 +92,7 @@ export default function MenuFab(props: MenuFabProps) {
         onClick={(event) => setOpenEl(event.currentTarget)}
         className={classes.menuFab}
       >
-        <SvgImageSimple src={iconMenu} inverted />
+        {menuIcon ?? <SvgImageSimple src={iconMenu} inverted />}
       </Fab>
 
       <Menu

package/Button/index.tsx

@@ -3,9 +3,11 @@ import {
   ButtonClassKey as MuiButtonClassKey,
   Theme,
   makeStyles,
+  lighten,
 } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
+import { responsiveVal } from '..'
 
 type BaseButtonProps = Omit<Parameters<typeof MuiButton>['0'], 'variant' | 'classes'> & {
   variant?: 'text' | 'outlined' | 'contained' | 'pill' | 'pill-link'
@@ -56,18 +58,22 @@ const useStyles = makeStyles<
       borderRadius: '99em',
     },
     pillLink: {
-      [theme.breakpoints.up('md')]: {
-        background: theme.palette.secondary.main,
-        color: theme.palette.secondary.contrastText,
-        boxShadow: theme.shadows[6],
-        borderRadius: 25,
-        padding: '6px 16px',
+      [theme.breakpoints.up('sm')]: {
+        // manually match MuiButton and containedPrimary styles
+        textTransform: 'none',
+        ...theme.typography.body2,
+        fontWeight: 400,
+        padding: `${responsiveVal(8, 10)} ${responsiveVal(12, 22)}`,
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.primary.contrastText,
+        borderRadius: '99em',
+        boxShadow: theme.shadows[1],
+        '& svg': {
+          stroke: theme.palette.primary.contrastText,
+        },
         '&:hover': {
           background: theme.palette.secondary.dark,
         },
-        '& svg': {
-          stroke: theme.palette.secondary.contrastText,
-        },
       },
     },
     pillPrimary: {

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.12.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.12.2...@graphcommerce/next-ui@3.12.3) (2021-11-02)
+
+
+### Bug Fixes
+
+* **MenuFab:** make icon customizable ([375bafd](https://github.com/ho-nl/m2-pwa/commit/375bafd901b3c53405e02d681ea0dca3af190e35))
+
+
+
+
+
+## [3.12.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.12.1...@graphcommerce/next-ui@3.12.2) (2021-11-02)
+
+
+### Bug Fixes
+
+* **message-snackbar:** children alignment ([02051df](https://github.com/ho-nl/m2-pwa/commit/02051df0f09945218117c6ba2c761e4dca3872a3))
+* **message-snackbar:** children alignment ([9b9ac09](https://github.com/ho-nl/m2-pwa/commit/9b9ac094e10ec3e57155014366f39a22f07a7f52))
+
+
+
+
+
+## [3.12.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.12.0...@graphcommerce/next-ui@3.12.1) (2021-11-02)
+
+
+### Bug Fixes
+
+* RemoveCoupon Button and fix pill-link style to match buttons ([6838812](https://github.com/ho-nl/m2-pwa/commit/68388123773fb4f79a3e4b1beb7ecca601d7748e))
+
+
+
+
+
 # [3.12.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.5...@graphcommerce/next-ui@3.12.0) (2021-11-02)
 
 

package/Row/IconBlocks/IconBlock/index.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core'
-import React, { useRef } from 'react'
+import React from 'react'
 import Button from '../../../Button'
 import { UseStyles } from '../../../Styles'
 

package/Row/SpecialBanner/index.tsx

@@ -86,7 +86,7 @@ export type SpecialBannerProps = UseStyles<typeof useStyles> &
 
 export default function SpecialBanner(props: SpecialBannerProps) {
   const { asset, topic, pageLinks, children, ...containerProps } = props
-  const classes = useStyles()
+  const classes = useStyles(props)
 
   return (
     <Row maxWidth={false} {...containerProps}>

package/Snackbar/MessageSnackbarImpl.tsx

@@ -58,14 +58,11 @@ const useStyles = makeStyles(
       },
     },
     children: {
+      display: 'flex',
+      columnGap: 10,
       gridArea: 'children',
       ...theme.typography.subtitle1,
       fontWeight: 400,
-      display: 'grid',
-      alignItems: 'center',
-      justifyContent: 'start',
-      gridAutoFlow: 'column',
-      gap: 10,
     },
     actionButton: {
       gridArea: 'action',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.12.0",
+  "version": "3.12.4",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,10 +11,10 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.107.3",
-    "@graphcommerce/framer-scroller": "^0.4.3",
+    "@graphcommerce/framer-scroller": "^1.0.1",
     "@graphcommerce/framer-sheet": "^2.105.15",
     "@graphcommerce/framer-utils": "^2.103.13",
-    "@graphcommerce/graphql": "^2.105.2",
+    "@graphcommerce/graphql": "^2.105.3",
     "@graphcommerce/image": "^2.105.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "b37db76e3e0dfc34a2b25068be5e6c7afcca6bfa"
+  "gitHead": "7aca802dd74632aa2f474eae2d93bd563490fd90"
 }