Fixes Click to Pay link looking buttons into proper buttons #3029
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
m1aw
requested review from
pabloai,
sponglord,
ribeiroguilherme and
longyulongyu
as code owners
🦋 Changeset detectedLatest commit: c8fade8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Size Change: +122 B (+0.02%) Total Size: 769 kB
ℹ️ View Unchanged
|
size-limit report 📦
|
m1aw
commented
Dec 18, 2024
| <Field | ||
| name="oneTimePassword" | ||
| label={i18n.get('ctp.otp.fieldLabel')} | ||
| labelEndAdornment={ |
There was a problem hiding this comment.
@ribeiroguilherme this was the reason the test was failing.
Basically we were creating the button inside the label, which made that the label invalid since it can only contain text. So all the selectors where not picking it up.
So I have refactored it a bit and moved the button to the outside of the label and used so CSS trickery to place the button where it was previously.
My main concern with the change is the change in classnames, but let me know what you think.
There was a problem hiding this comment.
The change is fine - it was not following the correct approach and now it is, so there is no discussion about it. I am just concern about merchant's customization in this case.
Some classnames changed, and merchants might have target the 'links' CSS and this impact their changes, but seems like there is not much to do in this case as we need to apply this fix.
There was a problem hiding this comment.
Yeah, that's what I was concerned too. I tried to minimize the impact of those changes, but I wanted to know your opinion on it.
In that case let's proceed with this.
|
ribeiroguilherme
approved these changes
Dec 19, 2024
| <Field | ||
| name="oneTimePassword" | ||
| label={i18n.get('ctp.otp.fieldLabel')} | ||
| labelEndAdornment={ |
There was a problem hiding this comment.
The change is fine - it was not following the correct approach and now it is, so there is no discussion about it. I am just concern about merchant's customization in this case.
Some classnames changed, and merchants might have target the 'links' CSS and this impact their changes, but seems like there is not much to do in this case as we need to apply this fix.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
We had some elements that should have been buttons but weren't. This prevented behind activated with the keyboard.
This PR makes them proper buttons, but also adds the
variantlink to the button types.To keep things consistent with the rest of the SDK the style of this buttons has also been changed from primary color (black) with underline to link color (blue) with no underline.
We also changed some markup so this might be a breaking change (UI wise), since both CSS classes and the overall markup.
Tested scenarios
All tests pass and it was manually tested with my CTP both buttons work and also the states of the OTP request message.
Fixed issue:
#3009