[PR feedback] Document recommendation for disabling row height switch…

…er when using `rowHeights` @see #5411
elastic · Nov 24, 2021 · 4250a73 · 4250a73
1 parent fc9f65c
commit 4250a73
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js
@@ -75,6 +75,9 @@ const rowHeightsFullSnippet = `const rowHeightsOptions = useMemo(
   inMemory={{ level: 'sorting' }}
   sorting={{ columns: sortingColumns, onSort }}
   rowHeightsOptions={rowHeightsOptions}
+  toolbarVisibility={{
+    showDisplaySelelector: { allowRowHeight: false },
+  }}
   pagination={{
     ...pagination,
     pageSizeOptions: [50, 250, 1000],
@@ -243,6 +246,18 @@ export const DataGridRowHeightOptionsExample = {
           <EuiCodeBlock language="javascript" paddingSize="s" isCopyable>
             {rowHeightsSnippet}
           </EuiCodeBlock>
+          <EuiCallOut
+            color="warning"
+            title="Disable the row height toolbar control"
+          >
+            When using <EuiCode>rowHeights</EuiCode> overrides, we recommend
+            setting{' '}
+            <EuiCode>
+              toolbarVisibility.showDisplaySelector.allowRowHeight
+            </EuiCode>{' '}
+            to <EuiCode>false</EuiCode>, as users will otherwise be confused
+            when switching row heights does not affect specific overriden rows.
+          </EuiCallOut>
         </Fragment>
       ),
       components: { DataGridRowHeightOptions },

diff --git a/src-docs/src/views/datagrid/row_height_fixed.tsx b/src-docs/src/views/datagrid/row_height_fixed.tsx
@@ -215,6 +215,9 @@ export default () => {
         inMemory={{ level: 'sorting' }}
         sorting={{ columns: sortingColumns, onSort }}
         rowHeightsOptions={rowHeightsOptions}
+        toolbarVisibility={{
+          showDisplaySelector: { allowRowHeight: false },
+        }}
         virtualizationOptions={{
           // rough average of the cell heights in the example
           // accurately setting this smooths out the scrolling experience

diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -758,6 +758,9 @@ export interface EuiDataGridRowHeightsOptions {
   defaultHeight?: EuiDataGridRowHeightOption;
   /**
    * Defines the height for a specific row. It can be line count or just height.
+   *
+   * When using row height overrides, we strongly setting the `showDisplaySelector: allowRowHeight`
+   * toolbar control to `false` in #EuiDataGridToolBarVisibilityOptions
    */
   rowHeights?: Record<number, EuiDataGridRowHeightOption>;
   /**