@graphcommerce/next-ui 4.2.4 → 4.3.1

package/Button/LinkOrButton.tsx

@@ -42,34 +42,46 @@ export const LinkOrButton = React.forwardRef<
   const buttonRef = useForkRef(ref, useRef(null))
   const linkRef = useForkRef(ref, useRef(null))
 
+  const buttonSx = button?.sx ?? []
+  const linkSx = link?.sx ?? []
   return (
     <>
       <Button
-        sx={{ display: { xs: 'none', [breakpoint]: 'inline-flex' }, ...button?.sx }}
-        ref={buttonRef}
         startIcon={startIcon}
         endIcon={endIcon}
-        color={color}
-        loading={loading}
         {...sharedProps}
         {...button}
+        ref={buttonRef}
+        color={color}
+        loading={loading}
+        sx={[
+          {
+            display: {
+              xs: 'none',
+              [breakpoint]: 'inline-flex',
+            },
+          },
+          ...(Array.isArray(buttonSx) ? buttonSx : [buttonSx]),
+        ]}
       >
         {children}
       </Button>
 
       <Link
-        sx={{
-          display: { xs: 'inline-flex', [breakpoint]: 'none' },
-          alignItems: 'center',
-          ...link?.sx,
-        }}
         ref={linkRef}
-        color={loading ? 'text.disabled' : color}
         underline='none'
-        aria-disabled={loading}
         variant='body2'
         {...sharedProps}
         {...link}
+        color={loading ? 'text.disabled' : color}
+        aria-disabled={loading}
+        sx={[
+          {
+            display: { xs: 'inline-flex', [breakpoint]: 'none' },
+            alignItems: 'center',
+          },
+          ...(Array.isArray(linkSx) ? linkSx : [linkSx]),
+        ]}
       >
         {startIcon}
         <span>{children}</span>

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change Log
 
+## 4.3.1
+
+### Patch Changes
+
+- [#1326](https://github.com/graphcommerce-org/graphcommerce/pull/1326) [`df0b3e7d5`](https://github.com/graphcommerce-org/graphcommerce/commit/df0b3e7d5f5fee963731a999cb3a8891580cb6fe) Thanks [@paales](https://github.com/paales)! - Latest version of GraphQL Mesh is broken, reverting to older version
+
+## 4.3.0
+
+### Minor Changes
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`0298a0de1`](https://github.com/graphcommerce-org/graphcommerce/commit/0298a0de1d13e543c4124a6a099297b4e27e2b05) Thanks [@paales](https://github.com/paales)! - Added `<Slider size='large' />` and made styling with variants
+
+* [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`3326742a0`](https://github.com/graphcommerce-org/graphcommerce/commit/3326742a0dceb45f0cac4741ca09dc4d4f09ad90) Thanks [@paales](https://github.com/paales)! - Added ‘scrolled’ state to MenuFab to allow for extra styling: `'&.scrolled': {}`
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`7a3799bfc`](https://github.com/graphcommerce-org/graphcommerce/commit/7a3799bfc107f26aa9991a91db5f228e3476f4aa) Thanks [@paales](https://github.com/paales)! - Make CartFab and MenuFab’s color, size and variant passable by props
+
+### Patch Changes
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`5266388ea`](https://github.com/graphcommerce-org/graphcommerce/commit/5266388eaffda41592623ef7a3ddbbe03c8e0dad) Thanks [@paales](https://github.com/paales)! - make sure there is no background on darkmode above the image in ImageText
+
+* [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`9b35403d9`](https://github.com/graphcommerce-org/graphcommerce/commit/9b35403d9dbb2606ac7cf3bb641a0f9cc3d8a2ba) Thanks [@paales](https://github.com/paales)! - MenuFab darkmode doesn’t need elevationcolor
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`815132ea4`](https://github.com/graphcommerce-org/graphcommerce/commit/815132ea43937b4b84b59ec9974ac593cb4eb456) Thanks [@paales](https://github.com/paales)! - Make sure canonicals don’t report about double slashes and add warning when incorrect URL is passed
+
+* [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`9a77f88ed`](https://github.com/graphcommerce-org/graphcommerce/commit/9a77f88ed26cbecdae9a135c3cb234a5b7ecf4df) Thanks [@paales](https://github.com/paales)! - Reduce footer spacing
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`0eeaad304`](https://github.com/graphcommerce-org/graphcommerce/commit/0eeaad30461b1d5b486438f0287fa76d49429044) Thanks [@paales](https://github.com/paales)! - LayoutHeaderBack should be a round button on mobile
+
+* [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`bc5213547`](https://github.com/graphcommerce-org/graphcommerce/commit/bc52135471479c83d989449dad24798112e898f4) Thanks [@paales](https://github.com/paales)! - make sure LinkOrButton sx props do not break styling
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`3f1912f55`](https://github.com/graphcommerce-org/graphcommerce/commit/3f1912f553318d5888f8af2b841918ef4ae96a84) Thanks [@paales](https://github.com/paales)! - Button in MessageSnackbarImpl wasn't full width
+
+* [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`b6c68cda8`](https://github.com/graphcommerce-org/graphcommerce/commit/b6c68cda8836a1d0c78ef351899cec9ec1037385) Thanks [@paales](https://github.com/paales)! - LayoutOverlay had a very large spacing below the content
+
+* Updated dependencies [[`1e2a07141`](https://github.com/graphcommerce-org/graphcommerce/commit/1e2a071414154600430e6dcf0513d86ab78e0b28), [`d91359871`](https://github.com/graphcommerce-org/graphcommerce/commit/d91359871b023a9f0d305b37353c1ee2d0912248), [`bec88d0d7`](https://github.com/graphcommerce-org/graphcommerce/commit/bec88d0d70b679e15150917df89986ecee5b39a6)]:
+  - @graphcommerce/framer-scroller@2.1.0
+  - @graphcommerce/framer-utils@3.0.5
+
+## 4.2.5
+
+### Patch Changes
+
+- [#1312](https://github.com/ho-nl/m2-pwa/pull/1312) [`4e1fd4d9f`](https://github.com/ho-nl/m2-pwa/commit/4e1fd4d9fda2109de378be7e39382f7014a7ab54) Thanks [@paales](https://github.com/paales)! - upgraded dependencies
+
 ## 4.2.4
 
 ### Patch Changes

package/ChipMenu/ChipMenu.tsx

@@ -2,13 +2,12 @@ import { Chip, ChipProps, Menu, MenuProps, menuClasses, SxProps, Theme } from '@
 import React, { PropsWithChildren, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { SectionHeader } from '../SectionHeader/SectionHeader'
-import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 
-const { classes, selectors } = extendableComponent('FilterEqual', ['chip'] as const)
-
-export type ChipMenuProps = PropsWithChildren<Omit<ChipProps, 'children'>> & {
+export type ChipMenuProps = PropsWithChildren<
+  Omit<ChipProps<'button'>, 'children' | 'component'>
+> & {
   selectedLabel?: React.ReactNode
   selected: boolean
   onClose?: () => void
@@ -41,35 +40,21 @@ export function ChipMenu(props: ChipMenuProps) {
   return (
     <>
       <Chip
-        color='default'
+        component='button'
+        size='responsive'
+        color={selectedAndMenuHidden ? 'primary' : 'default'}
         clickable
         onDelete={
-          onDelete || ((event: React.MouseEvent) => setOpenEl(event.currentTarget.parentElement))
+          onDelete ||
+          ((event: React.MouseEvent<HTMLButtonElement>) =>
+            setOpenEl(event.currentTarget.parentElement))
         }
-        onClick={(event) => {
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
           setOpenEl(event.currentTarget)
         }}
         deleteIcon={deleteIcon}
         {...chipProps}
         label={selectedLabel ?? label}
-        className={`${classes.chip} ${chipProps.className ?? ''} ${
-          selectedAndMenuHidden ? 'MuiChip-selected' : ''
-        }`}
-        sx={[
-          { bgcolor: 'background.default' },
-          selectedAndMenuHidden &&
-            ((theme) => ({
-              borderColor: 'text.primary',
-              color: 'text.primary',
-              '&:hover': {
-                background: `${theme.palette.background.default} !important`,
-                borderColor: `${theme.palette.divider} !important`,
-              },
-              '&:focus': {
-                background: `${theme.palette.background.paper} !important`,
-              },
-            })),
-        ]}
       />
 
       <Menu
@@ -112,5 +97,3 @@ export function ChipMenu(props: ChipMenuProps) {
     </>
   )
 }
-
-ChipMenu.selectors = selectors

package/Footer/Footer.tsx

@@ -35,23 +35,22 @@ export function Footer(props: FooterProps) {
           borderTop: `1px solid ${theme.palette.divider}`,
           display: 'grid',
           alignItems: 'center',
-
           padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
           justifyItems: 'center',
           gridTemplateAreas: `
-          'switcher switcher'
-          'support support'
-          'social social'
-          'links links'
-        `,
-          gap: theme.spacings.md,
+            'switcher switcher'
+            'support support'
+            'social social'
+            'links links'
+          `,
+          gap: theme.spacings.sm,
           '& > *': { maxWidth: 'max-content' },
 
           [theme.breakpoints.up('sm')]: {
             gridTemplateAreas: `
-            'social switcher'
-            'links support'
-          `,
+              'social switcher'
+              'links support'
+            `,
             justifyItems: 'start',
             padding: `${theme.page.vertical} ${theme.page.horizontal}`,
             gridTemplateColumns: 'auto auto',

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,10 +1,11 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
 import { t } from '@lingui/macro'
-import { Box } from '@mui/material'
+import { Box, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
 import { IconSvg } from '../../IconSvg'
+import { responsiveVal } from '../../Styles'
 import { iconChevronLeft } from '../../icons'
 
 export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
@@ -22,6 +23,19 @@ export function useShowBack() {
   return false
 }
 
+const buttonSx: SxProps<Theme> = (theme) => ({
+  '&:not(.Mui-disabled)': { boxShadow: 6 },
+  [theme.breakpoints.down('md')]: {
+    minWidth: 'auto',
+    paddingLeft: responsiveVal(8, 11),
+    paddingRight: responsiveVal(8, 11),
+    '& .MuiButton-startIcon': {
+      marginRight: 0,
+      marginLeft: 0,
+    },
+  },
+})
+
 export function LayoutHeaderBack(props: BackProps) {
   const router = useRouter()
   const path = router.asPath.split('?')[0]
@@ -40,7 +54,7 @@ export function LayoutHeaderBack(props: BackProps) {
     return (
       <LinkOrButton
         onClick={() => router.back()}
-        button={{ variant: 'pill' }}
+        button={{ variant: 'pill', sx: buttonSx }}
         color='inherit'
         startIcon={backIcon}
         aria-label={label}
@@ -57,7 +71,7 @@ export function LayoutHeaderBack(props: BackProps) {
     return (
       <PageLink href={up.href} passHref>
         <LinkOrButton
-          button={{ variant: 'pill' }}
+          button={{ variant: 'pill', sx: buttonSx }}
           startIcon={backIcon}
           aria-label={up.title}
           color='inherit'

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -341,7 +341,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                  * padding we'll run into the issue that the user can't scroll to the bottom. We
                  * can't change this value with JS as that causes much jank
                  */
-                '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: 56 },
+                '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: '56px' },
                 '&.variantSmBottom.sizeSmFull': {
                   minHeight: `calc(100vh - ${theme.appShell.headerHeightSm} * 0.5)`,
                 },

package/LayoutParts/DesktopHeaderBadge.tsx

@@ -1,6 +1,6 @@
 import { Badge, BadgeProps } from '@mui/material'
 
-// todo: replace with theming
+/** Note: This should _only_ be used on the Desktop, use a standard Badge for other usecases. */
 export function DesktopHeaderBadge(props: BadgeProps) {
   const { sx = false } = props
   return (

package/LayoutParts/MenuFab.tsx

@@ -1,8 +1,21 @@
-import { Divider, Fab, ListItem, Menu, styled, Box, SxProps, Theme } from '@mui/material'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import {
+  Divider,
+  Fab,
+  ListItem,
+  Menu,
+  styled,
+  Box,
+  SxProps,
+  Theme,
+  FabProps,
+  MenuProps as MenuPropsType,
+} from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
 import { IconSvg } from '../IconSvg'
+import { useScrollY } from '../Layout/hooks/useScrollY'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { useFabSize } from '../Theme'
@@ -18,21 +31,34 @@ export type MenuFabProps = {
   menuIcon?: React.ReactNode
   closeIcon?: React.ReactNode
   sx?: SxProps<Theme>
+  MenuProps?: MenuPropsType
+} & Pick<FabProps, 'color' | 'size' | 'variant'>
+
+const name = 'MenuFab'
+const parts = ['wrapper', 'fab', 'shadow', 'menu'] as const
+type OwnerState = {
+  scrolled: boolean
 }
 
-const { classes, selectors } = extendableComponent('MenuFab', [
-  'wrapper',
-  'fab',
-  'shadow',
-  'menu',
-] as const)
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function MenuFab(props: MenuFabProps) {
-  const { children, secondary, search, menuIcon, closeIcon, sx = [] } = props
+  const {
+    children,
+    secondary,
+    search,
+    menuIcon,
+    closeIcon,
+    sx = [],
+    MenuProps,
+    ...fabProps
+  } = props
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
   const { opacity, scale, shadowOpacity } = useFabAnimation()
+  const scrollY = useScrollY()
+  const scrolled = useMotionValueValue(scrollY, (y) => y > 10)
 
   useEffect(() => {
     const clear = () => setOpenEl(null)
@@ -41,8 +67,15 @@ export function MenuFab(props: MenuFabProps) {
   }, [router])
   const fabIconSize = useFabSize('responsive')
 
+  const classes = withState({ scrolled })
+
   return (
-    <Box sx={[{ width: fabIconSize, height: fabIconSize }, ...(Array.isArray(sx) ? sx : [sx])]}>
+    <Box
+      sx={[
+        { position: 'relative', width: fabIconSize, height: fabIconSize },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <MotionDiv
         className={classes.wrapper}
         sx={(theme) => ({
@@ -54,6 +87,8 @@ export function MenuFab(props: MenuFabProps) {
         style={{ scale, opacity }}
       >
         <Fab
+          // todo: replace color='inverted' and remove styles here when Fab color is extendable
+          // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js#L193-L202
           color='inherit'
           aria-label='Open Menu'
           onClick={(event) => setOpenEl(event.currentTarget)}
@@ -69,6 +104,7 @@ export function MenuFab(props: MenuFabProps) {
             color: theme.palette.background.paper,
           })}
           className={classes.fab}
+          {...fabProps}
         >
           {closeIcon ?? (
             <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
@@ -102,6 +138,7 @@ export function MenuFab(props: MenuFabProps) {
           PaperProps={{
             sx: (theme) => ({
               backgroundColor: theme.palette.background.paper,
+              backgroundImage: 'unset',
               color: theme.palette.text.primary,
               minWidth: responsiveVal(200, 280),
               marginTop: '12px',
@@ -112,6 +149,7 @@ export function MenuFab(props: MenuFabProps) {
           }}
           className={classes.menu}
           MenuListProps={{ dense: true }}
+          {...MenuProps}
         >
           {[
             search ? (
@@ -128,4 +166,3 @@ export function MenuFab(props: MenuFabProps) {
     </Box>
   )
 }
-MenuFab.selectors = selectors

package/PageMeta/PageMeta.tsx

@@ -37,7 +37,16 @@ export function useCanonical(incomming?: Canonical) {
 
   if (!canonical) return canonical
 
-  if (canonical?.startsWith('/')) {
+  if (!canonical.startsWith('http') && !canonical.startsWith('/')) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `canonical is relative (${canonical}), a canonical must start with '/', 'http://' or 'https://'`,
+      )
+    }
+    canonical = `/${canonical}`
+  }
+
+  if (canonical.startsWith('/')) {
     if (!process.env.NEXT_PUBLIC_SITE_URL) {
       if (process.env.NODE_ENV !== 'production') {
         throw Error('NEXT_PUBLIC_SITE_URL is not defined in .env')
@@ -59,7 +68,7 @@ export function useCanonical(incomming?: Canonical) {
     canonical = `${process.env.NEXT_PUBLIC_SITE_URL}${href}`
   }
 
-  if (canonical && !(canonical ?? 'http').startsWith('http')) {
+  if (!canonical.startsWith('http')) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(
         `canonical must start with '/', 'http://' or 'https://', '${canonical}' given`,

package/Row/ImageText/ImageText.tsx

@@ -29,7 +29,7 @@ export function ImageText(props: ImageTextProps) {
               : theme.palette.background.paper,
           justifyItems: 'center',
           columnGap: theme.spacings.lg,
-          paddingTop: theme.spacings.lg,
+          marginTop: theme.spacings.lg,
           paddingBottom: theme.spacings.lg,
           [theme.breakpoints.up('md')]: {
             paddingTop: 0,

package/StarRatingField/StarRatingField.tsx

@@ -25,16 +25,16 @@ export function StarRatingField(props: StarRatingFieldProps) {
         <IconSvg
           src={iconStar}
           size='large'
-          className={classes.startEmpty}
-          sx={{ fill: '#FFDA1C', stroke: 'none', margin: '0 3px' }}
+          className={classes.starFull}
+          sx={(theme) => ({ fill: theme.palette.divider, stroke: 'none', margin: '0 3px' })}
         />
       }
       icon={
         <IconSvg
           src={iconStar}
           size='large'
-          className={classes.starFull}
-          sx={(theme) => ({ fill: theme.palette.divider, stroke: 'none', margin: '0 3px' })}
+          className={classes.startEmpty}
+          sx={{ fill: '#FFDA1C', stroke: 'none', margin: '0 3px' }}
         />
       }
       onChange={(event, value) => {

package/Theme/MuiChip.ts

@@ -0,0 +1,86 @@
+import { ComponentsVariants, darken, experimental_sx as sx } from '@mui/material'
+import { responsiveVal } from '../Styles'
+
+declare module '@mui/material/Chip/Chip' {
+  interface ChipPropsSizeOverrides {
+    responsive: true
+  }
+  interface ChipPropsVariantOverrides {
+    ['outlinedHighlighted']: true
+  }
+}
+
+type ChipVariants = NonNullable<ComponentsVariants['MuiChip']>
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MuiChip: ChipVariants = [
+  {
+    props: {},
+    style: { '& .MuiChip-icon': { fontSize: '1.3em' } },
+  },
+  {
+    props: { size: 'small' },
+    style: sx({
+      typography: 'caption',
+    }),
+  },
+  {
+    props: { size: 'medium' },
+    style: sx({
+      height: responsiveVal(26, 30),
+      paddingLeft: responsiveVal(3, 6),
+      paddingRight: responsiveVal(3, 6),
+      typography: 'caption',
+    }),
+  },
+  {
+    props: { size: 'responsive' },
+    style: sx({
+      height: responsiveVal(32, 40),
+      paddingLeft: responsiveVal(4, 8),
+      paddingRight: responsiveVal(4, 8),
+      borderRadius: '99em',
+      typography: 'body2',
+      '& .MuiChip-label': {
+        paddingLeft: responsiveVal(6, 10),
+        paddingRight: responsiveVal(6, 10),
+      },
+    }),
+  },
+  {
+    props: { variant: 'outlined' },
+    style: ({ theme }) => ({
+      borderColor: theme.palette.divider,
+      backgroundColor: theme.palette.background.default,
+      '&:active': {
+        boxShadow: 'none',
+      },
+      '& .MuiChip-deleteIcon': {
+        color: theme.palette.text.primary,
+      },
+      '&.MuiChip-clickable:hover': {
+        backgroundColor: darken(theme.palette.background.default, 0.05),
+      },
+      '& .MuiChip-deleteIcon:hover': {
+        color: theme.palette.text.primary,
+      },
+    }),
+  },
+  {
+    props: { color: 'primary' },
+    style: ({ theme }) => ({
+      borderColor: theme.palette.text.primary,
+      color: theme.palette.text.primary,
+      '&:hover': {
+        background: `${theme.palette.background.default} !important`,
+        borderColor: `${theme.palette.divider} !important`,
+      },
+      '&:focus': {
+        background: `${theme.palette.background.paper} !important`,
+      },
+      '& .MuiChip-deleteIcon:hover': {
+        color: theme.palette.text.primary,
+      },
+    }),
+  },
+]

package/Theme/MuiFab.ts

@@ -44,6 +44,11 @@ declare module '@mui/material/Fab/Fab' {
   interface FabPropsSizeOverrides {
     responsive: 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
+  // interface FabPropsColorOverrides {
+  //   inverted: true
+  // }
 }
 
 function fabWidthHeight(size: FabSize, theme: Theme) {
@@ -67,3 +72,19 @@ export const MuiFabSizes: FabVariants = sizes.map((size) => ({
   props: { size },
   style: ({ theme }) => fabWidthHeight(size, theme),
 }))
+
+// todo: Wait for the color prop to be exendable and add tho theme.
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js#L193-L202
+// export const MuiFabInverted: FabVariants = [
+//   {
+//     props: { color: 'inverted' },
+//     style: ({ theme }) => ({
+//       boxShadow: 'none',
+//       '&:hover, &:focus': {
+//         background: theme.palette.text.primary,
+//       },
+//       background: theme.palette.text.primary,
+//       color: theme.palette.background.paper,
+//     }),
+//   },
+// ]

package/Theme/MuiSlider.ts

@@ -1,29 +1,43 @@
-import { Components, Theme } from '@mui/material'
+import { ComponentsVariants } from '@mui/material'
 
-/**
- * Not yet possible to define a size="large" for the Slider due to a limitation in Material-UI
- * https://github.com/mui-org/material-ui/issues/27130#issuecomment-1006425575
- *
- * If that has been fixed most of the styles can be removed here:
- * packages/magento-product/components/ProductListFilters/FilterRangeType.tsx
- */
-
-// declare module '@mui/material/Slider' {
-//   interface SliderPropsSizeOverrides {
-//     large: true
-//   }
-// }
+declare module '@mui/material/Slider/Slider' {
+  interface SliderPropsSizeOverrides {
+    large: true
+  }
+}
+type SliderVariants = NonNullable<ComponentsVariants['MuiSlider']>
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const MuiSlider = (theme: Theme): Components['MuiSlider'] => ({
-  // variants: [
-  //   {
-  //     props: { size: 'large' },
-  //     style: {
-  //       '& .MuiSlider-rail': { height: 4, borderRadius: '2px' },
-  //       '& .MuiSlider-track': { height: 4 },
-  //       '& .MuiSlider-thumb': { width: 28, height: 28 },
-  //     },
-  //   },
-  // ],
-})
+export const MuiSlider: SliderVariants = [
+  {
+    props: {},
+    style: ({ theme }) => ({
+      '& .MuiSlider-rail': {
+        color: theme.palette.text.disabled,
+      },
+      '& .MuiSlider-thumb': {
+        background: theme.palette.background.default,
+        boxShadow: theme.shadows[6],
+      },
+    }),
+  },
+  {
+    props: { size: 'large' },
+    style: {
+      maxWidth: `calc(100% - 28px)`,
+      margin: `0 auto`,
+      display: 'block',
+      '& .MuiSlider-rail': {
+        height: 4,
+        borderRadius: '2px',
+      },
+      '& .MuiSlider-track': {
+        height: 4,
+      },
+      '& .MuiSlider-thumb': {
+        width: '28px',
+        height: '28px',
+      },
+    },
+  },
+]

package/Theme/index.ts

@@ -1,6 +1,7 @@
-export * from './MuiSlider'
+export * from './DarkLightModeThemeProvider'
 export * from './MuiButton'
-export * from './MuiSnackbar'
+export * from './MuiChip'
 export * from './MuiFab'
+export * from './MuiSlider'
+export * from './MuiSnackbar'
 export * from './themeDefaults'
-export * from './DarkLightModeThemeProvider'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.2.4",
+  "version": "4.3.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,8 +20,8 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@graphcommerce/framer-next-pages": "^3.1.2",
-    "@graphcommerce/framer-scroller": "^2.0.6",
-    "@graphcommerce/framer-utils": "^3.0.4",
+    "@graphcommerce/framer-scroller": "^2.1.0",
+    "@graphcommerce/framer-utils": "^3.0.5",
     "@graphcommerce/image": "^3.1.1",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
@@ -38,10 +38,10 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
-    "@graphcommerce/prettier-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.0.6",
+    "@graphcommerce/prettier-config-pwa": "^4.0.4",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.1",
+    "@playwright/test": "^1.19.2",
     "@types/react-is": "^17.0.3",
     "typescript": "^4.6.2"
   }