Skip to content

W-18672799 Chakra UI v3 header migration #2691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexvuong merged 17 commits into from
Jul 2, 2025
Merged

W-18672799 Chakra UI v3 header migration #2691

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
0b589f5
Bring back the mobile menu
vmarta Jun 27, 2025
92e1969
fix header popover
alexvuong Jun 28, 2025
6343715
fix header popover
alexvuong Jun 30, 2025
19655b9
fix header
alexvuong Jun 30, 2025
6e98850
minor adjustment
alexvuong Jun 30, 2025
1057004
minor adjustment
alexvuong Jun 30, 2025
1b415cc
fix header tests
alexvuong Jun 30, 2025
3799844
fix failing tests
alexvuong Jun 30, 2025
153f1f7
fix React act warnings
alexvuong Jun 30, 2025
33e3709
revert code
alexvuong Jun 30, 2025
20fd974
fix react warning
alexvuong Jun 30, 2025
807fc9e
fix lint
alexvuong Jun 30, 2025
6c984c6
Merge branch 'feature/chakra-ui-upgrade-v3' into chakra-ui-v3-header-…
alexvuong Jul 2, 2025
99726fb
PR feedback
alexvuong Jul 2, 2025
dc3052e
revert some tests
alexvuong Jul 2, 2025
b9402ec
Pr address
alexvuong Jul 2, 2025
299f7af
Pr address
alexvuong Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
308 changes: 161 additions & 147 deletions packages/extension-chakra-storefront/src/components/header/index.jsx
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions packages/extension-chakra-storefront/src/components/header/slot-a.jsx
View file
Open in desktop

This file was deleted.

56 changes: 28 additions & 28 deletions packages/extension-chakra-storefront/src/components/with-layout/with-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,23 +67,22 @@ const PlaceholderComponent: React.FC = () => (
</Center>
)

// const DrawerMenuItemWithData = withCommerceSdkReactHookData(
// ({itemComponent: ItemComponent, data, ...rest}: any) => (
// <Fade in={true}>
// <ItemComponent {...rest} item={data} itemComponent={DrawerMenuItemWithData} />
// </Fade>
// ),
// {
// hook: useCategory,
// queryOptions: ({item}: {item: {id: string}}) => ({
// parameters: {
// id: item.id
// }
// }),
// placeholder: PlaceholderComponent
// }
// )
//
const DrawerMenuItemWithData = withCommerceSdkReactHookData(
({itemComponent: ItemComponent, data, ...rest}: any) => (
// TODO: should I keep the fade-in transition?
<ItemComponent {...rest} item={data} itemComponent={DrawerMenuItemWithData} />
),
{
hook: useCategory,
queryOptions: ({item}: {item: {id: string}}) => ({
parameters: {
id: item.id
}
}),
placeholder: PlaceholderComponent
}
)

