Merge pull request #603 from Yoast/stories/af/602-snippet-editor-plac…

…eholder-color-contrast Improve the snippet editor placeholder color contrast
Yoast · Jun 19, 2018 · 1079b4f · 1079b4f
2 parents c272989 + 1648558
commit 1079b4f
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 0 deletions.
diff --git a/composites/Plugin/SnippetEditor/components/Shared.js b/composites/Plugin/SnippetEditor/components/Shared.js
@@ -81,6 +81,14 @@ export const DescriptionInputContainer = InputContainer.extend`
 	min-height: 72px;
 	padding: 2px 6px;
 	line-height: 24px;
+
+	.public-DraftEditorPlaceholder-root {
+		color: ${ colors.$color_grey_text };
+	}
+
+	.public-DraftEditorPlaceholder-hasFocus {
+		color: ${ colors.$color_grey_text };
+	}
 `;
 
 export const FormSection = styled.div`

diff --git a/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap b/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap
@@ -927,6 +927,14 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;
@@ -2746,6 +2754,14 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;
@@ -4565,6 +4581,14 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;
@@ -6384,6 +6408,14 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;
@@ -9323,6 +9355,14 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;
@@ -11142,6 +11182,14 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;
@@ -14051,6 +14099,14 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   line-height: 24px;
 }
 
+.c37 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c37 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c37::before {
   display: block;
   position: absolute;
@@ -15890,6 +15946,14 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   line-height: 24px;
 }
 
+.c37 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c37 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c37::before {
   display: block;
   position: absolute;
@@ -17729,6 +17793,14 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;
@@ -19548,6 +19620,14 @@ exports[`SnippetEditor passes replacement variables to the title and description
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;
@@ -22063,6 +22143,14 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   line-height: 24px;
 }
 
+.c36 .public-DraftEditorPlaceholder-root {
+  color: #646464;
+}
+
+.c36 .public-DraftEditorPlaceholder-hasFocus {
+  color: #646464;
+}
+
 .c36::before {
   display: block;
   position: absolute;