Skip to content

Commit

Permalink
Native ag grid cell editors support (#4263)
Browse files Browse the repository at this point in the history
  • Loading branch information
origami-z authored Dec 13, 2024
1 parent d659b58 commit 2719afb
Show file tree
Hide file tree
Showing 18 changed files with 731 additions and 21 deletions.
14 changes: 14 additions & 0 deletions .changeset/ag-cell-editors.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
"@salt-ds/ag-grid-theme": minor
---

- Added theme support for several built-in ag grid provided editors
- `agLargeTextCellEditor`
- `agSelectCellEditor`
- `agRichSelectCellEditor`
- `agNumberCellEditor`
- `agDateStringCellEditor`
- Fixed `input` padding within `.editable-cell` during editing
- Fixed long text overflow within `.editable-cell` when focused

Closes #4144
63 changes: 57 additions & 6 deletions packages/ag-grid-theme/css/parts/ag-body.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@ 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-"] {
padding: 0 var(--salt-spacing-100);
}

div[class*="ag-theme-salt"] .editable-cell,
Expand Down Expand Up @@ -73,12 +79,6 @@ div[class*="ag-theme-salt"] .ag-cell-wrapper.ag-row-group {
align-items: center;
}

div[class*="ag-theme-salt"] .ag-cell.editable-cell.ag-cell-focus:focus,
div[class*="ag-theme-salt"] .editable-numeric-cell.ag-cell-focus:focus,
div[class*="ag-theme-salt"] .editable-cell.ag-cell-focus:focus-within {
overflow: visible;
}

div[class*="ag-theme-salt"] .ag-cell.editable-cell.ag-cell-focus:focus:before,
div[class*="ag-theme-salt"] .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before,
div[class*="ag-theme-salt"] .ag-cell.editable-cell.ag-cell-focus:focus-within:before,
Expand All @@ -105,6 +105,57 @@ div[class*="ag-theme-salt"] .editable-numeric-cell input {
background-color: transparent;
}

/* Ag Large Text Cell Editor */
div[class*="ag-theme-salt"] .ag-large-text-input {
padding: 0;
}

/* 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-select .ag-picker-field-wrapper {
border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-editable-borderColor);
border-radius: 0;
}

div[class*="ag-theme-salt"] .ag-ltr .editable-cell .ag-select .ag-picker-field-wrapper,
div[class*="ag-theme-salt"] .ag-ltr .editable-cell .ag-rich-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,
div[class*="ag-theme-salt"] .ag-ltr .editable-cell .ag-rich-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);
}

div[class*="ag-theme-salt"] .ag-select-list,
div[class*="ag-theme-salt"] .ag-rich-select-list {
/* Match border to OptionList */
border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
}

div[class*="ag-theme-salt"] .ag-select-list-item[aria-selected="true"],
div[class*="ag-theme-salt"] .ag-rich-select-row-selected {
/* Match selected row border to Option */
box-shadow: inset 0px var(--salt-size-border) 0px var(--salt-selectable-borderColor-selected), inset 0px calc(var(--salt-size-border) * -1) 0px var(--salt-selectable-borderColor-selected);
}

/* 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;
Expand Down
9 changes: 0 additions & 9 deletions packages/ag-grid-theme/css/parts/ag-buttons.css
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,6 @@ div[class*="ag-theme-salt"] input[class^="ag-"][type="button"]:focus {
outline-offset: var(--salt-focused-outlineOffset);
}

div[class*="ag-theme-salt"] .ag-select .ag-picker-field-wrapper {
border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-editable-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;
Expand Down
19 changes: 19 additions & 0 deletions packages/ag-grid-theme/css/parts/ag-input.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,22 @@ div[class*="ag-theme-salt"] .ag-column-select input[class^="ag-"][type="number"]
outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
outline-offset: -2px;
}
/* Large text editor, matching multiline input */
div[class*="ag-theme-salt"] .ag-popup-editor .ag-large-text textarea[class^="ag-"] {
border-radius: var(--salt-palette-corner-weak, 0);
padding: var(--salt-spacing-100) var(--salt-spacing-100);
}

div[class*="ag-theme-salt"] .ag-popup-editor .ag-large-text,
div[class*="ag-theme-salt"] .ag-autocomplete-list-popup {
/* Don't apply a border, but rather textarea border below is used, otherwise focus ring position could be a problem. */
border: none;
}
div[class*="ag-theme-salt"] .ag-popup-editor .ag-large-text textarea[class^="ag-"] {
/* When textarea is not in focus, simulating a popup list (OptionList) border color */
border-color: var(--salt-selectable-borderColor-selected);
}

