@graphcommerce/next-ui 3.17.0 → 3.18.2

package/AppShell/AppShellHeader/index.tsx

@@ -131,7 +131,6 @@ const useStyles = makeStyles(
     sheetHeaderFillMobileOnly: {
       [theme.breakpoints.up('md')]: {
         pointerEvents: 'none',
-        background: 'green',
         position: 'fixed',
       },
     },
@@ -192,7 +191,7 @@ const useStyles = makeStyles(
         pointerEvents: 'all',
       },
       '& * > button': {
-        boxShadow: theme.shadows[3],
+        boxShadow: theme.shadows[6],
       },
       [theme.breakpoints.up('md')]: {
         position: 'fixed',

package/AppShell/MenuFab.tsx

@@ -36,7 +36,6 @@ const useStyles = makeStyles(
     },
     menuFab: {
       background: theme.palette.text.primary,
-      boxShadow: theme.shadows[2],
       width: responsiveVal(42, 56),
       height: responsiveVal(42, 56),
       pointerEvents: 'all',

package/AppShell/useFixedFabAnimation.tsx

@@ -1,19 +1,15 @@
-import { alpha, useMediaQuery, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
+import { alpha, useTheme } from '@material-ui/core'
+import { useMotionTemplate, useMotionValue, useTransform, useViewportScroll } from 'framer-motion'
 
 export default function useFixedFabAnimation() {
   const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const { scrollY } = useViewportScroll()
-  const scrollTo = isMobile ? 0 : 60
-  const scrollToBg = isMobile ? 0 : 10
-  const opacity = useTransform(scrollY, [50, scrollTo], [0, 0.08])
+  const opacity = useTransform(scrollY, [50, 60], [0, 1])
   const opacity1 = useTransform(
     scrollY,
-    [0, scrollToBg],
+    [0, 10],
     [alpha(theme.palette.background.paper, 0), alpha(theme.palette.background.paper, 1)],
   )
-  const boxShadow = useMotionTemplate`0 2px 10px 0 rgba(0, 0, 0, ${opacity})`
   const backgroundColor = useMotionTemplate`${opacity1}`
-  return { boxShadow, backgroundColor, opacity }
+  return { backgroundColor, opacity }
 }

package/Button/index.tsx

@@ -67,7 +67,7 @@ const useStyles = makeStyles<
         backgroundColor: theme.palette.secondary.main,
         color: theme.palette.primary.contrastText,
         borderRadius: '99em',
-        boxShadow: theme.shadows[1],
+        boxShadow: theme.shadows[6],
         '&:hover': {
           background: theme.palette.secondary.dark,
         },

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.18.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.18.1...@graphcommerce/next-ui@3.18.2) (2021-11-27)
+
+
+### Bug Fixes
+
+* shadow snackbar with elevation ([8d7d011](https://github.com/ho-nl/m2-pwa/commit/8d7d0119357325f5c838def4ae8dc4ae19a43a6f))
+
+
+
+
+
+## [3.18.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.18.0...@graphcommerce/next-ui@3.18.1) (2021-11-22)
+
+
+### Bug Fixes
+
+* green app shell header ([a0774e6](https://github.com/ho-nl/m2-pwa/commit/a0774e6da078ea1e96d7d93bccafae5b55a69792))
+
+
+
+
+
+# [3.18.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.17.1...@graphcommerce/next-ui@3.18.0) (2021-11-22)
+
+
+### Bug Fixes
+
+* remove styles ([335c8cb](https://github.com/ho-nl/m2-pwa/commit/335c8cb663bdd4c1670cdb3ea88c8a9a42bcf745))
+* revert to SvgImageSimple ([b247c6b](https://github.com/ho-nl/m2-pwa/commit/b247c6b96979bc313e597a8ffe1275b73f38bd6a))
+
+
+### Features
+
+* use Rating component ([ec54f45](https://github.com/ho-nl/m2-pwa/commit/ec54f4522adb2d330bbdecc2ce032f86f13fb7a6))
+
+
+
+
+
+## [3.17.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.17.0...@graphcommerce/next-ui@3.17.1) (2021-11-12)
+
+
+### Bug Fixes
+
+* disable CartFab animation for mobile ([ea04e67](https://github.com/ho-nl/m2-pwa/commit/ea04e678b7d5ab23e903a59a7f369053d17f9e79))
+
+
+
+
+
 # [3.17.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.16.0...@graphcommerce/next-ui@3.17.0) (2021-11-12)
 
 

package/Snackbar/MessageSnackbarImpl.tsx

@@ -161,6 +161,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
         onClose={hideSnackbar}
       >
         <SnackbarContent
+          elevation={12}
           classes={{
             root: clsxBonus('root'),
             message: clsxBonus('message'),

package/StarRatingField/index.tsx

@@ -1,8 +1,8 @@
-import { makeStyles, Theme } from '@material-ui/core'
 import { Rating, RatingProps } from '@material-ui/lab'
 import React from 'react'
 import { SvgImageSimple } from '..'
 import { iconStar } from '../icons'
+import { makeStyles, Theme } from '@material-ui/core'
 
 export type StarRatingFieldProps = {
   id?: string
@@ -14,13 +14,13 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     iconStar: {
       fill: '#FFDA1C',
-      stroke: '#FFDA1C',
-      margin: 3,
+      stroke: 'none',
+      margin: '0 3px',
     },
     iconStarEmpty: {
-      fill: theme.palette.text.disabled,
-      stroke: theme.palette.text.disabled,
-      margin: 3,
+      fill: theme.palette.grey[300],
+      stroke: 'none',
+      margin: '0 3px',
     },
   }),
   {
@@ -37,8 +37,8 @@ export default function StarRatingField(props: StarRatingFieldProps) {
       name={`star-rating-${id}`}
       max={5}
       size='small'
-      emptyIcon={<SvgImageSimple src={iconStar} className={classes.iconStarEmpty} />}
-      icon={<SvgImageSimple src={iconStar} className={classes.iconStar} />}
+      emptyIcon={<SvgImageSimple src={iconStar} size='large' className={classes.iconStarEmpty} />}
+      icon={<SvgImageSimple src={iconStar} size='large' className={classes.iconStar} />}
       onChange={(event, value) => {
         onChange(id ?? '', value ?? 0)
       }}

package/SvgImage/SvgImageSimple.tsx

@@ -21,6 +21,11 @@ const useStyles = makeStyles(
     sizeInherit: {
       fontSize: 'inherit',
     },
+    sizeXs: {
+      width: responsiveVal(11, 13),
+      height: responsiveVal(11, 13),
+      strokeWidth: 2.1,
+    },
     sizeSmall: {
       width: responsiveVal(12, 16),
       height: responsiveVal(12, 16),
@@ -49,7 +54,7 @@ const useStyles = makeStyles(
 
 type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
   /** The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. */
-  size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small'
+  size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small' | 'xs'
   fill?: boolean
   muted?: boolean
   inverted?: boolean

package/ToggleButton/index.tsx

@@ -12,14 +12,12 @@ export const useStyles = makeStyles(
   (theme: Theme) => ({
     /* Styles applied to the root element. */
     root: {
-      border: '2px solid transparent',
       backgroundColor:
         theme.palette.type === 'light'
           ? theme.palette.background.default
           : lighten(theme.palette.background.default, theme.palette.action.hoverOpacity),
       borderRadius: 4,
-      // boxShadow: theme.shadows['1'],
-      boxShadow: `0px 0px 2px ${theme.palette.grey[400]}`,
+      border: `1px solid ${theme.palette.divider}`,
       '&$disabled': {
         borderWidth: 2,
       },
@@ -28,8 +26,8 @@ export const useStyles = makeStyles(
     },
     disabled: {},
     selected: ({ color = 'default' }: StyleProps) => ({
-      border: `2px solid ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
-      boxShadow: `unset`,
+      border: `1px solid ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
+      boxShadow: `inset 0 0 0 1px ${theme.palette[color]?.main ?? theme.palette.primary.main}`,
     }),
     /* Styles applied to the `label` wrapper element. */
     label: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.17.0",
+  "version": "3.18.2",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "6a39908a131938d9c3365cc937b92c1f1f8b33c6"
+  "gitHead": "4d36627aeb43cba320c249b9a876384627064f18"
 }