Merge pull request #182 from hlxsites/maxed/inline-macro

fix: pill styling, allow within tds
hlxsites · Oct 2, 2023 · d723920 · d723920
2 parents 5cec5a5 + 3ac5de3
commit d723920
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/blocks/table/table.js b/blocks/table/table.js
@@ -1,4 +1,6 @@
-import { html, isValidDocsURL, isValidWebURL } from '../../scripts/scripts.js';
+import {
+  decoratePills, html, isValidDocsURL, isValidWebURL,
+} from '../../scripts/scripts.js';
 
 /**
  * @param {HTMLElement} block
@@ -134,4 +136,6 @@ export default async function decorate(block) {
     </table>`.firstElementChild.firstElementChild;
     tbody.appendChild(tr);
   });
+
+  decoratePills(table);
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -783,30 +783,37 @@ export function convertCodeIconsToText(main) {
   });
 }
 
-export function decoratePills(main) {
-  main.querySelectorAll('p').forEach((p) => {
-    const matches = [...p.innerText.matchAll(/tt:\[([^\]]*)\]/g)];
-    if (!matches.length) return;
-
-    const nodes = [];
-    let text = p.innerText;
-    matches.forEach((match) => {
-      const [left, ...rights] = text.split(match[0]);
-      if (left) {
-        nodes.push(left);
-      }
-      nodes.push(html`<span class="pill">${match[1]}</span>`);
-      text = rights.join(match[0]);
-    });
-    if (text) {
-      nodes.push(text);
+export function decoratePill(p) {
+  const matches = [...p.innerText.matchAll(/tt:\[([^\]]*)\]/g)];
+  if (!matches.length) return;
+
+  const nodes = [];
+  let text = p.innerText;
+  matches.forEach((match) => {
+    const [left, ...rights] = text.split(match[0]);
+    if (left) {
+      nodes.push(left);
     }
+    nodes.push(html`<span class="pill">${match[1]}</span>`);
+    text = rights.join(match[0]);
+  });
+  if (text) {
+    nodes.push(text);
+  }
 
+  if (p.tagName === 'p') {
     const parent = p.parentElement;
     p.remove();
-    console.log('nodes: ', nodes);
     parent.append(...nodes);
-  });
+  } else {
+    // td
+    p.innerHTML = '';
+    p.append(...nodes);
+  }
+}
+
+export function decoratePills(main) {
+  main.querySelectorAll('p,td').forEach(decoratePill);
 }
 
 /**

diff --git a/styles/styles.css b/styles/styles.css
@@ -746,6 +746,18 @@ a.button-primary--blue:hover,
   background-color: var(--primary-action-active-background-color);
 }
 
+span.pill {
+  background: #000;
+  color: #fff;
+  border-radius: 14px;
+  margin: 0 -5px;
+  padding: 2px 5px;
+}
+
+td > span.pill {
+  margin-right: 0;
+}
+
 .drawer {
   background: var(--drawer-background-color);
   border-radius: var(--spacing--4);