@graphcommerce/next-ui 4.29.1 → 4.29.2

package/ActionCard/ActionCard.tsx

@@ -2,6 +2,7 @@ import { alpha, Box, BoxProps, ButtonBase, ButtonProps, SxProps, Theme } from '@
 import React from 'react'
 import { extendableComponent } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 type Variants = 'outlined' | 'default'
 type Size = 'large' | 'medium' | 'small'
@@ -107,24 +108,34 @@ export function ActionCard(props: ActionCardProps) {
       disabled={disabled}
       sx={[
         (theme) => ({
+          ...breakpointVal(
+            'borderRadius',
+            theme.shape.borderRadius * 3,
+            theme.shape.borderRadius * 4,
+            theme.breakpoints.values,
+          ),
+
           '&.sizeSmall': {
-            py: `5px`,
+            px: responsiveVal(8, 12),
+            py: responsiveVal(6, 8),
             display: 'flex',
             typography: 'body2',
           },
-
           '&.sizeMedium': {
-            py: `10px`,
+            px: responsiveVal(10, 16),
+            py: responsiveVal(8, 14),
             typography: 'body2',
             display: 'block',
           },
-
           '&.sizeLarge': {
+            px: theme.spacings.xs,
             py: theme.spacings.xxs,
             display: 'block',
           },
 
           '&.variantDefault': {
+            borderRadius: 0,
+            px: 0,
             borderBottom: `1px solid ${theme.palette.divider}`,
             '&.selected': {
               borderBottom: `2px solid ${theme.palette[color].main}`,
@@ -140,13 +151,14 @@ export function ActionCard(props: ActionCardProps) {
 
           '&.variantOutlined': {
             backgroundColor: theme.palette.background.paper,
-            border: `1px solid ${theme.palette.divider}`,
+            boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
             '&:not(:last-of-type)': {
               marginBottom: '-1px',
             },
 
             '&.layoutList': {
-              '&:first-of-type, &.selected': {
+              borderRadius: 0,
+              '&:first-of-type': {
                 ...breakpointVal(
                   'borderTopLeftRadius',
                   theme.shape.borderRadius * 3,
@@ -160,7 +172,7 @@ export function ActionCard(props: ActionCardProps) {
                   theme.breakpoints.values,
                 ),
               },
-              '&:last-of-type, &.selected': {
+              '&:last-of-type': {
                 ...breakpointVal(
                   'borderBottomLeftRadius',
                   theme.shape.borderRadius * 3,
@@ -175,34 +187,27 @@ export function ActionCard(props: ActionCardProps) {
                 ),
               },
             },
-            '&:not(.layoutList)': {
-              ...breakpointVal(
-                'borderRadius',
-                theme.shape.borderRadius * 3,
-                theme.shape.borderRadius * 4,
-                theme.breakpoints.values,
-              ),
-            },
-
-            '&.sizeSmall': { px: `10px` },
-            '&.sizeMedium': { px: `12px` },
-            '&.sizeLarge': { px: theme.spacings.xs },
 
             '&.selected': {
-              border: `2px solid ${theme.palette[color].main}`,
-              boxShadow: `0 0 0 4px ${alpha(
+              borderColor: 'transparent',
+              boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}`,
+            },
+            '&.selected:focus': {
+              borderColor: 'transparent',
+              boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}, 0 0 0 4px ${alpha(
                 theme.palette[color].main,
                 theme.palette.action.hoverOpacity,
               )}`,
-
-              '&.sizeSmall': { padding: `4px 9px` },
-              '&.sizeMedium': { padding: `9px 11px` },
-              '&.sizeLarge': {
-                padding: `calc(${theme.spacings.xxs} - 1px) calc(${theme.spacings.xs} - 1px)`,
-              },
             },
+            '&:focus': {
+              boxShadow: `inset 0 0 0 1px ${theme.palette.divider},0 0 0 4px ${alpha(
+                theme.palette[color].main,
+                theme.palette.action.hoverOpacity,
+              )}`,
+            },
+
             '&.error': {
-              border: `2px solid ${theme.palette.error.main}`,
+              boxShadow: `0 0 0 2px ${theme.palette.error.main}`,
             },
           },
           '&.selected': {
@@ -228,6 +233,7 @@ export function ActionCard(props: ActionCardProps) {
           width: '100%',
           justifyContent: 'space-between',
           alignContent: 'stretch',
+          alignItems: 'flex-start',
         }}
       >
         <Box
@@ -287,7 +293,10 @@ export function ActionCard(props: ActionCardProps) {
           }}
         >
           {action && (
-            <Box className={classes.action} sx={{ marginBottom: '5px' }}>
+            <Box
+              className={classes.action}
+              sx={(theme) => ({ marginBottom: '5px', color: theme.palette[color].main })}
+            >
               {!selected ? action : reset}
             </Box>
           )}

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 4.29.2
+
+### Patch Changes
+
+- [#1686](https://github.com/graphcommerce-org/graphcommerce/pull/1686) [`1953c7e27`](https://github.com/graphcommerce-org/graphcommerce/commit/1953c7e27eb606a825fce1ad361393b3c781c6da) Thanks [@paales](https://github.com/paales)! - Product page markup and sticky product image when the sidebar is fairly large
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.44
+
 ## 4.29.1
 
 ### Patch Changes

package/FramerScroller/SidebarGallery.tsx

@@ -113,6 +113,21 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   const hasImages = images.length > 0
 
+  // sx={(theme) => ({
+  //   [SidebarGallery.selectors.scrollerContainer]: {
+  //     minHeight: 0,
+  //     [theme.breakpoints.up('md')]: {
+  //       position: 'sticky',
+  //       top: 0,
+  //     },
+  //     '&.zoomed': {
+  //       position: 'relative',
+  //       top: 0,
+  //       marginTop: 0,
+  //     },
+  //   },
+  // })}
+
   return (
     <ScrollerProvider scrollSnapAlign='center'>
       <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
@@ -154,13 +169,20 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
                 backgroundColor: theme.palette.background.image,
                 position: 'relative',
-                minHeight: '100%',
                 paddingTop: `min(${ratio}, ${maxHeight})`,
                 [theme.breakpoints.down('md')]: {
                   width: '100vw',
                 },
+                minHeight: 0,
+                [theme.breakpoints.up('md')]: {
+                  position: 'sticky',
+                  top: 0,
+                },
               },
               zoomed && {
+                position: 'relative',
+                top: 0,
+                marginTop: 0,
                 paddingTop: `var(--client-size-y)`,
               },
             ]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.29.1",
+  "version": "4.29.2",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
     "@graphcommerce/framer-next-pages": "3.3.2",
-    "@graphcommerce/framer-scroller": "2.1.43",
+    "@graphcommerce/framer-scroller": "2.1.44",
     "@graphcommerce/framer-utils": "3.2.1",
     "@graphcommerce/image": "3.1.10",
     "cookie": "^0.5.0",