Skip to content

Single/Multi Select themed scrollbar #457

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.

Sign up for GitHub

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

Merged
bendera merged 33 commits into from
Jul 2, 2025
Merged

Single/Multi Select themed scrollbar #457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
d38dea5
FIx sync issues
bendera Jun 21, 2025
6030859
Use scrollable component
bendera Jun 21, 2025
5054df3
Add alwaysVisible property
bendera Jun 21, 2025
f0e6199
Does not allow focusing scrollable
bendera Jun 21, 2025
b7cdb5f
Refactor
bendera Jun 21, 2025
64d294a
Refactor scroll handler
bendera Jun 21, 2025
c220f0c
Refactor
bendera Jun 21, 2025
1fc80cf
Refactor
bendera Jun 21, 2025
9a69e6b
Renaming
bendera Jun 21, 2025
020b657
Fix thumb position sync issues in Scrollable
bendera Jun 22, 2025
28b3048
Scrollable fixes in the Select dropdown
bendera Jun 22, 2025
64268c9
Don't show shadow if it's not scrolled
bendera Jun 22, 2025
51ca9ba
Scrollable improvements
bendera Jun 22, 2025
c73b966
Don't activate first option by default
bendera Jun 22, 2025
2326258
Add demos
bendera Jun 22, 2025
c1ef55d
Update changelog
bendera Jun 22, 2025
3a646fe
Fix demo
bendera Jun 22, 2025
cb6004e
FIx demos
bendera Jun 22, 2025
bbaba13
Fixes
bendera Jun 23, 2025
564005e
Change the default minThumbSize to 20
bendera Jun 23, 2025
d4fac0e
Implement scrolling based on the wheel event
bendera Jun 26, 2025
536a92c
Improve scrolling
bendera Jun 27, 2025
d4122b2
Sync scroll position
bendera Jun 27, 2025
de9a59b
Add sensitivity modifier properties
bendera Jun 27, 2025
b4657ba
Prevent appearing useless outline
bendera Jun 27, 2025
79a1314
Prettier fix
bendera Jun 27, 2025
bbb92e7
Add tests
bendera Jul 2, 2025
9b9ca7b
Fix the create option event handler
bendera Jul 2, 2025
828df5e
Update changelog
bendera Jul 2, 2025
0d2596a
Rename Scrollable custom event, add type definitions
bendera Jul 2, 2025
44bbd1d
Add tests
bendera Jul 2, 2025
90921cb
Add custom elements manifest deprecator
bendera Jul 2, 2025
9fa4304
Update docs
bendera Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,27 @@ All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)

## [Unreleased]

### Added

- Added `alwaysVisible`, `scrollSensitivity`, `fastScrollSensitivity` and `minThumbSize` property to **Scrollable**.
- **Scrollable** now dispatches the `vsc-scrollable-scroll` event.
- Added nicer checkboxes to **MultiSelect**.
- Added `selectAll()` and `selectNone()` methods to **MultiSelect**.
- Added a themed scrollbar to the **SingleSelect** and **MultiSelect**.

### Changed

- **ButtonGroup** can now shrink inside a flex container.
- **SingleSelect** and **MultiSelect** accessibility has been improved.
- **MultiSelect**: The badge displaying the number of selected options is now more compact.
- The 'Select all', 'Select none', and 'Accept' buttons have been removed from the **MultiSelect** dropdown for improved accessibility and better maintainability.

### Fixed

- **Label** can now be associated with **SingleSelect** and **MultiSelect**.

## [1.16.1] - 2025-05-22

### Fixed
Expand Down
7 changes: 7 additions & 0 deletions custom-elements-manifest.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {cemDeprecatorPlugin} from 'custom-elements-manifest-deprecator';

const options = {};

export default {
plugins: [cemDeprecatorPlugin(options)],
};
82 changes: 82 additions & 0 deletions dev/vscode-scrollable/always-visible.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
nonce="abc123"
>
<style nonce="abc123">
vscode-scrollable {
width: 200px;
height: 200px;
}

vscode-scrollable div {
z-index: 200;
}
</style>
<script nonce="abc123">
window.vscodeWebviewPlaygroundNonce = 'abc123';
</script>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
nonce="abc123"
></script>
<script type="module" src="/dist/main.js" nonce="abc123"></script>
<script nonce="abc123">
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>

