FormTokenField: Add Help Text #15469

marekhrabe · 2019-05-06T16:03:39Z

Description

I've made the message visible and added the mention of the enter key. It's styled to look the same way as other help texts in the sidebar.

The component allows developers to opt-in for using spacebar as a separator too. I've reflected that and made two versions of the help text based on the configuration.

How has this been tested?

New Post
In the sidebar, open "Tags" Panel and explore the new message

The sidebar term selector (Tags, Categories) is the only place where this component is used in core.

Screenshots

Standard Usage	With Spacebar Separator Enabled

packages/components/src/form-token-field/style.scss

packages/components/src/form-token-field/index.js

afercia · 2019-05-06T16:49:11Z

packages/components/src/form-token-field/style.scss

 	margin-bottom: $grid-size-small;
 }

+.components-form-token-field__help {
+	display: block;
+	font-style: italic;


I'd like to have some design feedback about the italic style. Personally, I'd avoid it because some users find it difficult to read.

I have made it italic based on styling of the help text of BaseControl which is used as a base for most of other controls. If there are italics missing for help texts similar to this, they are inconsistent with the rest. Just a few examples:

I agree on the issue with italics but I think we should address that separately and on a global level for all those existing usages of BaseControl. What do you think about leaving this PR as italics and opening a discussion to replace them globally for all help texts? I'll be happy to make that PR once we settle on a solution.

Yeah, I think italics vs. no italics can be discussed separately — this PR is just mirroring the existing styles used in .components-base-control__help.

(From some quick clicking around, it seems that the Permalink help text is the only text of this kind that isn't italicized, so we should make a decision one way or another).

Italic is terrible for some kind of dyslexia when used on whole sentences. I vote for just not add new Italic. Also, planning to create related GitHub issue and Trac ticket. Thank you.

Cool — I'm fine getting rid of the italic globally if we can replace it with something else. I just want to make sure that help text appears differently from the form field label so users can tell them apart. But there are other ways to do that besides making the text italic. I'll keep an eye out for the ticket and try out some ideas there. 🙂

there are other ways to do that besides making the text italic

Definitely agree. One day before I die I'd like to see a typographic system in WordPress 🙂

I've opened #15683 to track the inconsistent help text, and to consider the use of italic text there. We'll get that sorted out globally in Gutenberg. 🙂

In the meantime, that shouldn't block this PR since it's not adding any new styles — just replicating the existing BaseControl help text style.

packages/components/src/form-token-field/index.js

afercia

Thanks @marekhrabe, I left some comments.

Re: the Italic text, I'd like some design feedback. I'd like to avoid it as much as possible for better readability. Also, seems to me Gutenberg isn't using Italic for this kind of hints underneath input fields, for example:

/Cc @karmatosed

jorgefilipecosta

It seems this component has a label and a help text feature offered by the BaseControl component: https://github.com/WordPress/gutenberg//blob/1e40b281d1db725e512e383b5e00f3b59e333d5a/packages/components/src/base-control/README.md

Would it be possible to use the base control here, avoid the need for label and help text custom styles and promoting code reusability?

jorgefilipecosta · 2019-05-06T19:28:17Z

packages/components/src/form-token-field/index.js

-				<div id={ `components-form-token-suggestions-howto-${ instanceId }` } className="screen-reader-text">
-					{ __( 'Separate with commas' ) }
-				</div>
+				<p id={ `components-form-token-suggestions-howto-${ instanceId }` } className="components-form-token-field__help">


It seems like the id components-form-token-suggestions-howto-${ instanceId } is not being referenced anywhere, can we remove the id?

Referenced here https://github.com/WordPress/gutenberg/blob/master/packages/components/src/form-token-field/token-input.js#L50

marekhrabe · 2019-05-06T19:35:06Z

I've actually tried using BaseControl but it cannot be easily used as this component attaches a lot of additional attributes on the wrapping element and that's not supported.

kjellr

@marekhrabe This is looking great. Just a tiny design change before it's ready to merge on my end. Currently, the first version of the label says:

Separate using commas or the Enter key

We should add a period at the end there to align with other help text. Unfortunately, that awkwardly pushes the word "key." onto its own line on desktop screens. 😄

To avoid that, let's swap out "using" with the word "with":

We can also make that change with the second label version that includes the mention of spaces:

marekhrabe · 2019-05-16T19:54:15Z

What a fix! 😀Message updated, code rebased.

kjellr

Looks great from a design perspective. 👍

kjellr · 2019-05-16T20:09:08Z

Re: the Italic text, I'd like some design feedback. I'd like to avoid it as much as possible for better readability.

@afercia: Now that we have #15683 in progress to track this globally, is this PR all ready to go on your end?

afercia · 2019-05-16T20:13:07Z

👍 from me.

marekhrabe · 2019-05-16T20:22:19Z

Thanks, @afercia. Can you please update the review too? Github still blocks me from merging as you requested changes previously.

Merging is blocked
Merging can be performed automatically once the requested changes are addressed.

marekhrabe added [Type] Enhancement A suggestion for improvement. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels May 6, 2019

marekhrabe requested review from aduth, ajitbohra, chrisvanpatten, gziolo, jorgefilipecosta, noisysocks, talldan and youknowriad as code owners May 6, 2019 16:03

marekhrabe requested a review from afercia May 6, 2019 16:03

afercia reviewed May 6, 2019

View reviewed changes

packages/components/src/form-token-field/style.scss Outdated Show resolved Hide resolved

afercia reviewed May 6, 2019

View reviewed changes

packages/components/src/form-token-field/style.scss Outdated Show resolved Hide resolved

afercia reviewed May 6, 2019

View reviewed changes

packages/components/src/form-token-field/index.js Outdated Show resolved Hide resolved

afercia reviewed May 6, 2019

View reviewed changes

packages/components/src/form-token-field/index.js Outdated Show resolved Hide resolved

afercia added the Needs Design Feedback Needs general design feedback. label May 6, 2019

afercia self-requested a review May 6, 2019 17:00

afercia requested changes May 6, 2019

View reviewed changes

jorgefilipecosta reviewed May 6, 2019

View reviewed changes

marekhrabe requested a review from karmatosed May 7, 2019 20:01

kjellr mentioned this pull request May 16, 2019

Define a consistent text treatment for help text underneath form fields #15683

Open

kjellr suggested changes May 16, 2019

View reviewed changes

marekhrabe added 3 commits May 16, 2019 21:52

add visual help text

7487ee5

updates based on review

49e5b83

add periods after help msgs

3dd54a2

marekhrabe force-pushed the fix/token-field-help-text branch from 919e436 to 3dd54a2 Compare May 16, 2019 19:53

kjellr approved these changes May 16, 2019

View reviewed changes

afercia approved these changes May 16, 2019

View reviewed changes

marekhrabe added this to the 5.8 (Gutenberg) milestone May 16, 2019

marekhrabe merged commit b193b09 into master May 16, 2019

marekhrabe deleted the fix/token-field-help-text branch May 16, 2019 21:01

marekhrabe self-assigned this May 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FormTokenField: Add Help Text #15469

FormTokenField: Add Help Text #15469

marekhrabe commented May 6, 2019 •

edited

afercia May 6, 2019

marekhrabe May 6, 2019

kjellr May 8, 2019

afercia May 8, 2019

kjellr May 8, 2019

afercia May 8, 2019 •

edited

kjellr May 16, 2019

afercia left a comment

jorgefilipecosta left a comment

jorgefilipecosta May 6, 2019

marekhrabe May 6, 2019

marekhrabe commented May 6, 2019

kjellr left a comment •

edited

marekhrabe commented May 16, 2019

kjellr left a comment

kjellr commented May 16, 2019

afercia commented May 16, 2019

marekhrabe commented May 16, 2019

FormTokenField: Add Help Text #15469

FormTokenField: Add Help Text #15469

Conversation

marekhrabe commented May 6, 2019 • edited

Description

How has this been tested?

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afercia May 8, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afercia left a comment

Choose a reason for hiding this comment

jorgefilipecosta left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marekhrabe commented May 6, 2019

kjellr left a comment • edited

Choose a reason for hiding this comment

marekhrabe commented May 16, 2019

kjellr left a comment

Choose a reason for hiding this comment

kjellr commented May 16, 2019

afercia commented May 16, 2019

marekhrabe commented May 16, 2019

marekhrabe commented May 6, 2019 •

edited

afercia May 8, 2019 •

edited

kjellr left a comment •

edited