diff --git a/blocks/table/table.js b/blocks/table/table.js
index 43d7ae1..eb88936 100644
--- 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) {
`.firstElementChild.firstElementChild;
tbody.appendChild(tr);
});
+
+ decoratePills(table);
}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 5b3d140..4110864 100644
--- 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`${match[1]}`);
- 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`${match[1]}`);
+ 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
index 2508e23..f9df784 100644
--- 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);