<body>
<main>
<vscode-demo>
<vscode-scrollable always-visible>
<p style="text-align: justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
volutpat ex sit amet venenatis auctor. Nunc semper consequat diam
sit amet eleifend. Ut a viverra nulla. Fusce vel sapien quis metus
vestibulum dignissim in sit amet orci. Sed lorem diam, scelerisque
non urna ac, egestas suscipit eros. Donec consequat tristique
lectus, quis placerat metus venenatis a. Nam fringilla lectus
finibus iaculis dictum. Maecenas in risus velit. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
curae;
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div>aaa</div>
</vscode-scrollable>
</vscode-demo>
<div style="width: 200px; height: 200px; overflow: auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat
ex sit amet venenatis auctor. Nunc semper consequat diam sit amet
eleifend. Ut a viverra nulla. Fusce vel sapien quis metus vestibulum
dignissim in sit amet orci. Sed lorem diam, scelerisque non urna ac,
egestas suscipit eros. Donec consequat tristique lectus, quis placerat
metus venenatis a. Nam fringilla lectus finibus iaculis dictum.
Maecenas in risus velit. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia curae;
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div>aaa</div>
</div>
</main>
</body>
</html>
85 changes: 85 additions & 0 deletions dev/vscode-scrollable/change-event.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
nonce="abc123"
>
<style nonce="abc123">
vscode-scrollable {
width: 200px;
height: 200px;
}

vscode-scrollable div {
z-index: 200;
}
</style>
<script nonce="abc123">
window.vscodeWebviewPlaygroundNonce = 'abc123';
</script>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
nonce="abc123"
></script>
<script type="module" src="/dist/main.js" nonce="abc123"></script>
<script nonce="abc123">
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>

<body>
<main>
<vscode-demo>
<vscode-scrollable always-visible>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
volutpat ex sit amet venenatis auctor. Nunc semper consequat diam
sit amet eleifend. Ut a viverra nulla. Fusce vel sapien quis metus
vestibulum dignissim in sit amet orci. Sed lorem diam, scelerisque
non urna ac, egestas suscipit eros. Donec consequat tristique
lectus, quis placerat metus venenatis a. Nam fringilla lectus
finibus iaculis dictum. Maecenas in risus velit. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
curae;
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div>aaa</div>
</vscode-scrollable>
</vscode-demo>
<div style="width: 200px; height: 200px; overflow: auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat
ex sit amet venenatis auctor. Nunc semper consequat diam sit amet
eleifend. Ut a viverra nulla. Fusce vel sapien quis metus vestibulum
dignissim in sit amet orci. Sed lorem diam, scelerisque non urna ac,
egestas suscipit eros. Donec consequat tristique lectus, quis placerat
metus venenatis a. Nam fringilla lectus finibus iaculis dictum.
Maecenas in risus velit. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia curae;
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div>aaa</div>
</div>
</main>
<script type="module">
logEvents('vscode-scrollable', 'vsc-scrollable-change');
</script>
</body>
</html>
54 changes: 54 additions & 0 deletions dev/vscode-single-select/select-mode/scroll-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
></script>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>

<body>
<main>
<vscode-demo>
<vscode-single-select>
<vscode-option>Option 1</vscode-option>
<vscode-option>Option 2</vscode-option>
<vscode-option>Option 3</vscode-option>
<vscode-option>Option 4</vscode-option>
<vscode-option>Option 5</vscode-option>
<vscode-option>Option 6</vscode-option>
<vscode-option>Option 7</vscode-option>
<vscode-option>Option 8</vscode-option>
<vscode-option>Option 9</vscode-option>
<vscode-option>Option 10</vscode-option>
<vscode-option>Option 11</vscode-option>
<vscode-option>Option 12</vscode-option>
<vscode-option>Option 13</vscode-option>
<vscode-option>Option 14</vscode-option>
<vscode-option>Option 15</vscode-option>
<vscode-option>Option 16</vscode-option>
<vscode-option>Option 17</vscode-option>
<vscode-option>Option 18</vscode-option>
<vscode-option>Option 19</vscode-option>
<vscode-option>Option 20</vscode-option>
</vscode-single-select>
</vscode-demo>
</main>
</body>
</html>
20 changes: 20 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@
"chokidar": "^4.0.3",
"concurrently": "^9.1.2",
"custom-element-vs-code-integration": "^1.5.0",
"custom-elements-manifest-deprecator": "^1.2.0",
"deepmerge": "^4.3.1",
"dotenv": "^16.4.7",
"eslint-plugin-lit": "^2.0.0",
Expand Down
12 changes: 9 additions & 3 deletions src/includes/vscode-select/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,14 +189,20 @@ export default [
border-color: var(--vscode-focusBorder, #0078d4);
}

.scrollable {
display: block;
max-height: 222px;
margin: 1px;
outline: none;
overflow: hidden;
}

.options {
box-sizing: border-box;
cursor: pointer;
list-style: none;
margin: 0;
max-height: 222px;
overflow: auto;
padding: 1px;
padding: 0;
}

.option {
Expand Down
Loading