[RNMobile] Fix/button radius update more units #33434
Merged
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
enejb
added
[Block] Buttons
This was referenced Jul 14, 2021
enejb
changed the title
|
Size Change: +9 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
dcalhoun
approved these changes
Jul 15, 2021
There was a problem hiding this comment.
Thank you for addressing this! I verified the provided test cases worked as expected on an iPhone SE, iOS 14.6. I also tested the a11y with VoiceOver and it appeared to function as before. 👍🏻
I left a few comments requesting some clarification, but I don't necessarily think they should block this work.
| @@ -105,6 +104,11 @@ function UnitControl( { | |||
| [ anchorNodeRef?.current ] | |||
| ); | |||
|
|
|||
| const getDecimal = ( step ) => { | |||
| const stepToString = step; | |||
| return step === 1 ? 0 : stepToString.toString().length - 2; | |||
There was a problem hiding this comment.
I don't follow exactly what this is accomplishing. Is this toggling between zero places and two places? Why was this put in place and decimalNum removed?
There was a problem hiding this comment.
If I understand correctly, it appears to be moved here so that the decimalNum value can be calculated on the fly from the UnitControl's step value as that may change based on the current unit selection.
Perhaps a comment in code here could help clarify?
There was a problem hiding this comment.
I updated the code to be a bit more self explanatory and more readable (how I would do things in my head vs a strange equation).
Instead of passing in the decimalNum via a prop, I thought it was better to use the step to calculate it. This makes things work a bit more as expected and reduces bugs. Since you don't end up in situations where the step and the decimalNum are off and the user incroments the step but the numbers show are not going up. This happens when the decimalNum is set to 1 ( 2.2 ) and the step is set to 0.01 for example.
Currently if you don't define the step they are pulled from CSS_UNITS which has different values for each unit so just passing in a single decimalNum you endup with things not working as expected. .
There was a problem hiding this comment.
@enejb thank you for taking the time to explain. 🙇🏻 The changes make a lot of sense to me now, and I agree they will help avoid introducing bugs. 💯
aaronrobertshaw
approved these changes
Jul 15, 2021
There was a problem hiding this comment.
Nice work 👍
This works as advertised for me. The example block code displayed correctly and I was unable to break the border radius via the controls, adding new blocks etc.
I think David's suggested tweaks regarding the comments would be a worthwhile improvement. Perhaps also add a comment to explain why the UnitControl decimal is now calculated from the step value.
ceyhun
reviewed
Jul 15, 2021
There was a problem hiding this comment.
I've tested this on iOS and Android and found an issue with 0.75em/rem values on both. Steps to reproduce:
- Add buttons block
- Enter some text in the button, like "Test"
- Go to button settings
- In
Border Radius, presspxand selectemorrem - Enter
0.75as value - Close the bottom sheet
- Exit editor and save as draft
- Re-open the draft post with buttons
It shows Problem displaying block.
|
Also on iOS, I tried changing the region from Settings -> General -> Region to comma-as-decimal-seperator.mp4 |
|
Thanks for catching these issues @ceyhun! I will work on a fix for them now. |
@ceyhun I notices that this happened because you are trying to add a decimal value for |
I just tried with comma-em.mp4 |
This resulted in somecase the up or down clicks with proper incoments.
This unit now gets calculated from the step value.
from 1.00 to 1
enejb
force-pushed
the
fix/button-radius-update-more-units
branch
from
bda2534 to
72995e7
Compare
|
@ceyhun can you take another look ? |
|
I confirmed that both issues are resolved ( |
ceyhun
pushed a commit
that referenced
this pull request
Jul 16, 2021
* Fix: Button button value to be stored as a value + unit * Update the test to include the px values. * Fix toFixed to work more as expected. This resulted in somecase the up or down clicks with proper incoments. * Remove decimalNum propertly from unit control This unit now gets calculated from the step value. * Update Button Component to now accept any unit. * fix toFixed to return a number instead of a string * Update with comments for more clarity for getDecimal * Only calculate decimalNum once. * Make the stepper cell return integers instead of floats for nicer numbers * Normalize floats to always include leading zero * Make the code not repeat itself * Display nicer numbers when the numbers are integers from 1.00 to 1 * Adjust the intergration test so it passes again * minor
This was referenced Jul 16, 2021
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.
Gutenberg Mobile PR: wordpress-mobile/gutenberg-mobile#3723
Description
This PR updates the Button Block component to support different kinds of button border-radius values that contain both values and units.
It surpasses what #33405 does by using the UnitControl component.
How has this been tested?
Create content with a different button radius. Such as:
Not that the buttons radius settings looks and works as expected.
Try updating the values. Do they update as you would expect?
Are you able to use the - and + button?
Are you able to use text input as you would expect?
Screenshots
Types of changes
Bug fix.
Checklist:
*.native.jsfiles for terms that need renaming or removal).