fix: set row height that is lower than default incorrectly (fix #1521) (

#1704)

* test: add test for row height

* fix: set row height that is lower than default incorrectly

* docs: change documents base on fixes

docs: add content for the minimum value of rowHeight option
docs: remove invalid content for minRowHeight option

* fix: set line-height when only row height is lower than default

* chore: apply code reviews

packages/toast-ui.grid/cypress/integration/dimension.spec.ts

@@ -76,6 +76,7 @@ interface HeightInfo {
 
 interface RowHeightInfo {
   rowHeight?: number;
+  minRowHeight?: number;
   data?: OptRow[];
 }
 
@@ -409,6 +410,19 @@ describe('row height', () => {
       });
   });
 
+  it('rowHeight: 15', () => {
+    // The default value of minRowHeight is 40.
+    // If the value of rowHeight is less than minRowHeight, the actual row height is set as minRowHeight.
+    // Therefore, the minRowHeight value also needs to be set.
+    createGridWithRowHeight({ rowHeight: 15, minRowHeight: 15 });
+
+    cy.getRsideBody()
+      .find('tr')
+      .each(($el) => {
+        expect($el.height()).to.eql(15);
+      });
+  });
+
   it('rowHeight: custom', () => {
     const data = [{ c1: 'test1', _attributes: { height: 70 } }, { c2: 'test2' }];
     createGridWithRowHeight({ data });

packages/toast-ui.grid/docs/en/setting-width-height.md

@@ -206,7 +206,7 @@ const grid = new Grid({
 
 ![08-height-rowHeight-number](https://user-images.githubusercontent.com/18183560/61211937-cd40dd00-a73b-11e9-8a6d-87ac170bc270.png)
 
-When trying to fix the `rowHeight` to a value that is smaller than the default row height value, we can do so by using the `minRowHeight` option. 
+When trying to fix the `rowHeight` to a value that is smaller than the default row height value, we can do so by using the `minRowHeight` option. However, the minimum value of `rowHeight` is `9`.
 
 ```js
 const grid = new Grid({

packages/toast-ui.grid/docs/ko/setting-width-height.md

@@ -260,7 +260,7 @@ const grid = new Grid({
 
 ![08-height-rowHeight-number](https://user-images.githubusercontent.com/18183560/61211937-cd40dd00-a73b-11e9-8a6d-87ac170bc270.png)
 
-`rowHeight`의 높이를 고정하면서 기본 행 높이보다 작은 값으로 설정하려는 경우에는 다음과 같이 `minRowHeight` 옵션을 사용하면 된다.
+`rowHeight`의 높이를 고정하면서 기본 행 높이보다 작은 값으로 설정하려는 경우에는 다음과 같이 `minRowHeight` 옵션을 사용하면 된다. 단, `rowHeight`의 최소값은 `9`이다.
 
 ```js
 const grid = new Grid({

packages/toast-ui.grid/src/grid.tsx

@@ -119,9 +119,8 @@ if ((module as any).hot) {
  *          @param {boolean} [options.header.complexColumns.resizable=false] - If set to true, resize-handles of each complex columns will be shown.
  *      @param {string|number} [options.width='auto'] - Options for grid width.
  *      @param {string|number} [options.rowHeight=40] - The height of each rows.
- *          the height of each rows expands to dom's height. If set to number, the height is fixed.
- *      @param {number} [options.minRowHeight=40] - The minimum height of each rows. When this value is larger than
- *          the row's height, it set to the row's height.
+ *          The height of each rows expands to dom's height. If set to number, the height is fixed and the minimum is 9.
+ *      @param {number} [options.minRowHeight=40] - The minimum height of each rows.
  *      @param {string|number} [options.bodyHeight] - The height of body area. The default value is 'auto',
  *          the height of body area expands to total height of rows. If set to 'fitToParent', the height of the grid
  *          will expand to fit the height of parent element. If set to number, the height is fixed.

packages/toast-ui.grid/src/helper/constant.ts

@@ -9,3 +9,4 @@ export const DISABLED_PRIORITY_ROW = 'ROW';
 export const DISABLED_PRIORITY_COLUMN = 'COLUMN';
 export const HORIZONTAL_PADDING_OF_CELL = 10;
 export const DEFAULT_SUB_CONTEXT_MENU_TOP = -6;
+export const OCCUPIED_HEIGHT_BY_CELL_LAYOUY = 9;

packages/toast-ui.grid/src/view/bodyRow.tsx

@@ -6,6 +6,7 @@ import { cls } from '../helper/dom';
 import { DispatchProps } from '../dispatch/create';
 import { debounce, isNull } from '../helper/common';
 import { RowSpanCell } from './rowSpanCell';
+import { OCCUPIED_HEIGHT_BY_CELL_LAYOUY } from '../helper/constant';
 
 interface OwnProps {
   rowIndex: number;
@@ -57,7 +58,13 @@ class BodyRowComp extends Component<Props> {
     return (
       rowHeight > 0 && (
         <tr
-          style={{ height: rowHeight }}
+          style={{
+            height: rowHeight,
+            lineHeight:
+              autoRowHeight || rowHeight >= 40
+                ? ''
+                : `${rowHeight - OCCUPIED_HEIGHT_BY_CELL_LAYOUY}px`,
+          }}
           class={cls(
             [isOddRow, 'row-odd'],
             [!isOddRow, 'row-even'],