google / google/playground-elements

Code folds do not suggest interactivity

Open
#133 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
648
Forks
61
PR merge metrics
No merged PRs in 30d

Description

Following up on a [discussion on Slack](https://lit-and-friends.slack.com/archives/C03PF4L4L/p1619158766416200), it turns out the `...` as a code fold mark does not suggest interacting by clicking on it.

**Proposed solution**
A light border might already improve this, as per this comparison:

Without border (current) | With border
------------ | ----------
![image](https://user-images.githubusercontent.com/3351287/115829605-78052580-a40f-11eb-9fc0-eccfe0f22963.png) | ![image](https://user-images.githubusercontent.com/3351287/115829683-8e12e600-a40f-11eb-8b9d-d6af5bcef659.png)

I'm sure this can be even further improved -- I'm not so good at styling things. Still, here's the entire change I applied:

```css
.CodeMirror-foldmarker {
font-family: sans-serif;
/* I added these below */
border: 1px solid darkgray;
border-radius: 2px;
padding: 0 4px;
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.