Fix .editable-cell incorrectly set right text align (#4145)

Co-authored-by: Josh Wooding <[email protected]>
jpmorganchase · Sep 27, 2024 · 4f3bec9 · 4f3bec9
1 parent be58b13
commit 4f3bec9
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 29 deletions.
diff --git a/.changeset/ninety-bottles-deny.md b/.changeset/ninety-bottles-deny.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/ag-grid-theme": patch
+---
+
+Fixed `.editable-cell` incorrectly setting text-align. For numeric columns, use both `.edtiable-cell` and `.numeric-cell` for `cellClass`. Fixes #4141.
diff --git a/packages/ag-grid-theme/css/salt-ag-grid-theme.css b/packages/ag-grid-theme/css/salt-ag-grid-theme.css
@@ -280,10 +280,10 @@ 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);
   outline-offset: -1px;
-  text-align: right;
 }
 
-div[class*="ag-theme-salt"] .ag-cell.numeric-cell {
+div[class*="ag-theme-salt"] .ag-cell.numeric-cell,
+div[class*="ag-theme-salt"] .editable-numeric-cell {
   text-align: right;
 }
 

diff --git a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts
@@ -30,14 +30,6 @@ const dataGridExampleColumns: ColDef[] = [
     field: "capital",
     filter: "agSetColumnFilter",
   },
-  {
-    headerName: "Population",
-    type: "numericColumn",
-    field: "population",
-    filter: "agNumberColumnFilter",
-    editable: true,
-    cellClass: ["editable-cell"],
-  },
   {
     headerName: "Population",
     type: "numericColumn",
@@ -47,17 +39,20 @@ const dataGridExampleColumns: ColDef[] = [
     cellClass: ["numeric-cell", "editable-cell"],
   },
   {
-    headerName: "Population",
+    headerName: "Population (editable numeric)",
     type: "numericColumn",
     field: "population",
     filter: "agNumberColumnFilter",
     editable: true,
-    cellClass: ["numeric-cell", "editable-cell"],
+    // This is only here for backwards compatibility. Use the combination of the above two classes instead.
+    cellClass: ["editable-numeric-cell"],
   },
   {
     headerName: "Date",
     field: "date",
     filter: "agDateColumnFilter",
+    editable: true,
+    cellClass: ["editable-cell"],
   },
 ];
 export default dataGridExampleColumns;
diff --git a/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts
@@ -38,7 +38,7 @@ const dataGridExampleColumnsHdCompact: ColDef[] = [
     field: "population",
     filter: "agNumberColumnFilter",
     editable: true,
-    cellClass: ["editable-cell"],
+    cellClass: ["numeric-cell", "editable-cell"],
   },
   {
     headerName: "Date",

diff --git a/site/src/examples/ag-grid-theme/data/defaultColumns.ts b/site/src/examples/ag-grid-theme/data/defaultColumns.ts
@@ -38,25 +38,11 @@ export const defaultColumns: ColDef[] = [
     editable: true,
     cellClass: ["numeric-cell", "editable-cell"],
   },
-  {
-    headerName: "Population",
-    type: "numericColumn",
-    field: "population",
-    filter: "agNumberColumnFilter",
-    editable: true,
-    cellClass: ["numeric-cell", "editable-cell"],
-  },
-  {
-    headerName: "Population",
-    type: "numericColumn",
-    field: "population",
-    filter: "agNumberColumnFilter",
-    editable: true,
-    cellClass: ["numeric-cell", "editable-cell"],
-  },
   {
     headerName: "Date",
     field: "date",
     filter: "agDateColumnFilter",
+    editable: true,
+    cellClass: ["editable-cell"],
   },
 ];