diff --git a/preview-src/enterprise-macro-test.adoc b/preview-src/enterprise-macro-test.adoc new file mode 100644 index 00000000..937ec718 --- /dev/null +++ b/preview-src/enterprise-macro-test.adoc @@ -0,0 +1,129 @@ += 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. 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:Topic Deletion Control[]` with a registry entry that carries no `xref` renders, linking to the licensing page: + +++++ +

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

+++++ + +== With a feature xref + +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`: + +++++ +

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` (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 (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. diff --git a/src/css/property-tooltips.css b/src/css/property-tooltips.css index 08012e3a..6f1e2cc2 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.9em; + height: 0.9em; + 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 d5db3127..467e2788 100644 --- a/src/css/tooltips.css +++ b/src/css/tooltips.css @@ -10,6 +10,31 @@ 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, +code.is-enterprise-property::after { + content: ""; + display: inline-block; + 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; + mask: var(--enterprise-lock-icon) no-repeat center / contain; +} + h1 [data-tippy-root], h2 [data-tippy-root], h3 [data-tippy-root], diff --git a/src/css/vars.css b/src/css/vars.css index 8b94408f..0c238e11 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -379,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; 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') 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')