search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
798 stars 163 forks source link

Percy examples combination - `patterns/navigation` #5165

Closed jmuzina closed 6 days ago

jmuzina commented 1 week ago

Combines patterns/navigation examples

Please review #5176 before this - this depends on vertical spacing introduced there.

Dark nav examples

As far as I'm aware, navigation is a special case where we intend our users to use the is-dark on the navigation header. As such, I didn't delete the dark-specific examples sliding-dark, search-dark, dropdown-dark as we still want to embed them in the docs.

The example embedding script is not yet smart enough to handle query parameters. If you pass in a link to an example with a theme parameter, the rendered HTML does not reflect the query parameter, nor does the code snippet. I think the iframe renderer in example.js is fetching file content, not what is actually rendered. So that will need to be revisited before we delete these theme-specific examples.

QA

This can be merged after merging of #5176

webteam-app commented 1 week ago

Demo

Jenkins

demos.haus

jmuzina commented 1 week ago

@bartaz @pastelcyborg I've run into a problem with some of the components that have more JS functionality due to our decision to use includes rather than iframes. Now, the scripts interfere with each other (they are included multiple times, by separate embedded examples). Sometimes, you can work around this (see Search & Filter). However, other times, things get uglier, like in navigation.

Multiple examples import _script-sliding.js, causing this error: Uncaught SyntaxError: redeclaration of const initNavigationSliding

One thing you can do is use jinja checks to only include the example's JS once in the combined.html. However, if you have multiple examples that use the same IDs, this can cause the same action to affect multiple examples. Sliding navigation is a particularly hairy case: Screencast from 06-20-2024 02:31:23 PM.webm

Any thoughts on cases like these? Maybe we could assume no interactivity for these combined examples? Or we could just not combine the components that have this sort of problem.

jmuzina commented 1 week ago

The team decided to disable interactivity on the combined examples page for components that have the above-stated script problem. I am creating issues to capture solving this problem in future. This component's script encapsulation issue is #5180 .

pastelcyborg commented 1 week ago

I'm going to defer to @bartaz here - things look fine at a glance, but there's certainly context I'm not aware of related to the deprecated components and JS functionality we discussed.