FormTokenField: Add Help Text (#15469)

* add visual help text * updates based on review * add periods after help msgs
WordPress · May 16, 2019 · b193b09 · b193b09
1 parent a95d5de
commit b193b09
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/packages/components/src/form-token-field/index.js b/packages/components/src/form-token-field/index.js
@@ -583,9 +583,12 @@ class FormTokenField extends Component {
 						/>
 					) }
 				</div>
-				<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">
+					{ this.props.tokenizeOnSpace ?
+						__( 'Separate with commas, spaces, or the Enter key.' ) :
+						__( 'Separate with commas or the Enter key.' )
+					}
+				</p>
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions */

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
@@ -3,7 +3,7 @@
 	flex-wrap: wrap;
 	align-items: flex-start;
 	width: 100%;
-	margin: 0;
+	margin: 0 0 $grid-size 0;
 	padding: $grid-size-small;
 	background-color: $white;
 	border: $border-width solid $light-gray-700;
@@ -50,6 +50,10 @@
 	margin-bottom: $grid-size-small;
 }
 
+.components-form-token-field__help {
+	font-style: italic;
+}
+
 // Tokens
 .components-form-token-field__token {
 	font-size: $default-font-size;