examples: add filter input (#3625)

This was @Taha-Hassan-Git 's idea originally but I thought it wasn't
necessary at the time (with our much shorter list of examples just a
couple months ago!). I think now that we have a plethora of examples
that @Taha-Hassan-Git 's original instinct here was correct and we
should a filter box.

<img width="255" alt="Screenshot 2024-04-26 at 15 22 08"
src="https://github.com/tldraw/tldraw/assets/469604/1eabc04e-c4d0-414d-881c-7ca965dbd6a3">


### Change Type

<!--  Please select a 'Scope' label ️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [x] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Examples: add a filter box.
This commit is contained in:
Mime Čuvalo 2024-04-27 12:13:38 +01:00 committed by GitHub
parent a771549670
commit 608f0210a0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 2 deletions

View file

@ -28,6 +28,10 @@ export function ExamplePage({
children: React.ReactNode
}) {
const categories = examples.map((e) => e.id)
const [filterValue, setFilterValue] = useState('')
const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFilterValue(e.target.value)
}
return (
<DialogContextProvider>
@ -69,6 +73,12 @@ export function ExamplePage({
Develop
</a>
</div>
<input
className="example__sidebar__filter"
placeholder="Filter…"
value={filterValue}
onChange={handleFilterChange}
/>
<ul className="example__sidebar__categories scroll-light">
{categories.map((currentCategory) => (
<li key={currentCategory} className="example__sidebar__category">
@ -76,7 +86,10 @@ export function ExamplePage({
<ul className="example__sidebar__category__items">
{examples
.find((category) => category.id === currentCategory)
?.value.map((sidebarExample) => (
?.value.filter((example) =>
example.title.toLowerCase().includes(filterValue.toLowerCase())
)
.map((sidebarExample) => (
<ExampleSidebarListItem
key={sidebarExample.path}
example={sidebarExample}

View file

@ -70,7 +70,7 @@ html,
width: 256px;
min-width: 256px;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-rows: auto 48px 48px 1fr auto;
border-right: 1px solid var(--black-transparent-light);
overflow: hidden;
font-size: 14px;
@ -83,6 +83,14 @@ html,
color: inherit;
}
.example__sidebar__filter {
margin: 8px;
padding: 8px;
border-radius: 6px;
border: 1px solid #e8e8e8;
font-size: 14px;
}
/* Header */
.example__sidebar__header {
@ -131,10 +139,15 @@ ul.example__sidebar__categories {
/* Category */
li.example__sidebar__category {
display: none;
position: relative;
padding: 8px 0px;
}
.example__sidebar__category:has(> ul > li) {
display: block;
}
ul.example__sidebar__category__items {
list-style: none;
padding: 0px 0px 0px 4px;