@graphcommerce/next-ui 6.2.0-canary.80 → 6.2.0-canary.82

package/ActionCard/ActionCard.tsx

@@ -141,6 +141,7 @@ export function ActionCard(props: ActionCardProps) {
           },
 
           '&.variantDefault': {
+            position: 'relative',
             '&::after': {
               content: '""',
               position: 'absolute',
@@ -163,21 +164,21 @@ export function ActionCard(props: ActionCardProps) {
               )}`,
             },
 
-            '&.variantDefault.sizeSmall': {
+            '&.sizeSmall': {
               mt: { xs: '2px', sm: '3px', md: '5px' },
               mb: { xs: '3px', sm: '4px', md: '6px' },
               '&::after': {
                 mb: { xs: '-2px', sm: '-3px', md: '-5px' },
               },
             },
-            '&.variantDefault.sizeMedium': {
+            '&.sizeMedium': {
               mt: { xs: '4px', sm: '5px', md: '6px' },
               mb: { xs: '5px', sm: '6px', md: '7px' },
               '&::after': {
                 mb: { xs: '-4px', sm: '-5px', md: '-6px' },
               },
             },
-            '&.variantDefault.sizeLarge': {
+            '&.sizeLarge': {
               mt: { xs: '5px', sm: '7px', md: '8px' },
               mb: { xs: '6px', sm: '8px', md: '9px' },
               '&::after': {
@@ -288,7 +289,6 @@ export function ActionCard(props: ActionCardProps) {
           <Box
             sx={{
               display: 'flex',
-              justifyContent: 'center',
               flexDirection: 'column',
               alignItems: 'flex-start',
             }}

package/ActionCard/ActionCardLayout.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 import { extendableComponent } from '../Styles'
 import { ActionCardProps } from './ActionCard'
 
-type ActionCardLayoutProps = {
+export type ActionCardLayoutProps = {
   children?: React.ReactNode
 } & Pick<ActionCardProps, 'layout'> &
-  BoxProps
+  Pick<BoxProps, 'sx' | 'className'>
 
 const parts = ['root'] as const
 const name = 'ActionCardLayout'
@@ -18,15 +18,15 @@ const { withState } = extendableComponent<
 
 export const ActionCardLayout = React.forwardRef<HTMLDivElement, ActionCardLayoutProps>(
   (props, ref) => {
-    const { layout = 'list' } = props
+    const { layout = 'list', sx, className = '', ...boxProps } = props
 
     const classes = withState({ layout })
 
     return (
       <Box
         ref={ref}
-        {...props}
-        className={classes.root}
+        {...boxProps}
+        className={`${classes.root} ${className}`}
         sx={[
           (theme) => ({
             '&.layoutStack': {
@@ -50,7 +50,7 @@ export const ActionCardLayout = React.forwardRef<HTMLDivElement, ActionCardLayou
               gap: theme.spacings.xxs,
             },
           }),
-          ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+          ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       />
     )

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 6.2.0-canary.82
+
+## 6.2.0-canary.81
+
+### Minor Changes
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`609b384de`](https://github.com/graphcommerce-org/graphcommerce/commit/609b384de8cded7a9dd2f29bd516ded810ab970a) - Created a new version of the cart using ActionCards for each CartItem. Different types of CartItems can have different ActionCards. These ActionCards will be overridden with the use of Plugins. An example can be found in the @graphcommerce/magento-product-configurable package. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+### Patch Changes
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`e9041802b`](https://github.com/graphcommerce-org/graphcommerce/commit/e9041802b27d6610cc93715ca61acff7f59792e6) - When the switchPoint is zero, make sure the header doesn’t flash when scrolling up on iOS ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`e81a9722b`](https://github.com/graphcommerce-org/graphcommerce/commit/e81a9722b5f581dacb624246c14d74aafbf55893) - Make sure the className is forwarded for ActionCardLayout ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
 ## 6.2.0-canary.80
 
 ## 6.2.0-canary.79

package/LayoutOverlay/components/LayoutOverlayHeader.tsx

@@ -1,11 +1,12 @@
 import { LayoutHeaderProps, LayoutHeader } from '../../Layout'
 
 export function LayoutOverlayHeader(props: LayoutHeaderProps) {
-  const { sx } = props
+  const { sx, switchPoint } = props
   return (
     <LayoutHeader
       {...props}
       noAlign
+      switchPoint={switchPoint !== 0 ? switchPoint : -1000}
       sx={[
         (theme) => ({
           [theme.breakpoints.down('md')]: {

package/TextInputNumber/TextInputNumber.tsx

@@ -1,12 +1,13 @@
 import { i18n } from '@lingui/core'
 import {
-  IconButton,
   IconButtonProps,
   SxProps,
+  Box,
   TextField,
   TextFieldProps,
   useForkRef,
   Theme,
+  Fab,
 } from '@mui/material'
 import { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
 import { IconSvg } from '../IconSvg'
@@ -36,6 +37,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
     UpProps = {},
     inputProps = {},
     inputRef,
+    variant = 'outlined',
     sx = [],
     ...textFieldProps
   } = props
@@ -91,11 +93,27 @@ export function TextInputNumber(props: TextInputNumberProps) {
     <TextField
       {...textFieldProps}
       type='number'
+      variant={variant}
       inputRef={forkRef}
       className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
       sx={[
         {
-          width: responsiveVal(80, 120),
+          width: responsiveVal(90, 120),
+        },
+        {
+          '& .MuiOutlinedInput-root': {
+            px: '3px',
+            display: 'grid',
+            gridTemplateColumns: '1fr auto 1fr',
+          },
+        },
+        variant === 'standard' && {
+          '& .MuiOutlinedInput-input': {
+            padding: 0,
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            display: 'none',
+          },
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
@@ -103,36 +121,36 @@ export function TextInputNumber(props: TextInputNumberProps) {
       InputProps={{
         ...textFieldProps.InputProps,
         startAdornment: (
-          <IconButton
-            aria-label={i18n._(/* i18n */ 'Decrease')}
-            size='medium'
-            edge='start'
-            onPointerDown={() => setDirection('down')}
-            onPointerUp={stop}
-            // disabled={textFieldProps.disabled || disabled === 'min'}
-            tabIndex={-1}
-            color='inherit'
-            {...DownProps}
-            className={`${classes.button} ${DownProps.className ?? ''}`}
-          >
-            {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
-          </IconButton>
+          <Box>
+            <Fab
+              aria-label={i18n._(/* i18n */ 'Decrease')}
+              size='smaller'
+              sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
+              onPointerDown={() => setDirection('down')}
+              onPointerUp={stop}
+              tabIndex={-1}
+              {...DownProps}
+              className={`${classes.button} ${DownProps.className ?? ''}`}
+            >
+              {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
+            </Fab>
+          </Box>
         ),
         endAdornment: (
-          <IconButton
-            aria-label={i18n._(/* i18n */ 'Increase')}
-            size='medium'
-            edge='end'
-            onPointerDown={() => setDirection('up')}
-            onPointerUp={() => setDirection(null)}
-            // disabled={textFieldProps.disabled || disabled === 'max'}
-            tabIndex={-1}
-            color='inherit'
-            {...UpProps}
-            className={`${classes.button} ${UpProps.className ?? ''}`}
-          >
-            {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
-          </IconButton>
+          <Box>
+            <Fab
+              aria-label={i18n._(/* i18n */ 'Increase')}
+              size='smaller'
+              sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
+              onPointerDown={() => setDirection('up')}
+              onPointerUp={() => setDirection(null)}
+              tabIndex={-1}
+              {...UpProps}
+              className={`${classes.button} ${UpProps.className ?? ''}`}
+            >
+              {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
+            </Fab>
+          </Box>
         ),
       }}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -144,6 +162,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         'aria-label': i18n._(/* i18n */ 'Number'),
         sx: [
           {
+            typography: 'body1',
             textAlign: 'center',
             '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
               appearance: 'none',

package/Theme/MuiButton.ts

@@ -161,7 +161,7 @@ export const MuiButtonInline: ButtonVariants = [
   {
     props: { variant: 'inline', size: 'small' },
     style: ({ theme }) => ({
-      margin: `calc(${theme.spacings.xxs} / 2 * -1 )`,
+      margin: `calc(${theme.spacings.xxs} * -1 )`,
       padding: '3px 9px',
 
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: 3 },

package/Theme/MuiFab.ts

@@ -25,9 +25,12 @@ const defaultSizes: FabSizes = {
    * Default values picked from MUI:
    * https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js
    */
+  smaller: '30px',
   small: '40px',
   medium: '48px',
   large: '54px',
+  responsiveSmall: responsiveVal(30, 40),
+  responsiveMedium: responsiveVal(36, 48),
   responsive: responsiveVal(40, 54),
 }
 
@@ -43,6 +46,9 @@ export const useFabSize = (size: FabSize) => {
 declare module '@mui/material/Fab/Fab' {
   interface FabPropsSizeOverrides {
     responsive: true
+    responsiveSmall: true
+    responsiveMedium: true
+    smaller: true
   }
   // todo: Wait for the color prop to be exendable and then add inverted
   // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js#L193-L202
@@ -60,7 +66,15 @@ function fabWidthHeight(size: FabSize, theme: Theme) {
 
 type FabVariants = NonNullable<ComponentsVariants['MuiFab']>
 
-const sizes: FabSize[] = ['small', 'medium', 'large', 'responsive']
+const sizes: FabSize[] = [
+  'smaller',
+  'small',
+  'medium',
+  'large',
+  'responsive',
+  'responsiveSmall',
+  'responsiveMedium',
+]
 
 /**
  * This defines the sizes for the added responsive variant.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.80",
+  "version": "6.2.0-canary.82",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@graphcommerce/framer-next-pages": "6.2.0-canary.80",
-    "@graphcommerce/framer-scroller": "6.2.0-canary.80",
-    "@graphcommerce/framer-utils": "6.2.0-canary.80",
-    "@graphcommerce/image": "6.2.0-canary.80",
+    "@graphcommerce/framer-next-pages": "6.2.0-canary.82",
+    "@graphcommerce/framer-scroller": "6.2.0-canary.82",
+    "@graphcommerce/framer-utils": "6.2.0-canary.82",
+    "@graphcommerce/image": "6.2.0-canary.82",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.80",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.80",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.80",
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.82",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.82",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.82",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^18.2.1",
     "typescript": "5.1.3"