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);