Repository navigation
fix(directive-demos): prereq card CSS, tested-with panel, hotspots, Joule footer - #3093
Merged
Merged
Conversation
…ots, Joule footer scope
Four demo-tutorial features were broken (verified in live browser, not just HTML):
1. Prereq card (::requires) rendered 0x0 — .tut-prereq-card/.prereq-* had NO CSS
rule in any shipped stylesheet. Added rules to directives-ui.css (bundled).
2. "Tested with" panel never appeared — render-frontmatter.ts emits the
testedWith param but nothing invoked the shortcode. Render it inline in
u1-object-page.html from .Params.testedWith + added .tut-tested-with CSS.
3. Image hotspots ({hotspots="..."}) leaked as raw text — goldmark only
attaches {attr} blocks to BLOCK elements, not inline images. images.ts now
moves a standalone image's trailing {...} onto the next line so goldmark
attaches it and render-image.html emits the .tut-hotspot overlay anchors.
In-prose images left untouched. +4 unit tests.
4. Joule chat input spanned the whole viewport — the autohide-footer rule in
ui5-overrides.css targeted a bare `footer` descendant, which also matched the
Joule panel's nested <footer class="joule-panel__footer"> and forced it
position:fixed/left:0/right:0. Scoped the rule to `body > footer.site-footer`.
Verified live: input now docks inside the 420px panel (was 1263px full-width).
40/40 image tests pass; Joule selector + geometry verified via live getComputedStyle.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Four MORE broken features on the directive demos, found by driving the live browser (not just HTML grep — that's what missed them before). All verified with
getComputedStyle/unit tests..tut-prereq-card/.prereq-*selectors existed in no stylesheet. Added rules todirectives-ui.css(already bundled). Card now has a visible box.render-frontmatter.tsemits thetestedWithparam but nothing ever invoked the shortcode. Render it inline inu1-object-page.htmlfrom.Params.testedWith+ added.tut-tested-withCSS.{attr}blocks only to BLOCK elements, not inline images.images.tsnow moves a standalone image's trailing{hotspots=...}onto the next line so goldmark attaches it →render-image.htmlemits the.tut-hotspotoverlay anchors. In-prose images untouched. +4 unit tests.ui5-overrides.csstargeted a barefooterdescendant, which also matched the Joule panel's nested<footer class="joule-panel__footer">and forced itposition:fixed;left:0;right:0. Scoped tobody > footer.site-footer. Verified live: input docks inside the 420px panel (was 1263px).Testing
npm test -- images→ 40/40 passgetComputedStylebefore/after — selector no longer matches the Joule footer; input geometry nowinputWithinPanel: trueNext
Merge → DEV rebuild of the 4 demo slugs → browser-verify each renders, then DEV→main→PROD.