🎨 Palette: Add localized empty state to Changelog search#61
Conversation
- Implemented an empty results state for the Changelog search and filter view using the existing `.reworking-container` component. - Added localized strings for 'changelog.empty' in English and Russian to `assets/data/site.json`. - Updated `assets/js/changelog.js` to dynamically toggle the empty state based on search results and optimized the filtering loop. - Added `aria-live="polite"` to the empty state for improved screen reader accessibility. - Ensured consistency by using the native `hidden` attribute for both cards and the empty state container. - Updated `.jules/palette.md` with new UX learnings. Co-authored-by: MilakyS <155958485+MilakyS@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
✅ Deploy Preview for melodious-queijadas-3cc817 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
1 participant
🎨 Palette Enhancement: Changelog Empty State
This PR adds a missing micro-UX detail to the Changelog page: a dedicated "empty state" that appears when search queries or filters return no results. This brings the Changelog in line with the Examples page and ensures users aren't left with a confusing blank space.
💡 What
changelog.htmlandassets/js/changelog.js.reworking.cssinto the Changelog page to reuse the animated icon styles.applyFilterslogic to show/hide the feedback state based on result count.🎯 Why
Without an empty state, users searching for non-existent terms might think the page has crashed or is still loading. Providing "No matching changes found" text provides immediate confirmation of their action.
♿ Accessibility
aria-live="polite"to the empty state container so screen reader users are notified when the list results are cleared.📸 Verification
Verified via automated Playwright script (
changelog_empty_final.png) that the state triggers correctly in both English and Russian locales.PR created automatically by Jules for task 12601652905000167296 started by @MilakyS