borderRadius doesn't accept % or 0 in v4
Describe the bug
In v3 borderRadius="100%" was valid, in v4 is not anymore
To Reproduce
In v3 I was using this code for setting a border radius on an image, though upgrading to v4, this is throwing an exception Invalid border radius 100%:
<Image
src={resume.basics.image}
style={{
borderRadius: (theme.imageRadius || 0) + '%',
}}
/>
I tried to remove the % and it worked, but when I use 0 as value I receive the error Invalid border radius undefined.
Finally I was able to find a workaround using the 4 borderRadius props instead of the shorthand, this works:
<Image
src={resume.basics.image}
style={{
width: theme.imageSize,
borderTopLeftRadius: (theme.imageRadius || 0) + '%',
borderTopRightRadius: (theme.imageRadius || 0) + '%',
borderBottomLeftRadius: (theme.imageRadius || 0) + '%',
borderBottomRightRadius: (theme.imageRadius || 0) + '%',
marginLeft: 36,
marginRight: 20,
objectFit: 'cover',
}}
/>
https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e619da74e54024a37e183b0ca10013b06c00880059428001c2002e00f4ba30a1e8c3401b0c00e942325d266ca8013dcf600deaeefdca008c41c80261872004a3cfe48083a3000e4008c000cf100a4d100349e3200be991994ba4222babc020554ba740cccacec0400dc64640062e0501672187c48d041781e940066c648a68eda3100f21000ee3ca6fe691cf2c063d16a9a3afafd2d10167cd03c5048c056208cba10ba20d3b3feba006eb100ccba009a00fa002a00d2006a006c200007001d440776f00155fc8f461bc001a004e1e001059116753f5a2644c9d41a646086078c028170688d368b102723c15110a874161f2b8a00
Expected behavior
I expect the same behavior as in v3 with the shorthand borderRadius to accept 0 and %
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: [e.g. MacOS, Windows]
- Browser [e.g. chrome, safari]
- React-pdf version [e.g. v1.1.0]
I have same issue
Can confirm this is working on 3.4.5 (last 3.x version) and not on 4.0.0
FWIW the style docs do not list, and apparently have never listed borderRadius as a property but do list the 4 individual properties.