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 regressions in link UI #6217

Merged
merged 3 commits into from Apr 18, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Apr 17, 2018

Recently we merged in some improvements to the design of input fields. As part of that, some regressions to the link UI on buttons and link modals were introduced. This PR fixes those.

Screenshots:

screen shot 2018-04-17 at 09 51 45

screen shot 2018-04-17 at 10 27 49

screen shot 2018-04-17 at 10 27 56

screen shot 2018-04-17 at 10 28 03

As part of this, I did some major cleanup too, to use more SCSS variables stored in the variables stylesheet. I also added some admin scheme color to the selected item in the suggest dropdown. In fact, quite a bit of CSS was messy, duplicate and redundant, so this is quite a nice cleanup to get in. But it also means that it's a fair bit of deep surgery, and would be good to test.

@karmatosed I know you've filed a few tickets around link interface improvements. Does this PR address some of those?

jasmussen added some commits Apr 17, 2018

Polish link UI.
The link UI was a bit of a mess, this cleans it up a bit, and fixes some visual glitches as part of the recent input style tweaks.
Fix Button block URL
Further optimizes and cleans up the CSS.

@jasmussen jasmussen self-assigned this Apr 17, 2018

@jasmussen jasmussen requested review from karmatosed and noisysocks Apr 17, 2018

@karmatosed

This comment has been minimized.

Member

karmatosed commented Apr 17, 2018

This is great, thanks for picking up this. The one we had open about #6107 : unifying on buttons, is still looking like it has the old interface. That is the one I would love to see changed :)

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Apr 18, 2018

Thanks Tammie, responded to that other ticket.

top: 100%;
left: 0;
right: -64px; // to match the link modal borders
z-index: 0; // place underneath the input field so focus isn't cropped

This comment has been minimized.

@youknowriad

youknowriad Apr 18, 2018

Contributor

Should we use the z-index helper instead?

This comment has been minimized.

@jasmussen

jasmussen Apr 18, 2018

Contributor

Removed it entirely — turns out due to how we handle the z-index of suggestions, it should ideally be over regradless.

Remove z-index
Turns out it worked unexpectedly, and the issue is fixed isn't necessarily important to address.

@youknowriad youknowriad added this to the 2.7 milestone Apr 18, 2018

@youknowriad youknowriad merged commit 4116526 into master Apr 18, 2018

2 checks passed

codecov/project 43.85% (-0.1%) compared to 77eba26
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the fix/button-link-ui branch Apr 18, 2018

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Apr 18, 2018

🔥

nuzzio added a commit to nuzzio/gutenberg that referenced this pull request Apr 25, 2018

Fix regressions in link UI (WordPress#6217)
* Polish link UI.

The link UI was a bit of a mess, this cleans it up a bit, and fixes some visual glitches as part of the recent input style tweaks.

* Fix Button block URL

Further optimizes and cleans up the CSS.

* Remove z-index

Turns out it worked unexpectedly, and the issue is fixed isn't necessarily important to address.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment