elastic · cee-chen · Nov 24, 2021 · Nov 9, 2021 · Nov 9, 2021 · Nov 9, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,11 +2,16 @@
 
 - Updated the organization of `EuiDataGrid`'s toolbar/grid controls ([#5334](https://github.com/elastic/eui/pull/5334))
 - Added `left.append` and `left.prepend` to `EuiDataGrid`'s `toolbarVisibility.additionalControls` prop [#5394](https://github.com/elastic/eui/pull/5394))
+- Added a row height control to `EuiDataGrid`'s toolbar ([#5372](https://github.com/elastic/eui/pull/5372))
 
 **Bug fixes**
 
 - Fixed persistent `EuiDataGrid` full screen `<body>` class ([#5354](https://github.com/elastic/eui/pull/5354))
 
+**Breaking changes**
+
+- Removed `toolbarVisibility`'s `showStyleSelector` prop of `EuiDataGrid` in favor of `showDisplaySelector`, which allows configuration of both grid density and row height ([#5372](https://github.com/elastic/eui/pull/5372))
+
 ## END FEATURE BRANCH
 
 **Bug fixes**

diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js
@@ -97,7 +97,7 @@ const gridSnippet = `
     // The prop also accepts a boolean if you want to toggle the entire toolbar on/off.
     toolbarVisibility={{
       showColumnSelector: false,
-      showStyleSelector: false,
+      showDisplaySelector: false,
       showSortSelector: false,
       showFullScreenSelector: false,
       additionalControls: {
@@ -248,6 +248,13 @@ const gridConcepts = [
           Data grid row heights options
         </EuiLink>{' '}
         for more details and examples.
+        <br />
+        Settings provided may be overwritten or merged with user defined
+        preferences if{' '}
+        <EuiCode>
+          toolbarVisibility.showDisplaySelector.allowRowHeight
+        </EuiCode>{' '}
+        is set to true (which is the default).
       </span>
     ),
   },
@@ -256,10 +263,16 @@ const gridConcepts = [
     description: (
       <span>
         Defines the look of the grid. Accepts a partial{' '}
-        <strong>EuiDataGridStyle</strong> object. Settings provided may be
-        overwritten or merged with user defined preferences if{' '}
-        <EuiCode>toolbarVisibility.showStyleSelector</EuiCode> is set to true
-        (which is the default).
+        <strong>EuiDataGridStyle</strong> object. See{' '}
+        <EuiLink href="/#/tabular-content/data-grid-styling-and-control">
+          Data grid styling and control
+        </EuiLink>{' '}
+        for more details and examples.
+        <br />
+        Settings provided may be overwritten or merged with user defined
+        preferences if{' '}
+        <EuiCode>toolbarVisibility.showDisplaySelector.allowDensity</EuiCode> is
+        set to true (which is the default).
       </span>
     ),
   },

diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js
@@ -195,26 +195,26 @@ export const DataGridRowHeightOptionsExample = {
       text: (
         <Fragment>
           <p>
-            You can change the default height for all rows by passing a line
-            count or pixel value to the <EuiCode>defaultHeight</EuiCode>{' '}
-            property, and customize the line height of all cells with the{' '}
-            <EuiCode>lineHeight</EuiCode> property.
+            You can change the default height for all rows via the{' '}
+            <EuiCode>defaultHeight</EuiCode> property. Note that the{' '}
+            <EuiCode>showDisplaySelector.allowRowHeight</EuiCode> setting in{' '}
+            <EuiCode>toolbarVisibility</EuiCode> means the user has the ability
+            to override this default height. Users will be able to toggle
+            between single rows, a configurable line count, or{' '}
+            <EuiCode>&quot;auto&quot;</EuiCode>.
+          </p>
+          <p>
+            You can also customize the line height of all cells with the{' '}
+            <EuiCode>lineHeight</EuiCode> property. However, if you wrap your
+            cell content with CSS that overrides/sets line-height (e.g. in an{' '}
+            <EuiCode>EuiText</EuiCode>), your row heights will not be calculated
+            correctly - make sure to match the passed{' '}
+            <EuiCode>lineHeight</EuiCode> property to the actual cell content
+            line height.
           </p>
           <EuiCodeBlock language="javascript" paddingSize="s" isCopyable>
             {lineHeightSnippet}
           </EuiCodeBlock>
-          <EuiCallOut
-            color="warning"
-            title="Make sure your line heights match!"
-          >
-            <p>
-              If you wrap your cell content with CSS that overrides/sets
-              line-height (e.g. in an <EuiCode>EuiText</EuiCode>), your row
-              heights will not be calculated correctly! Make sure to match or
-              inherit the passed <EuiCode>lineHeight</EuiCode> property to the
-              actual cell content line height.
-            </p>
-          </EuiCallOut>
         </Fragment>
       ),
       components: { DataGridRowLineHeight },

diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js
@@ -56,7 +56,7 @@ const gridSnippet = `<EuiDataGrid
   ]}
   // This can work as a shape.
   toolbarVisibility={{
-    showStyleSelector: false,
+    showDisplaySelector: false,
     showSortSelector: false,
     showFullScreenSelector: false,
     // showColumnSelector also takes an object, check the prop docs.
@@ -86,7 +86,7 @@ const gridSnippet = `<EuiDataGrid
     stripes: true,
     rowHover: 'highlight',
     header: 'shade',
-    // If showStyleSelector={true} from toolbarVisibility, these last two will be superceded by what the user decides.
+    // If showDisplaySelector.allowDensity={true} from toolbarVisibility, fontSize and cellPadding will be superceded by what the user decides.
     fontSize: 'm',
     cellPadding: 'm',
     footer: 'overline'
@@ -197,9 +197,10 @@ export const DataGridStylingExample = {
             individual buttons within.
           </p>
           <p>
-            With the default settings, the <EuiCode>showStyleSelector</EuiCode>{' '}
-            setting in <EuiCode>toolbarVisibility</EuiCode> means the user has
-            the ability to override the padding and font size passed into{' '}
+            With the default settings, the{' '}
+            <EuiCode>showDisplaySelector.allowDensity</EuiCode> setting in{' '}
+            <EuiCode>toolbarVisibility</EuiCode> means the user has the ability
+            to override the padding and font size passed into{' '}
             <EuiCode>gridStyle</EuiCode> by the engineer. The font size
             overriding only works with text or elements that can inherit the
             parent font size or elements that use units relative to the parent