From 1bacecfcf54699965fc7b3ad97a24181d76f42fe Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Thu, 6 Aug 2026 16:12:42 +0100 Subject: [PATCH 1/7] preview: add enterprise macro test page Replicates the exact HTML emitted by the enterprise inline macro (docs-extensions-and-macros#249, DOC-887) so the enterprise-feature class can be developed and styled against real markup in the UI preview. --- preview-src/enterprise-macro-test.adoc | 44 ++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 preview-src/enterprise-macro-test.adoc diff --git a/preview-src/enterprise-macro-test.adoc b/preview-src/enterprise-macro-test.adoc new file mode 100644 index 00000000..7da5e11b --- /dev/null +++ b/preview-src/enterprise-macro-test.adoc @@ -0,0 +1,44 @@ += Enterprise Macro Test +:page-layout: default + +Test page for the `enterprise` inline macro from docs-extensions-and-macros (DOC-887). The markup below replicates the macro's exact rendered output so the `enterprise-feature` class can be styled in this UI bundle. + +== Default output + +The macro `enterprise:Continuous Data Balancing[]` renders: + +++++ +

This cluster uses Continuous Data Balancing to spread partitions evenly.

+++++ + +== With a feature xref + +The macro `enterprise:Tiered Storage[xref=manage:tiered-storage.adoc]` renders: + +++++ +

Enable Tiered Storage to offload data to object storage.

+++++ + +== Without a link + +With the `enterprise-links` attribute set to `false`: + +++++ +

Configure Audit Logging on a SASL listener.

+++++ + +== Data-attribute tooltip variant + +With `enterprise-tooltip` set to `true`, the tooltip renders as `data-enterprise-tooltip` for UI-driven tooltips instead of the native `title`: + +++++ +

Set up Iceberg Topics for your lakehouse.

+++++ + +== Styling notes + +Suggested treatment for `.enterprise-feature`, consistent with the ticket's goal that readers learn the visual representation of an enterprise feature: + +* A subtle distinguishing mark, such as a small lock or star glyph before the term, or a dotted underline in the brand accent color. +* Hover styling for the `data-enterprise-tooltip` variant, mirroring the glossary term tooltip behavior. +* No treatment should reduce the readability of the link text itself. From aced365c1699eab1da967112ff4386121d56a220 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Fri, 7 Aug 2026 09:26:51 +0100 Subject: [PATCH 2/7] feat: style enterprise feature terms and activate their tooltips The enterprise inline macro (docs-extensions-and-macros#249, DOC-887) emits spans with the enterprise-feature class. Style them with the glossary-style dotted underline plus a small lock glyph, both in --link-highlight-color so dark mode adapts, and activate tippy on data-enterprise-tooltip. Verified in the UI preview in light and dark modes, including tooltip hover. --- preview-src/enterprise-macro-test.adoc | 8 ++++---- src/css/tooltips.css | 24 ++++++++++++++++++++++++ src/js/12-activate-tooltips.js | 8 ++++++++ 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/preview-src/enterprise-macro-test.adoc b/preview-src/enterprise-macro-test.adoc index 7da5e11b..2534b068 100644 --- a/preview-src/enterprise-macro-test.adoc +++ b/preview-src/enterprise-macro-test.adoc @@ -37,8 +37,8 @@ With `enterprise-tooltip` set to `true`, the tooltip renders as `data-enterprise == Styling notes -Suggested treatment for `.enterprise-feature`, consistent with the ticket's goal that readers learn the visual representation of an enterprise feature: +The implemented treatment for `.enterprise-feature`: -* A subtle distinguishing mark, such as a small lock or star glyph before the term, or a dotted underline in the brand accent color. -* Hover styling for the `data-enterprise-tooltip` variant, mirroring the glossary term tooltip behavior. -* No treatment should reduce the readability of the link text itself. +* A dotted underline in `--link-highlight-color`, matching the glossary term affordance, applied to the inner link or to the span when links are disabled. +* A small lock glyph after the term, rendered as an SVG mask filled with `--link-highlight-color`, so dark mode adapts automatically. +* The `data-enterprise-tooltip` variant is activated as a tippy tooltip by `12-activate-tooltips.js`, mirroring the site's other tooltips. The default `title` variant keeps the native browser tooltip. diff --git a/src/css/tooltips.css b/src/css/tooltips.css index d5db3127..e9b41c28 100644 --- a/src/css/tooltips.css +++ b/src/css/tooltips.css @@ -10,6 +10,30 @@ a.glossary-term { text-decoration: none !important; } +/* Enterprise feature terms, emitted by the enterprise inline macro + (docs-extensions-and-macros). A dotted underline matches the glossary + affordance, and a small lock glyph marks the term as license-gated. + Both use --link-highlight-color, so dark mode adapts automatically. */ +.enterprise-feature > a { + border-bottom: 2px dotted var(--link-highlight-color); + text-decoration: none !important; +} + +.enterprise-feature:not(:has(> a)) { + border-bottom: 2px dotted var(--link-highlight-color); +} + +.enterprise-feature::after { + content: ""; + display: inline-block; + width: 0.7em; + height: 0.7em; + margin-left: 0.2em; + background-color: var(--link-highlight-color); + -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; + mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; +} + h1 [data-tippy-root], h2 [data-tippy-root], h3 [data-tippy-root], diff --git a/src/js/12-activate-tooltips.js b/src/js/12-activate-tooltips.js index 163727ed..57ae483c 100644 --- a/src/js/12-activate-tooltips.js +++ b/src/js/12-activate-tooltips.js @@ -45,6 +45,14 @@ }) }) + // Initialize tippy for enterprise feature terms (enterprise inline macro) + document.querySelectorAll('[data-enterprise-tooltip]').forEach((el) => { + tippy(el, { + ...tooltipConfig, + content: el.getAttribute('data-enterprise-tooltip'), + }) + }) + // Convert title attributes to tippy tooltips for code block buttons document.querySelectorAll('.source-toolbox [title]').forEach((el) => { const titleContent = el.getAttribute('title') From a5025149fa739317dc0d4eafcd0342006eda0d88 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Fri, 7 Aug 2026 10:02:05 +0100 Subject: [PATCH 3/7] feat: mark enterprise-only properties with the shared lock icon Enterprise-only configuration properties now carry the same visual vocabulary as enterprise feature terms: the lock icon appears inline after the property name (new is-enterprise-property class, set by the property tooltip JS) and inside the tooltip's enterprise badge. The lock SVG moves to a shared --enterprise-lock-icon variable, filled with --link-highlight-color inline and currentColor in badges so both themes adapt. --- src/css/property-tooltips.css | 12 ++++++++++++ src/css/tooltips.css | 7 ++++--- src/css/vars.css | 1 + src/js/19-property-tooltips.js | 3 +++ 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/css/property-tooltips.css b/src/css/property-tooltips.css index 08012e3a..1be0f3b4 100644 --- a/src/css/property-tooltips.css +++ b/src/css/property-tooltips.css @@ -94,6 +94,18 @@ code.has-property-tooltip:focus-visible { border: 1px solid #c3e6cb; } +.property-doc-tooltip .prop-badge-enterprise::before { + content: ""; + display: inline-block; + width: 0.8em; + height: 0.8em; + margin-right: 0.25em; + vertical-align: -0.05em; + background-color: currentColor; + -webkit-mask: var(--enterprise-lock-icon) no-repeat center / contain; + mask: var(--enterprise-lock-icon) no-repeat center / contain; +} + /* Deprecated badge */ .property-doc-tooltip .prop-badge-deprecated { background: #f8d7da; diff --git a/src/css/tooltips.css b/src/css/tooltips.css index e9b41c28..5d60ced6 100644 --- a/src/css/tooltips.css +++ b/src/css/tooltips.css @@ -23,15 +23,16 @@ a.glossary-term { border-bottom: 2px dotted var(--link-highlight-color); } -.enterprise-feature::after { +.enterprise-feature::after, +code.is-enterprise-property::after { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.2em; background-color: var(--link-highlight-color); - -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; - mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; + -webkit-mask: var(--enterprise-lock-icon) no-repeat center / contain; + mask: var(--enterprise-lock-icon) no-repeat center / contain; } h1 [data-tippy-root], diff --git a/src/css/vars.css b/src/css/vars.css index 8b94408f..78dd8682 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -328,6 +328,7 @@ html:not([data-theme=dark]) { --link-font-color: var(--redpanda-800); --accordian-background: rgba(0, 0, 0, 0.05); --link-highlight-color: #444ce7; + --enterprise-lock-icon: url('data:image/svg+xml;utf8,'); --highlight-border: #a4bcfd; --link-highlight-background-color: rgba(68, 76, 231, 0.08); --link_hover-font-color: #2c30a0; diff --git a/src/js/19-property-tooltips.js b/src/js/19-property-tooltips.js index e447c588..7efab8b0 100644 --- a/src/js/19-property-tooltips.js +++ b/src/js/19-property-tooltips.js @@ -398,6 +398,9 @@ // Mark as having tooltip (for styling and to avoid re-processing) codeEl.classList.add('has-property-tooltip') codeEl.classList.add('has-documentation') + if (prop.isEnterprise) { + codeEl.classList.add('is-enterprise-property') + } codeEl.style.cursor = 'help' codeEl.setAttribute('tabindex', '0') codeEl.setAttribute('role', 'button') From f4f189d0d69127ecce0e943603ac66d1feb7dab9 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Fri, 7 Aug 2026 10:10:26 +0100 Subject: [PATCH 4/7] style: bump the enterprise lock icon to 0.9em The 0.7em inline and 0.8em badge locks were hard to read at body font sizes. --- src/css/property-tooltips.css | 4 ++-- src/css/tooltips.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/css/property-tooltips.css b/src/css/property-tooltips.css index 1be0f3b4..6f1e2cc2 100644 --- a/src/css/property-tooltips.css +++ b/src/css/property-tooltips.css @@ -97,8 +97,8 @@ code.has-property-tooltip:focus-visible { .property-doc-tooltip .prop-badge-enterprise::before { content: ""; display: inline-block; - width: 0.8em; - height: 0.8em; + width: 0.9em; + height: 0.9em; margin-right: 0.25em; vertical-align: -0.05em; background-color: currentColor; diff --git a/src/css/tooltips.css b/src/css/tooltips.css index 5d60ced6..467e2788 100644 --- a/src/css/tooltips.css +++ b/src/css/tooltips.css @@ -27,8 +27,8 @@ a.glossary-term { code.is-enterprise-property::after { content: ""; display: inline-block; - width: 0.7em; - height: 0.7em; + width: 0.9em; + height: 0.9em; margin-left: 0.2em; background-color: var(--link-highlight-color); -webkit-mask: var(--enterprise-lock-icon) no-repeat center / contain; From c7057b657737f2b44ae9c042c4d57d6d4221fcd1 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Fri, 7 Aug 2026 11:07:34 +0100 Subject: [PATCH 5/7] fix: define the enterprise lock icon variable for both themes The variable landed in the html:not([data-theme=dark]) block, so in dark mode the mask resolved to nothing and the lock rendered as a solid square. Move it to the theme-independent :root block. Caught while screenshotting the feature in dark mode. --- src/css/vars.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/vars.css b/src/css/vars.css index 78dd8682..0c238e11 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -328,7 +328,6 @@ html:not([data-theme=dark]) { --link-font-color: var(--redpanda-800); --accordian-background: rgba(0, 0, 0, 0.05); --link-highlight-color: #444ce7; - --enterprise-lock-icon: url('data:image/svg+xml;utf8,'); --highlight-border: #a4bcfd; --link-highlight-background-color: rgba(68, 76, 231, 0.08); --link_hover-font-color: #2c30a0; @@ -380,6 +379,7 @@ html:not([data-theme=dark]) { ============================================================================= */ :root { + --enterprise-lock-icon: url('data:image/svg+xml;utf8,'); /* Typography - Font Families */ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif; From 6aed29bda42f5f696579f38947f475c6275a2cb2 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Sat, 8 Aug 2026 19:07:58 +0100 Subject: [PATCH 6/7] preview: demonstrate every enterprise macro output shape Expands the test page from four basic shapes to the macro's full surface: default, feature xref, display text override, tooltip override, links disabled, tooltip disabled, the data-enterprise-tooltip variant, and an unstyled custom role. Adds stress contexts for the lock glyph and underline (multiple terms with punctuation, long names wrapping in narrow containers, list items, table cells, admonitions) and shows the shared lock on code.is-enterprise-property alongside a plain code element for comparison. --- preview-src/enterprise-macro-test.adoc | 93 ++++++++++++++++++++++++-- 1 file changed, 89 insertions(+), 4 deletions(-) diff --git a/preview-src/enterprise-macro-test.adoc b/preview-src/enterprise-macro-test.adoc index 2534b068..6fe2ff19 100644 --- a/preview-src/enterprise-macro-test.adoc +++ b/preview-src/enterprise-macro-test.adoc @@ -1,7 +1,7 @@ = Enterprise Macro Test :page-layout: default -Test page for the `enterprise` inline macro from docs-extensions-and-macros (DOC-887). The markup below replicates the macro's exact rendered output so the `enterprise-feature` class can be styled in this UI bundle. +Test page for the `enterprise` inline macro from docs-extensions-and-macros (DOC-887). The markup below replicates the macro's exact rendered output so the `enterprise-feature` class can be styled in this UI bundle. Every output shape the macro can emit appears here, plus stress contexts for the lock glyph and underline. == Default output @@ -13,12 +13,28 @@ The macro `enterprise:Continuous Data Balancing[]` renders: == With a feature xref -The macro `enterprise:Tiered Storage[xref=manage:tiered-storage.adoc]` renders: +The macro `enterprise:Tiered Storage[]` with a registry entry that carries an `xref` (or a per-use `xref=` attribute) renders the same shape, linking to the feature page: ++++

Enable Tiered Storage to offload data to object storage.

++++ +== Display text override + +`enterprise:Audit Logging[text=audit logging]` keeps the canonical feature name in the tooltip while the sentence reads naturally: + +++++ +

Enable audit logging before compliance review.

+++++ + +== Tooltip override + +`enterprise:Iceberg Topics[tooltip=...]` replaces the generated tooltip sentence: + +++++ +

Set up Iceberg Topics for your lakehouse.

+++++ + == Without a link With the `enterprise-links` attribute set to `false`: @@ -27,18 +43,87 @@ With the `enterprise-links` attribute set to `false`:

Configure Audit Logging on a SASL listener.

++++ +== Without a tooltip + +With `enterprise-tooltip` set to `false`, the span carries no tooltip attribute at all (underline and lock must still render): + +++++ +

Use Leader Pinning to keep leaders in one zone.

+++++ + == Data-attribute tooltip variant -With `enterprise-tooltip` set to `true`, the tooltip renders as `data-enterprise-tooltip` for UI-driven tooltips instead of the native `title`: +With `enterprise-tooltip` set to `true`, the tooltip renders as `data-enterprise-tooltip` for UI-driven tooltips instead of the native `title` (activated as a tippy tooltip by `12-activate-tooltips.js`): ++++

Set up Iceberg Topics for your lakehouse.

++++ +== Custom role + +With `enterprise-feature-role` set to something other than `enterprise-feature`, the UI applies no styling. This one should look like a plain link, with no underline or lock: + +++++ +

A custom role renders Shadowing unstyled.

+++++ + +== Stress contexts + +Multiple terms in one paragraph, with punctuation directly after the term: + +++++ +

Both Tiered Storage, Remote Read Replicas, and Whole Cluster Restore (WCR) share one license gate.

+++++ + +A long feature name that wraps across lines (the lock glyph must sit after the last word, not float alone): + +++++ +

Narrow container: Continuous Intra-Broker Partition Balancing wraps here.

+++++ + +In a list: + +++++ + +++++ + +In a table cell: + +++++ + + + + + + + +

Tiered Storage

Feature description in the next cell

+++++ + +In an admonition: + +[NOTE] +==== +This note mentions an enterprise feature: pass:[Shadowing] inside admonition content. +==== + +== Enterprise properties share the lock + +Enterprise-only configuration properties get the same lock glyph through `code.is-enterprise-property` (added by `19-property-tooltips.js`): + +++++ +

The property cloud_storage_enabled requires an Enterprise license, while log_segment_size does not.

+++++ + == Styling notes The implemented treatment for `.enterprise-feature`: * A dotted underline in `--link-highlight-color`, matching the glossary term affordance, applied to the inner link or to the span when links are disabled. -* A small lock glyph after the term, rendered as an SVG mask filled with `--link-highlight-color`, so dark mode adapts automatically. +* A small lock glyph (0.9em) after the term, rendered as an SVG mask filled with `--link-highlight-color`. The mask variable lives in the global `:root` design tokens so dark mode adapts automatically. +* `code.is-enterprise-property` reuses the same mask variable, so feature terms and enterprise properties carry an identical lock. * The `data-enterprise-tooltip` variant is activated as a tippy tooltip by `12-activate-tooltips.js`, mirroring the site's other tooltips. The default `title` variant keeps the native browser tooltip. +* The generated `enterprise_features::` tables need no UI styling: they render as ordinary AsciiDoc tables whose feature cells contain the same linked spans shown above. From d2a6fb1dd55e90a6f6a39fcda1fbef58dab3c832 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Sat, 8 Aug 2026 19:25:06 +0100 Subject: [PATCH 7/7] fix(preview): use real macro link targets in the enterprise fixture The enterprise macro fixture replicated the macro's rendered markup but used href="#" everywhere, so the two sections that demonstrate link resolution did not show where the macro actually points. buildEnterpriseContent (macros/enterprise.js:215) links to the feature page whenever the registry entry resolves an xref and only falls back to the licensing page when it does not. So the default-output section now uses Topic Deletion Control, which the registry deliberately leaves without an xref ("No dedicated feature page"), and the feature-xref section keeps Tiered Storage. Both hrefs are the published URLs those resource IDs resolve to. The remaining sections keep placeholder targets because they vary only tooltip, role, and link handling; the intro says so. Co-Authored-By: Claude Opus 5 --- preview-src/enterprise-macro-test.adoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/preview-src/enterprise-macro-test.adoc b/preview-src/enterprise-macro-test.adoc index 6fe2ff19..937ec718 100644 --- a/preview-src/enterprise-macro-test.adoc +++ b/preview-src/enterprise-macro-test.adoc @@ -1,14 +1,14 @@ = Enterprise Macro Test :page-layout: default -Test page for the `enterprise` inline macro from docs-extensions-and-macros (DOC-887). The markup below replicates the macro's exact rendered output so the `enterprise-feature` class can be styled in this UI bundle. Every output shape the macro can emit appears here, plus stress contexts for the lock glyph and underline. +Test page for the `enterprise` inline macro from docs-extensions-and-macros (DOC-887). The markup below replicates the macro's exact rendered output so the `enterprise-feature` class can be styled in this UI bundle. Every output shape the macro can emit appears here, plus stress contexts for the lock glyph and underline. The first two sections use the link targets the macro really resolves to: the licensing page for `Topic Deletion Control`, which has no feature page in the registry, and the feature page for `Tiered Storage`, which has one. Later sections vary only the tooltip, role, or link handling, so their targets are placeholders. == Default output -The macro `enterprise:Continuous Data Balancing[]` renders: +The macro `enterprise:Topic Deletion Control[]` with a registry entry that carries no `xref` renders, linking to the licensing page: ++++ -

This cluster uses Continuous Data Balancing to spread partitions evenly.

+

This cluster uses Topic Deletion Control to block accidental topic deletes.

++++ == With a feature xref @@ -16,7 +16,7 @@ The macro `enterprise:Continuous Data Balancing[]` renders: The macro `enterprise:Tiered Storage[]` with a registry entry that carries an `xref` (or a per-use `xref=` attribute) renders the same shape, linking to the feature page: ++++ -

Enable Tiered Storage to offload data to object storage.

+

Enable Tiered Storage to offload data to object storage.

++++ == Display text override