feedback

mongodb · Dec 12, 2024 · 8cb5891 · 8cb5891
1 parent e2cde06
commit 8cb5891
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 38 deletions.
diff --git a/.changeset/calm-kangaroos-shave.md b/.changeset/calm-kangaroos-shave.md
@@ -2,21 +2,22 @@
 '@leafygreen-ui/table': major
 ---
 
-Table v11 and v12 had performace issues when working with large datasets and didn't offer much flexibility. Table v13 makes table more performant and flexible to use.
+Table v13 brings performance optimizations when working with large datasets and offers greater flexibility.
 
 For more details on how to use LeafyGreen `Table` v13, check out the [README](https://github.com/mongodb/leafygreen-ui/blob/main/packages/table/README.md).
 
 ## What's new?
 
-- All LeafyGreen table components accept `forwardRefs`
-- All LeafyGreen table components support `StyledComponents`
-- Rows now support multiline text. By default, text truncation is enabled but can be disabled using the `shouldTruncate` prop on `<Table>`. When `shouldTruncate` is `true`, all rows will display a single line of text. When `false`, rows with long text will display all lines of the content. Additionally, when truncation is disabled, text is top-aligned by default. You can change this alignment to `middle` or `top` using the new `verticalAlignment` prop.
+- All LeafyGreen table children components can accept a `forwardRef`
+- All LeafyGreen table components support `styled-components`
+- `shouldTruncate`: Rows now support multiline text. By default, text truncation is enabled but can be disabled using the `shouldTruncate` prop on `<Table>`. When `shouldTruncate` is `true`, all rows will display a single line of text. When `false`, rows with long text will display all lines of the content. Additionally, when truncation is disabled, text is top-aligned by default. 
+- `verticalAlignment`: If text truncation is disabled, you can change the text alignment to `middle` or `top` using the new `verticalAlignment` prop.
 
   ```
     <Table
       table={table}
       shouldTruncate={false}
-      verticalAlignment='middle'
+      verticalAlignment="middle"
     >
       ...
     </Table>
@@ -29,10 +30,10 @@ For more details on how to use LeafyGreen `Table` v13, check out the [README](ht
 
 ### `Row` component
 
-- Row transition were removed to increase performance.
+- Row transitions were removed to increase performance.
 - Rows are memoized to increase performance.
 - `row` is a required prop if using `useLeafyGreenTable` or `useLeafyGreenVirtualTable`.
-- `virtualRow` is a reguired prop if using `useLeafyGreenVirtualTable`.
+- `virtualRow` is a required prop if using `useLeafyGreenVirtualTable`.
 - Internally, we removed the mapping and flattening of `Row` children. Moving forward, consumers no longer need to explicitly render subrows and expanded content as children of `Row`. Instead, rows, subrows, and expanded content are returned as siblings within the row object.
 
   **Before**:
@@ -120,7 +121,7 @@ For more details on how to use LeafyGreen `Table` v13, check out the [README](ht
 ### `ExpandedContent` component
 
 - `row` is a required prop if using `useLeafyGreenTable` or `useLeafyGreenVirtualTable`.
-- `virtualRow` is a reguired prop if using `useLeafyGreenVirtualTable`.
+- `virtualRow` is a required prop if using `useLeafyGreenVirtualTable`.
 - Expanded content is included in the row object as a sibling of its parent row. You will need to check if a row is expanded content using `row.isExpandedContent`.
 
   **Before**:
@@ -198,7 +199,7 @@ For more details on how to use LeafyGreen `Table` v13, check out the [README](ht
 
 ### `useLeafyGreenTable` hook
 
-`useLeafyGreenTable` will no longer accept `useVirtualScrolling` and `virtualizerOptions`. To use a virtual table, use the new hook, `useLeafyGreenVirtualTable`, which extends `useLeafyGreenTable`.
+`useLeafyGreenTable` will no longer accept `useVirtualScrolling` and `virtualizerOptions`. To use a virtual table, use the new hook, (`useLeafyGreenVirtualTable`)(#useleafygreenvirtualtable-hook), which extends `useLeafyGreenTable`.
 
 **Before**:
 
@@ -255,16 +256,7 @@ const { rows } = table.getRowModel();
         <Row key={row.id}>
           {cells.map((cell: LeafyGreenTableCell<Person>) => {
             return (
-              <Cell
-                key={cell.id}
-                className={css`
-                  padding-block: 4px;
-
-                  & > div {
-                    max-height: unset;
-                  }
-                `}
-              >
+              <Cell key={cell.id}>
                 {flexRender(
                   cell.column.columnDef.cell,
                   cell.getContext(),

diff --git a/packages/table/README.md b/packages/table/README.md
@@ -214,6 +214,7 @@ The `useLeafyGreenTable` hook expects data in the form of an array of objects, w
   ```
 
 - **ExpandedContent**: Is used to display additional content when a row is expanded. This content is not necessarily a nested row but can be any additional information related to the row.
+
   **Example**:
 
   ```jsx

diff --git a/packages/table/UPGRADE.md b/packages/table/UPGRADE.md
@@ -1,20 +1,21 @@
 # Upgrading v12 to v13
 
-Table v11 and v12 had performace issues when working with large datasets and didn't offer much flexibility. Table v13 makes table more performant and flexible to use.
+Table v13 brings performance optimizations when working with large datasets and offers greater flexibility.
 
 For more details on how to use LeafyGreen `Table` v13, check out the [README](https://github.com/mongodb/leafygreen-ui/blob/main/packages/table/README.md).
 
 ## What's new?
 
-- All LeafyGreen table components accept `forwardRefs`
-- All LeafyGreen table components support `StyledComponents`
-- Rows now support multiline text. By default, text truncation is enabled but can be disabled using the `shouldTruncate` prop on `<Table>`. When `shouldTruncate` is `true`, all rows will display a single line of text. When `false`, rows with long text will display all lines of the content. Additionally, when truncation is disabled, text is top-aligned by default. You can change this alignment to `middle` or `top` using the new `verticalAlignment` prop.
+- All LeafyGreen table children components can accept a `forwardRef`
+- All LeafyGreen table components support `styled-components`
+- `shouldTruncate`: Rows now support multiline text. By default, text truncation is enabled but can be disabled using the `shouldTruncate` prop on `<Table>`. When `shouldTruncate` is `true`, all rows will display a single line of text. When `false`, rows with long text will display all lines of the content. Additionally, when truncation is disabled, text is top-aligned by default.
+- `verticalAlignment`: If text truncation is disabled, you can change the text alignment to `middle` or `top` using the new `verticalAlignment` prop.
 
   ```
     <Table
       table={table}
       shouldTruncate={false}
-      verticalAlignment='middle'
+      verticalAlignment="middle"
     >
       ...
     </Table>
@@ -28,10 +29,10 @@ For more details on how to use LeafyGreen `Table` v13, check out the [README](ht
 
 ### `Row` component
 
-- Row transition were removed to increase performance.
+- Row transitions were removed to increase performance.
 - Rows are memoized to increase performance.
 - `row` is a required prop if using `useLeafyGreenTable` or `useLeafyGreenVirtualTable`.
-- `virtualRow` is a reguired prop if using `useLeafyGreenVirtualTable`.
+- `virtualRow` is a required prop if using `useLeafyGreenVirtualTable`.
 - Internally, we removed the mapping and flattening of `Row` children. Moving forward, consumers no longer need to explicitly render subrows and expanded content as children of `Row`. Instead, rows, subrows, and expanded content are returned as siblings within the row object.
 
   **Before**:
@@ -119,7 +120,7 @@ For more details on how to use LeafyGreen `Table` v13, check out the [README](ht
 ### `ExpandedContent` component
 
 - `row` is a required prop if using `useLeafyGreenTable` or `useLeafyGreenVirtualTable`.
-- `virtualRow` is a reguired prop if using `useLeafyGreenVirtualTable`.
+- `virtualRow` is a required prop if using `useLeafyGreenVirtualTable`.
 - Expanded content is included in the row object as a sibling of its parent row. You will need to check if a row is expanded content using `row.isExpandedContent`.
 
   **Before**:
@@ -198,7 +199,7 @@ For more details on how to use LeafyGreen `Table` v13, check out the [README](ht
 
 ### `useLeafyGreenTable` hook
 
-`useLeafyGreenTable` will no longer accept `useVirtualScrolling` and `virtualizerOptions`. To use a virtual table, use the new hook, `useLeafyGreenVirtualTable`, which extends `useLeafyGreenTable`.
+`useLeafyGreenTable` will no longer accept `useVirtualScrolling` and `virtualizerOptions`. To use a virtual table, use the new hook, (`useLeafyGreenVirtualTable`)(#useleafygreenvirtualtable-hook), which extends `useLeafyGreenTable`.
 
 **Before**:
 
@@ -255,16 +256,7 @@ const { rows } = table.getRowModel();
         <Row key={row.id}>
           {cells.map((cell: LeafyGreenTableCell<Person>) => {
             return (
-              <Cell
-                key={cell.id}
-                className={css`
-                  padding-block: 4px;
-
-                  & > div {
-                    max-height: unset;
-                  }
-                `}
-              >
+              <Cell key={cell.id}>
                 {flexRender(
                   cell.column.columnDef.cell,
                   cell.getContext(),
-Original file line number
+Diff line change
@@ Expand Up @@
       ```
     - **ExpandedContent**: Is used to display additional content when a row is expanded. This content is not necessarily a nested row but can be any additional information related to the row.
       **Example**:
       ```jsx
@@ Expand Down @@