From fd1801eabec4a90a92cb9efd5ec92a526fe4c018 Mon Sep 17 00:00:00 2001 From: William Martin Date: Wed, 23 Apr 2025 10:04:56 -0400 Subject: [PATCH] update docs --- libs/components/src/dialog/dialog.service.stories.ts | 1 + libs/components/src/dialog/dialogs.mdx | 2 +- libs/components/src/table/table.mdx | 12 ++++++++++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/libs/components/src/dialog/dialog.service.stories.ts b/libs/components/src/dialog/dialog.service.stories.ts index 6bbc19376a2..5215ad0136c 100644 --- a/libs/components/src/dialog/dialog.service.stories.ts +++ b/libs/components/src/dialog/dialog.service.stories.ts @@ -139,6 +139,7 @@ export const Default: Story = { }, }; +/** Drawers must be a descendant of `bit-layout`. */ export const Drawer: Story = { play: async (context) => { const canvas = context.canvasElement; diff --git a/libs/components/src/dialog/dialogs.mdx b/libs/components/src/dialog/dialogs.mdx index b63f368a5dd..3f44f31a5eb 100644 --- a/libs/components/src/dialog/dialogs.mdx +++ b/libs/components/src/dialog/dialogs.mdx @@ -23,7 +23,7 @@ Dialogs's should be used sparingly as they do call extra attention to themselves interruptive if overused. For non-blocking, supplementary content, open dialogs as a -[Drawer](?path=/story/component-library-dialogs-service--drawer). +[Drawer](?path=/story/component-library-dialogs-service--drawer) (requires `bit-layout`). ## Placement diff --git a/libs/components/src/table/table.mdx b/libs/components/src/table/table.mdx index 8d784190ed9..59bf5b773a3 100644 --- a/libs/components/src/table/table.mdx +++ b/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. ``` +#### 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