Update row heights

jpmorganchase · Jul 19, 2024 · 3a440c0 · 3a440c0
1 parent 7612144
commit 3a440c0
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 85 deletions.
diff --git a/.changeset/large-carrots-end.md b/.changeset/large-carrots-end.md
@@ -2,4 +2,19 @@
 "@salt-ds/ag-grid-theme": patch
 ---
 
-Fixed a few bugs (details to follow)
+- Fixed background color for custom editor component.
+- Fixed header text being cropped in HD compact. Closes #3675.
+- Fixed Country Symbol taller than expected in HD compact. This alters `--salt-size-base` token so Salt Button, form controls (Input, Dropdown, Combo Box) will be impacted as well. Closes #3775.
+- Fixed group value not center aligned vertically.
+- Updated ag grid menu styling to match closer to Salt Menu component.
+
+Note: We previously made a mistake on `rowHeight` recommendation when configurating AG Grid, which should be 1px more to account for border between row.
+`useAgGridHelpers` example hook is updated to reflect this.
+
+| Density      | Row height ([`rowHeight`](https://www.ag-grid.com/javascript-data-grid/row-height/)) | Header height ([`headerHeight`](https://www.ag-grid.com/javascript-data-grid/column-headers/#header-height)) |
+| ------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
+| HD (Compact) | 21                                                                                   | 20                                                                                                           |
+| HD           | 25                                                                                   | 24                                                                                                           |
+| MD           | 37                                                                                   | 36                                                                                                           |
+| LD           | 49                                                                                   | 48                                                                                                           |
+| TD           | 61                                                                                   | 60                                                                                                           |
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "prettier:ci": "prettier --check .",
     "lint": "biome check",
     "lint:fix": "biome check --fix",
+    "lint:check:error": "biome check --diagnostic-level=error",
     "lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab && yarn lint:style:ag-theme",
     "lint:style:core": "yarn stylelint -f verbose \"packages/core/src/**/*.css\"",
     "lint:style:icon": "yarn stylelint -f verbose \"packages/icons/src/**/*.css\"",

diff --git a/packages/ag-grid-theme/css/salt-ag-grid-theme.css b/packages/ag-grid-theme/css/salt-ag-grid-theme.css
@@ -254,6 +254,10 @@ div[class*="ag-theme-salt"] .ag-cell-inline-editing:focus-within {
   background: var(--salt-container-primary-background);
 }
 
+div[class*="ag-theme-salt"] .ag-cell-inline-editing {
+  padding: 0;
+}
+
 div[class*="ag-theme-salt"] .editable-cell,
 div[class*="ag-theme-salt"] .editable-numeric-cell {
   outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-editable-borderColor);
@@ -304,10 +308,6 @@ div[class*="ag-theme-salt"] .editable-cell.ag-cell-inline-editing:before {
   z-index: 2;
 }
 
-div[class*="ag-theme-salt"] .editable-cell.ag-cell-inline-editing {
-  padding: 0;
-}
-
 div[class*="ag-theme-salt"] .editable-numeric-cell input,
 div[class*="ag-theme-salt"] input[class^="ag-"][type="number"] {
   padding: 0 var(--salt-spacing-100);

diff --git a/packages/ag-grid-theme/src/dependencies/cell-editors/DropdownEditor.tsx b/packages/ag-grid-theme/src/dependencies/cell-editors/DropdownEditor.tsx
@@ -1,3 +1,5 @@
+import { Dropdown, type DropdownProps, Option } from "@salt-ds/core";
+import type { ICellEditorParams } from "ag-grid-community";
 import React, {
   forwardRef,
   useImperativeHandle,
@@ -7,8 +9,6 @@ import React, {
   type SyntheticEvent,
   type KeyboardEvent,
 } from "react";
-import type { ICellEditorParams } from "ag-grid-community";
-import { Dropdown, type DropdownProps, Option } from "@salt-ds/core";
 
 export type GridCellValue = string | boolean | number;
 
@@ -52,16 +52,22 @@ export const DropdownEditor = forwardRef((props: DropdownEditorParams, ref) => {
 
   useImperativeHandle(ref, () => ({ getValue: (): typeof value => value }));
 
-  console.log("--- DropdownEditor", { value });
-
   return (
     <Dropdown
       onSelectionChange={onSelect}
       defaultOpen={props.cellStartedEdit}
       selected={[value || ""]}
       ref={button}
       onKeyDown={onEscapeKeyPressed}
+      className="DropdownEditor"
       {...dropdownProps}
+      style={{
+        // Outline will be shown on the cell
+        outline: "none",
+        // Leave room for cell focus ring
+        marginInline: "2px",
+        width: "calc(100% - 4px)",
+      }}
     >
       <div
         ref={(elem): void => {

diff --git a/packages/ag-grid-theme/src/dependencies/cell-renderers/FlagRenderer.tsx b/packages/ag-grid-theme/src/dependencies/cell-renderers/FlagRenderer.tsx
@@ -1,5 +1,5 @@
-import type { CustomCellRendererProps } from "ag-grid-react";
 import { countryMetaMap } from "@salt-ds/countries";
+import type { CustomCellRendererProps } from "ag-grid-react";
 
 export const FlagRenderer = (props: CustomCellRendererProps) => {
   const isoCode = props.value as keyof typeof countryMetaMap;

diff --git a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts
@@ -1,6 +1,6 @@
 import type { ColDef } from "ag-grid-community";
-import { FlagRenderer } from "./cell-renderers/FlagRenderer";
 import { DropdownEditor } from "./cell-editors/DropdownEditor";
+import { FlagRenderer } from "./cell-renderers/FlagRenderer";
 
 const dataGridExampleColumnsHdCompact: ColDef[] = [
   {
@@ -50,7 +50,7 @@ const dataGridExampleColumnsHdCompact: ColDef[] = [
     field: "rating",
     // Not using `editable-cell` as it doesn't work with Dropdown focus style
     editable: true,
-    cellEditor: DropdownEditor,
+    cellEditor: "DropdownEditor",
     cellEditorParams: {
       source: [10, 20, 30, 40, 50, 60],
     },