[CL-622][CL-562][CL-621][CL-632] various drawer improvements (#14120)

- add focus trap to drawers
- add config to open existing dialogs as drawers
- make drawer take up fill width/height on smaller screens

libs/components/src/table/table-scroll.component.html

@@ -1,5 +1,5 @@
 <cdk-virtual-scroll-viewport
-  scrollWindow
+  bitScrollLayout
   [itemSize]="rowSize"
   [ngStyle]="{ paddingBottom: headerHeight + 'px' }"
 >

libs/components/src/table/table-scroll.component.ts

@@ -21,6 +21,8 @@ import {
   TrackByFunction,
 } from "@angular/core";
 
+import { ScrollLayoutDirective } from "../layout";
+
 import { RowDirective } from "./row.directive";
 import { TableComponent } from "./table.component";
 
@@ -58,6 +60,7 @@ export class BitRowDef {
     CdkFixedSizeVirtualScroll,
     CdkVirtualForOf,
     RowDirective,
+    ScrollLayoutDirective,
   ],
 })
 export class TableScrollComponent

libs/components/src/table/table.mdx

@@ -142,7 +142,7 @@ dataSource.filter = (data) => data.orgType === "family";
 
 Rudimentary string filtering is supported out of the box with `TableDataSource.simpleStringFilter`.
 It works by converting each entry into a string of it's properties. The provided string is then
-compared against the filter value using a simple `indexOf` check. For convienence, you can also just
+compared against the filter value using a simple `indexOf` check. For convenience, you can also just
 pass a string directly.
 
 ```ts
@@ -153,7 +153,7 @@ dataSource.filter = "search value";
 
 ### Virtual Scrolling
 
-It's heavily adviced to use virtual scrolling if you expect the table to have any significant amount
+It's heavily advised to use virtual scrolling if you expect the table to have any significant amount
 of data. This is done by using the `bit-table-scroll` component instead of the `bit-table`
 component. This component behaves slightly different from the `bit-table` component. Instead of
 using the `*ngFor` directive to render the rows, you provide a `bitRowDef` template that will be
@@ -178,6 +178,14 @@ height and align vertically.
 </bit-table-scroll>
 ```
 
+#### Deprecated approach
+
+Before `bit-table-scroll` was introduced, virtual scroll in tables was implemented manually via
+constructs from Angular CDK. This included wrapping the table with a `cdk-virtual-scroll-viewport`
+and targeting with `bit-layout`'s scroll container with the `bitScrollLayout` directive.
+
+This pattern is deprecated in favor of `bit-table-scroll`.
+
 ## Accessibility
 
 - Always include a row or column header with your table; this allows assistive technology to better

libs/components/src/table/table.stories.ts

@@ -1,6 +1,13 @@
+import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
 import { countries } from "../form/countries";
+import { LayoutComponent } from "../layout";
+import { mockLayoutI18n } from "../layout/mocks";
+import { positionFixedWrapperDecorator } from "../stories/storybook-decorators";
+import { I18nMockService } from "../utils";
 
 import { TableDataSource } from "./table-data-source";
 import { TableModule } from "./table.module";
@@ -8,8 +15,17 @@ import { TableModule } from "./table.module";
 export default {
   title: "Component Library/Table",
   decorators: [
+    positionFixedWrapperDecorator(),
     moduleMetadata({
-      imports: [TableModule],
+      imports: [TableModule, LayoutComponent, RouterTestingModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService(mockLayoutI18n);
+          },
+        },
+      ],
     }),
   ],
   argTypes: {
@@ -116,18 +132,20 @@ export const Scrollable: Story = {
       trackBy: (index: number, item: any) => item.id,
     },
     template: `
-      <bit-table-scroll [dataSource]="dataSource" [rowSize]="43">
-        <ng-container header>
-          <th bitCell bitSortable="id" default>Id</th>
-          <th bitCell bitSortable="name">Name</th>
-          <th bitCell bitSortable="other" [fn]="sortFn">Other</th>
-        </ng-container>
-        <ng-template bitRowDef let-row>
-          <td bitCell>{{ row.id }}</td>
-          <td bitCell>{{ row.name }}</td>
-          <td bitCell>{{ row.other }}</td>
-        </ng-template>
-      </bit-table-scroll>
+      <bit-layout>
+        <bit-table-scroll [dataSource]="dataSource" [rowSize]="43">
+          <ng-container header>
+            <th bitCell bitSortable="id" default>Id</th>
+            <th bitCell bitSortable="name">Name</th>
+            <th bitCell bitSortable="other" [fn]="sortFn">Other</th>
+          </ng-container>
+          <ng-template bitRowDef let-row>
+            <td bitCell>{{ row.id }}</td>
+            <td bitCell>{{ row.name }}</td>
+            <td bitCell>{{ row.other }}</td>
+          </ng-template>
+        </bit-table-scroll>
+      </bit-layout>
     `,
   }),
 };
@@ -144,17 +162,19 @@ export const Filterable: Story = {
       sortFn: (a: any, b: any) => a.id - b.id,
     },
     template: `
-      <input type="search" placeholder="Search" (input)="dataSource.filter = $event.target.value" />
-      <bit-table-scroll [dataSource]="dataSource" [rowSize]="43">
-        <ng-container header>
-          <th bitCell bitSortable="name" default>Name</th>
-          <th bitCell bitSortable="value" width="120px">Value</th>
-        </ng-container>
-        <ng-template bitRowDef let-row>
-          <td bitCell>{{ row.name }}</td>
-          <td bitCell>{{ row.value }}</td>
-        </ng-template>
-      </bit-table-scroll>
+      <bit-layout>
+        <input type="search" placeholder="Search" (input)="dataSource.filter = $event.target.value" />
+        <bit-table-scroll [dataSource]="dataSource" [rowSize]="43">
+          <ng-container header>
+            <th bitCell bitSortable="name" default>Name</th>
+            <th bitCell bitSortable="value" width="120px">Value</th>
+          </ng-container>
+          <ng-template bitRowDef let-row>
+            <td bitCell>{{ row.name }}</td>
+            <td bitCell>{{ row.value }}</td>
+          </ng-template>
+        </bit-table-scroll>
+      </bit-layout>
     `,
   }),
 };