const ListMenuContentWithData = withCommerceSdkReactHookData(
({data, ...rest}: any) => <ListMenuContent {...rest} item={data} />,
{
Expand Down Expand Up @@ -289,17 +288,18 @@ const withLayout = <P extends object>(WrappedComponent: React.ComponentType<P>)
onMyAccountClick={onAccountClick}
onWishlistClick={onWishlistClick}
>
{/* <HideOnDesktop>*/}
{/* <DrawerMenu*/}
{/* isOpen={isOpen}*/}
{/* onClose={onClose}*/}
{/* onLogoClick={onLogoClick}*/}
{/* root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}*/}
{/* itemsKey="categories"*/}
{/* itemsCountKey="onlineSubCategoriesCount"*/}
{/* itemComponent={DrawerMenuItemWithData}*/}
{/* />*/}
{/* </HideOnDesktop>*/}
{/* TODO: mobile menu */}
<HideOnDesktop>
<DrawerMenu
isOpen={open}
onClose={onClose}
onLogoClick={onLogoClick}
root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
itemsKey="categories"
itemsCountKey="onlineSubCategoriesCount"
itemComponent={DrawerMenuItemWithData}
/>
</HideOnDesktop>
<HideOnMobile>
<ListMenu
root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
Expand Down
5 changes: 4 additions & 1 deletion packages/extension-chakra-storefront/src/theme/components/base/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ const baseLinkStyles = {
const button = defineRecipe({
base: {
borderRadius: 'sm',
colorPalette: 'blue'
colorPalette: 'blue',
_focusVisible: {
outline: '2px solid transparent'
}
},
variants: {
variant: {
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/theme/components/project/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default defineSlotRecipe({
top: 0,
// can't import theme object in Chakra V3, Let's use a hardcode value for now.
// Will circle back when we start working on fixing component styling
zIndex: 1100
zIndex: 'sticky'
Copy link
Contributor Author

@alexvuong alexvuong Jun 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on https://www.chakra-ui.com/docs/theming/z-index

}
}
})
100 changes: 57 additions & 43 deletions packages/extension-chakra-storefront/src/theme/components/project/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,50 +8,23 @@ import {defineRecipe} from '@chakra-ui/react'

export default defineRecipe({
slots: [
Copy link
Contributor Author

@alexvuong alexvuong Jun 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rearrange by alphabetical order for easy searching

'accountIconButton',
'arrowDownIconButton',
'bodyContainer',
'container',
'content',
'searchContainer',
'bodyContainer',
'logo',
'dropdownMenuBody',
'dropdownMenuTitle',
'icons',
'accountIconButton',
'wishListIconButton',
'arrowDownIconButton',
'signout'
'logo',
'menuContent',
'menuPositioner',
'searchContainer',
'signout',
'wishListIconButton'
],
base: {
container: {
minWidth: 'xs',
width: 'full',
shadow: 'xs',
backgroundColor: 'white'
},
content: {
maxWidth: 'container.xxxl',
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: [4, 4, 6, 8],
paddingRight: [4, 4, 6, 8],
paddingTop: [1, 1, 2, 4],
paddingBottom: [3, 3, 2, 4]
},
searchContainer: {
order: [2, 2, 2, 'inherit'],
width: ['full', 'full', 'full', 60],
marginRight: [0, 0, 0, 4],
marginBottom: [1, 1, 2, 0]
},
bodyContainer: {
flex: '1'
},
logo: {
width: [8, 8, 8, 12],
height: [6, 6, 6, 8]
},
icons: {
marginBottom: [1, 1, 2, 0]
},
accountIcon: {
accountIconButton: {
height: 11,
minWidth: 'auto',
cursor: 'pointer',
Expand All @@ -63,7 +36,7 @@ export default defineRecipe({
outline: 0
}
},
arrowDown: {
arrowDownButton: {
height: 11,
minWidth: 'auto',
marginRight: 0,
Expand All @@ -77,9 +50,46 @@ export default defineRecipe({
},
display: ['none', 'none', 'none', 'block']
},
wishlistIcon: {
// More breathing room between the account and wishlist icons
marginLeft: 2
container: {
minWidth: 'xs',
width: 'full',
shadow: 'xs',
backgroundColor: 'white'
},
content: {
maxWidth: 'container.xxxl',
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: [4, 4, 6, 8],
paddingRight: [4, 4, 6, 8],
paddingTop: [1, 1, 2, 4],
paddingBottom: [3, 3, 2, 4]
},
bodyContainer: {
flex: '1'
},
dropdownMenuBody: {
padding: 0,
pb: 2
},
dropdownMenuTitle: {
px: 7,
py: 6,
pb: 2
},
iconButton: {
marginBottom: [1, 1, 2, 0]
},
logo: {
width: [8, 8, 8, 12],
height: [6, 6, 6, 8]
},

searchContainer: {
order: [2, 2, 2, 'inherit'],
width: ['full', 'full', 'full', 60],
marginRight: [0, 0, 0, 4],
marginBottom: [1, 1, 2, 0]
},
signout: {
width: '100%',
Expand All @@ -98,6 +108,10 @@ export default defineRecipe({
},
signoutIcon: {
marginRight: 2
},
wishlistIcon: {
// More breathing room between the account and wishlist icons
marginLeft: 2
}
}
})