Skip to content

Commit

Permalink
Merge branch 'main' into stepper
Browse files Browse the repository at this point in the history
  • Loading branch information
chrispcode authored Dec 13, 2024
2 parents 9243395 + 2719afb commit 14a0508
Show file tree
Hide file tree
Showing 23 changed files with 744 additions and 30 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
5 changes: 5 additions & 0 deletions .changeset/modern-chefs-knock.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@salt-ds/core": patch
---

Fixed Salt Provider in floating ui adding extra attributes to root when mixing styling options.
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 14a0508

Please sign in to comment.