Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix iOS SR Text with padding #561

Merged
merged 2 commits into from
Dec 14, 2023

Conversation

louiszawadzki
Copy link
Contributor

@louiszawadzki louiszawadzki commented Nov 30, 2023

What does this PR do?

Fix SR on iOS for texts with padding.

When padding was applied on text, we ended up with a wrong wireframe.
This is due to copy/paste from UITextView recorder that probably works differently.

This is fixed by:

  • removing the clip that was incorrect
  • fixing the frame that was not computed correctly
  • adding the textFrame to apply the padding

Simulator snapshot:
image

Replay (after):
image

Replay (before):
image

Note: I've also made the text vertically aligned on top instead of center.
This does not change anything except in 2 cases:

  • The first line of texts with ellipsis is now correctly positioned
  • The texts with bigger or smaller line heights are not centered anymore

In combination with https://github.com/DataDog/web-ui/pull/114413 this would enable us to support ellipsis on RN.
From the apps I've tested, ellipsis is more common than unusual line heights.

Lines heights can also be properly fixed if we apply it on the player side, rather than "cheating" with an incorrect positioning:
image

Review checklist (to be filled by reviewers)

  • Feature or bugfix MUST have appropriate tests
  • Make sure you discussed the feature or bugfix with the maintaining team in an Issue
  • Make sure each commit and the PR mention the Issue number (cf the CONTRIBUTING doc)
  • If this PR is auto-generated, please make sure also to manually update the code related to the change

@louiszawadzki louiszawadzki force-pushed the louiszawadzki/rum-1820/fix-ios-sr-text-padding branch from b4cf262 to 58d97e7 Compare November 30, 2023 17:08
@louiszawadzki louiszawadzki marked this pull request as ready for review November 30, 2023 17:24
@louiszawadzki louiszawadzki requested a review from a team as a code owner November 30, 2023 17:24
@louiszawadzki louiszawadzki force-pushed the louiszawadzki/rum-1820/fix-ios-sr-text-padding branch from 58d97e7 to c5565e1 Compare December 1, 2023 09:05
@louiszawadzki louiszawadzki force-pushed the louiszawadzki/rum-1820/fix-ios-sr-text-padding branch from c5565e1 to 4e0d0c8 Compare December 1, 2023 09:05
@@ -95,11 +95,13 @@ internal struct RCTTextViewWireframesBuilder: SessionReplayNodeWireframesBuilder

let DEFAULT_FONT_COLOR = UIColor.black.cgColor

// Clipping should be 0 to avoid the text from overflowing when the
// numberOfLines prop is used.
private var clip: SRContentClip {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can drop the clip in that case

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could... but keeping it (when it will be applied in the player) will enable us to handle ellipsis much better

@louiszawadzki louiszawadzki merged commit a9dcb5e into develop Dec 14, 2023
4 checks passed
@louiszawadzki louiszawadzki deleted the louiszawadzki/rum-1820/fix-ios-sr-text-padding branch December 14, 2023 09:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants