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

Prevent STPPaymentMethodTableViewCell.titleLabel from overlapping checkmark #952

Merged
merged 2 commits into from
May 30, 2018

Conversation

danj-stripe
Copy link
Contributor

@danj-stripe danj-stripe commented May 29, 2018

Summary

Previous layout code allowed the titleLabel to be as wide as it wanted, even if
that ran offscreen. Fixing it to explicitly constrain the titleLabel to be between
the leftIcon and checkmarkIcon, with horizontal spacing of padding.

Instead of asking UIKit to calculate the height that the titleLabel should be, just use
the full height of the cell. We get the same vertical centering, and similarly prevents
the label from exceeding the bounds of the cell.

screen shot 2018-05-29 at 2 03 02 pm

Motivation

Fixes #948

Testing

Tested using the sample app against iPhone 5-width devices, and used our snapshot tests
to check for regressions.

simulator screen shot - iphone 5s - 2018-05-29 at 14 02 15
simulator screen shot - iphone 5s - 2018-05-29 at 14 02 20

The snapshot tests do show slight differences in how the titleLabel renders. I believe
it's now pixel aligning the text. When I compare before/after, especially on something
like the E in Ending In (it's true of all the letters, but really apparent on E),
the old snapshot has anti-aliased top/bottoms, where the new snapshot has crisp lines.
This is subtle enough that I hadn't noticed it previously, but I think it's a nice,
unexpected bonus.

screen shot 2018-05-29 at 2 22 36 pm

…heckmark

Previous layout code allowed the `titleLabel` to be as wide as it wanted, even if
that ran offscreen. Fixing it to explicitly constrain the `titleLabel` to be between
the `leftIcon` and `checkmarkIcon`, with horizontal spacing of `padding`.

Instead of asking UIKit to calculate the height that the `titleLabel` should be, just use
the full height of the cell. We get the same vertical centering, and similarly prevents
the label from exceeding the bounds of the cell.

The snapshot tests do show slight differences in how the `titleLabel` renders. I believe
it's *now* pixel aligning the text. When I compare before/after, especially on something
like the `E` in `Ending In` (it's true of all the letters, but really apparent on `E`),
the old snapshot has anti-aliased top/bottoms, where the new snapshot has crisp lines.
This is subtle enough that I hadn't noticed it previously, but I think it's a nice,
unexpected bonus.

Fixes #948
Copy link
Contributor

@joeydong-stripe joeydong-stripe left a comment

Choose a reason for hiding this comment

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

  • We should add a note in the CHANGELOG before merging this in case we forget about it when releasing the next version
  • Would be going above and beyond if we start truncating "American Express" to "Amex" for narrow screens

@danj-stripe danj-stripe merged commit c2880e3 into master May 30, 2018
@danj-stripe danj-stripe deleted the danj/bugfix/948 branch May 30, 2018 21:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants