chore(truncate): fix alignment #2476
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
🦋 Changeset detectedLatest commit: 99f35c1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
Status: Do Not Merge
✅ Deploy Preview for paste-theme-designer ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for paste-docs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for paste-theme-designer ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 99f35c1:
|
|
Size Change: +30 B (0%) Total Size: 589 kB
ℹ️ View Unchanged
|
✅ Deploy Preview for paste-docs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
serifluous
approved these changes
Jun 17, 2022
shleewhite
changed the title
gloriliale
approved these changes
Jun 21, 2022
SiTaggart
reviewed
Jun 21, 2022
SiTaggart
approved these changes
Jun 22, 2022
shleewhite
added
🕵🏻♀️ Run website visual regression
Merged
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.
Currently, there is a bug where if you put a Truncate component where it pushes the container its in down and it makes it look like there's extra padding.
Before:
After:
Changes in this PR
verticalAlign: 'bottom'to fix how the Truncate contents are alignedtextDecoration: 'inherit'because I noticed that the Anchor text isn't underlined when it is truncatedTruncateInAnchorstoryWhy does this fix it?
When you set
display: 'inline-block',verticalAligndefaults to'baseline'which behaves differently between HTML elements and browsers and can end up looking weird.Instead, I set it to
'bottom', which aligns the content to the bottom of the entire line. To confirm this was correct, I checked that the focus state on Anchor looked the same with and without the text in a Truncate component.Contributing to Twilio