W-18672799 Chakra UI v3 header migration#2691
W-18672799 Chakra UI v3 header migration#2691alexvuong merged 17 commits intofeature/chakra-ui-upgrade-v3from
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
| // 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' |
There was a problem hiding this comment.
| to={updatedHref} | ||
| ref={ref} | ||
| /> | ||
| <ChakraLink asChild {...props} css={css} ref={ref}> |
There was a problem hiding this comment.
Chakra V3 advised to not use as to render component, instead using asChild and render children components
|
|
||
| const isActive = useNavLink | ||
| ? (_, location) => { | ||
| return location.pathname.endsWith(_href) |
There was a problem hiding this comment.
Since we have multi-site, so we only need check the last section of the pathname.
| @@ -8,18 +8,47 @@ import {defineRecipe} from '@chakra-ui/react' | |||
|
|
|||
| export default defineRecipe({ | |||
| slots: [ | |||
There was a problem hiding this comment.
Rearrange by alphabetical order for easy searching
alexvuong
changed the title
| const {buildUrl} = useMultiSite() | ||
| const updatedHref = buildUrl(_href) | ||
|
|
||
| const isActive = useNavLink |
There was a problem hiding this comment.
Chakra link no longers at active class by default, we need to do it here and restyling the active class manually for account menu in the header
|
@alexvuong Are the product categories inside the nav menu part of the ticket's scope? If yes, I wonder why the categories are no longer lazy loaded.. On desktop, the categories are immediately shown when you open the nav menu. |
|
Visually, I think it's all good, except for this small thing in the mobile menu:
|
packages/extension-chakra-storefront/src/pages/cart/partials/empty-cart.jsx
Show resolved
Hide resolved
* Migrate Header to Chakra v3 --------- Co-authored-by: Vincent Marta <vmarta@salesforce.com>
4 participants
Description
Header Desktop
Header Mobile
Menu dropdown
Active menu style
drawer on mobile
Types of Changes
Changes
How to Test-Drive This PR
Checklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization