From f7dfe1072ea650752f41eed92ecac58f388fd769 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 16 Jul 2020 07:25:28 -0400
Subject: [PATCH] Improve table styles in docs

---
 docs/assets/plugins/metadata/metadata.js | 20 ++++++++++++++------
 docs/assets/styles/docs.css              | 14 ++++++++++----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index bcac4e7d..0204fef6 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -7,7 +7,6 @@
       <thead>
         <tr>
           <th>Property</th>
-          <th>Attribute</th>
           <th>Description</th>
           <th>Type</th>
           <th>Default</th>
@@ -18,11 +17,20 @@
           .map(
             prop => `
         <tr>
-          <td><code>${escapeHtml(prop.name)}</code></td>
-          <td><code style="white-space: nowrap;">${escapeHtml(prop.attr)}</code></td>
+          <td>
+            <code>${escapeHtml(prop.name)}</code>
+            ${prop.name !== prop.attr && prop.attr !== undefined ? (`
+              <br>
+              <small>
+                <sl-tooltip content="Use the kebab-case variation in your HTML">
+                  <code class="attribute-tooltip">${escapeHtml(prop.attr)}</code>
+                </sl-tooltip>
+              </small>`
+            ) : ''}
+          </td>
           <td>${escapeHtml(prop.docs)}</td>
-          <td><code>${escapeHtml(prop.type)}</code></td>
-          <td><code>${escapeHtml(prop.default)}</code></td>
+          <td><code style="white-space: normal;">${escapeHtml(prop.type)}</code></td>
+          <td><code style="white-space: normal;">${escapeHtml(prop.default)}</code></td>
         </tr>
         `
           )
@@ -129,7 +137,7 @@
           .map(
             style => `
         <tr>
-          <td><code style="white-space: nowrap;">${escapeHtml(style.name)}</code></td>
+          <td><code>${escapeHtml(style.name)}</code></td>
           <td>${escapeHtml(style.docs)}</td>
         </tr>
         `
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 4fd1db5f..a7eb29c4 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -283,10 +283,6 @@ strong {
   padding: 2px 4px;
 }
 
-.markdown-section table code:not([class*="lang-"]):not([class*="language-"]) {
-  white-space: normal;
-}
-
 /* Code blocks */
 .markdown-section pre {
   position: relative;
@@ -401,6 +397,16 @@ strong {
   border-right: none;
 }
 
+.markdown-section td code {
+  white-space: nowrap;
+}
+
+.markdown-section table .attribute-tooltip {
+  background: none;
+  border-bottom: dashed 1px var(--sl-color-gray-80);
+  cursor: help;
+}
+
 /* Tips & Warnings */
 .markdown-section p.tip,
 .markdown-section p.warn {