bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 22:03:36 +00:00
Code Issues Releases Wiki Activity

[CL-696] un-revert "various drawer improvements" + bug fix (#14887)

Browse Source 
* Revert "Revert "[CL-622][CL-562][CL-621][CL-632] various drawer improvements …"

This reverts commit 4b32d1f9dd.

* fix virtual scroll: add .cdk-virtual-scrollable to scroll viewport target

* remove references to main el

* use directives instead of querySelector (#14950)

* remove references to main el

* wip

* banish querySelector to the shadow realm

* revert apps/ files

* Add virtual scrolling docs

Co-authored-by: Vicki League <vleague@bitwarden.com>

* add jsdoc

* run eslint

* fix skip links bug

* Update libs/components/src/layout/layout.component.ts

Co-authored-by: Vicki League <vleague@bitwarden.com>

* update tab handler

* only run on tab

* fix lint

* fix virtual scroll issue due to Angular 19 upgrade (#15193)

thanks Vicki

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>
This commit is contained in:
Will Martin
2025-06-17 11:05:14 -04:00
committed by GitHub
parent 674886a28b
commit b8a1856fc6
37 changed files with 807 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
libs/components/src/stories/virtual-scrolling.mdx Normal file
View File

@@ -0,0 +1,60 @@
import { Meta } from "@storybook/addon-docs";
<Meta title="Documentation/Virtual Scrolling" />
# Virtual Scrolling
Virtual scrolling is a technique that improves the rendering performance of very large lists by only
rendering whatever is currently visible within the viewport. We build on top of
[Angular CDK's `ScrollingModule`](https://material.angular.dev/cdk/scrolling/overview).
## Scrolling the entire layout
Often, a design calls for the scroll container to envelop the entire page. To support this,
AngularCDK provides a `scrollWindow` directive that sets the window to be virtual scroll viewport.
We export a similar directive, `bitScrollLayout`, that integrates with `bit-layout` and `popup-page`
and should be used instead of `scrollWindow`.
```html
<!-- Descendant of bit-layout -->
<cdk-virtual-scroll-viewport bitScrollLayout>
<!-- virtual scroll implementation here -->
</cdk-virtual-scroll-viewport>
```
### Known footgun
Due to the initialization order of Angular components and their templates, `bitScrollLayout` will
error if it is used _in the same template_ as the layout component:
```html
<bit-layout>
<cdk-virtual-scroll-viewport bitScrollLayout>
<!-- virtual scroll implementation here -->
</cdk-virtual-scroll-viewport>
</bit-layout>
```
In this particular composition, the child content gets constructed before the template of
`bit-layout` and thus has no scroll container to reference. Workarounds include:
1. Wrap the child in another component. (This tends to happen by default when the layout is
integrated with a `router-outlet`.)
```html
<bit-layout>
<component-that-contains-bitScrollLayout></component-that-contains-bitScrollLayout>
</bit-layout>
```
2. Use a `defer` block.
```html
<bit-layout>
@defer (on immediate) {
<cdk-virtual-scroll-viewport bitScrollLayout>
<!-- virtual scroll implementation here -->
</div>
}
</bit-layout>
```