簡単タグ入力のUIのデザインと注意書きを追加

Author: machida

app/javascript/stylesheets/application.sass

@@ -98,6 +98,7 @@
 
 @import application/blocks/tags/random-tags
 @import application/blocks/tags/tag-links
+@import application/blocks/tags/tag-input
 
 @import application/blocks/thread/thread-comment-form
 @import application/blocks/thread/thread-comment

app/javascript/stylesheets/application/blocks/tags/_tag-input.sass

@@ -0,0 +1,14 @@
+.tag-input
+  margin-top: .5rem
+  border-radius: .25rem
+  background-color: var(--background-more-tint)
+  padding: .75rem 1rem
+  border: dashed 1px var(--border)
+
+.tag-input__title
+  +text-block(.875rem 1.5 0 .5rem, block 600)
+
+.tag-input__items
+  display: flex
+  flex-wrap: wrap
+  gap: .5rem

app/javascript/tag-shortcut.js

@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.tag-item').forEach((button) => {
+  document.querySelectorAll('.js-tag-input-button').forEach((button) => {
     button.addEventListener('click', () => {
       const tag = button.dataset.tag
       const tagifyScope = document.querySelector('.tagify')

app/views/articles/_form.html.slim

@@ -40,24 +40,30 @@
           = f.label :tag_list, 'タグを入力してください',
             class: 'a-form-label'
           = render 'tags_input', taggable: article
-          .a-form-help
-            p 入力してエンターキーを押すとタグになります（スペースは入力できません）。
 
-    .form-item
-      .row
-        .col-md-6.col-xs-12
-          = 'タグ入力'
-      ul.tab-nav__items
-        li
-          = button_tag '注目の記事', type: 'button', class: 'tag-item', data: { tag: '注目の記事' }
-        li
-          = button_tag '卒業生の声', type: 'button', class: 'tag-item', data: { tag: '卒業生の声' }
-        li
-          = button_tag 'プレスリリース', type: 'button', class: 'tag-item', data: { tag: 'プレスリリース' }
-        li
-          = button_tag 'スポンサーシップ', type: 'button', class: 'tag-item', data: { tag: 'スポンサーシップ' }
-        li
-          = button_tag '受賞実績', type: 'button', class: 'tag-item', data: { tag: '受賞実績' }
+          .tag-input
+            .tag-input__title
+              | 簡単タグ入力
+            .tag-input__tags
+              ul.tag-input__items
+                li.tag-input__item
+                  = button_tag '注目の記事', type: 'button', class: 'a-button is-sm is-primary-border js-tag-input-button', data: { tag: '注目の記事' }
+                li.tag-input__item
+                  = button_tag '卒業生の声', type: 'button', class: 'a-button is-sm is-primary-border js-tag-input-button', data: { tag: '卒業生の声' }
+                li.tag-input__item
+                  = button_tag 'プレスリリース', type: 'button', class: 'a-button is-sm is-primary-border js-tag-input-button', data: { tag: 'プレスリリース' }
+                li.tag-input__item
+                  = button_tag 'スポンサーシップ', type: 'button', class: 'a-button is-sm is-primary-border js-tag-input-button', data: { tag: 'スポンサーシップ' }
+                li.tag-input__item
+                  = button_tag '受賞実績', type: 'button', class: 'a-button is-sm is-primary-border js-tag-input-button', data: { tag: '受賞実績' }
+
+          .a-form-help
+            p 注目の記事...トップページの注目の記事一覧に表示されます。
+            p 卒業生の声...卒業生の声ページの記事一覧に表示されます。
+            p プレスリリース...プレスキットの記事一覧に表示されます。
+            p スポンサーシップ...スポンサー実績ページの記事一覧に表示されます。
+            p 受賞実績...受賞実績ページの記事一覧に表示されます。
+            p タグは手入力でも登録できます。入力してエンターキーを押すとタグになります（スペースは入力できません）。
 
     .form-item
       .row

test/system/article/tags_test.rb

@@ -25,7 +25,7 @@ class Article::TagsTest < ApplicationSystemTestCase
     visit_with_auth new_article_url, 'komagata'
     fill_in 'タイトル', with: 'ショートカットボタンからのタグ追加テスト'
     fill_in '本文', with: 'タグショートカットボタンのテストです'
-    find('button.tag-item', text: '注目の記事').click
+    find('button.js-tag-input-button', text: '注目の記事').click
     find('.tagify__input')
     assert_text '注目の記事'
     page.accept_confirm do