div[class*="ag-theme-salt"] .ag-popup-editor .ag-large-text textarea[class^="ag-"]:focus {
outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
}
2 changes: 2 additions & 0 deletions packages/ag-grid-theme/css/parts/ag-root-var.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ div[class*="ag-theme-salt"] {
--ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
/* Replicating min size 12px from Icon.css */
--ag-icon-size: max(var(--salt-size-icon), 12px);
--ag-input-border-color: var(--salt-editable-borderColor);
--ag-input-focus-border-color: var(--salt-editable-borderColor-hover);
--ag-input-focus-box-shadow: none;
--ag-invalid-color: var(--salt-status-error-foreground-informative);
Expand All @@ -45,6 +46,7 @@ div[class*="ag-theme-salt"] {
--ag-selected-tab-underline-color: var(--salt-navigable-indicator-active);
--ag-selected-tab-underline-width: var(--salt-size-indicator);
--ag-subheader-background-color: var(--salt-container-primary-background);
--ag-control-panel-background-color: var(--salt-container-primary-background);
--ag-toggle-button-off-background-color: var(--salt-container-primary-background);
--ag-toggle-button-off-border-color: var(--salt-selectable-borderColor);
--ag-toggle-button-on-background-color: var(--salt-container-primary-background);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { languages, shortColorData } from "./dataGridExampleDataCellEditors";

const agProvidedCellEditorsExampleColumns = [
{
headerName: "Text",
field: "name",
cellEditor: "agTextCellEditor",
editable: true,
filter: true,
floatingFilter: true,
cellClass: ["editable-cell"],
},
{
headerName: "Large Text",
field: "sentence",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
editable: true,
filter: true,
floatingFilter: true,
cellClass: ["editable-cell"],
},
{
headerName: "Boolean",
field: "checked",
cellDataType: "boolean",
cellRenderer: "agCheckboxCellRenderer",
cellEditor: "agCheckboxCellEditor",
editable: true,
},
{
headerName: "Select",
field: "lang",
cellEditor: "agSelectCellEditor",
cellEditorParams: {
values: languages,
valueListGap: 0,
},
editable: true,
filter: true,
floatingFilter: true,
cellClass: ["editable-cell"],
},
{
headerName: "Rich Select",
field: "color",
cellEditor: "agRichSelectCellEditor",
cellEditorParams: {
values: shortColorData,
valueListGap: 0,
allowTyping: true,
filterList: true,
highlightMatch: true,
},
editable: true,
filter: true,
floatingFilter: true,
cellClass: ["editable-cell"],
},
{
headerName: "Number",
field: "count",
cellEditor: "agNumberCellEditor",
cellEditorParams: {
min: 0,
max: 100,
},
// Right aligns header
type: "numericColumn",
editable: true,
filter: true,
floatingFilter: true,
cellClass: ["numeric-cell", "editable-cell"],
},
{
headerName: "Date",
field: "date",
cellDataType: "dateString",
cellEditor: "agDateStringCellEditor",
cellEditorParams: {
min: "2000-01-01",
max: "2019-12-31",
},
editable: true,
filter: true,
floatingFilter: true,
cellClass: ["editable-cell"],
},
];

export default agProvidedCellEditorsExampleColumns;
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
export const languages = [
"English",
"Spanish",
"French",
"Portuguese",
"(other)",
] as const;
export const sentences = [
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.",
"Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.",
"Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.",
"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
"Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.",
"In porttitor. Donec laoreet nonummy augue.",
"Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc.",
"Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede.",
"Suspendisse dapibus lorem pellentesque magna. Integer nulla.",
"Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien.",
"Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat.",
];
export const shortColorData = [
"Baby blue",
"Black",
"Blue",
"Brown",
"Green",
"Orange",
"Pink",
"Purple",
"Red",
"White",
"Yellow",
];

export const currencyList = [
"USD",
"EUR",
"JPY",
"GBP",
"CHF",
"CAD",
"AUD",
"NZD",
"ZAR",
];

export const dataGridExampleDataCellEditors = [
{
checked: false,
name: currencyList[0],
color: shortColorData[0],
lang: languages[0],
sentence: sentences[0],
count: 10,
date: "20/05/2009",
},
{
checked: false,
name: currencyList[1],
color: shortColorData[1],
lang: languages[1],
sentence: sentences[1],
count: 50,
date: "20/05/2009",
},
{
checked: true,
name: currencyList[2],
color: shortColorData[2],
lang: languages[2],
sentence: sentences[2],
count: 80,
date: "20/05/2009",
},
{
checked: false,
name: currencyList[3],
color: shortColorData[3],
lang: languages[3],
sentence: sentences[3],
count: 55,
date: "20/05/2009",
},
{
checked: false,
name: currencyList[4],
color: shortColorData[4],
lang: languages[4],
sentence: sentences[4],
count: 79,
date: "20/05/2009",
},
] as const;
Loading

0 comments on commit 2719afb

Please sign in to comment.