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

Remove negative margin on help text #21846

Conversation

johnstonphilip
Copy link
Contributor

@johnstonphilip johnstonphilip commented Apr 23, 2020

Description

When using the TextAreaControl component, the help text is overlapping the box due to a negative margin being applied, and the parent not having margin only because it is within a tabPanel.

Screen Shot 2020-04-23 at 5 52 37 PM

This PR removes that inconsistency and now the help text sits properly.

Screen Shot 2020-04-23 at 5 50 42 PM

How has this been tested?

Visual testing.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@youknowriad
Copy link
Contributor

since this is a global style applied to all controls, I want to ask whether there's potential impact on other Controls?

@johnstonphilip
Copy link
Contributor Author

@youknowriad I have gone through all of the settings I can think of and I am not seeing any impact or regressions. Thoughts @jasmussen?

@jasmussen
Copy link
Contributor

Hi, thanks for the ping. And thanks for the PR — that overlapping help text is frustrating, let's get that fixed.

From a glance at the code, it looks like the rule was initially added to polish the font size picker. But this one appears unchanged with this applied, probably because it changed so much since then, it used to be a slider. Before:

before

After:

after

However there are some things that changed, and actually regressed, with this. Here are two I found:

Visibility, before:

before vis

Visibility, after:

after-vis

Comments, before:

before com

Comments, after:

after-com

As you can see, the margins aren't that great here.

I did not have time to do extensive testing of all blocks and various plugins, but as Riad said, it's a widely used component so it's likely there will be other places where this is weird.

It seems like the ideal solution is to test widely, and provide fixes for as many cases as we can.

The other would be to find a different way to fix the textarea+helptext issue.

@johnstonphilip
Copy link
Contributor Author

@jasmussen Thanks! I didn't notice those at first, but I know I don't have the eagle eyes that you do for these things :)

I will see if I can work up another way and add that to this PR.

Base automatically changed from master to trunk March 1, 2021 15:43
@skorasaurus skorasaurus added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Aug 19, 2021
@annezazu
Copy link
Contributor

I'm going to close this out both due to inactivity and due to how much has changed in these interfaces! I welcome you to reopen the PR/rework it if you want to continue the work done here (and if the issue still applies). Happy to reopen if you don't have access -- just say the word :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants