@graphcommerce/next-ui 6.0.0-canary.31 → 6.0.0-canary.33

package/ActionCard/ActionCard.tsx

@@ -1,8 +1,7 @@
 import { alpha, Box, BoxProps, ButtonBase, ButtonProps, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { extendableComponent } from '../Styles'
+import { extendableComponent, responsiveVal } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
-import { responsiveVal } from '../Styles/responsiveVal'
 
 type Variants = 'outlined' | 'default'
 type Size = 'large' | 'medium' | 'small'
@@ -110,42 +109,72 @@ export function ActionCard(props: ActionCardProps) {
         (theme) => ({
           ...breakpointVal(
             'borderRadius',
+            theme.shape.borderRadius * 1.5,
             theme.shape.borderRadius * 3,
-            theme.shape.borderRadius * 4,
             theme.breakpoints.values,
           ),
 
           '&.sizeSmall': {
             px: responsiveVal(8, 12),
-            py: responsiveVal(6, 8),
+            py: responsiveVal(4, 6),
             display: 'flex',
             typography: 'body2',
           },
           '&.sizeMedium': {
-            px: responsiveVal(10, 16),
-            py: responsiveVal(8, 14),
+            px: responsiveVal(10, 14),
+            py: responsiveVal(10, 12),
             typography: 'body2',
             display: 'block',
           },
           '&.sizeLarge': {
-            px: theme.spacings.xs,
-            py: theme.spacings.xxs,
+            px: responsiveVal(12, 16),
+            py: responsiveVal(12, 14),
             display: 'block',
           },
 
           '&.variantDefault': {
-            borderRadius: 0,
-            px: 0,
-            borderBottom: `1px solid ${theme.palette.divider}`,
+            '&::after': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              width: '100%',
+              left: 0,
+              bottom: '-1px',
+              borderBottom: `1px solid ${theme.palette.divider}`,
+            },
             '&.selected': {
-              borderBottom: `2px solid ${theme.palette[color].main}`,
-              marginBottom: '-1px',
-              backgroundColor: `${theme.palette[color].main}10`,
+              backgroundColor: `${alpha(
+                theme.palette[color].main,
+                theme.palette.action.hoverOpacity,
+              )}`,
             },
             '&.error': {
-              borderBottom: `2px solid ${theme.palette.error.main}`,
-              marginBottom: '-1px',
-              backgroundColor: `${theme.palette.error.main}10`,
+              backgroundColor: `${alpha(
+                theme.palette.error.main,
+                theme.palette.action.hoverOpacity,
+              )}`,
+            },
+
+            '&.variantDefault.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': {
+              mt: { xs: '4px', sm: '5px', md: '6px' },
+              mb: { xs: '5px', sm: '6px', md: '7px' },
+              '&::after': {
+                mb: { xs: '-4px', sm: '-5px', md: '-6px' },
+              },
+            },
+            '&.variantDefault.sizeLarge': {
+              mt: { xs: '5px', sm: '7px', md: '8px' },
+              mb: { xs: '6px', sm: '8px', md: '9px' },
+              '&::after': {
+                mb: { xs: '-5px', sm: '-7px', md: '-8px' },
+              },
             },
           },
 
@@ -262,7 +291,6 @@ export function ActionCard(props: ActionCardProps) {
                 className={classes.title}
                 sx={{
                   typography: 'subtitle2',
-                  '&.sizeMedium': { typographty: 'subtitle1' },
                   '&.sizeLarge': { typography: 'h6' },
                 }}
               >

package/ActionCard/ActionCardLayout.tsx

@@ -37,6 +37,7 @@ export const ActionCardLayout = React.forwardRef<HTMLDivElement, ActionCardLayou
             '&.layoutList': {
               display: 'grid',
               height: 'min-content',
+              pt: '1px',
             },
             '&.layoutGrid': {
               display: 'grid',

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 6.0.0-canary.33
+
+### Patch Changes
+
+- [#1831](https://github.com/graphcommerce-org/graphcommerce/pull/1831) [`f4008bae3`](https://github.com/graphcommerce-org/graphcommerce/commit/f4008bae3e3ac8288c731b1dd87e6c6aef8e81fc) - Added a linting rule that disallows `import { Theme } from '@emotion/react'` because that causes huge performance issues. Added tsc:trace to the root project to debug typescript performance issues. ([@paales](https://github.com/paales))
+
+## 6.0.0-canary.32
+
+### Minor Changes
+
+- [#1814](https://github.com/graphcommerce-org/graphcommerce/pull/1814) [`15aa59049`](https://github.com/graphcommerce-org/graphcommerce/commit/15aa590493bf7639231f3bb3dd623c234ebad7cf) - - Show filter label, instead of value
+  - Actioncard default styling
+  - Active filter styling ([@ErwinOtten](https://github.com/ErwinOtten))
+
 ## 6.0.0-canary.31
 
 ### Patch Changes

package/Overlay/components/OverlayBase.tsx

@@ -249,7 +249,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             bottom: 0,
             top: 0,
             left: 0,
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            backgroundColor: 'rgba(0, 0, 0, 0.2)',
             WebkitTapHighlightColor: 'transparent',
             willChange: 'opacity',
           },

package/OverlayOrPopperChip/OverlayOrPopperChip.tsx

@@ -1,4 +1,14 @@
-import { alpha, Chip, ChipProps, Typography, useEventCallback } from '@mui/material'
+import {
+  alpha,
+  lighten,
+  Badge,
+  Chip,
+  ChipProps,
+  SxProps,
+  Typography,
+  useEventCallback,
+  Theme,
+} from '@mui/material'
 import React, { useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { responsiveVal } from '../Styles'
@@ -8,7 +18,7 @@ import { OverlayOrPopperPanel, OverlayOrPopperPanelProps } from './OverlayOrPopp
 function isMulti(
   selectedLabel: React.ReactNode | React.ReactNode[],
 ): selectedLabel is React.ReactNode[] {
-  return Array.isArray(selectedLabel) && selectedLabel.length > 1
+  return Array.isArray(selectedLabel) && selectedLabel.length >= 1
 }
 
 export type ChipOverlayOrPopperProps = {
@@ -16,27 +26,30 @@ export type ChipOverlayOrPopperProps = {
   selected: boolean
   selectedLabel: React.ReactNode | React.ReactNode[]
   children: OverlayOrPopperPanelProps['children']
-
+  sx?: SxProps<Theme>
   chipProps?: Omit<ChipProps<'button'>, 'clickable' | 'label'>
 } & Omit<OverlayOrPopperPanelProps, 'activeEl' | 'children' | 'title'>
 
 export function ChipOverlayOrPopper(props: ChipOverlayOrPopperProps) {
-  let { label, selected, selectedLabel, children, chipProps, ...panelProps } = props
+  let { label, selected, selectedLabel, children, chipProps, sx = [], ...panelProps } = props
   const { onApply, onClose, onReset } = panelProps
   const [activeEl, setActiveEl] = useState<HTMLElement | null>(null)
 
   const chevronIcon = isMulti(selectedLabel) ? (
-    <Typography
-      variant='caption'
-      color='primary.main'
+    <Badge
+      color='primary'
+      badgeContent={selectedLabel.length}
       sx={{
-        display: 'flex',
         alignItems: 'center',
-        ml: responsiveVal(3, 8),
+        '.MuiBadge-badge': {
+          position: 'relative',
+          transform: 'none',
+          ml: { xs: '2px', md: '6px' },
+          typography: 'caption',
+          fontWeight: 'bold',
+        },
       }}
-    >
-      +{selectedLabel.length - 1}
-    </Typography>
+    />
   ) : (
     <IconSvg
       src={activeEl ? iconChevronUp : iconChevronDown}
@@ -54,12 +67,12 @@ export function ChipOverlayOrPopper(props: ChipOverlayOrPopperProps) {
         size='responsive'
         component='button'
         variant='outlined'
-        color={selected && !activeEl ? 'primary' : 'default'}
+        color='default'
         {...chipProps}
         clickable
         label={
           <Typography variant='body2' sx={{ display: 'flex', flexDirection: 'row' }}>
-            {selected ? selectedLabel : label}
+            {label}
             {chevronIcon}
           </Typography>
         }
@@ -73,17 +86,23 @@ export function ChipOverlayOrPopper(props: ChipOverlayOrPopperProps) {
             },
             ...(selected
               ? {
-                  border: `1px solid ${theme.palette.primary.main ?? theme.palette.primary.main}`,
-                  boxShadow: `inset 0 0 0 1px ${
-                    theme.palette.primary.main ?? theme.palette.primary.main
-                  },0 0 0 4px ${alpha(
+                  background: lighten(
                     theme.palette.primary.main,
-                    theme.palette.action.hoverOpacity,
-                  )} !important`,
+                    1 - theme.palette.action.hoverOpacity,
+                  ),
+                  border: `1px solid transparent`,
+                  '&.MuiChip-clickable:hover': {
+                    background: lighten(
+                      theme.palette.primary.main,
+                      1 - theme.palette.action.hoverOpacity * 2,
+                    ),
+                    border: `1px solid transparent`,
+                  },
                 }
               : {}),
           }),
           ...(Array.isArray(chipSx) ? chipSx : [chipSx]),
+          ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       />
       <OverlayOrPopperPanel

package/OverlayOrPopperChip/PopperPanel.tsx

@@ -33,7 +33,7 @@ export function PopperPanel(props: PopperPanelProps) {
           bgcolor: 'background.paper',
           display: 'grid',
           gridTemplateRows: 'min-content auto min-content',
-          minWidth: 300,
+          minWidth: 350,
           overflowY: 'auto',
           maxHeight: '500px',
         }}

package/OverlayOrPopperChip/PopperPanelActions.tsx

@@ -43,7 +43,16 @@ export function PopperPanelActions(props: PanelActionsProps) {
           </Fab>
         }
       >
-        <Typography variant='h6' component='span'>
+        <Typography
+          variant='subtitle1'
+          component='span'
+          sx={{
+            display: 'block',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+          }}
+        >
           {title}
         </Typography>
       </LayoutHeader>
@@ -55,7 +64,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
           type='button'
           onClick={onApply}
           variant='pill'
-          size='large'
+          size='medium'
           color='primary'
           fullWidth
         >

package/OverlayOrPopperChip/types.ts

@@ -1,5 +1,4 @@
-import { Theme } from '@emotion/react'
-import { SxProps } from '@mui/material'
+import { Theme, SxProps } from '@mui/material'
 import React from 'react'
 
 export type PanelActionsProps = {

package/Styles/breakpointVal.tsx

@@ -6,7 +6,7 @@ export function breakpointVal(
 ) {
   const minSize = 320
   const breakpoints = Object.values(breakpointsObject)
-  const spread = breakpoints[breakpoints.length - 1]
+  const spread = breakpoints[breakpoints.length - 1] - minSize
 
   const entries = {}
 

package/Styles/withEmotionCache.tsx

@@ -1,4 +1,4 @@
-import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
+import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type NextDocument from 'next/document'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.0-canary.31",
+  "version": "6.0.0-canary.33",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.6",
-    "@graphcommerce/framer-next-pages": "6.0.0-canary.31",
-    "@graphcommerce/framer-scroller": "6.0.0-canary.31",
-    "@graphcommerce/framer-utils": "6.0.0-canary.31",
-    "@graphcommerce/image": "6.0.0-canary.31",
+    "@graphcommerce/framer-next-pages": "6.0.0-canary.33",
+    "@graphcommerce/framer-scroller": "6.0.0-canary.33",
+    "@graphcommerce/framer-utils": "6.0.0-canary.33",
+    "@graphcommerce/image": "6.0.0-canary.33",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.31",
-    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.31",
-    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.31",
+    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.33",
+    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.33",
+    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.33",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "typescript": "4.9.5"