Add theme support for agSelectCellEditor

.changeset/ag-cell-editors.md

@@ -4,5 +4,6 @@
 
 - Added theme support for several built-in ag grid provided editors
   - `agLargeTextCellEditor`
+  - `agSelectCellEditor`
 - Fixed `input` padding within `.editable-cell` during editing
 - Fixed long text overflow within `.editable-cell` when focused

packages/ag-grid-theme/css/parts/ag-body.css

@@ -41,6 +41,8 @@ div[class*="ag-theme-salt"] .ag-cell-inline-editing:focus-within {
 /* This makes sure custom cell editor would start from no padding. Built-in ag grid editor's padding is added below. */
 div[class*="ag-theme-salt"] .ag-cell-inline-editing {
   padding: 0;
+  /* When styling option corner='rounded', we don't want this to be flipped between rounded and not between editing and normal state */
+  border-radius: 0;
 }
 
 div[class*="ag-theme-salt"] .ag-cell-inline-editing.editable-cell input[class^="ag-"] {
@@ -103,6 +105,33 @@ div[class*="ag-theme-salt"] .editable-numeric-cell input {
   background-color: transparent;
 }
 
+/* Ag Select Cell Editor - all should be scoped with `.editable-cell` so it's not impacting users not using our class */
+
+div[class*="ag-theme-salt"] .editable-cell .ag-picker-field-wrapper {
+  /* Allow cell focus ring to come through */
+  background-color: transparent;
+  border: none;
+}
+
+div[class*="ag-theme-salt"] .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper {
+  padding: 0 var(--salt-spacing-100);
+  border-radius: 0;
+}
+
+div[class*="ag-theme-salt"] .ag-ltr .editable-cell .ag-select .ag-icon-small-down::before {
+  /* Change the icon to be aligned with Salt chevron instead of triangle */
+  /* We are not using different icons between collpase / expand, given only collapsed icon is available in ag salt icon font (.ag-picker-collapsed vs .ag-picker-expanded) */
+  content: var(--ag-icon-font-code-contracted);
+}
+
+div[class*="ag-theme-salt"] .ag-ltr .ag-select-list-item,
+div[class*="ag-theme-salt"] .ag-ltr .ag-rich-select-row {
+  /* This can't be scoped to editable-cell given it's sitting within .ag-popup */
+  padding: 0 var(--salt-spacing-100);
+}
+
+/* Range selection cross cells "fake" outlines */
+
 div[class*="ag-theme-salt"] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after {
   content: "";
   top: 0;

packages/ag-grid-theme/css/parts/ag-buttons.css

@@ -42,15 +42,6 @@ div[class*="ag-theme-salt"] input[class^="ag-"][type="button"]:focus {
   border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
 }
 
-div[class*="ag-theme-salt"] .ag-select .ag-picker-field-wrapper {
-  border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
-  border-radius: 0;
-}
-
-div[class*="ag-theme-salt"] .ag-select .ag-picker-field-icon {
-  margin-right: var(--salt-spacing-100);
-}
-
 div[class*="ag-theme-salt"] .ag-menu .ag-filter-body-wrapper {
   display: flex;
   flex-direction: column;

packages/ag-grid-theme/src/dependencies/agProvidedCellEditorsExampleColumns.ts

@@ -34,6 +34,7 @@ const agProvidedCellEditorsExampleColumns = [
     cellEditor: "agSelectCellEditor",
     cellEditorParams: {
       values: languages,
+      valueListGap: 0,
     },
     editable: true,
     filter: true,
@@ -46,6 +47,7 @@ const agProvidedCellEditorsExampleColumns = [
     cellEditor: "agRichSelectCellEditor",
     cellEditorParams: {
       values: shortColorData,
+      valueListGap: 0,
       allowTyping: true,
       filterList: true,
       highlightMatch: true,

packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx

@@ -367,6 +367,30 @@ EditableCellLongTextEditing.play = async ({ canvasElement }) => {
   }
 };
 
+export const EditableCellSelectEditing: StoryObj<typeof AgGridReact> = () => {
+  return <ProvidedCellEditors />;
+};
+EditableCellSelectEditing.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Wait until the grid fully loaded
+  await sleep(200);
+
+  // Do findAll here so this will also work in `side-by-side` mode
+  const textEditorCells = await canvas.findAllByText("English");
+
+  for (const cell of textEditorCells) {
+    await userEvent.dblClick(cell);
+    // Editor will render a different value in the editor, not the same "cell"
+    await userEvent.click(await within(cell).findByText("English"));
+
+    await expect(cell).toHaveClass("ag-cell-inline-editing", "editable-cell");
+    await expect(await canvas.findByRole("listbox")).toHaveClass(
+      "ag-select-list",
+    );
+  }
+};
+
 export const ContextMenu: StoryObj<typeof AgGridReact> = () => {
   return <ContextMenuGrid />;
 };