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 selection of small table cells #9673

Merged
merged 1 commit into from Sep 10, 2018

Conversation

Projects
None yet
3 participants
@talldan
Contributor

talldan commented Sep 6, 2018

Description

I noticed that it can be difficult to select very narrow table cells. The RichText element within the table cell is the element that receives selection. In the gif below the rich text has collapsed to just 1px wide and is hard to select:
table-cell-selection

This PR moves padding from the td element to the RichText (just for the editor) so that there's a larger selection area.

Pretty open to other suggestions of how to fix this - this seemed like the simplest.

How has this been tested?

Manually tested selection of a narrow cell

Screenshots

Gif showing the fix
table-cell-selection-with-fix

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.

@talldan talldan added this to the 3.9 milestone Sep 6, 2018

@talldan talldan self-assigned this Sep 6, 2018

@talldan talldan requested a review from WordPress/gutenberg-core Sep 6, 2018

@gziolo

gziolo approved these changes Sep 7, 2018

It looks good from me the code perspective. I would be happy to have it confirmed from one of the designers, too.

@@ -16,4 +16,8 @@
box-shadow: inset 0 0 0 1px $blue-medium-500;
border-style: double;
}
&__cell-content {

This comment has been minimized.

@gziolo

gziolo Sep 7, 2018

Member

@jasmussen - do we have any pattern for the placeholder in the table cell?

@gziolo

gziolo Sep 7, 2018

Member

@jasmussen - do we have any pattern for the placeholder in the table cell?

This comment has been minimized.

@talldan

talldan Sep 10, 2018

Contributor

@jasmussen Just thought I'd ping you again on this question in case you missed it. Cheers.

@talldan

talldan Sep 10, 2018

Contributor

@jasmussen Just thought I'd ping you again on this question in case you missed it. Cheers.

This comment has been minimized.

@talldan

talldan Sep 10, 2018

Contributor

Hope you don't mind, I've also added you as a reviewer based on Grzegorz' feedback.

@talldan

talldan Sep 10, 2018

Contributor

Hope you don't mind, I've also added you as a reviewer based on Grzegorz' feedback.

This comment has been minimized.

@jasmussen

jasmussen Sep 10, 2018

Contributor

Sorry I missed the ping!

I think PR works well for me!

We don't have any pattern for placeholder text in tables, and I don't think we need it either. The table resembles a table in its natural state, and it's clear where you need to set the caret in order to type. Also, given table cells can grow very small, as this PR is about, it would be hard to add placeholder text that worked within those rules.

@jasmussen

jasmussen Sep 10, 2018

Contributor

Sorry I missed the ping!

I think PR works well for me!

We don't have any pattern for placeholder text in tables, and I don't think we need it either. The table resembles a table in its natural state, and it's clear where you need to set the caret in order to type. Also, given table cells can grow very small, as this PR is about, it would be hard to add placeholder text that worked within those rules.

This comment has been minimized.

@talldan

talldan Sep 10, 2018

Contributor

Awesome - thanks for the reviews on this! 😃

Will merge now.

@talldan

talldan Sep 10, 2018

Contributor

Awesome - thanks for the reviews on this! 😃

Will merge now.

@talldan talldan requested a review from jasmussen Sep 10, 2018

@talldan talldan merged commit f5338ed into master Sep 10, 2018

2 checks passed

codecov/project 49.18% remains the same compared to 9a6bf39
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@talldan talldan deleted the fix/table-cell-selection branch Sep 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment