Fix caption alignment on images.#18818
Conversation
| underlineColorAndroid="transparent" | ||
| textAlign={ 'center' } | ||
| tagName={ '' } | ||
| tagName={ 'p' } |
There was a problem hiding this comment.
I got really curious about this one. how's giving a tag name fixing the alignment? 🤔
and, is it ok to have both at the same time?
rootTagsToEliminate={ [ 'p' ] }
tagName={ 'p' }
There was a problem hiding this comment.
I didn't have time to do a full investigation, but main main guess, is that when you don't define a tag, the default you get is div, and the Aztec iOS for some reason is ignoring the text alignemnt settings or defaulting the div to left alignment.
The rootTagsToEliminate is just to give the HTML back clean of <p> know that we are using the tagName of p we should no longer need it, because the component already eliminates automatically the tag refered in tagName.
There was a problem hiding this comment.
I haven't verified but suspicious that this might have caused a regression like this.
There was a problem hiding this comment.
I haven't verified but suspicious that this might have caused a regression like this.
@cameronvoell has reached the same conclusion last night so, I guess that's a form of verification.
|
cc @mkevins we'll need to do the same fix for the captions of individual gallery tiles. Ideally we should refactor current Caption component and extract the UI part to make it available to use from gallery tiles as well, otherwise we'll need to duplicate fixes like this. I've opened a tech debt issue to track this. |
|
I tested on Android, everything seems fine (was also fine before the patch):
|
|
Also tested on iOS, looks good: |
|
This change introduces a regression where pressing the Enter key in a caption no longer works to add a newline on Android. There was some discussion around this issue in a few of the comments on an earlier PR.
|
Description
Fix caption alignment in Native.
This sorts the problem in iOS
Please test this in Android!
How has this been tested?
Screenshots
Types of changes
Checklist: