Merge branch 'rs-random-placeholder-tip' into 'master'

Show a random Markdown tip in the textarea placeholder

cc @darby

See merge request !879

app/assets/stylesheets/generic/zen.scss

@@ -63,43 +63,24 @@
     }
   }
 
-  // Make the placeholder text in the standard textarea the same color as the
-  // background, effectively hiding it
-
-  .zen-backdrop textarea::-webkit-input-placeholder {
-    color: white;
-  }
-
-  .zen-backdrop textarea:-moz-placeholder {
-    color: white;
-  }
-
-  .zen-backdrop textarea::-moz-placeholder {
-    color: white;
-  }
-
-  .zen-backdrop textarea:-ms-input-placeholder {
-    color: white;
-  }
-
   // Make the color of the placeholder text in the Zenned-out textarea darker,
   // so it becomes visible
 
   input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder {
-    color: #999;
+    color: #A8A8A8;
   }
 
   input:checked ~ .zen-backdrop textarea:-moz-placeholder {
-    color: #999;
+    color: #A8A8A8;
     opacity: 1;
   }
 
   input:checked ~ .zen-backdrop textarea::-moz-placeholder {
-    color: #999;
+    color: #A8A8A8;
     opacity: 1;
   }
 
   input:checked ~ .zen-backdrop textarea:-ms-input-placeholder {
-    color: #999;
+    color: #A8A8A8;
   }
 }

app/helpers/gitlab_markdown_helper.rb

@@ -98,6 +98,29 @@ module GitlabMarkdownHelper
     end
   end
 
+  MARKDOWN_TIPS = [
+    "End a line with two or more spaces for a line-break, or soft-return",
+    "Inline code can be denoted by `surrounding it with backticks`",
+    "Blocks of code can be denoted by three backticks ``` or four leading spaces",
+    "Emoji can be added by :emoji_name:, for example :thumbsup:",
+    "Notify other participants using @user_name",
+    "Notify a specific group using @group_name",
+    "Notify the entire team using @all",
+    "Reference an issue using a hash, for example issue #123",
+    "Reference a merge request using an exclamation point, for example MR !123",
+    "Italicize words or phrases using *asterisks* or _underscores_",
+    "Bold words or phrases using **double asterisks** or __double underscores__",
+    "Strikethrough words or phrases using ~~two tildes~~",
+    "Make a bulleted list using + pluses, - minuses, or * asterisks",
+    "Denote blockquotes using > at the beginning of a line",
+    "Make a horizontal line using three or more hyphens ---, asterisks ***, or underscores ___"
+  ].freeze
+
+  # Returns a random markdown tip for use as a textarea placeholder
+  def random_markdown_tip
+    "Tip: #{MARKDOWN_TIPS.sample}"
+  end
+
   private
 
   # Return +text+, truncated to +max_chars+ characters, excluding any HTML

app/views/projects/_zen.html.haml

@@ -2,7 +2,7 @@
   %input#zen-toggle-comment.zen-toggle-comment{ tabindex: '-1', type: 'checkbox' }
   .zen-backdrop
     - classes << ' js-gfm-input markdown-area'
-    = f.text_area attr, class: classes, placeholder: 'Leave a comment'
+    = f.text_area attr, class: classes, placeholder: random_markdown_tip
     = link_to nil, class: 'zen-enter-link', tabindex: '-1' do
       %i.fa.fa-expand
       Edit in fullscreen

spec/helpers/gitlab_markdown_helper_spec.rb

@@ -133,4 +133,11 @@ describe GitlabMarkdownHelper do
       helper.render_wiki_content(@wiki)
     end
   end
+
+  describe 'random_markdown_tip' do
+    it 'returns a random Markdown tip' do
+      stub_const("#{described_class}::MARKDOWN_TIPS", ['Random tip'])
+      expect(random_markdown_tip).to eq 'Tip: Random tip'
+    end
+  end
 end