feat(whatsnew): add what's new nav button and dialog - #744
Open
yevheniia0831 wants to merge 90 commits into
Open
yevheniia0831 wants to merge 90 commits into
yevheniia0831 wants to merge 90 commits into
Conversation
#1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Scoped to /drafts/yseverinovska/test456 only, no other page affected. Temporary — remove before merging, see TODO(new1140) in nav.js. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
nav.js: insert the temporary whatsnew li as plain content (like the real "feedback" li) so it flows through the existing loop instead of a separate force-injection block, landing right after Feedback. whatsnew.js/whatsnew-dialog.js: temporarily fetch from .aem.page since the real whats-new content isn't published to .aem.live yet. Both changes are temporary — see TODO(new1140) comments, revert before merging. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- toc background var(--s2-gray-50) (#F8F8F8) - "What's new" heading weight 700, not 800 - active toc item: no bold, stripe spans full padded block height instead of just the text line, via absolute positioning - close button radius uses --s2-corner-radius-800 token instead of 50% #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- CTA button always renders (disabled when no href yet), instead of disappearing entirely when an entry has no authored link - TOC click scrolls so the card's image sits 40px below the scroll area's top, not flush against it - nav dot now clears when the dialog is closed (nx-whatsnew-closed event), not the instant it opens - card spacing: title-to-body 4px, body-to-button 24px, via explicit margins instead of one uniform gap - cards scroll area restructured so its native scrollbar sits inset 40px from the popup edges instead of flush against the rounded corners, and thinned/restyled instead of the default wide one - removed the vertical divider between the toc and cards panes #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- replace per-item toc bars with one shared sliding indicator (transform/height transition) instead of an instant on/off blink - toc item left padding flat 16px; toc's own left inset now 40px total (removed a redundant nested 16px indent stacking on the container's own) - toc gets its own inset (20px), thinner, always-visible-track scrollbar, separate from the cards pane's scrollbar - card CTA disabled state scoped to .wn-card-cta only: flat gray (--s2-gray-100 bg, --s2-gray-700 text) instead of the shared button styles' opacity-dim, without touching buttons.css/form.css - close button repositioned 8px closer to the top and right edges #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- close button moved to 8px from top/right (was 4px) - cards scrollbar now sits 20px from the true edge instead of 40px, while card content stays at 40px via split outer/inner padding, same split-padding approach already used for the toc scrollbar #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Was transparent-track; now same 4px/gray-200-track/gray-300-thumb treatment as the toc's scrollbar, per reference screenshot. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…pacing - ::-webkit-scrollbar rules un-nested from & — that proprietary pseudo-element predates CSS nesting and wasn't reliably resolving nested, silently falling back to the native OS overlay scrollbar (visible as an oversized plain gray bar on hover) - track/thumb now gray-100/gray-400 (was gray-200/gray-300, too close in value to read as pale-track-vs-darker-thumb) - last card now sits 56px from the popup's bottom edge, matching the card-to-card gap, instead of the panel's default 40px padding #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- native scrollbar can't stay hidden at rest and only appear during active scroll without hover/OS involvement, so it's replaced with a custom track+thumb: hidden at rest, fades in on scroll, auto-hides 1s after scrolling stops, no hover reaction, sized/positioned from real scrollTop/scrollHeight, refreshed via ResizeObserver as images load - moved the "56px after last card" spacing from the static wn-cards-panel wrapper's padding onto wn-cards itself (the actual scrolling element) — padding on the static wrapper was permanently visible in the viewport regardless of scroll position (since the scrolling element is sized to the wrapper's content-box, which already excludes it), showing as a white gap under whatever was cut off on initial open; padding on the scrolling element instead travels with the content and only appears once scrolled to the end #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The custom JS-driven track/thumb (fade on scroll, auto-hide, ResizeObserver sizing) added more complexity and visual issues than the plain native scrollbar it replaced. Back to native ::-webkit-scrollbar/scrollbar-color, 4px, gray-100 track, gray-400 thumb, right-inset via the existing 20px padding split. Bottom padding on the scrolling element stays at 120px. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- removed .wn-panel's 1px border — popup now relies on the drop shadow alone to separate from the backdrop - wn-cards-panel bottom padding restored to 40px (matching top), so the scrollbar/content stop 40px short of the true bottom edge — trades back in the static gap that was previously removed, now a deliberate choice for scrollbar framing rather than the earlier initial-open cutoff issue - explicit :hover/:active rules on the scrollbar thumb/track forcing the same size and color as the resting state, to neutralize browsers' default hover-widen/darken affordance on custom-styled scrollbars #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
wn-cards padding-bottom 120px -> 140px. Card-to-card gaps unaffected. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- scroll containers (toc + cards) switched from height:100% against a non-flex padded parent to the standard flex:1 + min-height:0 pattern — the former was not reliably resolving against the parent's content box net of its own padding, which was likely why the cards scrollbar wasn't respecting the intended 40px top/bottom inset - clicking the last toc item couldn't fully scroll the last card to the 40px-from-top target because a static trailing padding value can't guarantee enough scroll room for every card/viewport combination — the browser clamps scrollTop at scrollHeight - clientHeight regardless. Now computed at open time (clientHeight - 40) so any card, including the last, always has exactly enough room to reach that position #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- wn-cards-panel bottom padding back to 0 — the 40px static value was recreating the permanent white-gap-over-cut-content bug from earlier (visible right under the second card's image on initial open) - _ensureScrollRoom now computes the minimum trailing space actually needed (clientHeight - 40 - lastCardHeight) instead of a blanket clientHeight - 40 regardless of the last card's real height, which was leaving far too much empty space after a short last card #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- freshness now compares the fragment's own published-date meta tag (per Markus, added specifically for this) instead of the newest entry's id — new fetchPublishedDate() does a raw fetch since loadFragment() strips <head> entirely; whatsNewFlags.js renamed to store/compare the date string directly - removed the "Try it now" CTA entirely, including the now-dead href parsing in parse-whatsnew.js and the orphaned bottom margin it left on .wn-card-body - nav.js's temporary test scaffold no longer gated to one page/route — shows anywhere while still marked as temporary (real rollout stays real content authoring) - responsive: @media (width < 600px) (matches the exact breakpoint and range-syntax convention already used in nx2/styles/styles.css) — toc collapses to just its gray heading strip, item list hidden, cards stack full-width below #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
_scrollToEntry only scrolled the cards pane, leaving _activeId (and thus the sliding indicator) to be inferred later by the IntersectionObserver. Removing the CTA buttons made cards short enough that a click-triggered scroll no longer reliably crosses the observer's visibility thresholds, so the indicator stopped updating on click. Now set directly on click; the observer still handles manual-scroll-without-clicking. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Setting _activeId on click wasn't enough — the IntersectionObserver kept firing during the smooth-scroll animation, and with shorter cards (no CTA buttons) both cards can be partially visible mid-scroll, letting the observer's "most-visible card wins" logic overwrite the clicked id back to the wrong card before the scroll settled. Now suppressed until the container's scrollend event fires. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
Commits
|
Add 1 to the IntersectionObserver's threshold list so it fires precisely when a card becomes fully visible during manual scrolling, not just at 25/50/75%. Falls back to highest-ratio-wins as before for cards taller than the scroll viewport, which can never reach full visibility. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Mobile cards-panel padding was redundantly repeating the desktop top inset (40px), leaving a gap between the gray toc strip and where cards start scrolling into view. Top padding now 0 on mobile only, desktop unaffected. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Wrapped toc + cards in a new .wn-body container. Desktop: unchanged, still two independent side-by-side scroll boxes. Mobile: .wn-body becomes the single shared scroll owner and .wn-toc goes position:sticky within it (opaque background), so scrolling slides cards up behind the gray heading instead of stopping at a static gap. 40px gap still shows at rest, matching the reference "what's new" modal's behavior. Close button stays untouched, still positioned off the non-scrolling .wn-panel. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
.wn-cards-panel is still row-direction flex (unchanged), so setting .wn-cards to flex:none for the sticky-toc restructure sized it to content width instead of stretching full width. Added width:100% explicitly. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Was 40 left / 20 right, left over from the desktop scrollbar-inset split. Irrelevant on mobile since .wn-cards doesn't scroll independently there anymore. #1140 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Mobile previously fell through to the same static value as desktop, this override incorrectly zeroed it instead. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
.body's default slot only ever receives absolutely-positioned children (.wn-close, .wn-body), so it has no in-flow content to overflow. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Its children (div, h3, p) are all block-level, stack fine without it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…o small Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
No other block in the repo customizes scrollbars. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Root cause of the Arial fallback: these elements only relied on inheriting font-family from :host, which doesn't reliably resolve to Adobe Clean here. Setting it explicitly fixes it (confirmed by hhertach). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Previously module-level, global listeners that ran for the page's entire life even when no dialog was ever open. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Remove the pointer/keydown tracking and manual focus restore. The native dialog close already returns focus to the trigger. Add a test that checks the trigger's shadowRoot.activeElement. Set only max width/height on the dialog so it is capped, not fixed at 848x620. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Only setting max size collapses the dialog to zero height. The absolutely positioned .wn-body adds no height to the panel. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add an opt-in size="large" variant to nx-dialog. It fills the width up to 848px and shrinks with the viewport. Its body is a flex column so slotted layouts can fit the panel height and scroll their own regions. Default dialogs are unchanged. whatsnew uses the large variant and drops absolute positioning and the fixed 848x620 min size. The dialog now sizes to its content, capped at 620px high. Remove the now unused --nx-dialog-min-height and --nx-dialog-body-overflow properties. Add layout tests at four viewport sizes and update the dialog docs and style guide. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Hold the clicked entry until its smooth scroll ends (scrollend or user input), and pick the active card by visible pixels across all cards instead of only the entries in the latest observer callback. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This branch was successfully deployed
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
6 participants
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.
Fix adobe/da-live#1140
Adds a "What's new" button to the nav (next to Feedback, gift icon) that opens a popup showing new product features, sourced from a DA-authored fragment.
Desktop: two-pane dialog, reuses the shared
nx-dialogcomponent. Left is a ToC, right is a scrollable feed of cards. Each card is either an image or a looping MP4 video (author adds a link to an.mp4file, same content pattern as adobe/aem-block-collection's video block). Click a ToC item to scroll to it, active item tracked with a sliding indicator.Mobile (below 600px): ToC collapses to a sticky heading strip, cards scroll behind it.
Auto-open + dot: compares fragment's
published-dateto last seen date (localStorage). If newer, shows a dot and auto-opens once. Dot clears once every entry has actually been viewed (scrolled to or clicked in the toc), not just on close. Also opens on click regardless.Since first draft: reused shared
nx-dialog(was a raw<dialog>), fixed several real bugs found in review (cards not scrolling, toc indicator invisible on open, last card not fully reachable, scrollspy getting stuck, double-fetch, unhandled fetch errors, dialog stacking, focus not returning to trigger on close, dot clearing on close instead of actual viewing), added MP4 video card support, fixed a real pre-existing bug in the shared fragment loader (relative media paths were never actually getting rewritten to absolute URLs), added unit tests.Left to do:
nav.jstemp scaffold still force-injects the nav item (real content entry blocked on permissions).Test URLs:
🤖 Generated with Claude Code