Skip to content

fix(textfield): add line-height to prevent missing diacritics #2123

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

Merged
merged 1 commit into from
Aug 24, 2023

Conversation

pfulton
Copy link
Collaborator

@pfulton pfulton commented Aug 24, 2023

This adds a line-height definition to the textfield's input and sets that value equal to the height of the input. This prevents diacritics from being cut off in certain languages. Only applies to non-multiline (textarea) inputs.

Similar to adobe/react-spectrum#4579 in React Spectrum.

Jira ticket

There's no visual difference for English.

Local with changes vs. production
Screenshot 2023-08-24 at 2 23 28 PM

Screenshot 2023-08-24 at 2 23 58 PM

Description

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Regression testing

Validate:

  1. A legacy documentation page (such as accordion), including:
  • The page renders correctly
  • The page is accessible
  • The page is responsive
  1. A migrated documentation page (such as action group), including:
  • The page renders correctly
  • The page is accessible
  • The page is responsive

Screenshots

To-do list

  • I have read the contribution guidelines.

  • I have updated relevant storybook stories and templates.

  • I have tested these changes in Windows High Contrast mode.

  • If my change impacts other components, I have tested to make sure they don't break.

  • If my change impacts documentation, I have updated the documentation accordingly.

  • ✨ This pull request is ready to merge. ✨

This adds a line-height definition to the textfield's input
and sets that value equal to the height of the input. This prevents
diacritics from being cut off in certain languages.
@pfulton pfulton added the run_vrt For use on PRs looking to kick off VRT label Aug 24, 2023
@github-actions
Copy link
Contributor

🚀 Deployed on https://pr-2123--spectrum-css.netlify.app

@github-actions github-actions bot temporarily deployed to pull request August 24, 2023 18:26 Inactive
@pfulton
Copy link
Collaborator Author

pfulton commented Aug 24, 2023

cc: @Westbrook & @jnjosh for visibility.

@github-actions github-actions bot removed the run_vrt For use on PRs looking to kick off VRT label Aug 24, 2023
@pfulton
Copy link
Collaborator Author

pfulton commented Aug 24, 2023

Before in Chrome:
Screenshot 2023-08-24 at 4 18 40 PM

After in Chrome:
Screenshot 2023-08-24 at 4 18 31 PM

@castastrophe castastrophe merged commit e44e4f4 into main Aug 24, 2023
@castastrophe castastrophe deleted the fix-textfield-diacritics branch August 24, 2023 20:38
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