Merge pull request #1955 from gus4no/tooltip-documentation

Tooltip documentation
solidusio · Jun 21, 2017 · 36d213d · 36d213d
2 parents 7fbd577 + 52da7ea
commit 36d213d
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
@@ -106,6 +106,15 @@
       border: 1px solid darken($color-7, 10%);
     }
   }
+
+  table.with-actions-borders {
+    th, td {
+      &.actions {
+        border-right: 1px solid #cee1f4 !important;
+        border-bottom: 1px solid #cee1f4 !important;
+      }
+    }
+  }
 }
 
 .color-variables {

diff --git a/backend/app/views/spree/admin/style_guide/topics/messaging/_tooltips.html.erb b/backend/app/views/spree/admin/style_guide/topics/messaging/_tooltips.html.erb
@@ -14,3 +14,48 @@
 <div class="style-guide-code">
   <pre><code class="language-html"><%= escape_once snippet %></code></pre>
 </div>
+<br/>
+<%- info_tooltip = capture do %>
+  <a title="Some info." class="fa fa-info-circle with-tip"  href="#"></a>
+<%- end %>
+<table class="with-actions-borders">
+  <thead>
+    <tr>
+      <th> Type </th>
+      <th> Example </th>
+      <th> Code </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <b>Info tooltips</b>
+        These are used to add supplementary information to form labels.
+        The info icon is the coverable area for this tooltip and should be placed at the right side of the form label.
+      </td>
+      <td class="align-center">
+          <%= info_tooltip %>
+      </td>
+      <td>
+        <div class="style-guide-code">
+          <pre><code class="language-html"><%= escape_once info_tooltip %></code></pre>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <b>Adding icon tooltips</b>
+          These are used to add textual context to the action icons used with tabular data like edit, delete, and clone.
+          They are styled with a similar colour to the icon that they’re attached to.
+      </td>
+      <td class="align-center actions">
+        <%= link_to_edit_url('#', title: 'edit', no_text: true) %>
+      </td>
+      <td>
+        <div class="style-guide-code">
+          <pre><code class="language-html"><%= escape_once link_to_edit_url('#', title: 'edit', no_text: true) %></code></pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>