Migrate Payment and PaymentForm to Chakra V3#2661
Migrate Payment and PaymentForm to Chakra V3#2661unandyala merged 25 commits intofeature/chakra-ui-upgrade-v3from
Conversation
Since the wrapper Button already handles the whitespace for you.
🎉 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) |
| </IconButton> | ||
| ) : undefined | ||
| ) : ( | ||
| _inputProps?.endElement |
There was a problem hiding this comment.
In v3, the pattern is to use InputGroup with an endElement prop instead of InputRightElement.
| return onChange(formattedNumber) | ||
| } | ||
| }, | ||
| endElement: |
There was a problem hiding this comment.
In v3, the pattern is to use InputGroup with an endElement prop instead of InputRightElement.
| <ChakraField.Label> | ||
| <Flex align="center" justify="space-between"> | ||
| <Box>{fields.securityCode.label}</Box> | ||
| <Tooltip |
There was a problem hiding this comment.
For ease of use, created a closed component composition for the Tooltip component as suggest in the Chakra doc
| description: 'Generic credit card security code help text' | ||
| }) | ||
|
|
||
| const handleTooltipClose = () => { |
There was a problem hiding this comment.
Tooltip responds to these events by default. So we don't need this
| @@ -0,0 +1,87 @@ | |||
| /* | |||
There was a problem hiding this comment.
For ease of use, created a closed component composition for the Tooltip component as suggest in the Chakra doc
unandyala
changed the title
unandyala
changed the title
| id: 'payment_selection.tooltip.secure_payment' | ||
| })} | ||
| contentProps={{ | ||
| css: {'--tooltip-bg': 'colors.blue.800'} |
There was a problem hiding this comment.
Nit: what do you think we make a constant for tthis at the top of checkout? or do you think it is not worth it?
Migrate Payment and PaymentForm to Chakra V3 (#2661)
4 participants
Description
@W-18685094 @W-18685119
Migrate Payment and PaymentForm to Chakra V3
Chakra.V3.Payment.Demo.mov
How to Test-Drive This PR