@graphcommerce/next-ui 6.1.1-canary.3 → 6.1.1-canary.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/Row/RowLinks/RowLinks.tsx +72 -68
  3. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Change Log
2
2
 
3
+ ## 6.1.1-canary.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1913](https://github.com/graphcommerce-org/graphcommerce/pull/1913) [`17eac116d`](https://github.com/graphcommerce-org/graphcommerce/commit/17eac116dbf2b811a67bfefd735d5a5a3e2b20dc) - Fixed zIndex issue with CartFab and ScrollerButton ([@bramvanderholst](https://github.com/bramvanderholst))
8
+
9
+ - [#1913](https://github.com/graphcommerce-org/graphcommerce/pull/1913) [`61b1987eb`](https://github.com/graphcommerce-org/graphcommerce/commit/61b1987eb8d37566cb4675f0ae962925aef2fc6d) - Fixed RowLinks ScrollerButton alignment when content is shown beside the Scroller ([@bramvanderholst](https://github.com/bramvanderholst))
10
+
11
+ ## 6.1.1-canary.4
12
+
3
13
  ## 6.1.1-canary.3
4
14
 
5
15
  ## 6.1.1-canary.2
package/Row/RowLinks/RowLinks.tsx CHANGED
@@ -20,6 +20,7 @@ const compName = 'RowLinks' as const
20
20
  const parts = [
21
21
  'root',
22
22
  'scroller',
23
+ 'scrollerWrapper',
23
24
  'title',
24
25
  'copy',
25
26
  'swipperButton',
@@ -84,77 +85,80 @@ export function RowLinks(props: RowLinksProps) {
84
85
  {copy}
85
86
  </Box>
86
87
  )}
87
- <ScrollerProvider scrollSnapAlign='end'>
88
- <Scroller
89
- className={classes.scroller}
90
- hideScrollbar
91
- sx={(theme) => ({
92
- justifyContent: 'start',
93
- gap: `${theme.spacings.md}`,
94
- gridAutoColumns: `max-content`,
95
- alignItems: 'center',
96
- '&.smGridDirInline > *': {
97
- scrollSnapAlign: {
98
- xs: 'center',
99
- md: 'end',
88
+ <Box className={classes.scrollerWrapper} sx={{ position: 'relative' }}>
89
+ <ScrollerProvider scrollSnapAlign='end'>
90
+ <Scroller
91
+ className={classes.scroller}
92
+ hideScrollbar
93
+ sx={(theme) => ({
94
+ justifyContent: 'start',
95
+ gap: `${theme.spacings.md}`,
96
+ gridAutoColumns: `max-content`,
97
+ alignItems: 'center',
98
+ '&.smGridDirInline > *': {
99
+ scrollSnapAlign: {
100
+ xs: 'center',
101
+ md: 'end',
102
+ },
100
103
  },
101
- },
102
- })}
103
- >
104
- {inlineTitle && (
105
- <Typography variant='subtitle1' component='h2' className={classes.title}>
106
- {title}
107
- </Typography>
108
- )}
109
- {children}
110
- </Scroller>
111
- <Box
112
- className={classes.centerLeft}
113
- sx={(theme) => ({
114
- display: 'grid',
115
- gridAutoFlow: 'row',
116
- gap: theme.spacings.xxs,
117
- position: 'absolute',
118
- left: theme.spacings.sm,
119
- top: `calc(50% - calc(${fabSize} / 2))`,
120
- })}
121
- >
122
- <ScrollerButton
123
- direction='left'
124
- className={classes.swipperButton}
125
- sx={{
126
- display: 'flex',
127
- zIndex: 'inherit',
128
- ...mode,
129
- }}
130
- size='responsive'
104
+ })}
131
105
  >
132
- <IconSvg src={iconChevronLeft} />
133
- </ScrollerButton>
134
- </Box>
135
- <Box
136
- className={classes.centerRight}
137
- sx={(theme) => ({
138
- display: 'grid',
139
- gap: theme.spacings.xxs,
140
- position: 'absolute',
141
- right: theme.spacings.sm,
142
- top: `calc(50% - calc(${fabSize} / 2))`,
143
- })}
144
- >
145
- <ScrollerButton
146
- direction='right'
147
- className={classes.swipperButton}
148
- sx={{
149
- display: 'flex',
150
- ...mode,
151
- }}
152
- size='responsive'
106
+ {inlineTitle && (
107
+ <Typography variant='subtitle1' component='h2' className={classes.title}>
108
+ {title}
109
+ </Typography>
110
+ )}
111
+ {children}
112
+ </Scroller>
113
+ <Box
114
+ className={classes.centerLeft}
115
+ sx={(theme) => ({
116
+ display: 'grid',
117
+ gridAutoFlow: 'row',
118
+ gap: theme.spacings.xxs,
119
+ position: 'absolute',
120
+ left: theme.spacings.xs,
121
+ top: `calc(50% - calc(${fabSize} / 2))`,
122
+ })}
153
123
  >
154
- <IconSvg src={iconChevronRight} />
155
- </ScrollerButton>
156
- </Box>
157
- </ScrollerProvider>
124
+ <ScrollerButton
125
+ direction='left'
126
+ className={classes.swipperButton}
127
+ sx={{
128
+ display: 'flex',
129
+ zIndex: 'inherit',
130
+ ...mode,
131
+ }}
132
+ size='responsive'
133
+ >
134
+ <IconSvg src={iconChevronLeft} />
135
+ </ScrollerButton>
136
+ </Box>
137
+ <Box
138
+ className={classes.centerRight}
139
+ sx={(theme) => ({
140
+ display: 'grid',
141
+ gap: theme.spacings.xxs,
142
+ position: 'absolute',
143
+ right: theme.spacings.xs,
144
+ top: `calc(50% - calc(${fabSize} / 2))`,
145
+ })}
146
+ >
147
+ <ScrollerButton
148
+ direction='right'
149
+ className={classes.swipperButton}
150
+ sx={{
151
+ display: 'flex',
152
+ zIndex: 'inherit',
153
+ ...mode,
154
+ }}
155
+ size='responsive'
156
+ >
157
+ <IconSvg src={iconChevronRight} />
158
+ </ScrollerButton>
159
+ </Box>
160
+ </ScrollerProvider>
161
+ </Box>
158
162
  </Row>
159
163
  )
160
164
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/next-ui",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "6.1.1-canary.3",
5
+ "version": "6.1.1-canary.5",
6
6
  "author": "",
7
7
  "license": "MIT",
8
8
  "sideEffects": false,
@@ -18,18 +18,18 @@
18
18
  "@emotion/react": "^11.10.6",
19
19
  "@emotion/server": "^11.4.0",
20
20
  "@emotion/styled": "^11.10.6",
21
- "@graphcommerce/framer-next-pages": "6.1.1-canary.3",
22
- "@graphcommerce/framer-scroller": "6.1.1-canary.3",
23
- "@graphcommerce/framer-utils": "6.1.1-canary.3",
24
- "@graphcommerce/image": "6.1.1-canary.3",
21
+ "@graphcommerce/framer-next-pages": "6.1.1-canary.5",
22
+ "@graphcommerce/framer-scroller": "6.1.1-canary.5",
23
+ "@graphcommerce/framer-utils": "6.1.1-canary.5",
24
+ "@graphcommerce/image": "6.1.1-canary.5",
25
25
  "cookie": "^0.5.0",
26
26
  "react-is": "^18.2.0",
27
27
  "schema-dts": "^1.1.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@graphcommerce/eslint-config-pwa": "6.1.1-canary.3",
31
- "@graphcommerce/prettier-config-pwa": "6.1.1-canary.3",
32
- "@graphcommerce/typescript-config-pwa": "6.1.1-canary.3",
30
+ "@graphcommerce/eslint-config-pwa": "6.1.1-canary.5",
31
+ "@graphcommerce/prettier-config-pwa": "6.1.1-canary.5",
32
+ "@graphcommerce/typescript-config-pwa": "6.1.1-canary.5",
33
33
  "@types/cookie": "^0.5.1",
34
34
  "@types/react-is": "^17.0.3",
35
35
  "typescript": "4.9.5"