Distinguish interactive examples from non-interactive ones.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 142
- Forks
- 230
- PR merge metrics
- No merged PRs in 30d
Description
In https://github.com/PolymerLabs/lit.dev/pull/220, there are a few interactive examples and then a non-interactive one. When I got to the non-interactive one and didn't see output, I assumed it was a bug. It looked exactly the same, I expected to be able to edit it and see output.
Recommend we have some visual treatment for interactivity. We want to make this subtle but clear so that the user is not distracted by it but also not confused.
Suggestion, handle it something like we do the alert box with a border and an icon. If that's too jarring, the icon could be at the top/right of the code editor or something.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Review pull request 220 and the existing alert box treatment first, then locate the code that renders interactive and non-interactive examples. Define a subtle, consistent visual distinction that makes non-interactivity clear without distracting from the example; the issue is done when users can tell whether an example produces live output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100