Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(interactive-examples): support CSS examples #12664

Open
wants to merge 60 commits into
base: main
Choose a base branch
from

Conversation

caugner
Copy link
Contributor

@caugner caugner commented Feb 24, 2025

Summary

Adds support for CSS examples, especially those with multiple choices.

Part of https://github.com/orgs/mdn/discussions/782.


How did you test this change?

  1. Checked out migrate-interactive-examples content branch.
  2. Ran yarn dev.
  3. Tested especially with these tests:

caugner and others added 29 commits February 20, 2025 16:26
Previously, values from `.is-js-height` were used.
Avoids vertical scrollbar on background-color example.
@caugner caugner requested a review from a team as a code owner February 24, 2025 15:20
Copy link
Member

@LeoMcA LeoMcA left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lovely work, I opted to "show not tell" with my review, and fixed some things/did some refactoring myself, these can be seen with these diffs:

Mostly fixes/additions of things not implemented yet, notably implementing dark mode: https://github.com/mdn/yari/pull/12664/files/b235911713a9e2f299494bd52d479a471a44b5f5..46cc5847f2dd5d6722f1db32dd02ba76c1041b4b

A pretty major refactor which I think you'd mentioned might be good to do, separating out the choice logic (and tabbed, and console) - achieved it in a perhaps unconventional way (using mixins), but it works nicely: 97fd3a3

Mostly code review changes, notably replacing the bitmask with an array and splitting the click/update events: https://github.com/mdn/yari/pull/12664/files/97fd3a37188151466d70a64c779bcfe3560a89f2..8bcafda92f3e054574dd5eba29f51620bfbc8299

Copy link
Contributor

@fiji-flo fiji-flo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 for your changes @LeoMcA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants