diff --git a/.changeset/stupid-coats-boil.md b/.changeset/stupid-coats-boil.md new file mode 100644 index 00000000000..58d833f50b3 --- /dev/null +++ b/.changeset/stupid-coats-boil.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/theme": minor +--- + +Added new `--salt-overlayable-rangeSelection` token, which points to new `--salt-palette-neutral-selection` and resolves to black@15% in light mode and white@15% in dark mode. diff --git a/.changeset/tasty-trains-cover.md b/.changeset/tasty-trains-cover.md new file mode 100644 index 00000000000..c84534c7116 --- /dev/null +++ b/.changeset/tasty-trains-cover.md @@ -0,0 +1,53 @@ +--- +"@salt-ds/ag-grid-theme": major +--- + +Ag grid theme is updated to support ag grid version v31, and it's now driven by [AG grid variables](https://ag-grid.com/react-data-grid/global-style-customisation/) with a big reduction in bundle size. Follow below for upgrade instructions: + +1. Update stylesheet import + +```diff +- import "ag-grid-community/dist/styles/ag-grid.css"; ++ import "ag-grid-community/styles/ag-grid.css"; +``` + +UITK theme is removed, migrate to Salt theme + +```diff +- import "@salt-ds/ag-grid-theme/uitk-ag-theme.css"; ++ import "@salt-ds/ag-grid-theme/salt-ag-theme.css"; +``` + +2. Update classnames used on the container around `AgGridReact`, which no longer has density portion. If you previously copied `useAgGridHelpers`, you'll need to copy a new version from [here](https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts). + +In light mode: + +```diff +- .ag-theme-salt-high-light +- .ag-theme-salt-medium-light +- .ag-theme-salt-low-light +- .ag-theme-salt-touch-light ++ .ag-theme-salt-light +``` + +```diff +- .ag-theme-salt-high-compact-light ++ .ag-theme-salt-compact-light +``` + +In dark mode: + +```diff +- .ag-theme-salt-high-dark +- .ag-theme-salt-medium-dark +- .ag-theme-salt-low-dark +- .ag-theme-salt-touch-dark ++ .ag-theme-salt-dark +``` + +```diff +- .ag-theme-salt-high-compact-dark ++ .ag-theme-salt-compact-dark +``` + +Closes #2972 diff --git a/.gitignore b/.gitignore index 0ba110ed599..579b2cc2b2f 100644 --- a/.gitignore +++ b/.gitignore @@ -44,7 +44,5 @@ yarn-error.log* *.iml # Autogenerated CSS -/packages/ag-grid-theme/uitk-ag-theme.css -/packages/ag-grid-theme/salt-ag-theme.css /docs/css/salt-core.css /docs/css/salt-lab.css \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json index 7176ea60289..a79efd17bbb 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -14,5 +14,14 @@ "salt/custom-property-starts-with-component-name": { "logLevel": "default" } - } + }, + "overrides": [ + { + "files": ["**/ag-grid-theme/**/*.css"], + "rules": { + "salt/custom-property-attributes-kebab-case": null, + "salt/custom-property-starts-with-component-name": null + } + } + ] } diff --git a/cypress.config.ts b/cypress.config.ts index 01f9ec5d806..31246955d3f 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -87,6 +87,7 @@ export default defineConfig({ return null; }, }); + return config; }, devServer: { diff --git a/package.json b/package.json index 8cb7b374cc0..9d8ccb0035c 100644 --- a/package.json +++ b/package.json @@ -39,10 +39,11 @@ "prettier": "pretty-quick --branch main", "prettier:all": "prettier --write .", "prettier:ci": "prettier --check .", - "lint:style": "yarn lint:style:core && yarn lint:style:icon && yarn lint:style:lab", + "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\"", "lint:style:lab": "yarn stylelint -f verbose \"packages/lab/src/**/*.css\"", + "lint:style:ag-theme": "yarn stylelint -f verbose \"packages/ag-grid-theme/css/**/*.css\"", "storybook": "storybook dev -p 6006", "build-storybook": "yarn build:ag-grid-theme && yarn bundle:css && storybook build", "typecheck": "tsc --noEmit", @@ -82,9 +83,9 @@ "@typescript-eslint/eslint-plugin": "^6.6.0", "@typescript-eslint/parser": "^6.6.0", "@vitejs/plugin-react": "^4.1.0", - "ag-grid-community": "^28.2.1", - "ag-grid-enterprise": "^28.2.1", - "ag-grid-react": "^28.2.1", + "ag-grid-community": "^31.3.0", + "ag-grid-enterprise": "^31.3.0", + "ag-grid-react": "^31.3.0", "axe-core": "^4.9.0", "chromatic": "^11.3.2", "ci-info": "^3.3.1", diff --git a/packages/ag-grid-theme/css/_export-salt-icons.module.scss b/packages/ag-grid-theme/css/_export-salt-icons.module.scss deleted file mode 100644 index ba568b4d655..00000000000 --- a/packages/ag-grid-theme/css/_export-salt-icons.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "./salt-ag-theme-icon-font"; - -:export { - @each $key, $value in $icons { - #{unquote($key)}: $value; - } -} diff --git a/packages/ag-grid-theme/css/_export-uitk-icons.module.scss b/packages/ag-grid-theme/css/_export-uitk-icons.module.scss deleted file mode 100644 index 35b4951a899..00000000000 --- a/packages/ag-grid-theme/css/_export-uitk-icons.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "./uitk-ag-theme-icon-font"; - -:export { - @each $key, $value in $icons { - #{unquote($key)}: $value; - } -} diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-default-params.scss b/packages/ag-grid-theme/css/_salt-ag-theme-default-params.scss deleted file mode 100644 index 6687816d947..00000000000 --- a/packages/ag-grid-theme/css/_salt-ag-theme-default-params.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import "~ag-grid-community/src/styles/ag-theme-base/sass/ag-theme-base-default-params"; - -$salt-ag-theme-default-params: ( - row-hover-color: var(--agGrid-row-color-hover), - row-border-color: var(--agGrid-row-borderColor), - header-background-color: var(--salt-container-primary-background), - header-column-separator: true, - header-column-separator-width: 1px, - header-column-separator-color: var(--agGrid-header-column-separator-color), - input-focus-border-color: var(--salt-editable-borderColor-hover), - // Fonts - font-family: - ( - "Open Sans", - sans-serif, - ), -); - -$salt-ag-theme-default-params: map-merge( - $ag-theme-base-default-params, - $salt-ag-theme-default-params -); diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-icon-font.scss b/packages/ag-grid-theme/css/_salt-ag-theme-icon-font.scss deleted file mode 100644 index d2de0ef504e..00000000000 --- a/packages/ag-grid-theme/css/_salt-ag-theme-icon-font.scss +++ /dev/null @@ -1,120 +0,0 @@ -$icons: ( - // key is CSS icon name, comment is Salt icon name - aggregation: "\ea2f", - // sum-solid - arrows: "\e9e7", - // move-all - asc: "\e954", - // arrow-up - cancel: "\e975", - // close - chart: "\e958", - // bar-chart - columns: "\e981", - // column-chooser - contracted: "\e96d", - // chevron-down - copy: "\e973", - //clone - cross: "\e975", - //close - cut: "\e98e", - // cut - csv: "\e98d", - // csv - desc: "\e951", - // arrow-down - excel: "\ea62", - // xls - expanded: "\e96f", - // chevron-right - eye-slash: "\e9c1", - // hidden - eye: "\ea5b", - // visible - filter: "\e9ab", - // filter-solid - filter-clear: "\e9ac", - // filter - first: "\e99b", - // double-chevron-left - group: "\ea68", - // group - last: "\e99c", - // double-chevron-right - left: "\e96e", - //chevron-left - linked: "\e9da", - //linked - loading: "\e9dc", - //loader - menu: "\e9e5", - // micro-menu - next: "\e96f", - // chevron-right - none: "\e9e9", - // move-vertical - not-allowed: "\e975", - // close - paste: "\e9f9", - // place-in - pin: "\e9f5", - // pin-solid - pivot: "\e9f8", - // pivot - previous: "\e96e", - // chevron-left - right: "\e96f", - // chevron-right - save: "\ea19", - // save - small-down: "\ea41", - // triangle-down - small-left: "\ea42", - // triangle-left - small-right: "\ea44", - // triangle-right - small-up: "\ea45", - //triangle-up - tick: "\ea2e", - //success-tick - tree-closed: "\e96f", - // chevron-right - tree-open: "\e96d", - // triangle-down - unlinked: "\ea47", - // unlinked -); - -@font-face { - font-family: "salt-icons"; - src: url("../fonts/salt-icons.woff") format("woff"); -} - -@each $name, $glyph in $icons { - [class^="ag-theme-salt"] .ag-icon-#{$name}, - [class*=" ag-theme-salt"] .ag-icon-#{$name} { - font-family: "salt-icons"; - } - - [class^="ag-theme-salt"] .ag-icon-#{$name}::before, - [class*=" ag-theme-salt"] .ag-icon-#{$name}::before { - content: $glyph; - } -} - -[class^="ag-theme-salt"] .ag-checkbox-input-wrapper::after, -[class*=" ag-theme-salt"] .ag-checkbox-input-wrapper::after { - font-family: "salt-icons"; - content: ""; -} - -[class^="ag-theme-salt"] .ag-checkbox-input-wrapper.ag-checked::after, -[class*=" ag-theme-salt"] .ag-checkbox-input-wrapper.ag-checked::after { - content: "\ea2e"; -} - -[class^="ag-theme-salt"] .ag-checkbox-input-wrapper.ag-indeterminate::after, -[class*=" ag-theme-salt"] .ag-checkbox-input-wrapper.ag-indeterminate::after { - content: "\ea10"; -} diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss b/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss deleted file mode 100644 index d83608671bf..00000000000 --- a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss +++ /dev/null @@ -1,755 +0,0 @@ -@import "~ag-grid-community/src/styles/ag-theme-base/sass/ag-theme-base"; -@import "./salt-ag-theme-default-params"; - -@mixin ag-theme-salt($params: ()) { - @include ag-allow-color-param-access-with-ag-param(false); - - $params: ag-process-theme-variables($params, $salt-ag-theme-default-params); - @include ag-theme-base($params); - - .ag-root-wrapper { - border: none; - } - - // Because we are using a different border thickness on focus than default - // we have to adjust height on various elements either using the line-height or height - // properties. - .ag-ltr, - .ag-rtl { - .ag-cell-wrapper.ag-row-group { - align-items: center; - } - } - - .ag-ltr, - .ag-rtl { - .ag-row-focus .ag-cell-focus .ag-cell-wrapper.ag-row-group, - .ag-cell-focus .ag-drag-handle.ag-row-drag, - .ag-cell-focus - .ag-cell-wrapper - > :not(.ag-cell-value):not(.ag-group-value) { - height: calc( - min( - var(--ag-internal-calculated-line-height), - var(--ag-internal-padded-row-height) - ) + 1px - ); - } - } - - .ag-toggle-button-input-wrapper { - border-radius: 0; - border-width: 0; - background-color: var(--agGrid-toggle-button-background); - height: var(--agGrid-switch-height); - width: calc( - var(--agGrid-switch-height) * 2 - var(--agGrid-switch-borderWidth) - ); - &:focus-within:before { - border: 2px dotted var(--salt-focused-outlineColor); - } - &::before { - border-radius: 0; - border-width: var(--agGrid-switch-borderWidth); - border-color: var(--agGrid-toggle-button-background); - top: 0; - left: 0; - height: var(--agGrid-switch-height); - width: var(--agGrid-switch-height); - } - &.ag-checked { - border-color: var(--agGrid-toggle-background-checked); - background-color: var(--agGrid-toggle-background-checked); - &::before { - left: calc( - var(--agGrid-switch-height) - var(--agGrid-switch-borderWidth) - ); - border-color: var(--agGrid-toggle-background-checked); - display: flex; - font-family: jpmuitk-icons; - font-size: 12px; - content: "\e95b"; - color: var(--agGrid-toggle-background-checked); - background-color: white; - justify-content: center; - align-items: center; - } - } - } - - /* --- Menu styles --- */ - - .ag-menu { - background-color: var(--agGrid-background); - padding: var(--salt-spacing-100); - color: var(--agGrid-menu-color); - border-color: var(--agGrid-menu-borderColor); - } - - /** pop up shadow */ - .ag-popup-child:not(.ag-tooltip-custom) { - box-shadow: var(--agGrid-menu-shadow); - } - - .ag-menu .ag-tabs-body { - padding: 0; - } - - .ag-menu .ag-filter-body-wrapper { - padding: 0; - display: flex; - flex-direction: column; - gap: var(--salt-spacing-50); - } - - .ag-menu .ag-filter-body-wrapper > * { - margin: 0; - } - - .ag-menu-header { - background-color: var(--agGrid-background); - } - - .ag-menu-list { - padding: 0; - } - - .ag-menu-separator { - height: var(--salt-size-border); - } - - .ag-menu-option { - height: calc(var(--salt-size-base) + var(--salt-spacing-100)); - } - - .ag-column-select-header { - border: none; - } - - .ag-menu-column-select-wrapper { - height: 100%; - } - - .ag-column-select-list { - overflow: initial; - max-height: 256px; - } - - .ag-picker-field-wrapper { - border-radius: 0; - } - - .ag-picker-field-icon { - margin-right: var(--salt-spacing-100); - } - - .ag-select .ag-picker-field-display { - margin: 0; - padding-left: var(--salt-spacing-100); - } - - .ag-input-field-input[class^="ag-"][type="text"] { - font-size: var(--salt-text-fontSize); - font-family: var(--salt-text-fontFamily); - padding: 0; - } - - .ag-menu .ag-input-field-input[type="text"] { - height: var(--agGrid-input-height); - min-height: var(--agGrid-input-height); - line-height: var(--agGrid-input-height); - padding-left: var(--salt-spacing-100); - padding-right: var(--salt-spacing-100); - font-size: inherit; - - &:focus { - border-color: var(--agGrid-color-focus); - } - &::placeholder { - color: var(--agGrid-placeholder-color); - opacity: 1; - } - } - - .ag-menu .ag-input-field-input[type="text"] { - font-size: var(--salt-text-fontSize); - border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) - var(--salt-editable-borderColor); - } - - .ag-set-filter-list { - padding-top: 1px; - } - - .ag-set-filter-item { - margin: 0; - padding-left: var(--salt-spacing-100); - padding-right: var(--salt-spacing-100); - } - - .ag-mini-filter { - margin: 0; - padding-left: var(--salt-spacing-50); - padding-right: var(--salt-spacing-50); - } - - .ag-menu-option-part { - height: var(--salt-size-stackable); - line-height: var(--salt-text-lineHeight); - padding: 0 var(--salt-spacing-100); - font-size: var(--salt-text-fontSize); - } - - .ag-menu-option-text { - padding-left: var(--salt-spacing-100); - padding-right: var(--salt-spacing-100); - } - - .ag-list-item, - .ag-virtual-list-item { - height: var(--agGrid-list-item-height); - font-size: ag-param(font-size); - color: var(--agGrid-header-foreground); - } - - .ag-list-item:hover, - .ag-virtual-list-item:hover { - background-color: var(--agGrid-list-item-color-hover) !important; - } - - /* --- Tab styles --- */ - - .ag-tabs-header { - @include ag-border(primary, bottom); - min-width: 220px; - } - - .ag-tab { - margin: 0 var(--salt-spacing-100) 0 0; - padding: 0 var(--salt-spacing-100); - transition: color 0.4s; - flex: 1 1 auto; - height: var(--salt-size-stackable); - } - - .ag-tab:only-child { - margin: 0; - } - - .ag-tab-selected { - border-bottom: var(--salt-editable-borderStyle) - var(--salt-editable-borderWidth-active) - var(--agGrid-tab-borderColor-active); - } - - /* --- Status bar styles --- */ - - .ag-status-bar { - color: var(--salt-content-secondary-foreground); - height: var(--agGrid-row-height-default); - font-size: var(--salt-text-fontSize); - font-weight: var(--salt-text-label-fontWeight); - line-height: var(--salt-text-label-lineHeight); - padding: 0 var(--salt-spacing-100); - } - - .ag-status-panel { - align-items: center; - color: var(--salt-content-secondary-foreground); - padding: var(--salt-spacing-100) 0; - } - - .ag-status-name-value-value { - color: var(--salt-content-primary-foreground); - font-weight: var(--salt-text-fontWeight-strong); - } - - /* --- Header styles --- */ - - .ag-header { - border-color: var(--agGrid-header-borderColor); - } - - .ag-header-row { - color: var(--agGrid-header-foreground); - font-size: var(--agGrid-header-fontSize); - font-weight: var(--agGrid-header-fontWeight); - } - - .ag-header-icon { - color: var(--agGrid-header-foreground); - } - - .ag-header-cell:after, - .ag-header-group-cell:after { - height: var(--agGrid-column-separator-height); - top: var(--agGrid-column-separator-top); - } - - /** Move sort arrow towards menu icon */ - .ag-ltr - .ag-header-cell:not(.ag-right-aligned-header) - .ag-header-label-icon.ag-hidden - + .ag-sort-indicator-container { - margin-left: auto; - } - - .ag-ltr - .ag-header-cell.ag-right-aligned-header - .ag-header-label-icon.ag-hidden - + .ag-sort-indicator-container { - margin-right: auto; - } - - .ag-sort-indicator-container { - align-items: center; - } - - .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-sort-indicator-icon { - padding-left: var(--salt-spacing-100); - } - - .ag-ltr - .ag-header-cell:not(.ag-right-aligned-header) - .ag-sort-indicator-icon { - padding-right: var(--salt-spacing-100); - } - - .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon { - margin-right: auto; - padding-left: var(--salt-spacing-100); - } - - .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon { - margin-left: auto; - padding-right: var(--salt-spacing-100); - } - - .ag-keyboard-focus .ag-header-cell:focus:after { - height: auto; - width: auto; - left: 0; - right: 0; - bottom: 0; - top: 0; - border: 2px dotted var(--agGrid-color-focus); - } - - .ag-header-cell, - .ag-header-group-cell { - padding: 0px calc(var(--salt-spacing-100)); - } - - /* --- General row styles --- */ - - .ag-row { - color: var(--agGrid-foreground); - } - - .ag-row-hover { - background-color: var(--agGrid-row-background-hover); - } - - .ag-row-selected { - background-color: var(--agGrid-row-background-selected); - border-color: var(--agGrid-row-borderColor-selected); - } - - &.ag-theme-salt-variant-zebra - .ag-row-even:not(.ag-row-hover, .ag-row-selected) { - background-color: var(--agGrid-zebraColor); - } - - &.ag-theme-salt-variant-secondary - .ag-row:not(.ag-row-hover, .ag-row-selected) { - background-color: var(--agGrid-row-background-secondary); - } - - &.ag-theme-salt-variant-secondary .ag-header { - background-color: var(--agGrid-row-background-secondary); - } - - .ag-row-selected.ag-row-hover::before, - .ag-row-selected::before { - content: ""; - height: 1px; - position: absolute; - top: -1px; - left: 0; - right: 0; - background-color: var(--agGrid-row-borderColor-selected); - background-image: none; - z-index: 1; - } - - /* --- General cell styles --- */ - - .ag-cell { - border: 0; - padding-left: var(--salt-spacing-100); - padding-right: var(--salt-spacing-100); - } - - .ag-ltr .ag-cell { - border: none; - line-height: calc( - min( - var(--ag-internal-calculated-line-height), - var(--ag-internal-padded-row-height) - ) + 1px - ); - } - - .ag-cell-label-container { - padding: var(--salt-spacing-100) 0; - } - - .editable-numeric-cell, - .ag-cell.numeric-cell { - text-align: right; - justify-content: flex-end; - } - - .editable-numeric-cell, - .ag-cell.editable-cell { - border: var(--salt-size-border) var(--salt-container-borderStyle) - var(--salt-editable-borderColor); - } - - .ag-ltr { - .ag-cell-range-single-cell, - .ag-cell-focus:not(.ag-cell-range-selected):focus-within { - outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) - var(--salt-focused-outlineColor); - outline-offset: -2px; - border-color: transparent !important; - } - } - - .ag-ltr .ag-cell-focus.ag-cell-inline-editing:focus-within { - background-color: var(--salt-container-primary-background); - } - - .ag-cell.editable-numeric-cell.ag-cell-focus:focus, - .ag-cell.editable-cell.ag-cell-focus:focus, - .ag-cell.editable-cell.ag-cell-focus:focus-within, - .ag-cell.editable-cell.ag-cell-focus.ag-cell-inline-editing { - overflow: visible; - } - - .ag-cell.editable-numeric-cell.ag-cell-focus:focus:before, - .ag-cell.editable-cell.ag-cell-focus:focus:before, - .ag-cell.editable-cell.ag-cell-focus:focus-within:before, - .ag-cell.editable-cell.ag-cell-focus.ag-cell-inline-editing:before { - content: ""; - position: absolute; - top: 0; - left: 0; - transform: translate(-1px, -1px); - border-top: 0 solid transparent; - border-left: var(--agGrid-editableCell-cornerTag-size) solid - var(--salt-editable-borderColor-hover); - border-bottom: var(--agGrid-editableCell-cornerTag-size) solid transparent; - z-index: 2; - } - - .ag-cell.ag-cell-inline-editing { - padding: 0; - } - - .ag-cell-inline-editing input { - background-color: transparent; - } - - .ag-cell-inline-editing.numeric-cell input:not(:focus) { - text-align: right; - } - - .ag-cell-editor .ag-input-field-input[type="text"] { - padding-left: ag-param(cell-horizontal-padding); - padding-right: ag-param(cell-horizontal-padding); - } - - /* --- Cell range --- */ - - .ag-cell.ag-cell-range-selected:not( - .ag-cell-range-single-cell - ).ag-cell-range-left:before { - border-left: var(--salt-size-border) dotted - var(--agGrid-range-selection-borderColor); - content: ""; - height: 100%; - position: absolute; - left: 0; - top: 0; - width: 100%; - z-index: 1; - } - .ag-cell.ag-cell-range-selected:not( - .ag-cell-range-single-cell - ).ag-cell-range-right:before { - border-right: 2px dotted var(--agGrid-range-selection-borderColor); - content: ""; - height: 100%; - position: absolute; - right: 0; - top: 0; - width: 100%; - z-index: 1; - } - - .ag-cell.ag-cell-range-selected:not( - .ag-cell-range-single-cell - ).ag-cell-range-top:after { - border-top: 2px dotted var(--agGrid-range-selection-borderColor); - content: ""; - width: 100%; - position: absolute; - left: 0; - top: 0; - height: 100%; - z-index: 1; - } - .ag-cell.ag-cell-range-selected:not( - .ag-cell-range-single-cell - ).ag-cell-range-bottom:after { - border-bottom: 2px dotted var(--agGrid-range-selection-borderColor); - content: ""; - width: 100%; - position: absolute; - left: 0; - bottom: 0; - height: 100%; - z-index: 1; - } - - .ag-cell.ag-cell-range-selected-1:not(.ag-cell-focus), - .ag-root:not(.ag-context-menu-open) - .ag-body-viewport:not(.ag-has-focus) - .ag-cell-range-selected-1:not(.ag-cell-inline-editing) { - background: var(--agGrid-range-selection-background); - } - .ag-cell.ag-cell-highlight { - color: var(--agGrid-highlight-text-color); - background: var(--salt-focused-outlineColor) !important; - } - - /* --- Button styles --- */ - - .ag-side-buttons { - width: var(--salt-size-stackable); - } - - .ag-standard-button { - appearance: none; - -webkit-appearance: none; - background: var(--salt-actionable-secondary-background); - border-radius: ag-param(border-radius); - border: 1px transparent; - cursor: pointer; - height: var(--salt-size-base); - font-weight: 600; - color: var(--salt-actionable-secondary-foreground); - text-transform: uppercase; - font-size: var(--salt-text-fontSize); - padding: 0 var(--salt-spacing-100); - &:focus-visible { - outline-style: var(--salt-focused-outlineStyle); - outline-width: var(--salt-focused-outlineWidth); - outline-color: var(--salt-focused-outlineColor); - outline-offset: var(--salt-focused-outlineOffset); - background: var(--salt-actionable-secondary-background-hover); - } - &:hover { - background-color: var(--salt-actionable-secondary-background-hover); - } - &:active { - color: var(--salt-actionable-secondary-foreground-active); - background-color: var(--salt-actionable-secondary-background-active); - } - } - - .ag-ltr .ag-side-bar-right .ag-side-button-button { - &:focus-visible { - outline: 2px dotted var(--salt-focused-outlineColor); - outline-offset: -2px; - } - } - - .ag-ltr .ag-side-buttons .ag-selected .ag-side-button-button { - border-left-color: var(--salt-navigable-indicator-active); - border-left-style: solid !important; - font-weight: var(--salt-navigable-fontWeight-active); - } - - button.ag-side-button-button { - border-bottom: none; - border-top: none; - } - - .ag-pivot-mode-panel { - height: var(--salt-size-stackable); - } - - /* Checkbox for row selection styles */ - - .ag-selection-checkbox { - height: 100%; - } - - .ag-checkbox-input-wrapper { - height: var(--agGrid-checkbox-size); - width: var(--agGrid-checkbox-size); - border: var(--agGrid-checkbox-border); - background: var(--agGrid-checkbox-background); - border-radius: 0; - - &::after { - line-height: 1; - font-weight: 700; - font-size: calc(var(--agGrid-checkbox-size) - 2px); - color: var(--agGrid-checkbox-foreground); - } - } - - .ag-checkbox-input-wrapper.ag-checked { - border-color: var(--agGrid-checkbox-borderColor-selected); - background: var(--agGrid-checkbox-background-selected); - - &::after { - color: var(--agGrid-checkbox-foreground-selected); - } - } - - /* --- Paging styles --- */ - - .ag-paging-row-summary-panel { - display: none; - } - - .ag-paging-page-summary-panel { - font-size: var(--agGrid-paging-fontSize); - margin-top: 5px; - color: var(--agGrid-button-color); - } - - .ag-paging-number { - font-weight: normal; - } - - .ag-paging-button { - height: var(--agGrid-paging-button-width); - width: var(--agGrid-paging-button-width); - display: flex; - align-items: center; - justify-content: center; - margin: 0; - font-size: var(--agGrid-paging-fontSize); - & .ag-icon { - color: var(--agGrid-pagination-button-color); - } - &:hover { - background-color: var(--agGrid-paging-button-background-hover); - } - &.ag-disabled { - background-color: unset; - cursor: not-allowed; - & .ag-icon { - color: var(--agGrid-pagination-button-color-disabled); - } - } - } - - .ag-keyboard-focus .ag-paging-button:focus::after { - outline: dotted 2px var(--agGrid-color-focus); - outline-offset: -2px; - border: none; - } - - /* --- Floating filter styles --- */ - - .ag-input-field-input { - border: 0; - } - - .ag-floating-filter { - border: var(--salt-size-border) var(--salt-editable-borderStyle) - var(--salt-separable-tertiary-borderColor); - } - - .ag-ltr .ag-floating-filter-button { - margin: 0; - padding-left: var(--salt-spacing-100); - padding-right: var(--salt-spacing-100); - } - - .ag-floating-filter-button-button .ag-icon-filter:before { - color: var(--salt-content-secondary-foreground); - content: "\e9ac"; - } - - .ag-floating-filter-input { - color: var(--salt-content-secondary-foreground); - padding-left: var(--salt-spacing-100); - } - - .ag-header-cell.ag-floating-filter { - padding-left: 0; - padding-right: 1px; - } - - .ag-header-cell.ag-floating-filter:after { - content: none; - } - - .ag-header-cell.ag-floating-filter:focus-within { - outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) - var(--salt-focused-outlineColor); - outline-offset: -2px; - } - - .ag-header-cell.ag-column-menu-visible { - background: var(--salt-actionable-secondary-background-active); - color: var(--salt-actionable-secondary-foreground-active); - } - - .ag-header-cell.ag-column-menu-visible .ag-icon { - color: var(--salt-actionable-secondary-foreground-active); - } - - /* We have to fake a border (below) to ensure alignment */ - .ag-pinned-right-header .ag-floating-filter { - border-left: 0px; - } - - .ag-pinned-right-header .ag-floating-filter:after { - background-color: var(--salt-separable-tertiary-borderColor); - content: ""; - height: 100%; - position: absolute; - left: -1px; - top: 0px; - width: 1px; - z-index: 1; - } - - /* Allows for the above :after to be seen */ - .ag-header-row-column-filter, - .ag-header-cell.ag-floating-filter, - .ag-pinned-right-header .ag-header-row { - overflow: unset; - } - - /* - * This react-container class is added as a wrapper for custom components. - * Adding styling for these components added in the status and tool bars. - */ - .ag-status-bar .ag-react-container, - .ag-floating-filter .ag-react-container { - display: flex; - align-items: center; - } - .ag-tool-panel-wrapper .ag-react-container { - width: 100%; - } -} diff --git a/packages/ag-grid-theme/css/_uitk-ag-theme-default-params.scss b/packages/ag-grid-theme/css/_uitk-ag-theme-default-params.scss deleted file mode 100644 index 3d920898ce8..00000000000 --- a/packages/ag-grid-theme/css/_uitk-ag-theme-default-params.scss +++ /dev/null @@ -1,93 +0,0 @@ -@import "~ag-grid-community/src/styles/ag-theme-base/sass/ag-theme-base-default-params"; - -$uitk-ag-theme-default-params: ( - grid-size: 8px, - icon-size: 18px, - header-height: ag-derived(grid-size, $times: 7), - row-height: ag-derived(grid-size, $times: 6), - cell-horizontal-padding: ag-derived(grid-size, $times: 3), - list-item-height: ag-derived(grid-size, $times: 4), - row-group-indent-size: ag-derived(grid-size, $times: 3, $plus: icon-size), - filter-tool-panel-sub-level-row-height: ag-derived(grid-size, $times: 4), - checkbox-border-radius: 2px, - toggle-button-switch-border-width: 2px, - toggle-button-height: ag-derived(icon-size), - widget-container-vertical-padding: ag-derived(grid-size, $times: 2), - widget-vertical-spacing: ag-derived(grid-size, $times: 1.75), - selected-tab-underline-width: 2px, - full-width-tabs: true, - data-color: ag-derived(foreground-color), - secondary-foreground-color: ag-derived(foreground-color), - header-foreground-color: var(--agGrid-header-foreground), - disabled-foreground-color: var(--agGrid-foreground-disabled), - header-background-color: null, - subheader-background-color: null, - subheader-toolbar-background-color: null, - control-panel-background-color: null, - selected-row-background-color: var(--agGrid-row-background-selected), - odd-row-background-color: null, - row-hover-color: var(--agGrid-row-color-hover), - column-hover-color: null, - range-selection-highlight-color: ag-derived(range-selection-border-color), - selected-tab-underline-color: ag-derived(range-selection-border-color), - selected-tab-underline-transition-speed: null, - header-cell-hover-background-color: null, - header-cell-moving-background-color: - ag-derived(header-cell-hover-background-color), - chip-background-color: null, - suppress-css-var-overrides: false, - // BORDERS - borders: false, - borders-critical: true, - borders-secondary: true, - borders-side-button: true, - side-bar-panel-width: 200px, - border-radius: 0px, - border-color: var(--agGrid-borderColor), - secondary-border-color: var(--agGrid-borderColor), - row-border-color: var(--agGrid-row-borderColor), - cell-horizontal-border: solid transparent, - header-column-separator: true, - header-column-separator-width: 1px, - header-column-separator-color: var(--agGrid-header-column-separator-color), - header-column-resize-handle: false, - header-column-resize-handle-height: 100%, - header-column-resize-handle-width: 1px, - header-column-resize-handle-color: var(--salt-color-gray-90), - // INPUTS - suppress-native-widget-styling: false, - input-border-color: null, - input-disabled-border-color: ag-derived(input-border-color, $opacity: 0.3), - input-disabled-background-color: null, - checkbox-background-color: null, - // checkbox-border-radius: ag-derived(border-radius), - checkbox-checked-color: ag-derived(background-color), - checkbox-unchecked-color: ag-derived(foreground-color), - checkbox-indeterminate-color: ag-derived(checkbox-unchecked-color), - toggle-button-off-border-color: ag-derived(checkbox-unchecked-color), - toggle-button-off-background-color: ag-derived(checkbox-unchecked-color), - toggle-button-on-border-color: ag-derived(checkbox-checked-color), - toggle-button-on-background-color: ag-derived(checkbox-checked-color), - toggle-button-switch-background-color: ag-derived(background-color), - toggle-button-switch-border-color: ag-derived(toggle-button-off-border-color), - toggle-button-border-width: 1px, - input-focus-box-shadow: null, - input-focus-border-color: null, - // CHART SETTINGS - minichart-selected-chart-color: ag-derived(checkbox-checked-color), - minichart-selected-page-color: ag-derived(checkbox-checked-color), - // Fonts - font-family: - ( - "Open Sans", - sans-serif, - ), - card-radius: ag-derived(border-radius), - card-shadow: none, - popup-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -); - -$uitk-ag-theme-default-params: map-merge( - $ag-theme-base-default-params, - $uitk-ag-theme-default-params -); diff --git a/packages/ag-grid-theme/css/_uitk-ag-theme-icon-font.scss b/packages/ag-grid-theme/css/_uitk-ag-theme-icon-font.scss deleted file mode 100644 index d625b2b508e..00000000000 --- a/packages/ag-grid-theme/css/_uitk-ag-theme-icon-font.scss +++ /dev/null @@ -1,75 +0,0 @@ -$icons: ( - aggregation: "\e974", - arrows: "\e970", - asc: "\e940", - cancel: "\e90e", - chart: "\e904", - columns: "\e910", - contracted: "\e91b", - copy: "\e90d", - cross: "\e90e", - cut: "\e96d", - csv: "\e915", - desc: "\e93f", - excel: "\e91a", - expanded: "\e950", - eye-slash: "\e966", - eye: "\e965", - filter: "\e922", - first: "\e934", - last: "\e951", - left: "\e933", - linked: "\e935", - loading: "\e96f", - menu: "\e969", - next: "\e950", - none: "\e971", - not-allowed: "\e90e", - paste: "\e946", - pin: "\e944", - pivot: "\e979", - previous: "\e933", - right: "\e950", - save: "\e953", - small-down: "\e91b", - small-left: "\e981", - small-right: "\e980", - small-up: "\e982", - tick: "\e95b", - tree-closed: "\e950", - tree-open: "\e91b", - unlinked: "\e95e", -); - -@font-face { - font-family: "jpmuitk-icons"; - src: url("../fonts/jpmuitk-icons.woff") format("woff"); -} - -@each $name, $glyph in $icons { - [class^="ag-theme-uitk"] .ag-icon-#{$name}, - [class*=" ag-theme-uitk"] .ag-icon-#{$name} { - font-family: "jpmuitk-icons"; - } - - [class^="ag-theme-uitk"] .ag-icon-#{$name}::before, - [class*=" ag-theme-uitk"] .ag-icon-#{$name}::before { - content: $glyph; - } -} - -[class^="ag-theme-uitk"] .ag-checkbox-input-wrapper::after, -[class*=" ag-theme-uitk"] .ag-checkbox-input-wrapper::after { - font-family: "jpmuitk-icons"; - content: ""; -} - -[class^="ag-theme-uitk"] .ag-checkbox-input-wrapper.ag-checked::after, -[class*=" ag-theme-uitk"] .ag-checkbox-input-wrapper.ag-checked::after { - content: "\e95b"; -} - -[class^="ag-theme-uitk"] .ag-checkbox-input-wrapper.ag-indeterminate::after, -[class*=" ag-theme-uitk"] .ag-checkbox-input-wrapper.ag-indeterminate::after { - content: "\e94e"; -} diff --git a/packages/ag-grid-theme/css/_uitk-ag-theme-mixin.scss b/packages/ag-grid-theme/css/_uitk-ag-theme-mixin.scss deleted file mode 100644 index 264fa35f224..00000000000 --- a/packages/ag-grid-theme/css/_uitk-ag-theme-mixin.scss +++ /dev/null @@ -1,869 +0,0 @@ -@import "~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material-mixin.scss"; -@import "./uitk-ag-theme-default-params"; - -@mixin ag-theme-uitk($params: ()) { - @include ag-allow-color-param-access-with-ag-param(false); - - $params: ag-process-theme-variables($params, $uitk-ag-theme-default-params); - @include ag-theme-material($params); - - .ag-filter-toolpanel-header, - .ag-filter-toolpanel-search, - .ag-status-bar, - .ag-header-row, - .ag-panel-title-bar-title, - .ag-multi-filter-group-title-bar { - font-weight: 600; - @include ag-color-property(color, header-foreground-color); - } - - .ag-ltr .ag-filter-toolpanel-header { - font-size: 12px; - padding-left: 8px; - } - - .ag-header-row { - font-size: var(--agGrid-header-fontSize); - } - - %ag-pinned-row-end { - content: ""; - position: absolute; - height: calc(100% - 20px); - top: 10px; - width: 1px; - @include ag-color-property(background-color, border-color); - } - - .ag-ltr { - .ag-pinned-right-header .ag-header-row::after { - @extend %ag-pinned-row-end; - right: 0; - } - } - - .ag-rtl { - .ag-pinned-left-header .ag-header-row::before { - @extend %ag-pinned-row-end; - left: 0; - } - } - - .ag-row { - font-size: ag-param(font-size); - } - - .ag-row-hover { - z-index: 3; - background-color: var(--agGrid-row-color-hover); - box-shadow: var(--agGrid-row-shadow-hover); - } - - .ag-row-selected { - z-index: 2; - border: transparent; - background-color: var(--agGrid-row-background-selected); - border-bottom: 0 solid var(--agGrid-row-borderColor-selected); - outline: 1px solid var(--agGrid-row-borderColor-selected); - } - - %ag-text-input { - min-height: ag-param(grid-size) * 4; - border-radius: ag-param(border-radius); - - @include ag-theme-rtl( - ( - padding-left: ag-param(grid-size), - ) - ); - } - - .ag-tab { - padding: ag-param(grid-size) * 1.5; - transition: color 0.4s; - flex: 1 1 auto; - height: 36px; - } - - .ag-tab-selected { - border-bottom: solid 2px var(--agGrid-tab-borderColor-active); - } - - .ag-menu { - background-color: var(--agGrid-background); - padding: var(--agGrid-menu-padding); - color: var(--agGrid-menu-color); - } - - .ag-menu .ag-tabs-body { - padding: 0; - padding-top: 8px; - } - - // start filter input - .ag-menu .ag-filter-body-wrapper { - padding: 0; - display: flex; - flex-direction: column; - gap: var(--uitk-size-unit); - } - - .ag-menu .ag-filter-body-wrapper > * { - margin: 0; - } - - .ag-picker-field-wrapper { - border-radius: 0; - } - - .ag-picker-field-icon { - margin-right: var(--uitk-size-unit); - } - - .ag-select .ag-picker-field-display { - margin: 0; - padding-left: var(--uitk-size-unit); - } - - // end filter input - - .ag-menu-header { - background-color: var(--agGrid-background); - padding-top: 1px; - } - - .ag-tabs-header { - @include ag-border(primary, bottom); - min-width: 220px; - } - - .ag-tabs-body { - padding: 4px 0; - } - - .ag-charts-settings-group-title-bar, - .ag-charts-data-group-title-bar, - .ag-charts-format-top-level-group-title-bar { - padding: ag-param(grid-size) ag-param(grid-size) * 2; - line-height: ag-param(icon-size) + ag-param(grid-size) - 2; - } - - .ag-chart-mini-thumbnail { - @include ag-color-property(background-color, background-color); - } - - .ag-chart-settings-nav-bar { - @include ag-border(secondary, top); - } - - .ag-group-title-bar-icon { - @include ag-theme-rtl( - ( - margin-right: ag-param(grid-size), - ) - ); - } - - .ag-charts-format-top-level-group-toolbar { - margin-top: ag-param(grid-size); - @include ag-theme-rtl( - ( - padding-left: ag-param(icon-size) * 0.5 + ag-param(grid-size) * 2, - ) - ); - } - - .ag-charts-format-sub-level-group { - border-left: dashed 1px; - @include ag-color-property(border-left-color, border-color); - padding-left: ag-param(grid-size); - margin-bottom: ag-param(grid-size) * 2; - } - - .ag-charts-format-sub-level-group-title-bar { - padding-top: 0; - padding-bottom: 0; - background: none; - font-weight: 700; - } - - .ag-charts-format-sub-level-group-container { - padding-bottom: 0; - } - - .ag-charts-format-sub-level-group-item:last-child { - margin-bottom: 0; - } - - &.ag-dnd-ghost { - font-size: 13px; - font-weight: 400; - color: ag-param(foreground-color); - background: ag-param(background-color); - border-radius: 2px; - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), - 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); - - overflow: hidden; - text-overflow: ellipsis; - z-index: 10; - height: 56px !important; - line-height: 56px; - margin: 0; - padding: 0 16px; - transform: translateY(16px); - border: none; - } - - .ag-dnd-ghost-icon { - margin-right: 8px; - color: var(--agGrid-ghost-icon-color); - } - - .ag-side-buttons { - width: 22px; - background-color: var(--agGrid-side-buttons-background); - } - - .ag-standard-button { - appearance: none; - -webkit-appearance: none; - border-radius: ag-param(border-radius); - border: 1px transparent; - height: var(--agGrid-button-height); - - @include ag-color-property(background-color, background-color); - font-weight: 600; - color: var(--agGrid-button-color); - text-transform: uppercase; - font-size: var(--agGrid-button-fontSize); - padding: 0 var(--agGrid-button-padding); - - &:hover { - background-color: var(--agGrid-button-background-hover); - } - - &:active { - } - - &:disabled { - } - } - - .ag-column-drop-vertical { - min-height: 150px; - padding-top: 8px; - .ag-icon { - height: 18px; - line-height: 18px; - } - } - - .ag-column-drop-vertical-icon { - margin-left: 2px; - margin-right: 2px; - } - - .ag-column-drop-vertical-empty-message { - padding-left: 34px; - padding-right: 8px; - font-size: 12px; - font-weight: 600; - color: rgba(0, 0, 0, 0.38); - margin-top: 8px; - margin-left: 2px; - margin-right: 2px; - } - - .ag-status-bar { - font-weight: normal; - } - - .ag-status-name-value-value { - font-weight: 700; - } - - .ag-paging-number, - .ag-paging-row-summary-panel-number { - font-weight: 700; - } - - .ag-column-drop-cell-button { - min-width: 32px; - margin: 0 4px; - - &:hover { - } - } - - .ag-column-drop.ag-column-drop-horizontal .ag-icon-group { - display: none; - } - - .ag-ltr .ag-column-select-column-drag-handle:not(:last-child) { - margin-right: 12px; - } - - .ag-column-drop-cell-drag-handle { - margin-left: 16px; - } - - .ag-column-drop-vertical-list { - padding-bottom: 8px; - padding-right: 8px; - padding-left: 8px; - } - - .ag-header-cell-menu-button, - .ag-side-button-button, - .ag-tab, - .ag-panel-title-bar-button, - .ag-header-expand-icon, - .ag-column-group-icons, - .ag-group-expanded .ag-icon, - .ag-group-contracted .ag-icon, - .ag-chart-settings-prev, - .ag-chart-settings-next, - .ag-group-title-bar-icon, - .ag-column-select-header-icon, - .ag-floating-filter-button-button, - .ag-filter-toolpanel-expand, - .ag-chart-menu-icon { - &:hover { - } - } - - .ag-floating-filter-button-button { - height: 18px; - width: 18px; - } - - .ag-ltr .ag-floating-filter-button { - margin: 3px; - } - - .ag-ltr - .ag-floating-filter-input - input.ag-input-field-input[type="text"]:focus { - height: 17px; - min-height: 17px; - } - - .ag-cell .ag-cell-wrapper .ag-group-contracted { - margin-right: 2px; - } - - .ag-header-cell-menu-button { - width: 18px; - } - - .ag-header-cell-label > .ag-header-icon { - margin-left: 2px; - margin-right: 2px; - } - - .ag-header-cell { - padding-left: 2px; - padding-right: 2px; - } - - .ag-header-select-all { - margin-left: 2px; - } - - .ag-keyboard-focus .ag-header-cell:focus:after { - height: auto; - width: auto; - left: 0; - right: 0; - bottom: 0; - top: 0; - border: 2px dotted var(--agGrid-color-focus); - } - - .ag-header-cell.ag-floating-filter::after { - display: none; - } - - .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon { - margin-right: 8px; - } - - .ag-icon { - color: var(--agGrid-icon-color); - } - - .ag-header-cell-text { - margin-left: 3px; - margin-right: auto; - } - - .ag-header-icon { - color: var(--agGrid-header-icon-color); - } - - .ag-menu-header .ag-icon { - color: var(--agGrid-menu-header-icon-color); - } - - .ag-chart-settings-card-item.ag-not-selected:hover { - opacity: 0.35; - } - - .ag-panel-title-bar-button { - @include ag-theme-rtl( - ( - margin-left: ag-param(grid-size) * 2, - margin-right: ag-param(grid-size), - ) - ); - } - - .ag-filter-toolpanel-group-container { - padding-left: ag-param(grid-size); - } - - .ag-filter-toolpanel-group-level-0 { - border-top: none; - } - - .ag-filter-toolpanel-group-level-0-header { - height: 56px; - } - - .ag-filter-toolpanel-instance-filter { - border: none; - @include ag-color-property( - background-color, - control-panel-background-color - ); - border-left: dashed 1px; - @include ag-color-property(border-left-color, border-color); - margin-left: ag-param(icon-size) * 0.5; - padding-left: ag-param(icon-size) * 0.5; - margin-right: ag-param(grid-size) * 2; - } - - .ag-set-filter-list { - height: 192px; - } - - .ag-set-filter-item { - margin: 0 12px; - } - - .ag-layout-auto-height, - .ag-layout-print { - .ag-center-cols-clipper, - .ag-center-cols-container { - min-height: 150px; - } - } - - .ag-overlay-no-rows-wrapper.ag-layout-auto-height { - padding-top: 60px; - } - - .ag-date-time-list-page-entry-is-current { - } - - .ag-cell.editable-numeric-cell { - border: solid 1px var(--agGrid-cell-borderColor-editable); - text-align: right; - padding: 1px 3px; - } - - .ag-cell { - padding: 2px 4px; - line-height: ag-param(row-height) - 4px; - border-width: 0; - } - - .ag-ltr, - .ag-rtl { - .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected), - .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected), - .ag-has-focus .ag-full-width-row.ag-row-focus .ag-cell-wrapper.ag-row-group, - .ag-cell-range-single-cell, - .ag-cell-range-single-cell.ag-cell-range-handle { - border: 2px dotted var(--agGrid-color-focus); - padding: 0 2px; - } - } - - .ag-right-aligned-header .ag-header-cell-label { - flex-direction: row-reverse; - } - - .ag-checkbox-input-wrapper { - height: var(--agGrid-checkbox-size); - width: var(--agGrid-checkbox-size); - border: 1px solid var(--agGrid-checkbox-color); - border-radius: 0; - margin-left: 3px; - } - - .ag-checkbox-input-wrapper input { - opacity: 1; - } - - .ag-checkbox-input-wrapper.ag-checked { - border: none; - input:checked { - border: none; - background-color: var(--agGrid-checkbox-color); - } - &::after { - font-size: var(--agGrid-checkbox-size); - line-height: var(--agGrid-checkbox-size); - } - } - - .ag-menu .ag-input-field-input[type="text"] { - border-style: none; - height: var(--agGrid-input-height); - min-height: var(--agGrid-input-height); - line-height: var(--agGrid-input-height); - padding: 0 var(--salt-size-unit); - font-size: inherit; - border: dotted 2px transparent; - border-bottom-style: dotted !important; - - &:focus { - border-color: var(--agGrid-color-focus); - } - &::placeholder { - color: var(--agGrid-placeholder-color); - opacity: 1; - } - } - - .ag-ltr - .ag-column-select-header-filter-wrapper - input.ag-input-field-input[type="text"] { - border-style: none; - border-width: 0; - } - - .ag-column-select-header { - height: 56px; - padding: 0 12px; - // font-size: 13px; - font-size: ag-param(font-size); - border-bottom-color: var(--agGrid-borderColor); - } - - .ag-column-select { - border-bottom: solid 1px var(--agGrid-borderColor); - flex-grow: 3; - flex-shrink: 1; - flex-basis: 0; - } - - .ag-ltr .ag-column-select-header-checkbox, - .ag-ltr .ag-column-select-checkbox { - &:not(:last-child) { - margin-right: 12px; - } - } - - .ag-column-select-virtual-list-viewport { - padding: 8px 12px; - } - - .ag-column-select-virtual-list-item { - padding: 0; - } - - .ag-list-item, - .ag-virtual-list-item { - height: var(--agGrid-list-item-height); - font-size: ag-param(font-size); - color: var(--agGrid-header-foreground); - } - - .ag-list-item:hover, - .ag-virtual-list-item:hover { - background-color: var(--agGrid-list-item-color-hover) !important; - } - - .ag-keyboard-focus .ag-virtual-list-item:focus { - outline: none; - &:after { - top: 0; - left: 0; - width: 100%; - border: 2px dotted var(--agGrid-color-focus); - height: 100%; - } - } - - .ag-keyboard-focus .ag-column-drop-cell:focus::after { - border: none; - } - - .ag-keyboard-focus .ag-column-select-header:focus::after { - border: none; - } - - .ag-keyboard-focus .ag-checkbox .ag-input-wrapper:focus-within { - border: 2px dotted var(--agGrid-color-focus); - } - - .ag-keyboard-focus .ag-tab:focus:after { - border: 2px dotted var(--agGrid-color-focus); - } - - [class^="ag-"]:focus { - outline: none; - } - - .ag-set-filter-list .ag-virtual-list-viewport { - border-top: 1px solid var(--agGrid-filter-borderColor); - border-bottom: 1px solid var(--agGrid-filter-borderColor); - } - - .ag-filter-apply-panel { - justify-content: center; - padding: 16px 12px; - border-top: none; - } - - .ag-filter .ag-filter-apply-panel button { - height: 32px; - padding: 0 8px; - color: var(--agGrid-filter-apply-button-color); - font-size: 12px; - font-weight: 600; - cursor: pointer; - font-family: "Open Sans", sans-serif; - } - - .ag-ltr .ag-filter-apply-panel-button { - margin-left: 16px; - } - - .ag-cell input.ag-input-field-input[type="text"] { - &:focus { - outline: none; - } - } - - .ag-ltr .ag-pivot-mode-select { - margin-left: 12px; - } - - .ag-pivot-mode-panel { - height: 56px; - } - - .ag-toggle-button-input-wrapper { - border-radius: 0; - border-width: 0; - background-color: var(--agGrid-toggle-button-background); - height: var(--agGrid-switch-height); - width: calc( - var(--agGrid-switch-height) * 2 - var(--agGrid-switch-borderWidth) - ); - &:focus-within:before { - border: 2px dotted #2670a9; - } - &::before { - border-radius: 0; - border-width: var(--agGrid-switch-borderWidth); - border-color: var(--agGrid-toggle-button-background); - top: 0; - left: 0; - height: var(--agGrid-switch-height); - width: var(--agGrid-switch-height); - } - &.ag-checked { - border-color: var(--agGrid-toggle-background-checked); - background-color: var(--agGrid-toggle-background-checked); - &::before { - left: calc( - var(--agGrid-switch-height) - var(--agGrid-switch-borderWidth) - ); - border-color: var(--agGrid-toggle-background-checked); - display: flex; - font-family: jpmuitk-icons; - font-size: 12px; - content: "\e95b"; - color: var(--agGrid-toggle-background-checked); - background-color: white; - justify-content: center; - align-items: center; - } - } - } - - .ag-side-bar .ag-tool-panel-wrapper { - background: var(--agGrid-side-buttons-background); - } - - .ag-side-buttons { - padding-top: 0; - } - - .ag-column-drop-cell { - height: 32px; - font-size: ag-param(font-size); - background-color: var(--agGrid-background); - } - - .ag-ltr .ag-side-bar-right .ag-side-button-button { - border-left: 3px solid transparent; - &:focus { - border: 2px dotted #2d81bd; - outline: none; - } - } - - .ag-side-bar .ag-side-buttons .ag-side-button-label { - font-weight: 700; - margin-left: 2px; - } - - .ag-ltr .ag-side-buttons .ag-selected .ag-side-button-button { - border-left-color: var(--agGrid-tab-borderColor-active); - border-left-style: solid !important; - } - - button.ag-side-button-button { - border-bottom: none; - border-top: none; - font-size: inherit; - font-weight: inherit; - line-height: inherit; - width: 100%; - } - - button.ag-side-button-button { - padding: 16px 0 16px 0; - min-height: 144px; - } - - .ag-ltr .ag-filter-toolpanel-search { - padding-left: 8px; - height: 56px; - font-size: 12px; - } - - .ag-ltr .ag-filter-toolpanel-search-input { - margin-right: 8px; - height: 32px; - } - - .ag-mini-filter { - font-size: 13px; - margin: 16px 12px; - } - - // Selection checkbox - .ag-cell-wrapper > *:not(.ag-cell-value):not(.ag-group-value) { - // Needed to capitalize min, because it clashes with old versions of Sass - height: Min( - var(--ag-line-height, ag-param(row-height) - 4px), - ag-param(row-height) - 4px - ); - display: flex; - align-items: center; - flex: none; - } - - .ag-floating-filter-input input.ag-input-field-input[type="text"] { - border-width: 0; - } - - .ag-menu-option-part { - line-height: 18px; - padding: 10px 0; - font-size: 13px; - } - - .ag-menu-option-text { - padding-left: 16px; - padding-right: 16px; - } - - .ag-menu-separator { - height: 17px; - } - - .ag-menu-option-active { - background-color: var(--agGrid-menu-option-color-hover); - } - - .ag-column-drop-wrapper { - background: var(--agGrid-background); - } - - .ag-column-drop-horizontal { - background-color: var(--agGrid-background); - height: 48px; - } - - .ag-column-drop.ag-column-drop-horizontal .ag-column-drop-cell { - background-color: var(--agGrid-column-drop-cell-horizontal-background); - } - - .ag-column-drop-cell-text { - margin: 0 8px; - } - - .ag-ltr .ag-label-align-right .ag-label { - margin-left: 8px; - } - - .ag-ltr .ag-label { - margin-right: 8px; - } - - .ag-paging-row-summary-panel { - display: none; - } - - .ag-paging-page-summary-panel { - font-size: 14px; - margin-top: 5px; - color: var(--agGrid-button-color); - } - - .ag-paging-number { - font-weight: normal; - } - - .ag-paging-button { - height: var(--agGrid-paging-button-width); - width: var(--agGrid-paging-button-width); - display: flex; - align-items: center; - justify-content: center; - margin: 0; - font-size: 12px; - & .ag-icon { - color: var(--agGrid-pagination-button-color); - } - &:hover { - background-color: var(--agGrid-button-background-hover); - } - &.ag-disabled { - background-color: unset; - cursor: not-allowed; - & .ag-icon { - color: var(--agGrid-pagination-button-color-disabled); - } - } - } - - .ag-keyboard-focus .ag-paging-button:focus::after { - border: dotted 2px var(--agGrid-color-focus); - outline: none; - } - - input[class^="ag-"][type="text"] { - background-color: var(--agGrid-background); - } - - @include ag-allow-color-param-access-with-ag-param(true); -} diff --git a/packages/ag-grid-theme/css/salt-ag-grid-theme.css b/packages/ag-grid-theme/css/salt-ag-grid-theme.css new file mode 100644 index 00000000000..4cbeaf5c0bd --- /dev/null +++ b/packages/ag-grid-theme/css/salt-ag-grid-theme.css @@ -0,0 +1,592 @@ +div[class*="ag-theme-salt"] { + --ag-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + --ag-background-color: var(--salt-container-primary-background); + --ag-border-color: var(--salt-separable-secondary-borderColor); + --ag-borders-secondary: var(--salt-size-border) var(--salt-separable-borderStyle); + --ag-card-radius: var(--salt-palette-corner); + --ag-cell-horizontal-padding: var(--salt-spacing-100); + --ag-checkbox-border-radius: 0; + --ag-checkbox-checked-color: var(--salt-selectable-foreground-selected); + --ag-checkbox-indeterminate-color: var(--salt-selectable-foreground); + --ag-checkbox-unchecked-color: var(--salt-selectable-borderColor); + --ag-chip-background-color: var(--salt-actionable-primary-background); + --ag-data-color: var(--salt-content-primary-foreground); + --ag-disabled-foreground-color: var(--salt-content-primary-foreground-disabled); + --ag-font-family: var(--salt-text-fontFamily); + --ag-font-size: var(--salt-text-fontSize); + --ag-foreground-color: var(--salt-content-primary-foreground); + --ag-grid-size: var(--salt-spacing-50); + --ag-header-background-color: var(--salt-container-primary-background); + --ag-header-cell-hover-background-color: var(--salt-container-primary-background); + --ag-header-column-separator-color: var(--salt-separable-tertiary-borderColor); + --ag-header-column-separator-display: block; + --ag-header-column-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-border)); + --ag-header-column-separator-width: var(--salt-size-border); + --ag-header-foreground-color: var(--salt-content-secondary-foreground); + --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-focus-border-color: var(--salt-editable-borderColor-hover); + --ag-input-focus-box-shadow: none; + --ag-invalid-color: var(--salt-status-error-foreground-informative); + --ag-list-item-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + --ag-material-primary-color: var(--salt-editable-borderColor); + --ag-modal-overlay-background-color: var(--salt-overlayable-background); + --ag-popup-shadow: var(--salt-overlayable-shadow-modal); + --ag-range-selection-background-color: var(--salt-overlayable-rangeSelection); + --ag-range-selection-border-style: none; + --ag-row-group-indent-size: calc(var(--ag-icon-size) + var(--ag-cell-widget-spacing)); + --ag-row-hover-color: var(--salt-selectable-background-hover); + --ag-secondary-border-color: var(--salt-separable-tertiary-borderColor); + --ag-secondary-foreground-color: var(--salt-content-primary-foreground); + --ag-selected-row-background-color: var(--salt-selectable-background-selected); + --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-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); + --ag-toggle-button-on-border-color: var(--salt-selectable-borderColor-selected); + --ag-toggle-button-switch-border-color: var(--salt-container-primary-background); /* Fake a border with bg color */ + --ag-toggle-button-switch-background-color: var(--salt-selectable-foreground); + --ag-tooltip-background-color: var(--salt-container-primary-background); + --ag-value-change-delta-down-color: var(--salt-status-negative-foreground); + --ag-value-change-delta-up-color: var(--salt-status-positive-foreground); + --ag-widget-container-horizontal-padding: var(--salt-spacing-100); + /* + Use categorical color for below tokens when available + --ag-advanced-filter-join-pill-color,--ag-advanced-filter-column-pill-color,--ag-advanced-filter-option-pill-color,--ag-advanced-filter-value-pill-color + */ +} + +div[class*="ag-theme-salt-compact"] { + --ag-row-height: var(--salt-size-base); + --ag-header-height: var(--salt-size-base); +} + +div[class*="ag-theme-salt"] .ag-root-wrapper { + border: none; +} + +/* HEADER */ + +div[class*="ag-theme-salt"] .ag-header { + /* Header icon should be the same as text color, aka secondary color */ + --ag-icon-font-color: var(--ag-header-foreground-color); +} + +div[class*="ag-theme-salt"] .ag-advanced-filter-header, +div[class*="ag-theme-salt"] .ag-header { + border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-header-row { + font-size: var(--salt-text-label-fontSize); + font-weight: var(--salt-text-label-fontWeight-strong); +} + +div[class*="ag-theme-salt"] .ag-pinned-left-header { + border-right-color: var(--salt-separable-secondary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-pinned-right-header { + border-left-color: var(--salt-separable-secondary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total) { + border-top-color: var(--salt-container-primary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus, +div[class*="ag-theme-salt"] .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group:focus { + border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); +} + +/** Move sort arrow towards menu icon */ +div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container { + margin-left: auto; +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container { + margin-right: auto; +} + +div[class*="ag-theme-salt"] .ag-sort-indicator-container { + align-items: center; +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-sort-indicator-icon { + padding-left: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-sort-indicator-icon { + padding-right: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon { + margin-left: auto; + padding-right: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon { + margin-right: auto; + padding-left: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-header-cell.ag-floating-filter::before { + /* Remove half height border in most header cells */ + background-color: transparent; +} + +div[class*="ag-theme-salt"] .ag-floating-filter input[class^="ag-"][type="number"] { + /* Avoid floating filter's input clips focus ring */ + height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 4px); +} + +div[class*="ag-theme-salt"] .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell.ag-column-menu-visible:not(.ag-column-hover):not(.ag-header-cell-moving):hover, +div[class*="ag-theme-salt"] .ag-header-cell.ag-column-menu-visible { + /* When menu is visible, change bg and fg */ + background: var(--salt-actionable-secondary-background-active); + color: var(--salt-actionable-secondary-foreground-active); +} + +div[class*="ag-theme-salt"] .ag-header-cell.ag-column-menu-visible .ag-icon { + color: var(--salt-actionable-secondary-foreground-active); +} + +/* MENU */ + +div[class*="ag-theme-salt"] .ag-menu { + padding: var(--salt-spacing-100); + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected); +} + +div[class*="ag-theme-salt"] .ag-popup-child:not(.ag-tooltip-custom) { + box-shadow: var(--salt-overlayable-shadow-popout); +} + +div[class*="ag-theme-salt"] .ag-menu-header { + border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor); + background-color: var(--salt-container-primary-background); +} + +div[class*="ag-theme-salt"] .ag-menu-body { + padding: 0; +} + +div[class*="ag-theme-salt"] .ag-menu-separator { + height: var(--salt-size-border); +} + +div[class*="ag-theme-salt"] .ag-menu-list { + padding: 0; +} + +div[class*="ag-theme-salt"] .ag-menu-option { + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); +} + +div[class*="ag-theme-salt"] .ag-menu-option-icon { + padding: 0 var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-tab { + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + flex: 1 1 auto; +} + +div[class*="ag-theme-salt"] .ag-column-select-header { + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + border: 0; +} + +/* ROW */ + +div[class*="ag-theme-salt"] .ag-row { + font-size: var(--salt-text-fontSize); +} + +div[class*="ag-theme-salt"] .ag-row-selected { + background-color: var(--salt-selectable-background-selected); + border-color: var(--salt-selectable-borderColor-selected); +} + +div[class*="ag-theme-salt"] .ag-row-selected:before { + background-color: var(--salt-selectable-borderColor-selected); + background-image: none; + height: var(--salt-size-border); + top: -1px; +} + +/* CELL */ + +div[class*="ag-theme-salt"] .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) { + border-right-color: var(--salt-separable-secondary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) { + border-left-color: var(--salt-separable-secondary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-cell { + border: none; + line-height: calc(var(--ag-line-height) - 1px); + padding-left: var(--salt-spacing-100); + padding-right: var(--salt-spacing-100); +} + +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 { + text-align: right; +} + +/* Special case when user finish editing and click out side of the grid. */ +div[class*="ag-theme-salt"] .ag-cell.numeric-cell.ag-cell-inline-editing .ag-cell-editor input:not(:focus) { + text-align: right; +} + +div[class*="ag-theme-salt"] .ag-has-focus .ag-cell.ag-cell-focus:not(.ag-cell-range-selected), +div[class*="ag-theme-salt"] .ag-context-menu-open .ag-cell.ag-cell-focus:not(.ag-cell-range-selected), +div[class*="ag-theme-salt"] .ag-cell-range-single-cell, +div[class*="ag-theme-salt"] .ag-cell-range-single-cell.ag-cell-range-handle, +div[class*="ag-theme-salt"] .ag-cell-focus:not(.ag-cell-range-selected):focus-within { + outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); + outline-offset: -2px; + border-width: 0; +} + +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, +div[class*="ag-theme-salt"] .editable-cell.ag-cell-inline-editing:before { + border-bottom: calc(var(--salt-size-adornment) + 4px) solid transparent; + border-left: calc(var(--salt-size-adornment) + 4px) solid var(--salt-editable-borderColor-hover); + border-top: 0 solid transparent; + content: ""; + left: 0px; + position: absolute; + top: 0px; + z-index: 2; +} + +div[class*="ag-theme-salt"] .editable-cell.ag-cell-inline-editing { + padding: 0; +} + +div[class*="ag-theme-salt"] .editable-cell.ag-cell-inline-editing:focus-within { + background: var(--salt-container-primary-background); +} + +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); + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); +} + +div[class*="ag-theme-salt"] .editable-cell input, +div[class*="ag-theme-salt"] .editable-numeric-cell input { + border: none; + background-color: transparent; +} + +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; + right: 0; + bottom: 0; + left: 0; + position: absolute; + border-top: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); +} + +div[class*="ag-theme-salt"] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-right::after { + content: ""; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + border-right: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); +} + +div[class*="ag-theme-salt"] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-bottom::after { + content: ""; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + border-bottom: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); +} + +div[class*="ag-theme-salt"] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-left::after { + content: ""; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + border-left: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); +} + +/* INPUT */ + +div[class*="ag-theme-salt"] .ag-filter input[class^="ag-"][type="text"], +div[class*="ag-theme-salt"] .ag-filter input[class^="ag-"][type="number"], +div[class*="ag-theme-salt"] .ag-column-select input[class^="ag-"][type="text"], +div[class*="ag-theme-salt"] .ag-column-select input[class^="ag-"][type="number"] { + border: none; + border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor); + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + padding: 0 var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-filter input[class^="ag-"][type="text"]::placeholder, +div[class*="ag-theme-salt"] .ag-filter input[class^="ag-"][type="number"]::placeholder, +div[class*="ag-theme-salt"] .ag-column-select input[class^="ag-"][type="text"]::placeholder, +div[class*="ag-theme-salt"] .ag-column-select input[class^="ag-"][type="number"]::placeholder { + color: var(--salt-content-secondary-foreground); + opacity: 1; +} + +div[class*="ag-theme-salt"] .ag-filter input[class^="ag-"][type="text"]:focus, +div[class*="ag-theme-salt"] .ag-filter input[class^="ag-"][type="number"]:focus, +div[class*="ag-theme-salt"] .ag-column-select input[class^="ag-"][type="text"]:focus, +div[class*="ag-theme-salt"] .ag-column-select input[class^="ag-"][type="number"]:focus { + outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); + outline-offset: -2px; +} + +div[class*="ag-theme-salt"] .ag-floating-filter-input input[class^="ag-"][type="text"], +div[class*="ag-theme-salt"] .ag-floating-filter-input input[class^="ag-"][type="number"] { + border: none; +} + +/* CHECKBOX */ + +div[class*="ag-theme-salt"] .ag-checkbox-input-wrapper { + /* border-radius doesn't work given border is part of the font glyph */ + height: var(--salt-size-selectable); + width: var(--salt-size-selectable); + font-size: var(--salt-size-selectable); + line-height: var(--salt-size-selectable); +} + +/* BUTTON */ + +div[class*="ag-theme-salt"] .ag-standard-button { + background: var(--salt-actionable-secondary-background); + border: 0; + color: var(--salt-actionable-secondary-foreground); + font-size: var(--salt-text-fontSize); + font-weight: 600; + height: var(--salt-size-base); + padding: 0 var(--salt-spacing-100); + text-transform: uppercase; +} + +div[class*="ag-theme-salt"] .ag-standard-button:hover { + background-color: var(--salt-actionable-secondary-background-hover); + color: var(--salt-actionable-secondary-foreground-hover); +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-filter-apply-panel-button { + margin-left: 8px; +} + +div[class*="ag-theme-salt"] .ag-standard-button.ag-filter-apply-panel-button[ref="applyFilterButton"] { + background: var(--salt-actionable-cta-background); + color: var(--salt-actionable-cta-foreground); +} + +div[class*="ag-theme-salt"] .ag-standard-button.ag-filter-apply-panel-button[ref="applyFilterButton"]:hover { + background: var(--salt-actionable-cta-background-hover); + color: var(--salt-actionable-cta-foreground-hover); +} + +div[class*="ag-theme-salt"] .ag-floating-filter { + border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-floating-filter:focus-within { + outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); + outline-offset: -2px; +} + +div[class*="ag-theme-salt"] .ag-floating-filter:after { + width: 0; +} + +div[class*="ag-theme-salt"] .ag-keyboard-focus .ag-header-cell:focus:after { + border: 0; +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-floating-filter-button { + margin-left: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] button[class^="ag-"]:focus, +div[class*="ag-theme-salt"] input[class^="ag-"][type="button"]:focus { + box-shadow: none; + 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; + gap: 0; + padding: 0; + margin-top: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-menu .ag-menu-column-select-wrapper { + margin-top: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-simple-filter-body-wrapper > * { + margin-bottom: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-mini-filter { + margin: 0; + padding-left: var(--salt-spacing-50); + padding-right: var(--salt-spacing-50); +} + +div[class*="ag-theme-salt"] .ag-set-filter-item { + margin: 0; + padding-left: var(--salt-spacing-100); + padding-right: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-status-bar { + border: none; + border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor); + color: var(--salt-content-secondary-foreground); + font-size: var(--salt-text-fontSize); + font-weight: var(--salt-text-label-fontWeight); + /* Center align text vertically, matching height */ + line-height: var(--salt-size-base); + height: var(--salt-size-base); + padding: 0 var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-status-name-value { + padding: 0; + margin: 0 var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-status-name-value-value { + font-weight: var(--salt-text-fontWeight-strong); + color: var(--salt-content-primary-foreground); +} + +div[class*="ag-theme-salt"] .ag-paging-panel { + border-color: var(--salt-separable-secondary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-floating-bottom { + border-color: var(--salt-container-primary-borderColor); +} + +div[class*="ag-theme-salt"] .ag-column-drop-horizontal { + border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor); + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); +} + +div[class*="ag-theme-salt"] .ag-column-drop-cell { + border-radius: 0; +} + +.ag-theme-salt-variant-secondary .ag-header { + background-color: var(--salt-container-secondary-background); +} + +.ag-theme-salt-variant-secondary .ag-row { + background-color: var(--salt-container-secondary-background); + border-color: var(--salt-separable-tertiary-borderColor); +} + +.ag-theme-salt-variant-zebra .ag-row-even:not(.ag-row-hover, .ag-row-selected) { + background-color: var(--salt-container-secondary-background); +} + +.ag-theme-salt-variant-zebra .ag-row { + border-color: var(--salt-separable-tertiary-borderColor); +} + +/* Tool Panel */ + +div[class*="ag-theme-salt"] .ag-tool-panel-wrapper > .ag-react-container { + width: inherit; +} + +div[class*="ag-theme-salt"] .ag-side-buttons { + min-width: calc(var(--salt-size-base) + var(--salt-spacing-100)); +} + +div[class*="ag-theme-salt"] button.ag-side-button-button { + padding: var(--salt-spacing-100) var(--salt-spacing-50); +} + +div[class*="ag-theme-salt"] .ag-column-drop-vertical-empty-message { + padding: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-side-button-icon-wrapper { + margin-bottom: var(--salt-spacing-100); +} + +/* Toggle Button */ +.ag-toggle-button-input-wrapper::before { + top: calc(1px - var(--ag-toggle-button-border-width)); + left: calc(1px - var(--ag-toggle-button-border-width)); + + height: calc(var(--ag-toggle-button-height) - 2 * var(--ag-toggle-button-border-width)); + width: calc(var(--ag-toggle-button-height) - 2 * var(--ag-toggle-button-border-width)); +} +.ag-toggle-button-input-wrapper.ag-checked::before { + --ag-toggle-button-switch-background-color: var(--salt-selectable-borderColor-selected); + border-color: var(--ag-toggle-button-switch-border-color); + left: calc(100% - var(--ag-toggle-button-height) + 2 * var(--ag-toggle-button-border-width)); +} + +/* Column Drop List */ +.ag-column-drop-cell-drag-handle { + margin-left: 0; +} + +.ag-column-drop-cell { + height: calc(var(--salt-size-base) - var(--salt-spacing-100)); + padding: 0 var(--salt-spacing-50); +} + +.ag-column-drop-cell-button { + min-width: unset; +} diff --git a/packages/ag-grid-theme/css/salt-ag-theme.scss b/packages/ag-grid-theme/css/salt-ag-theme.scss deleted file mode 100644 index f94a0b81f3f..00000000000 --- a/packages/ag-grid-theme/css/salt-ag-theme.scss +++ /dev/null @@ -1,630 +0,0 @@ -@import "./salt-ag-theme-mixin"; - -div[class*="ag-theme-salt-touch"] { - --ag-list-item-height: 60px; - --agGrid-padding-default: 16px; - --agGrid-cornerTag-size-default: 14px; - --agGrid-column-separator-height: 20px; -} - -div[class*="ag-theme-salt-low"] { - --ag-list-item-height: 48px; - --agGrid-padding-default: 12px; - --agGrid-cornerTag-size-default: 12px; - --agGrid-column-separator-height: 16px; -} - -div[class*="ag-theme-salt-medium"] { - --ag-list-item-height: 36px; - --agGrid-padding-default: 8px; - --agGrid-cornerTag-size-default: 10px; - --agGrid-column-separator-height: 12px; -} - -div[class*="ag-theme-salt-high"] { - --ag-list-item-height: 24px; - --agGrid-padding-default: 8px; - --agGrid-cornerTag-size-default: 8px; - --agGrid-column-separator-height: 8px; -} - -div[class*="ag-theme-salt-high-compact"] { - --ag-list-item-height: 20px; - --salt-size-base: 16px; - /** - We have to define this because in deprecated.css size-selectable is defined - as size-base - (1.5 * size-unit) - (0.5 * size-basis-unit)) - which doesn't work for HDC- it has to be defined like in size.css - for HD as 12px rather than based on a calculation with the new size-base for HDC - **/ - - --salt-size-selectable: 12px; - - --agGrid-column-separator-height: 8px; - --agGrid-padding-default: 8px; - --agGrid-cornerTag-size-default: 8px; -} - -div[class*="ag-theme-salt"] { - --agGrid-range-selection-borderColor: var( - --salt-selectable-borderColor-selected - ); - --agGrid-column-separator-top: calc( - 50% - 0.5 * var(--agGrid-column-separator-height) - ); - --agGrid-input-height: var( - --saltAgGrid-input-height, - calc(var(--salt-size-base) + var(--salt-spacing-100)) - ); - --agGrid-row-height-default: calc( - var(--salt-size-base) + var(--salt-spacing-100) - ); - --agGrid-fontSize-default: var(--salt-text-fontSize); - --agGrid-header-fontSize-default: var(--salt-text-label-fontSize); - --agGrid-header-fontSize: var( - --saltAgGrid-header-fontSize, - var(--salt-text-label-fontSize) - ); - --agGrid-paging-fontSize: var( - --saltAgGrid-paging-fontSize, - var(--salt-text-label-fontSize) - ); - - --agGrid-background: var( - --saltAgGrid-background, - var(--salt-container-primary-background) - ); - --agGrid-foreground: var( - --saltAgGrid-foreground, - var(--salt-content-primary-foreground) - ); - --agGrid-foreground-disabled: var( - --saltAgGrid-foreground-disabled, - var(--salt-content-primary-foreground-disabled) - ); - - --agGrid-menu-color: var( - --saltAgGrid-menu-color, - var(--salt-content-primary-foreground) - ); - - --agGrid-menu-borderColor: var( - --saltAgGrid-menu-borderColor, - var(--salt-selectable-borderColor-selected) - ); - - --agGrid-menu-shadow: var( - --saltAgGrid-menu-shadow, - var(--salt-overlayable-shadow-popout) - ); - - --agGrid-row-color-hover: var( - --saltAgGrid-row-color-hover, - var(--salt-selectable-background-hover) - ); - - --agGrid-row-background-hover: var( - --saltAgGrid-row-color-hover, - var(--salt-selectable-background-hover) - ); - - --agGrid-row-background-secondary: var( - --saltAgGrid-row-color-secondary, - var(--salt-container-secondary-background) - ); - - --agGrid-color-focus: var( - --saltAgGrid-color-focus, - var(--salt-focused-outlineColor) - ); - - --agGrid-header-foreground: var( - --saltAgGrid-header-foreground, - var(--salt-content-secondary-foreground) - ); - - --agGrid-header-fontWeight: var( - --saltAgGrid-header-fontWeight, - var(--salt-text-label-fontWeight-strong) - ); - - --agGrid-row-background-selected: var( - --saltAgGrid-row-background-selected, - var(--salt-selectable-background-selected) - ); - - --agGrid-row-borderColor-selected: var( - --saltAgGrid-row-borderColor-selected, - var(--salt-selectable-borderColor-selected) - ); - --agGrid-row-borderColor: var( - --saltAgGrid-row-borderColor, - var(--salt-separable-tertiary-borderColor) - ); - --agGrid-header-borderColor: var( - --saltAgGrid-header-borderColor, - var(--salt-separable-primary-borderColor) - ); - --agGrid-header-column-separator-color: var( - --saltAgGrid-header-column-separator-color, - var(--salt-separable-tertiary-borderColor) - ); - --agGrid-cell-borderColor-editable: var( - --saltAgGrid-cell-borderColor-editable, - var(--salt-editable-borderColor) - ); - --agGrid-zebraColor: var( - --saltAgGrid-zebraColor, - var(--salt-container-secondary-background) - ); - --agGrid-borderColor: var( - --saltAgGrid-borderColor, - var(--separable-tertiary-borderColor) - ); -} - -.ag-theme-salt-high-compact-light, -.ag-theme-salt-high-light, -.ag-theme-salt-medium-light, -.ag-theme-salt-low-light, -.ag-theme-salt-touch-light { - --agGrid-range-selection-background: rgba(0, 0, 0, 0.15); - --agGrid-highlight-text-color: rgb(255, 255, 255); - --agGrid-tab-borderColor-active: var( - --saltAgGrid-tab-borderColor-active, - var(--salt-navigable-indicator-active) - ); - - --agGrid-button-color: var( - --saltAgGrid-button-color, - var(--salt-content-primary-foreground) - ); - --agGrid-button-background-hover: var( - --saltAgGrid-button-background-hover, - var(--salt-container-primary-background) - ); - - --agGrid-toggle-background-checked: var( - --saltAgGrid-toggle-background-checked, - var(--salt-selectable-background-selected) - ); - --agGrid-header-icon-color: var( - --saltAgGrid-header-icon-color, - var(--salt-content-secondary-foreground) - ); - --agGrid-menu-header-icon-color: var( - --saltAgGrid-menu-header-icon-color, - var(--salt-content-secondary-foreground) - ); - --agGrid-icon-color: var( - --saltAgGrid-icon-color, - var(--salt-content-primary-foreground) - ); - --agGrid-menu-option-color-hover: var( - --saltAgGrid-menu-option-color-hover, - #f2f4f6 - ); - --agGrid-side-buttons-background: var( - --saltAgGrid-side-buttons-background, - #f2f4f6 - ); - --agGrid-toggle-button-background: var( - --saltAgGrid-toggle-button-background, - var(--salt-selectable-borderColor) - ); - --agGrid-filter-borderColor: var(--saltAgGrid-filter-borderColor, #eaedef); - --agGrid-filter-apply-button-color: var( - --saltAgGrid-filter-apply-button-color, - #242526 - ); - --agGrid-list-item-color-hover: var( - --saltAgGrid-list-item-color-hover, - var(--salt-selectable-background-hover) - ); - - --agGrid-column-drop-cell-horizontal-background: var( - --saltAgGrid-column-drop-cell-horizontal-background, - #eaedef - ); - --agGrid-pagination-button-color: var( - --saltAgGrid-pagination-button-color, - #4c505b - ); - --agGrid-pagination-button-color-disabled: var( - --saltAgGrid-pagination-button-color-disabled, - rgba(22, 22, 22, 0.4) - ); - - --agGrid-placeholder-color: var( - --saltAgGrid-placeholder-color, - var(--salt-content-secondary-foreground) - ); - --agGrid-ghost-icon-color: var( - --saltAgGrid-ghost-icon-color, - rgba(0, 0, 0, 0.87) - ); -} - -.ag-theme-salt-high-compact-dark, -.ag-theme-salt-high-dark, -.ag-theme-salt-medium-dark, -.ag-theme-salt-low-dark, -.ag-theme-salt-touch-dark { - --agGrid-range-selection-background: rgba(255, 255, 255, 0.15); - --agGrid-highlight-text-color: rgb(22, 22, 22); - --agGrid-tab-borderColor-active: var( - --saltAgGrid-tab-borderColor-active, - var(--salt-navigable-indicator-active) - ); - - --agGrid-button-color: var(--saltAgGrid-button-color, white); - --agGrid-button-background-hover: var( - --saltAgGrid-button-background-hover, - #d9dde3 - ); - - --agGrid-toggle-background-checked: var( - --saltAgGrid-toggle-background-checked, - var(--salt-selectable-borderColor-selected) - ); - --agGrid-header-icon-color: var(--saltAgGrid-header-icon-color, white); - --agGrid-menu-header-icon-color: var( - --saltAgGrid-menu-header-icon-color, - white - ); - --agGrid-icon-color: var(--saltAgGrid-icon-color, white); - --agGrid-menu-option-color-hover: var( - --saltAgGrid-menu-option-color-hover, - #2f3136 - ); - --agGrid-side-buttons-background: var( - --saltAgGrid-side-buttons-background, - #2f3136 - ); - --agGrid-toggle-button-background: var( - --saltAgGrid-toggle-button-background, - #84878e - ); - - --agGrid-filter-borderColor: var(--saltAgGrid-filter-borderColor, #44484f); - --agGrid-filter-apply-button-color: var( - --saltAgGrid-filter-apply-button-color, - #eaedef - ); - --agGrid-list-item-color-hover: var( - --saltAgGrid-list-item-color-hover, - var(--salt-color-blue-900) - ); - - --agGrid-column-drop-cell-horizontal-background: var( - --saltAgGrid-column-drop-cell-horizontal-background, - #3b3f46 - ); - --agGrid-pagination-button-color: var( - --saltAgGrid-pagination-button-color, - #c5c9d0 - ); - --agGrid-pagination-button-color-disabled: var( - --saltAgGrid-pagination-button-color-disabled, - rgba(255, 255, 255, 0.4) - ); - - --agGrid-placeholder-color: var(--saltAgGrid-placeholder-color, white); - --agGrid-ghost-icon-color: var( - --saltAgGrid-ghost-icon-color, - rgba(0, 0, 0, 0.87) - ); -} - -// Do not delete these two hardcoded values -$ag-theme-salt-params-dark: ( - foreground-color: white, - background-color: #242526, -); -// Do not delete these two hardcoded values -$ag-theme-salt-params-light: ( - foreground-color: #2a2c2f, - background-color: white, -); - -$ag-theme-salt-params-high: map-merge( - $salt-ag-theme-default-params, - ( - row-height: 24px, - header-height: 24px, - font-size: 11px, - cell-horizontal-padding: 4px, - list-item-height: 24px, - icon-size: 12px, - ) -); - -$ag-theme-salt-params-high-light: map-merge( - $ag-theme-salt-params-high, - $ag-theme-salt-params-light -); - -$ag-theme-salt-params-high-dark: map-merge( - $ag-theme-salt-params-high, - $ag-theme-salt-params-dark -); - -$ag-theme-salt-params-high-compact: map-merge( - $salt-ag-theme-default-params, - ( - row-height: 20px, - header-height: 20px, - font-size: 11px, - cell-horizontal-padding: 4px, - list-item-height: 20px, - icon-size: 12px, - ) -); - -$ag-theme-salt-params-high-compact-light: map-merge( - $ag-theme-salt-params-high-compact, - $ag-theme-salt-params-light -); - -$ag-theme-salt-params-high-compact-dark: map-merge( - $ag-theme-salt-params-high-compact, - $ag-theme-salt-params-dark -); - -$ag-theme-salt-params-medium: map-merge( - $salt-ag-theme-default-params, - ( - row-height: 36px, - header-height: 36px, - font-size: 12px, - cell-horizontal-padding: 8px, - list-item-height: 36px, - icon-size: 12px, - ) -); - -$ag-theme-salt-params-medium-light: map-merge( - $ag-theme-salt-params-medium, - $ag-theme-salt-params-light -); - -$ag-theme-salt-params-medium-dark: map-merge( - $ag-theme-salt-params-medium, - $ag-theme-salt-params-dark -); - -$ag-theme-salt-params-low: map-merge( - $salt-ag-theme-default-params, - ( - row-height: 48px, - header-height: 48px, - font-size: 14px, - cell-horizontal-padding: 12px, - list-item-height: 48px, - icon-size: 12px, - ) -); - -$ag-theme-salt-params-low-light: map-merge( - $ag-theme-salt-params-low, - $ag-theme-salt-params-light -); - -$ag-theme-salt-params-low-dark: map-merge( - $ag-theme-salt-params-low, - $ag-theme-salt-params-dark -); - -$ag-theme-salt-params-touch: map-merge( - $salt-ag-theme-default-params, - ( - row-height: 60px, - header-height: 60px, - font-size: 16px, - cell-horizontal-padding: 16px, - list-item-height: 60px, - icon-size: 12px, - ) -); - -$ag-theme-salt-params-touch-light: map-merge( - $ag-theme-salt-params-touch, - $ag-theme-salt-params-light -); - -$ag-theme-salt-params-touch-dark: map-merge( - $ag-theme-salt-params-touch, - $ag-theme-salt-params-dark -); - -.ag-theme-salt-high-compact-dark, -.ag-theme-salt-touch-dark, -.ag-theme-salt-low-dark, -.ag-theme-salt-medium-dark, -.ag-theme-salt-high-dark { - color-scheme: dark; -} - -.ag-theme-salt-high-compact-light, -.ag-theme-salt-touch-light, -.ag-theme-salt-low-light, -.ag-theme-salt-medium-light, -.ag-theme-salt-high-light { - color-scheme: light; -} - -.ag-theme-salt-high-compact-dark, -.ag-theme-salt-high-compact-light { - --ag-list-item-height: 20px; - --agGrid-button-padding: var(--saltAgGrid-button-padding, 4px); - --agGrid-editableCell-cornerTag-size-default: 10px; - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 10px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 4px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 2px); - --agGrid-switch-height: var(--saltAgGrid-switch-height, 16px); -} - -.ag-theme-salt-high-compact-dark { - @include ag-theme-salt($ag-theme-salt-params-high-compact-dark); -} - -.ag-theme-salt-high-compact-light { - @include ag-theme-salt($ag-theme-salt-params-high-compact-light); -} - -.ag-theme-salt-high-dark, -.ag-theme-salt-high-light { - --agGrid-button-padding: var(--saltAgGrid-button-padding, 4px); - --agGrid-editableCell-cornerTag-size-default: 10px; - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 10px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 4px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 2px); - --agGrid-switch-height: var(--saltAgGrid-switch-height, 16px); -} - -.ag-theme-salt-high-dark { - @include ag-theme-salt($ag-theme-salt-params-high-dark); -} - -.ag-theme-salt-high-light { - @include ag-theme-salt($ag-theme-salt-params-high-light); -} - -.ag-theme-salt-medium-dark, -.ag-theme-salt-medium-light { - --ag-list-item-height: 36px; - --agGrid-button-padding: var(--saltAgGrid-button-padding, 8px); - --agGrid-editableCell-cornerTag-size-default: 12px; - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 12px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 8px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 2px); - --agGrid-switch-height: var(--saltAgGrid-switch-height, 18px); -} - -.ag-theme-salt-medium-dark { - @include ag-theme-salt($ag-theme-salt-params-medium-dark); -} - -.ag-theme-salt-medium-light { - @include ag-theme-salt($ag-theme-salt-params-medium-light); -} - -.ag-theme-salt-low-dark, -.ag-theme-salt-low-light { - --ag-list-item-height: 48px; - --agGrid-button-padding: var(--saltAgGrid-button-padding, 12px); - --agGrid-editableCell-cornerTag-size-default: 14px; - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 14px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 12px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 2px); - --agGrid-switch-height: var(--saltAgGrid-switch-height, 20px); -} - -.ag-theme-salt-low-dark { - @include ag-theme-salt($ag-theme-salt-params-low-dark); -} - -.ag-theme-salt-low-light { - @include ag-theme-salt($ag-theme-salt-params-low-light); -} - -.ag-theme-salt-touch-dark, -.ag-theme-salt-touch-light { - --ag-list-item-height: 60px; - --agGrid-button-padding: var(--saltAgGrid-button-padding, 14px); - --agGrid-editableCell-cornerTag-size-default: 16px; - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 14px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 8px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 3px); - --agGrid-switch-height: var(--saltAgGrid-switch-height, 24px); -} - -.ag-theme-salt-touch-light { - @include ag-theme-salt($ag-theme-salt-params-touch-light); -} - -.ag-theme-salt-touch-dark { - @include ag-theme-salt($ag-theme-salt-params-touch-dark); -} - -.ag-theme-salt-high-compact-dark, -.ag-theme-salt-high-compact-light, -.ag-theme-salt-touch-dark, -.ag-theme-salt-touch-light, -.ag-theme-salt-low-dark, -.ag-theme-salt-low-light, -.ag-theme-salt-medium-dark, -.ag-theme-salt-medium-light, -.ag-theme-salt-high-dark, -.ag-theme-salt-high-light { - --agGrid-button-fontSize: var( - --saltAgGrid-button-fontSize, - var(--salt-text-fontSize) - ); - --agGrid-button-height: var( - --saltAgGrid-button-height, - var(--salt-size-base) - ); - --agGrid-checkbox-size: var( - --saltAgGrid-checkbox-size, - var(--salt-size-selectable) - ); - --agGrid-list-item-fontSize: var(--saltAgGrid-list-item-fontSize, 13px); - --agGrid-paging-button-width: var( - --saltAgGrid-paging-button-width, - var(--salt-size-base) - ); - - --agGrid-checkbox-background: var( - --saltAgGrid-checkbox-background, - var(--salt-selectable-background) - ); - --agGrid-checkbox-background-selected: var( - --saltAgGrid-checkbox-background-selected, - var(--salt-selectable-borderColor-selected) - ); - --agGrid-checkbox-foreground: var( - --saltAgGrid-checkbox-foreground, - var(--salt-selectable-foreground) - ); - --agGrid-checkbox-foreground-selected: var( - --saltAgGrid-checkbox-foreground-selected, - var(--salt-actionable-primary-foreground-active) - ); - --_agGrid-checkbox-border: 1px var(--salt-selectable-borderStyle) - var(--salt-selectable-borderColor); - --agGrid-checkbox-border: var( - --saltAgGrid-checkbox-border, - var(--_agGrid-checkbox-border) - ); - --agGrid-checkbox-borderColor-selected: var( - --saltAgGrid-checkbox-borderColor-selected, - var(--salt-selectable-borderColor-selected) - ); - --agGrid-list-item-height: var( - --saltAgGrid-list-item-height, - var(--salt-size-stackable) - ); - --agGrid-paging-button-background-hover: var( - --salt-actionable-secondary-background-hover - ); - --agGrid-editableCell-cornerTag-size: var( - --saltAgGrid-editableCell-cornerTag-size, - var(--agGrid-editableCell-cornerTag-size-default) - ); - --agGrid-focused-borderColor: var( - --saltGrid-focused-borderColor, - var(--salt-focused-outlineColor) - ); - --agGrid-focused-borderWidth: var( - --saltGrid-focused-borderWidth, - var(--salt-focused-outlineWidth) - ); - --agGrid-focused-borderStyle: var( - --saltGrid-focused-borderStyle, - var(--salt-focused-outlineStyle) - ); -} - -// Import is here so the custom icons are injected after the default ag-grid icons. -@import "./salt-ag-theme-icon-font"; diff --git a/packages/ag-grid-theme/css/salt-icons.css b/packages/ag-grid-theme/css/salt-icons.css new file mode 100644 index 00000000000..82aba7c63df --- /dev/null +++ b/packages/ag-grid-theme/css/salt-icons.css @@ -0,0 +1,68 @@ +@font-face { + font-family: "salt-icons"; + src: url(../fonts/salt-icons.woff) format("woff"); +} + +[class*="ag-theme-salt"] { + --ag-icon-image-display: none; + + --ag-icon-font-family: "salt-icons"; + + --ag-icon-font-code-aggregation: "\e900"; + --ag-icon-font-code-arrows: "\e901"; + --ag-icon-font-code-asc: "\e902"; + --ag-icon-font-code-cancel: "\e903"; + --ag-icon-font-code-chart: "\e904"; + --ag-icon-font-code-checkbox-checked: "\e905"; + --ag-icon-font-code-checkbox-indeterminate: "\e906"; + --ag-icon-font-code-checkbox-unchecked: "\e907"; + --ag-icon-font-code-color-picker: "\e908"; + --ag-icon-font-code-columns: "\e909"; + --ag-icon-font-code-contracted: "\e90a"; + --ag-icon-font-code-copy: "\e90b"; + --ag-icon-font-code-cross: "\e90c"; + --ag-icon-font-code-csv: "\e90d"; + --ag-icon-font-code-cut: "\e90e"; + --ag-icon-font-code-desc: "\e90f"; + --ag-icon-font-code-down: "\e910"; + --ag-icon-font-code-excel: "\e911"; + --ag-icon-font-code-expanded: "\e912"; + --ag-icon-font-code-eye-slash: "\e913"; + --ag-icon-font-code-eye: "\e914"; + --ag-icon-font-code-filter-clear: "\e915"; + --ag-icon-font-code-filter: "\e916"; + --ag-icon-font-code-first: "\e917"; + --ag-icon-font-code-grip: "\e918"; + --ag-icon-font-code-group: "\e919"; + --ag-icon-font-code-last: "\e91a"; + --ag-icon-font-code-left: "\e91b"; + --ag-icon-font-code-linked: "\e91c"; + --ag-icon-font-code-loading: "\e91d"; + --ag-icon-font-code-maximize: "\e91e"; + --ag-icon-font-code-menu-alt: "\e91f"; + --ag-icon-font-code-menu: "\e920"; + --ag-icon-font-code-minimize: "\e921"; + --ag-icon-font-code-minus: "\e922"; + --ag-icon-font-code-next: "\e923"; + --ag-icon-font-code-none: "\e924"; + --ag-icon-font-code-not-allowed: "\e925"; + --ag-icon-font-code-paste: "\e926"; + --ag-icon-font-code-pin: "\e927"; + --ag-icon-font-code-pivot: "\e928"; + --ag-icon-font-code-plus: "\e929"; + --ag-icon-font-code-previous: "\e92a"; + --ag-icon-font-code-radio-button-off: "\e92b"; + --ag-icon-font-code-radio-button-on: "\e92c"; + --ag-icon-font-code-right: "\e92d"; + --ag-icon-font-code-save: "\e92e"; + --ag-icon-font-code-small-down: "\e92f"; + --ag-icon-font-code-small-left: "\e930"; + --ag-icon-font-code-small-right: "\e931"; + --ag-icon-font-code-small-up: "\e932"; + --ag-icon-font-code-tick: "\e933"; + --ag-icon-font-code-tree-closed: "\e934"; + --ag-icon-font-code-tree-indeterminate: "\e935"; + --ag-icon-font-code-tree-open: "\e936"; + --ag-icon-font-code-unlinked: "\e937"; + --ag-icon-font-code-up: "\e938"; +} diff --git a/packages/ag-grid-theme/css/uitk-ag-theme.scss b/packages/ag-grid-theme/css/uitk-ag-theme.scss deleted file mode 100644 index fc366992ebf..00000000000 --- a/packages/ag-grid-theme/css/uitk-ag-theme.scss +++ /dev/null @@ -1,445 +0,0 @@ -@import "./uitk-ag-theme-mixin"; - -div[class*="ag-theme-uitk-high"] { - --uitk-size-unit: 4px; -} -div[class*="ag-theme-uitk-medium"] { - --uitk-size-unit: 8px; -} -div[class*="ag-theme-uitk-low"] { - --uitk-size-unit: 12px; -} -div[class*="ag-theme-uitk-touch"] { - --uitk-size-unit: 16px; -} -div[class^="ag-theme-uitk"], -div[class*=" ag-theme-uitk"] { - --uitk-container-spacing: calc(var(--uitk-size-unit) * 2); -} - -.ag-theme-uitk-high-light, -.ag-theme-uitk-medium-light, -.ag-theme-uitk-low-light, -.ag-theme-uitk-touch-light { - --agGrid-menu-padding: var(--uitk-container-spacing); - - --agGrid-foreground: var(--saltAgGrid-foreground, #2a2c2f); - --agGrid-foreground-disabled: var(--saltAgGrid-foreground-disabled, #161616); - --agGrid-header-foreground: var(--saltAgGrid-header-foreground, #61656e); - --agGrid-background: var(--saltAgGrid-background, white); - --agGrid-row-background-selected: var( - --saltAgGrid-row-background-selected, - #b7def6 - ); - --agGrid-row-color-hover: var(--saltAgGrid-row-color-hover, white); - --agGrid-row-borderColor: var(--saltAgGrid-row-borderColor, #e2e2e2); - --agGrid-header-column-separator-color: var( - --saltAgGrid-header-column-separator-color, - #c5c9d0 - ); - --agGrid-cell-borderColor-editable: var( - --saltAgGrid-cell-borderColor-editable, - #84878e - ); - - --agGrid-row-shadow-hover: var( - --saltAgGrid-row-shadow-hover, - 0 2px 5px 0 #24252633, - 0 -1px 0 0 #b4b7be - ); - --agGrid-row-borderColor-selected: var( - --saltAgGrid-row-borderColor-selected, - transparent - ); - --agGrid-color-focus: var(--saltAgGrid-color-focus, #2d81bd); - - --agGrid-borderColor: var(--saltAgGrid-borderColor, #e2e2e2); - --agGrid-tab-borderColor-active: var( - --saltAgGrid-tab-borderColor-active, - #e06519 - ); - --agGrid-checkbox-color: var(--saltAgGrid-checkbox-color, black); - - --agGrid-button-color: var(--saltAgGrid-button-color, #161616); - --agGrid-button-background-hover: var( - --saltAgGrid-button-background-hover, - #d9dde3 - ); - - --agGrid-toggle-background-checked: var( - --saltAgGrid-toggle-background-checked, - #2670a9 - ); - --agGrid-header-icon-color: var(--saltAgGrid-header-icon-color, #61656e); - --agGrid-menu-header-icon-color: var( - --saltAgGrid-menu-header-icon-color, - #61656e - ); - --agGrid-icon-color: var(--saltAgGrid-icon-color, #61656e); - --agGrid-menu-option-color-hover: var( - --saltAgGrid-menu-option-color-hover, - #f2f4f6 - ); - --agGrid-side-buttons-background: var( - --saltAgGrid-side-buttons-background, - #f2f4f6 - ); - --agGrid-toggle-button-background: var( - --saltAgGrid-toggle-button-background, - #84878e - ); - --agGrid-menu-color: var(--saltAgGrid-menu-color, #61656e); - --agGrid-filter-borderColor: var(--saltAgGrid-filter-borderColor, #eaedef); - --agGrid-filter-apply-button-color: var( - --saltAgGrid-filter-apply-button-color, - #242526 - ); - --agGrid-list-item-color-hover: var( - --saltAgGrid-list-item-color-hover, - #b7def6 - ); - - --agGrid-column-drop-cell-horizontal-background: var( - --saltAgGrid-column-drop-cell-horizontal-background, - #eaedef - ); - --agGrid-pagination-button-color: var( - --saltAgGrid-pagination-button-color, - #4c505b - ); - --agGrid-pagination-button-color-disabled: var( - --saltAgGrid-pagination-button-color-disabled, - rgba(22, 22, 22, 0.4) - ); - - --agGrid-placeholder-color: var(--saltAgGrid-placeholder-color, #61656e); - --agGrid-ghost-icon-color: var( - --saltAgGrid-ghost-icon-color, - rgba(0, 0, 0, 0.87) - ); -} - -.ag-theme-uitk-high-dark, -.ag-theme-uitk-medium-dark, -.ag-theme-uitk-low-dark, -.ag-theme-uitk-touch-dark { - --agGrid-menu-padding: var(--uitk-container-spacing); - - --agGrid-foreground: var(--saltAgGrid-foreground, white); - --agGrid-foreground-disabled: var(--saltAgGrid-foreground-disabled, white); - --agGrid-header-foreground: var(--saltAgGrid-header-foreground, white); - --agGrid-background: var(--saltAgGrid-background, #242526); - --agGrid-row-background-selected: var( - --saltAgGrid-row-background-selected, - #155c93 - ); - --agGrid-row-color-hover: var(--saltAgGrid-row-color-hover, #2f3136); - --agGrid-row-borderColor: var(--saltAgGrid-row-borderColor, #e2e2e2); - --agGrid-header-column-separator-color: var( - --saltAgGrid-header-column-separator-color, - white - ); - --agGrid-cell-borderColor-editable: var( - --saltAgGrid-cell-borderColor-editable, - #74777f - ); - - --agGrid-row-shadow-hover: var( - --saltAgGrid-row-shadow-hover, - 0 2px 5px 0 #24252633, - 0 -1px 0 0 #b4b7be - ); - --agGrid-row-borderColor-selected: var( - --saltAgGrid-row-borderColor-selected, - #2d81bd - ); - --agGrid-color-focus: var(--saltAgGrid-color-focus, #2d81bd); - - --agGrid-borderColor: var(--saltAgGrid-borderColor, #e2e2e2); - --agGrid-tab-borderColor-active: var( - --saltAgGrid-tab-borderColor-active, - #e06519 - ); - --agGrid-checkbox-color: var(--saltAgGrid-checkbox-color, white); - - --agGrid-button-color: var(--saltAgGrid-button-color, white); - --agGrid-button-background-hover: var( - --saltAgGrid-button-background-hover, - #d9dde3 - ); - - --agGrid-toggle-background-checked: var( - --saltAgGrid-toggle-background-checked, - #2670a9 - ); - --agGrid-header-icon-color: var(--saltAgGrid-header-icon-color, white); - --agGrid-menu-header-icon-color: var( - --saltAgGrid-menu-header-icon-color, - white - ); - --agGrid-icon-color: var(--saltAgGrid-icon-color, white); - --agGrid-menu-option-color-hover: var( - --saltAgGrid-menu-option-color-hover, - #2f3136 - ); - --agGrid-side-buttons-background: var( - --saltAgGrid-side-buttons-background, - #2f3136 - ); - --agGrid-toggle-button-background: var( - --saltAgGrid-toggle-button-background, - #84878e - ); - - --agGrid-menu-color: var(--saltAgGrid-menu-color, white); - --agGrid-filter-borderColor: var(--saltAgGrid-filter-borderColor, #44484f); - --agGrid-filter-apply-button-color: var( - --saltAgGrid-filter-apply-button-color, - #eaedef - ); - --agGrid-list-item-color-hover: var( - --saltAgGrid-list-item-color-hover, - #233645 - ); - - --agGrid-column-drop-cell-horizontal-background: var( - --saltAgGrid-column-drop-cell-horizontal-background, - #3b3f46 - ); - --agGrid-pagination-button-color: var( - --saltAgGrid-pagination-button-color, - #c5c9d0 - ); - --agGrid-pagination-button-color-disabled: var( - --saltAgGrid-pagination-button-color-disabled, - rgba(255, 255, 255, 0.4) - ); - - --agGrid-placeholder-color: var(--saltAgGrid-placeholder-color, white); - --agGrid-ghost-icon-color: var( - --saltAgGrid-ghost-icon-color, - rgba(0, 0, 0, 0.87) - ); -} - -$ag-theme-uitk-params-dark: ( - foreground-color: white, - background-color: #242526, -); - -$ag-theme-uitk-params-light: ( - foreground-color: #2a2c2f, - background-color: white, -); - -$ag-theme-uitk-params-high: map-merge( - $uitk-ag-theme-default-params, - ( - row-height: 20px, - header-height: 20px, - font-size: 10px, - header-column-separator-height: 10px, - cell-horizontal-padding: 5px, - list-item-height: 24px, - icon-size: 12px, - ) -); - -$ag-theme-uitk-params-high-light: map-merge( - $ag-theme-uitk-params-high, - $ag-theme-uitk-params-light -); - -$ag-theme-uitk-params-high-dark: map-merge( - $ag-theme-uitk-params-high, - $ag-theme-uitk-params-dark -); - -$ag-theme-uitk-params-medium: map-merge( - $uitk-ag-theme-default-params, - ( - row-height: 24px, - header-height: 24px, - font-size: 12px, - header-column-separator-height: 10px, - cell-horizontal-padding: 6px, - list-item-height: 36px, - icon-size: 12px, - ) -); - -$ag-theme-uitk-params-medium-light: map-merge( - $ag-theme-uitk-params-medium, - $ag-theme-uitk-params-light -); - -$ag-theme-uitk-params-medium-dark: map-merge( - $ag-theme-uitk-params-medium, - $ag-theme-uitk-params-dark -); - -$ag-theme-uitk-params-low: map-merge( - $uitk-ag-theme-default-params, - ( - row-height: 32px, - header-height: 32px, - font-size: 14px, - header-column-separator-height: 10px, - cell-horizontal-padding: 6px, - list-item-height: 48px, - icon-size: 12px, - ) -); - -$ag-theme-uitk-params-low-light: map-merge( - $ag-theme-uitk-params-low, - $ag-theme-uitk-params-light -); - -$ag-theme-uitk-params-low-dark: map-merge( - $ag-theme-uitk-params-low, - $ag-theme-uitk-params-dark -); - -$ag-theme-uitk-params-touch: map-merge( - $uitk-ag-theme-default-params, - ( - row-height: 32px, - header-height: 32px, - font-size: 14px, - header-column-separator-height: 10px, - cell-horizontal-padding: 6px, - list-item-height: 60px, - icon-size: 12px, - ) -); - -$ag-theme-uitk-params-touch-light: map-merge( - $ag-theme-uitk-params-touch, - $ag-theme-uitk-params-light -); - -$ag-theme-uitk-params-touch-dark: map-merge( - $ag-theme-uitk-params-touch, - $ag-theme-uitk-params-dark -); - -.ag-theme-uitk-high-dark, -.ag-theme-uitk-high-light { - --agGrid-checkbox-size: var(--saltAgGrid-checkbox-size, 14px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 4px); - --agGrid-input-height: var(--saltAgGrid-input-height, 20px); - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 10px); - - --agGrid-button-fontSize: var(--saltAgGrid-button-fontSize, 11px); - --agGrid-button-height: var(--saltAgGrid-button-height, 20px); - --agGrid-button-padding: var(--saltAgGrid-button-padding, 4px); - - --agGrid-list-item-height: var(--saltAgGrid-list-item-height, 32px); - --agGrid-list-item-fontSize: var(--saltAgGrid-list-item-fontSize, 13px); - - --agGrid-switch-height: var(--saltAgGrid-switch-height, 18px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 1px); - - --agGrid-header-fontSize: var(--saltAgGrid-header-fontSize, 12px); - - --agGrid-paging-button-width: var(--saltAgGrid-paging-button-width, 20px); -} - -.ag-theme-uitk-high-dark { - @include ag-theme-uitk($ag-theme-uitk-params-high-dark); -} - -.ag-theme-uitk-high-light { - @include ag-theme-uitk($ag-theme-uitk-params-high-light); -} - -.ag-theme-uitk-medium-dark, -.ag-theme-uitk-medium-light { - --agGrid-checkbox-size: var(--saltAgGrid-checkbox-size, 14px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 8px); - --agGrid-input-height: var(--saltAgGrid-input-height, 28px); - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 12px); - - --agGrid-button-fontSize: var(--saltAgGrid-button-fontSize, 12px); - --agGrid-button-height: var(--saltAgGrid-button-height, 28px); - --agGrid-button-padding: var(--saltAgGrid-button-padding, 8px); - - --agGrid-list-item-height: var(--saltAgGrid-list-item-height, 32px); - --agGrid-list-item-fontSize: var(--saltAgGrid-list-item-fontSize, 13px); - - --agGrid-switch-height: var(--saltAgGrid-switch-height, 18px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 1px); - - --agGrid-header-fontSize: var(--saltAgGrid-header-fontSize, 12px); - --agGrid-paging-button-width: var(--saltAgGrid-paging-button-width, 28px); -} - -.ag-theme-uitk-medium-dark { - @include ag-theme-uitk($ag-theme-uitk-params-medium-dark); -} - -.ag-theme-uitk-medium-light { - @include ag-theme-uitk($ag-theme-uitk-params-medium-light); -} - -.ag-theme-uitk-low-dark, -.ag-theme-uitk-low-light { - --agGrid-checkbox-size: var(--saltAgGrid-checkbox-size, 14px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 12px); - --agGrid-input-height: var(--saltAgGrid-input-height, 36px); - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 14px); - - --agGrid-button-fontSize: var(--saltAgGrid-button-fontSize, 14px); - --agGrid-button-height: var(--saltAgGrid-button-height, 36px); - --agGrid-button-padding: var(--saltAgGrid-button-padding, 12px); - - --agGrid-list-item-height: var(--saltAgGrid-list-item-height, 32px); - --agGrid-list-item-fontSize: var(--saltAgGrid-list-item-fontSize, 13px); - - --agGrid-switch-height: var(--saltAgGrid-switch-height, 18px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 1px); - - --agGrid-header-fontSize: var(--saltAgGrid-header-fontSize, 12px); - --agGrid-paging-button-width: var(--saltAgGrid-paging-button-width, 36px); -} - -.ag-theme-uitk-low-dark { - @include ag-theme-uitk($ag-theme-uitk-params-low-dark); -} - -.ag-theme-uitk-low-light { - @include ag-theme-uitk($ag-theme-uitk-params-low-light); -} - -.ag-theme-uitk-touch-dark, -.ag-theme-uitk-touch-light { - --agGrid-checkbox-size: var(--saltAgGrid-checkbox-size, 14px); - --agGrid-input-padding: var(--saltAgGrid-input-padding, 8px); - --agGrid-input-height: var(--saltAgGrid-input-height, 28px); - --agGrid-input-fontSize: var(--saltAgGrid-input-fontSize, 14px); - - --agGrid-button-fontSize: var(--saltAgGrid-button-fontSize, 16px); - --agGrid-button-height: var(--saltAgGrid-button-height, 44px); - --agGrid-button-padding: var(--saltAgGrid-button-padding, 14px); - - --agGrid-list-item-height: var(--saltAgGrid-list-item-height, 32px); - --agGrid-list-item-fontSize: var(--saltAgGrid-list-item-fontSize, 13px); - - --agGrid-switch-height: var(--saltAgGrid-switch-height, 18px); - --agGrid-switch-borderWidth: var(--saltAgGrid-switch-borderWidth, 1px); - - --agGrid-header-fontSize: var(--saltAgGrid-header-fontSize, 12px); - --agGrid-paging-button-width: var(--saltAgGrid-paging-button-width, 44px); -} - -.ag-theme-uitk-touch-light { - @include ag-theme-uitk($ag-theme-uitk-params-touch-light); -} - -.ag-theme-uitk-touch-dark { - @include ag-theme-uitk($ag-theme-uitk-params-touch-dark); -} - -// Import is here so the custom icons are injected after the default ag-grid icons. -@import "./uitk-ag-theme-icon-font"; diff --git a/packages/ag-grid-theme/fonts/jpmuitk-icons.woff b/packages/ag-grid-theme/fonts/jpmuitk-icons.woff deleted file mode 100644 index d8567bb41eb..00000000000 Binary files a/packages/ag-grid-theme/fonts/jpmuitk-icons.woff and /dev/null differ diff --git a/packages/ag-grid-theme/fonts/salt-icons.woff b/packages/ag-grid-theme/fonts/salt-icons.woff index a7cd1c30362..10a827e096c 100644 Binary files a/packages/ag-grid-theme/fonts/salt-icons.woff and b/packages/ag-grid-theme/fonts/salt-icons.woff differ diff --git a/packages/ag-grid-theme/package.json b/packages/ag-grid-theme/package.json index 9956254b3cb..5fa0601aeb5 100644 --- a/packages/ag-grid-theme/package.json +++ b/packages/ag-grid-theme/package.json @@ -8,9 +8,9 @@ "directory": "packages/ag-grid-theme" }, "bugs": "https://github.com/jpmorganchase/salt-ds/issues", - "style": "uitk-ag-theme.css", + "style": "salt-ag-theme.css", "files": [ - "/uitk-ag-theme.css", + "/fonts", "/salt-ag-theme.css" ], "scripts": { @@ -22,12 +22,9 @@ "provenance": true }, "devDependencies": { - "chokidar": "^3.5.3", - "cssnano": "^5.1.13", - "del": "^7.0.0", - "fs-extra": "^11.1.0", - "postcss": "^8.4.14", - "postcss-url": "^10.1.3", - "sass": "^1.51.0" + "del": "^7.0.0" + }, + "peerDependencies": { + "@salt-ds/theme": "^1.15.0" } } diff --git a/packages/ag-grid-theme/salt-ag-theme.css b/packages/ag-grid-theme/salt-ag-theme.css new file mode 100644 index 00000000000..bb8a91c700e --- /dev/null +++ b/packages/ag-grid-theme/salt-ag-theme.css @@ -0,0 +1,2 @@ +@import url(css/salt-ag-grid-theme.css); +@import url(css/salt-icons.css); diff --git a/packages/ag-grid-theme/scripts/build.mjs b/packages/ag-grid-theme/scripts/build.mjs index 3b3e956830b..5b6ba1b06fc 100644 --- a/packages/ag-grid-theme/scripts/build.mjs +++ b/packages/ag-grid-theme/scripts/build.mjs @@ -1,106 +1,45 @@ -import chokidar from "chokidar"; +import esbuild from "esbuild"; import path from "node:path"; -import fs from "fs-extra"; -import { fileURLToPath, pathToFileURL } from "url"; -import { createRequire } from "module"; import { deleteSync } from "del"; -import sass from "sass"; -import postcss from "postcss"; -import cssnano from "cssnano"; -import url from "postcss-url"; +import fs from "node:fs"; +import { fileURLToPath } from "node:url"; +import { argv } from "node:process"; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const require = createRequire(import.meta.url); - -function buildStyles(entry) { - console.log(`Building "${entry}"`); - - const sourceFileName = path.basename(entry); - const outputFileName = sourceFileName.replace(/\.scss$/, ".css"); - const outputFolder = path.join( - __dirname, - "../../../dist/salt-ds-ag-grid-theme" - ); - const outputName = path.join(outputFolder, sourceFileName); - deleteSync([outputName], { force: true }); - const result = sass.compile(entry, { - // https://sass-lang.com/documentation/js-api/interfaces/FileImporter - importers: [ - { - // An importer that redirects relative URLs starting with "~" to - // `node_modules`. - findFileUrl(url) { - if (!url.startsWith("~")) return null; - - const nonPrefixedUrl = url.substring(1); - const resolvedFile = require.resolve( - nonPrefixedUrl.substring(0, nonPrefixedUrl.indexOf("/")) - ); - const fileUrl = pathToFileURL( - resolvedFile.substring(0, resolvedFile.indexOf("node_modules") + 13) - ); - - return new URL(nonPrefixedUrl, fileUrl); - }, - }, - ], - }); - - postcss([ - cssnano({ - preset: ["default", { normalizeWhitespace: false }], - }), - url({ - url: "inline", - basePath: path.resolve(__dirname, "../fonts"), - }), - ]) - .process(result.css, { from: undefined }) - .then((optimizedResult) => { - const resultCSS = `/**** Auto generated by packages/ag-grid-theme/scripts/build.mjs ****/\n\n${optimizedResult.css}`; - - fs.mkdirSync(outputFolder, { recursive: true }); - fs.writeFileSync(path.join(__dirname, "..", outputFileName), resultCSS); - fs.writeFileSync(path.join(outputFolder, outputFileName), resultCSS); - - fs.copyFileSync( - path.resolve(__dirname, "../package.json"), - path.join(outputFolder, "package.json") - ); - }); -} - -const inputFolder = path.resolve(__dirname, "../css"); -const entries = fs - .readdirSync(inputFolder) - .filter((e) => !path.basename(e).match(/^_/)) - .map((x) => path.resolve(inputFolder, x)); - -function tryBuildStyles() { - try { - for (let entry of entries) { - buildStyles(entry); - } - console.log(`Done`); - } catch (exc) { - console.error(exc); - } -} - -tryBuildStyles(); - -let isWatch = false; -process.argv.forEach((p) => { - if (p === "--watch") { - isWatch = true; - } -}); - -if (isWatch) { - chokidar.watch(path.resolve(__dirname, "../css/")).on("change", (path) => { - for (let entry of entries) { - console.log(`"${path}" changed. Rebuilding "${entry}"`); - } - tryBuildStyles(); +const buildFolder = path.join(__dirname, "../../../dist/salt-ds-ag-grid-theme"); + +deleteSync([buildFolder], { force: true }); + +esbuild + .build({ + absWorkingDir: path.resolve(__dirname, ".."), + entryPoints: ["salt-ag-theme.css"], + assetNames: "[dir]/[name]", + outdir: buildFolder, + loader: { + ".woff": "file", + }, + write: true, + bundle: true, + logLevel: "info", + watch: argv.includes("--watch"), + }) + .then(() => { + // File destination.txt will be created or overwritten by default. + fs.copyFile( + path.resolve(__dirname, "../package.json"), + path.join(buildFolder, "package.json"), + (err) => { + if (err) throw err; + console.log( + `${path.relative( + process.cwd(), + path.resolve(__dirname, "../package.json") + )} copied to ${path.relative( + process.cwd(), + path.join(buildFolder, "package.json") + )}` + ); + } + ); }); -} diff --git a/packages/ag-grid-theme/stories/dependencies/changeDetectionExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/changeDetectionExampleColumns.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/changeDetectionExampleColumns.ts rename to packages/ag-grid-theme/src/dependencies/changeDetectionExampleColumns.ts diff --git a/packages/ag-grid-theme/stories/dependencies/columnSpanningExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/columnSpanningExampleColumns.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/columnSpanningExampleColumns.ts rename to packages/ag-grid-theme/src/dependencies/columnSpanningExampleColumns.ts diff --git a/packages/ag-grid-theme/stories/dependencies/customFilterExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts similarity index 83% rename from packages/ag-grid-theme/stories/dependencies/customFilterExampleColumns.ts rename to packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts index 030ab4848ee..89b61c15fc7 100644 --- a/packages/ag-grid-theme/stories/dependencies/customFilterExampleColumns.ts +++ b/packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts @@ -5,7 +5,7 @@ const customFilterExampleColumns: ColDef[] = [ headerName: "Name", field: "name", filter: "agTextColumnFilter", - suppressMenu: true, + suppressHeaderMenuButton: true, pinned: "right", floatingFilter: true, width: 100, @@ -16,21 +16,21 @@ const customFilterExampleColumns: ColDef[] = [ field: "code", filter: "agTextColumnFilter", minWidth: 120, - suppressMenu: true, + suppressHeaderMenuButton: true, floatingFilter: true, }, { headerName: "Capital", field: "capital", filter: "agSetColumnFilter", - suppressMenu: true, + suppressHeaderMenuButton: true, floatingFilter: true, }, { headerName: "Population", field: "population", filter: "agNumberColumnFilter", - suppressMenu: true, + suppressHeaderMenuButton: true, floatingFilter: true, cellClass: ["numeric-cell"], }, diff --git a/packages/ag-grid-theme/stories/dependencies/dataGridExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts similarity index 96% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleColumns.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts index ebeb66478b0..adc4b99dd92 100644 --- a/packages/ag-grid-theme/stories/dependencies/dataGridExampleColumns.ts +++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts @@ -5,10 +5,11 @@ const dataGridExampleColumns: ColDef[] = [ headerName: "", field: "on", width: 70, + flex: 1, checkboxSelection: true, headerCheckboxSelection: true, pinned: "left", - suppressMenu: true, + suppressHeaderMenuButton: true, resizable: false, suppressColumnsToolPanel: true, }, @@ -55,7 +56,6 @@ const dataGridExampleColumns: ColDef[] = [ }, { headerName: "Date", - type: "dateColumn", field: "date", filter: "agDateColumnFilter", }, diff --git a/packages/ag-grid-theme/stories/dependencies/dataGridExampleColumnsColoration.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsColoration.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleColumnsColoration.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsColoration.ts diff --git a/packages/ag-grid-theme/stories/dependencies/dataGridExampleColumnsWrap.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts similarity index 93% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleColumnsWrap.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts index 068008056ce..6160f4e52b1 100644 --- a/packages/ag-grid-theme/stories/dependencies/dataGridExampleColumnsWrap.ts +++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts @@ -8,7 +8,7 @@ const dataGridExampleColumnsWrap: ColDef[] = [ checkboxSelection: true, headerCheckboxSelection: true, pinned: "right", - suppressMenu: true, + suppressHeaderMenuButton: true, }, { headerName: "Name of State", @@ -19,7 +19,7 @@ const dataGridExampleColumnsWrap: ColDef[] = [ }, editable: false, pinned: "left", - suppressMenu: true, + suppressHeaderMenuButton: true, }, { headerName: "State code", @@ -42,7 +42,6 @@ const dataGridExampleColumnsWrap: ColDef[] = [ }, { headerName: "Date", - type: "dateColumn", field: "date", filter: "agDateColumnFilter", width: 160, diff --git a/packages/ag-grid-theme/stories/dependencies/dataGridExampleData.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleData.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleData.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleData.ts diff --git a/packages/ag-grid-theme/stories/dependencies/dataGridExampleRowGroupPanel.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleRowGroupPanel.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleRowGroupPanel.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleRowGroupPanel.ts diff --git a/packages/ag-grid-theme/stories/dependencies/dataGridExampleRowGrouping.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleRowGrouping.ts similarity index 93% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleRowGrouping.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleRowGrouping.ts index d198d1f01c5..b4708b15fbd 100644 --- a/packages/ag-grid-theme/stories/dependencies/dataGridExampleRowGrouping.ts +++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleRowGrouping.ts @@ -3,6 +3,8 @@ const dataGridExampleRowGrouping = [ headerName: "Name", field: "name", filter: "agTextColumnFilter", + rowGroup: true, + hide: true, }, { headerName: "Code", diff --git a/packages/ag-grid-theme/stories/dependencies/dataGridInfiniteScrollExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/dataGridInfiniteScrollExampleColumns.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/dataGridInfiniteScrollExampleColumns.ts rename to packages/ag-grid-theme/src/dependencies/dataGridInfiniteScrollExampleColumns.ts diff --git a/packages/ag-grid-theme/stories/dependencies/mac.png b/packages/ag-grid-theme/src/dependencies/mac.png similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/mac.png rename to packages/ag-grid-theme/src/dependencies/mac.png diff --git a/packages/ag-grid-theme/stories/dependencies/masterDetailExampleData.ts b/packages/ag-grid-theme/src/dependencies/masterDetailExampleData.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/masterDetailExampleData.ts rename to packages/ag-grid-theme/src/dependencies/masterDetailExampleData.ts diff --git a/packages/ag-grid-theme/stories/dependencies/parentChildExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/parentChildExampleColumns.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/parentChildExampleColumns.ts rename to packages/ag-grid-theme/src/dependencies/parentChildExampleColumns.ts diff --git a/packages/ag-grid-theme/stories/dependencies/parentChildExampleData.ts b/packages/ag-grid-theme/src/dependencies/parentChildExampleData.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/parentChildExampleData.ts rename to packages/ag-grid-theme/src/dependencies/parentChildExampleData.ts diff --git a/packages/ag-grid-theme/stories/dependencies/rowDragColumns.ts b/packages/ag-grid-theme/src/dependencies/rowDragColumns.ts similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/rowDragColumns.ts rename to packages/ag-grid-theme/src/dependencies/rowDragColumns.ts diff --git a/packages/ag-grid-theme/stories/dependencies/useAgGridHelpers.ts b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts similarity index 59% rename from packages/ag-grid-theme/stories/dependencies/useAgGridHelpers.ts rename to packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts index 50f70de696d..42bc5f177a3 100644 --- a/packages/ag-grid-theme/stories/dependencies/useAgGridHelpers.ts +++ b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts @@ -1,21 +1,13 @@ -import { - HTMLAttributes, - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from "react"; -import { AgGridReactProps } from "ag-grid-react"; -import { ColumnApi, GridApi, GridReadyEvent } from "ag-grid-community"; import { useDensity, useTheme } from "@salt-ds/core"; +import { ColumnApi, GridApi, GridReadyEvent } from "ag-grid-community"; import { LicenseManager } from "ag-grid-enterprise"; +import { AgGridReactProps } from "ag-grid-react"; import { clsx } from "clsx"; +import { HTMLAttributes, useCallback, useMemo, useRef, useState } from "react"; LicenseManager.setLicenseKey("your license key"); interface AgGridHelpersProps { - agThemeName: string; compact?: boolean; mode?: string; density?: string; @@ -24,16 +16,18 @@ interface AgGridHelpersProps { // Helps to set className, rowHeight and headerHeight depending on the current density export function useAgGridHelpers({ - agThemeName = "ag-theme-uitk", compact = false, mode: modeProp, density: densityProp, containerClassName, -}: AgGridHelpersProps): { +}: AgGridHelpersProps = {}): { containerProps: HTMLAttributes; agGridProps: AgGridReactProps; isGridReady: boolean; api?: GridApi; + /** + * @deprecated — Use methods via the grid api instead. + */ columnApi?: ColumnApi; compact?: boolean; } { @@ -46,35 +40,25 @@ export function useAgGridHelpers({ const density = densityProp ?? contextDensity; const [rowHeight, listItemHeight] = useMemo(() => { - switch ([agThemeName, density].join("-")) { - case "ag-theme-uitk-high": - return [20, 24]; - case "ag-theme-uitk-medium": - return [24, 36]; - case "ag-theme-uitk-low": - return [32, 48]; - case "ag-theme-uitk-touch": - return [32, 60]; - case compact && "ag-theme-salt-high": + switch (density) { + case compact && "high": return [20, 20]; - case "ag-theme-salt-high": - return [24, 24]; - case "ag-theme-salt-medium": - return [36, 36]; - case "ag-theme-salt-low": - return [48, 48]; - case "ag-theme-salt-touch": - return [60, 60]; + case "high": + return [24, 24]; // 20 + 4 + case "medium": + return [36, 36]; // 28 + 8 + case "low": + return [48, 48]; // 36 + 12 + case "touch": + return [60, 60]; // 44 + 16 default: - return [20, 24]; + return [24, 24]; } - }, [density, agThemeName, compact]); + }, [density, compact]); const className = clsx( containerClassName, - `${agThemeName}-${density}${ - compact && density === "high" ? `-compact` : `` - }-${mode}` + `ag-theme-salt${compact && density === "high" ? `-compact` : ``}-${mode}` ); const onGridReady = useCallback(({ api, columnApi }: GridReadyEvent) => { @@ -83,21 +67,9 @@ export function useAgGridHelpers({ setGridReady(true); }, []); - useEffect(() => { - // setHeaderHeight doesn't work if not in setTimeout - setTimeout(() => { - if (isGridReady) { - apiRef.current!.api.resetRowHeights(); - apiRef.current!.api.setHeaderHeight(rowHeight); - apiRef.current!.api.setFloatingFiltersHeight(rowHeight); - // TODO how to set listItemHeight as the "ag-filter-virtual-list-item" height? Issue 2479 - } - }, 0); - }, [rowHeight, isGridReady, agThemeName, listItemHeight]); - return { containerProps: { - className, + className: clsx(containerClassName, className), style: { height: 500, width: 800 }, }, agGridProps: { diff --git a/packages/ag-grid-theme/stories/dependencies/windows.png b/packages/ag-grid-theme/src/dependencies/windows.png similarity index 100% rename from packages/ag-grid-theme/stories/dependencies/windows.png rename to packages/ag-grid-theme/src/dependencies/windows.png diff --git a/packages/ag-grid-theme/stories/examples/CheckboxSelection.tsx b/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx similarity index 55% rename from packages/ag-grid-theme/stories/examples/CheckboxSelection.tsx rename to packages/ag-grid-theme/src/examples/CheckboxSelection.tsx index fa3b36eaf6b..5774d42e1cc 100644 --- a/packages/ag-grid-theme/stories/examples/CheckboxSelection.tsx +++ b/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx @@ -1,14 +1,10 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const CheckboxSelection = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
@@ -18,13 +14,18 @@ const CheckboxSelection = (props: AgGridReactProps) => { rowData={dataGridExampleData} columnDefs={dataGridExampleColumns} rowSelection="multiple" + onFirstDataRendered={(params) => { + params.api.forEachNode((node, index) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + if (node.data && index < 7 && index > 2) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call + node.setSelected(true); + } + }); + }} />
); }; -CheckboxSelection.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default CheckboxSelection; diff --git a/packages/ag-grid-theme/stories/examples/Coloration.tsx b/packages/ag-grid-theme/src/examples/Coloration.tsx similarity index 66% rename from packages/ag-grid-theme/stories/examples/Coloration.tsx rename to packages/ag-grid-theme/src/examples/Coloration.tsx index cd527021beb..907e1aa9f88 100644 --- a/packages/ag-grid-theme/stories/examples/Coloration.tsx +++ b/packages/ag-grid-theme/src/examples/Coloration.tsx @@ -1,14 +1,10 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumnsColoration from "../dependencies/dataGridExampleColumnsColoration"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const Coloration = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
@@ -22,8 +18,4 @@ const Coloration = (props: AgGridReactProps) => { ); }; -Coloration.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default Coloration; diff --git a/packages/ag-grid-theme/stories/examples/ColumnGroup.tsx b/packages/ag-grid-theme/src/examples/ColumnGroup.tsx similarity index 81% rename from packages/ag-grid-theme/stories/examples/ColumnGroup.tsx rename to packages/ag-grid-theme/src/examples/ColumnGroup.tsx index cfb5a6b293c..6e3bcc81278 100644 --- a/packages/ag-grid-theme/stories/examples/ColumnGroup.tsx +++ b/packages/ag-grid-theme/src/examples/ColumnGroup.tsx @@ -1,20 +1,17 @@ import { ColDef, ColGroupDef } from "ag-grid-community"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const ColumnGroup = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
@@ -30,7 +27,7 @@ const columnsWithGrouping = (groupName: string): (ColGroupDef | ColDef)[] => [ headerCheckboxSelection: true, width: 38, pinned: "left", - suppressMenu: true, + suppressHeaderMenuButton: true, }, { headerName: groupName, @@ -64,8 +61,4 @@ const columnsWithGrouping = (groupName: string): (ColGroupDef | ColDef)[] => [ }, ]; -ColumnGroup.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default ColumnGroup; diff --git a/packages/ag-grid-theme/stories/examples/ColumnSpanning.tsx b/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx similarity index 66% rename from packages/ag-grid-theme/stories/examples/ColumnSpanning.tsx rename to packages/ag-grid-theme/src/examples/ColumnSpanning.tsx index 58f1a1c306b..6a9a63d0204 100644 --- a/packages/ag-grid-theme/stories/examples/ColumnSpanning.tsx +++ b/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx @@ -1,14 +1,10 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import columnSpanningExampleColumns from "../dependencies/columnSpanningExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const ColumnSpanning = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
@@ -22,8 +18,4 @@ const ColumnSpanning = (props: AgGridReactProps) => { ); }; -ColumnSpanning.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default ColumnSpanning; diff --git a/packages/ag-grid-theme/stories/examples/ContextMenu.tsx b/packages/ag-grid-theme/src/examples/ContextMenu.tsx similarity index 92% rename from packages/ag-grid-theme/stories/examples/ContextMenu.tsx rename to packages/ag-grid-theme/src/examples/ContextMenu.tsx index 83a7caa3cc6..cd43b866eef 100644 --- a/packages/ag-grid-theme/stories/examples/ContextMenu.tsx +++ b/packages/ag-grid-theme/src/examples/ContextMenu.tsx @@ -1,6 +1,5 @@ import { GetContextMenuItemsParams } from "ag-grid-community"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import mac from "../dependencies/mac.png"; @@ -8,10 +7,7 @@ import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; import windows from "../dependencies/windows.png"; const ContextMenu = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); const getContextMenuItems = (params: GetContextMenuItemsParams) => { const result = [ @@ -146,19 +142,16 @@ const ContextMenu = (props: AgGridReactProps) => { return (
); }; -ContextMenu.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default ContextMenu; diff --git a/packages/ag-grid-theme/stories/examples/CustomFilter.tsx b/packages/ag-grid-theme/src/examples/CustomFilter.tsx similarity index 81% rename from packages/ag-grid-theme/stories/examples/CustomFilter.tsx rename to packages/ag-grid-theme/src/examples/CustomFilter.tsx index c9c2b7542a4..cbf56653244 100644 --- a/packages/ag-grid-theme/stories/examples/CustomFilter.tsx +++ b/packages/ag-grid-theme/src/examples/CustomFilter.tsx @@ -1,25 +1,13 @@ -import { useEffect, useState } from "react"; import { Button, FlowLayout, StackLayout } from "@salt-ds/core"; -import dataGridExampleData from "../dependencies/dataGridExampleData"; -import customFilterExampleColumns from "../dependencies/customFilterExampleColumns"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import "../../uitk-ag-theme.css"; +import { useState } from "react"; +import customFilterExampleColumns from "../dependencies/customFilterExampleColumns"; +import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; const CustomFilter = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const [hasSavedState, setHasSavedState] = useState(true); - const { api, isGridReady, agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); - - useEffect(() => { - if (isGridReady) { - api?.sizeColumnsToFit(); - } - }, [api, isGridReady]); + const { api, agGridProps, containerProps } = useAgGridHelpers(); const handlePopMt100kClick = () => { const popMt100kComponent = api!.getFilterInstance("population")!; @@ -68,7 +56,7 @@ const CustomFilter = (props: AgGridReactProps) => { }; const restoreState = () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any api!.setFilterModel((window as any).filterState); setHasSavedState(true); }; @@ -95,19 +83,15 @@ const CustomFilter = (props: AgGridReactProps) => {
); }; -CustomFilter.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default CustomFilter; diff --git a/packages/ag-grid-theme/stories/examples/Default.tsx b/packages/ag-grid-theme/src/examples/Default.tsx similarity index 82% rename from packages/ag-grid-theme/stories/examples/Default.tsx rename to packages/ag-grid-theme/src/examples/Default.tsx index 29485a9a736..b84e056affc 100644 --- a/packages/ag-grid-theme/stories/examples/Default.tsx +++ b/packages/ag-grid-theme/src/examples/Default.tsx @@ -1,5 +1,4 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -7,15 +6,15 @@ const Default = ({ containerClassName, ...agProps }: AgGridReactProps & { containerClassName?: string }) => { - const { themeName } = useAgGridThemeSwitcher(); const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, containerClassName, }); return (
); }; -Default.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default Default; diff --git a/packages/ag-grid-theme/stories/examples/DragRowOrder.tsx b/packages/ag-grid-theme/src/examples/DragRowOrder.tsx similarity index 66% rename from packages/ag-grid-theme/stories/examples/DragRowOrder.tsx rename to packages/ag-grid-theme/src/examples/DragRowOrder.tsx index 860f7bb20ab..a7be200abf1 100644 --- a/packages/ag-grid-theme/stories/examples/DragRowOrder.tsx +++ b/packages/ag-grid-theme/src/examples/DragRowOrder.tsx @@ -1,22 +1,18 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import rowDragColumns from "../dependencies/rowDragColumns"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const DragRowOrder = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
@@ -24,8 +20,4 @@ const DragRowOrder = (props: AgGridReactProps) => { ); }; -DragRowOrder.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default DragRowOrder; diff --git a/packages/ag-grid-theme/stories/examples/FloatingFilter.tsx b/packages/ag-grid-theme/src/examples/FloatingFilter.tsx similarity index 67% rename from packages/ag-grid-theme/stories/examples/FloatingFilter.tsx rename to packages/ag-grid-theme/src/examples/FloatingFilter.tsx index e8a7e72cd24..dfed46e6b79 100644 --- a/packages/ag-grid-theme/stories/examples/FloatingFilter.tsx +++ b/packages/ag-grid-theme/src/examples/FloatingFilter.tsx @@ -1,30 +1,22 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import customFilterExampleColumns from "../dependencies/customFilterExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const FloatingFilter = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
); }; -FloatingFilter.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default FloatingFilter; diff --git a/packages/ag-grid-theme/stories/examples/HDCompact.tsx b/packages/ag-grid-theme/src/examples/HDCompact.tsx similarity index 88% rename from packages/ag-grid-theme/stories/examples/HDCompact.tsx rename to packages/ag-grid-theme/src/examples/HDCompact.tsx index 877e3bbd05c..f22d495de3a 100644 --- a/packages/ag-grid-theme/stories/examples/HDCompact.tsx +++ b/packages/ag-grid-theme/src/examples/HDCompact.tsx @@ -4,7 +4,6 @@ import { useTheme, } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -23,9 +22,7 @@ const statusBar = { const HDCompact = (props: AgGridReactProps) => { const { themeNext } = useTheme(); - const { themeName } = useAgGridThemeSwitcher(); const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, compact: true, density: "high", }); @@ -58,8 +55,4 @@ const HDCompact = (props: AgGridReactProps) => { ); }; -HDCompact.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default HDCompact; diff --git a/packages/ag-grid-theme/src/examples/Icons.css b/packages/ag-grid-theme/src/examples/Icons.css new file mode 100644 index 00000000000..12ad21e6386 --- /dev/null +++ b/packages/ag-grid-theme/src/examples/Icons.css @@ -0,0 +1,7 @@ +div[class^="ag-icon"]:before { + margin-right: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-icon-loading { + animation: none; +} diff --git a/packages/ag-grid-theme/src/examples/Icons.tsx b/packages/ag-grid-theme/src/examples/Icons.tsx new file mode 100644 index 00000000000..08c3751c338 --- /dev/null +++ b/packages/ag-grid-theme/src/examples/Icons.tsx @@ -0,0 +1,91 @@ +import { useComponentCssInjection } from "@salt-ds/styles"; +import { useWindow } from "@salt-ds/window"; +import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; + +import iconCss from "./Icons.css"; + +// Icon name comes from https://ag-grid.com/javascript-data-grid/custom-icons/ +// Array.from($0.childNodes).map(x => x.querySelector("._iconName_4em5v_50").innerText) +const providedIcons = [ + "aggregation", + "arrows", + "asc", + "cancel", + "chart", + "checkbox-checked", + "checkbox-indeterminate", + "checkbox-unchecked", + "color-picker", + "columns", + "contracted", + "copy", + "cut", + "cross", + "csv", + "desc", + "down", + "excel", + "expanded", + "eye-slash", + "eye", + "filter", + "first", + "grip", + "group", + "last", + "left", + "linked", + "loading", + "maximize", + "menu", + "menu-alt", + "minimize", + "minus", + "next", + "none", + "not-allowed", + "paste", + "pin", + "pivot", + "plus", + "previous", + "radio-button-off", + "radio-button-on", + "right", + "save", + "small-down", + "small-left", + "small-right", + "small-up", + "tick", + "tree-closed", + "tree-indeterminate", + "tree-open", + "unlinked", + "up", +]; + +const Icons = () => { + const targetWindow = useWindow(); + useComponentCssInjection({ + testId: "salt-ag-grid-icons", + css: iconCss, + window: targetWindow, + }); + + const { + containerProps: { className }, + } = useAgGridHelpers(); + + return ( +
+ {providedIcons.map((x) => ( +
+ {x} +
+ ))} +
+ ); +}; + +export default Icons; diff --git a/packages/ag-grid-theme/stories/examples/InfiniteScroll.tsx b/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx similarity index 86% rename from packages/ag-grid-theme/stories/examples/InfiniteScroll.tsx rename to packages/ag-grid-theme/src/examples/InfiniteScroll.tsx index 9c4669276d9..57558706218 100644 --- a/packages/ag-grid-theme/stories/examples/InfiniteScroll.tsx +++ b/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx @@ -1,7 +1,6 @@ import { Spinner } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import { useEffect } from "react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import dataGridInfiniteScrollExampleColumns from "../dependencies/dataGridInfiniteScrollExampleColumns"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -23,16 +22,13 @@ const generateData = function generateData( const dataSourceRows = generateData(dataGridExampleData); const InfiniteScroll = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { isGridReady, agGridProps, containerProps, api } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { isGridReady, agGridProps, containerProps, api } = useAgGridHelpers(); useEffect(() => { if (isGridReady) { api!.sizeColumnsToFit(); - api!.setDatasource({ + api!.setGridOption("datasource", { getRows: ({ startRow, endRow, successCallback }) => { setTimeout(() => { successCallback( @@ -43,7 +39,7 @@ const InfiniteScroll = (props: AgGridReactProps) => { }, }); } - }, [api, isGridReady]); + }, [isGridReady]); return (
@@ -72,8 +68,4 @@ const infiniteScrollComponents = { }, }; -InfiniteScroll.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default InfiniteScroll; diff --git a/packages/ag-grid-theme/stories/examples/LoadingOverlay.tsx b/packages/ag-grid-theme/src/examples/LoadingOverlay.tsx similarity index 52% rename from packages/ag-grid-theme/stories/examples/LoadingOverlay.tsx rename to packages/ag-grid-theme/src/examples/LoadingOverlay.tsx index b02be2bd1b9..ecbc762f056 100644 --- a/packages/ag-grid-theme/stories/examples/LoadingOverlay.tsx +++ b/packages/ag-grid-theme/src/examples/LoadingOverlay.tsx @@ -1,6 +1,5 @@ import { Card, Spinner, StackLayout, Text } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -16,26 +15,23 @@ const CustomOverlay = () => ( ); const LoadingOverlay = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return ( -
- -
+ +
+
+ +
+
+ ); }; -LoadingOverlay.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default LoadingOverlay; diff --git a/packages/ag-grid-theme/stories/examples/MasterDetail.tsx b/packages/ag-grid-theme/src/examples/MasterDetail.tsx similarity index 79% rename from packages/ag-grid-theme/stories/examples/MasterDetail.tsx rename to packages/ag-grid-theme/src/examples/MasterDetail.tsx index a8219bb16ef..1e0dd4fee0f 100644 --- a/packages/ag-grid-theme/stories/examples/MasterDetail.tsx +++ b/packages/ag-grid-theme/src/examples/MasterDetail.tsx @@ -1,15 +1,11 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import { useCallback, useRef } from "react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import rowData from "../dependencies/dataGridExampleData"; import columnDefs from "../dependencies/masterDetailExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const MasterDetail = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); const gridRef = useRef(null); @@ -22,11 +18,27 @@ const MasterDetail = (props: AgGridReactProps) => { }); }, []); + const detailCellRenderer = () => ( +
+ +
+ ); + return (
{ masterDetail={true} detailRowHeight={300} rowData={rowData} - {...agGridProps} - {...props} onFirstDataRendered={onFirstDataRendered} />
); }; -MasterDetail.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default MasterDetail; diff --git a/packages/ag-grid-theme/stories/examples/NoDataOverlay.tsx b/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx similarity index 81% rename from packages/ag-grid-theme/stories/examples/NoDataOverlay.tsx rename to packages/ag-grid-theme/src/examples/NoDataOverlay.tsx index 5b6b8ccd31a..9fcf2e85100 100644 --- a/packages/ag-grid-theme/stories/examples/NoDataOverlay.tsx +++ b/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx @@ -5,7 +5,6 @@ import { DialogHeader, } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -31,10 +30,7 @@ const CustomDialog = () => { }; const NoDataOverlay = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
@@ -49,8 +45,4 @@ const NoDataOverlay = (props: AgGridReactProps) => { ); }; -NoDataOverlay.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default NoDataOverlay; diff --git a/packages/ag-grid-theme/stories/examples/Pagination.tsx b/packages/ag-grid-theme/src/examples/Pagination.tsx similarity index 61% rename from packages/ag-grid-theme/stories/examples/Pagination.tsx rename to packages/ag-grid-theme/src/examples/Pagination.tsx index 6eb914da23e..7e2443fad94 100644 --- a/packages/ag-grid-theme/stories/examples/Pagination.tsx +++ b/packages/ag-grid-theme/src/examples/Pagination.tsx @@ -1,5 +1,4 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -14,42 +13,21 @@ const generateData = (states: typeof dataGridExampleData) => return [...result, ...data]; }, [] as typeof dataGridExampleData); -const PagedGrid = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); +const Pagination = (props: AgGridReactProps) => { + const { agGridProps, containerProps } = useAgGridHelpers(); return (
); }; -const Pagination = () => ( -
- -
-); - -Pagination.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default Pagination; diff --git a/packages/ag-grid-theme/stories/examples/ParentChildRows.tsx b/packages/ag-grid-theme/src/examples/ParentChildRows.tsx similarity index 75% rename from packages/ag-grid-theme/stories/examples/ParentChildRows.tsx rename to packages/ag-grid-theme/src/examples/ParentChildRows.tsx index e5648aed2e1..0b52951df9c 100644 --- a/packages/ag-grid-theme/stories/examples/ParentChildRows.tsx +++ b/packages/ag-grid-theme/src/examples/ParentChildRows.tsx @@ -1,22 +1,18 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import parentChildExampleColumns from "../dependencies/parentChildExampleColumns"; import parentChildExampleData from "../dependencies/parentChildExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const ParentChildRows = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
{ @@ -30,8 +26,4 @@ const ParentChildRows = (props: AgGridReactProps) => { ); }; -ParentChildRows.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default ParentChildRows; diff --git a/packages/ag-grid-theme/stories/examples/PinnedRows.tsx b/packages/ag-grid-theme/src/examples/PinnedRows.tsx similarity index 83% rename from packages/ag-grid-theme/stories/examples/PinnedRows.tsx rename to packages/ag-grid-theme/src/examples/PinnedRows.tsx index b54678afa4e..555893ae61a 100644 --- a/packages/ag-grid-theme/stories/examples/PinnedRows.tsx +++ b/packages/ag-grid-theme/src/examples/PinnedRows.tsx @@ -1,5 +1,4 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -28,7 +27,7 @@ const headerRow: any[] = [ name: "Top", code: "Top", capital: "Top", - population: "Top", + population: 0, }, ]; @@ -48,15 +47,12 @@ const PinnedRowsExample = function PinnedRowsExample({ showHeader = true, ...rest }: PinnedRowsExampleProps) { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); const getColumnData = () => { return fields(aggregateColumn, rowData!).filter( (field) => typeof field === "number" - ); + ) as number[]; }; const footerRow = () => { @@ -73,18 +69,15 @@ const PinnedRowsExample = function PinnedRowsExample({ ]; }; - const getHeaderRow = () => { - return headerRow; - }; - const pinnedBottomRowData = showFooter ? footerRow() : undefined; - const pinnedTopRowData = showHeader ? getHeaderRow() : undefined; + const pinnedTopRowData = showHeader ? headerRow : undefined; return (
; } - -PinnedRows.parameters = { - chromatic: { disableSnapshot: false }, -}; diff --git a/packages/ag-grid-theme/src/examples/RangeSelection.tsx b/packages/ag-grid-theme/src/examples/RangeSelection.tsx new file mode 100644 index 00000000000..8b8c0f409a6 --- /dev/null +++ b/packages/ag-grid-theme/src/examples/RangeSelection.tsx @@ -0,0 +1,44 @@ +import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +import { useEffect } from "react"; +import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; +import dataGridExampleData from "../dependencies/dataGridExampleData"; +import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; + +export const RangeSelection = (props: AgGridReactProps) => { + const { agGridProps, containerProps, isGridReady, api } = useAgGridHelpers(); + + useEffect(() => { + if (isGridReady) { + api?.addCellRange({ + rowStartIndex: 1, + rowEndIndex: 10, + columnStart: "code", + columnEnd: "population", + }); + } + }, [isGridReady]); + + return ( +
+ { + params.api.forEachNode((node, index) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + if (node.data && index < 7 && index > 2) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call + node.setSelected(true); + } + }); + }} + /> +
+ ); +}; + +export default RangeSelection; diff --git a/packages/ag-grid-theme/stories/examples/RowGroupPanel.tsx b/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx similarity index 69% rename from packages/ag-grid-theme/stories/examples/RowGroupPanel.tsx rename to packages/ag-grid-theme/src/examples/RowGroupPanel.tsx index e3542b46257..938d39d9297 100644 --- a/packages/ag-grid-theme/stories/examples/RowGroupPanel.tsx +++ b/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx @@ -1,33 +1,24 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import dataGridExampleRowGroupPanel from "../dependencies/dataGridExampleRowGroupPanel"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const RowGroupPanel = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return (
); }; - -RowGroupPanel.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default RowGroupPanel; diff --git a/packages/ag-grid-theme/stories/examples/RowGrouping.tsx b/packages/ag-grid-theme/src/examples/RowGrouping.tsx similarity index 65% rename from packages/ag-grid-theme/stories/examples/RowGrouping.tsx rename to packages/ag-grid-theme/src/examples/RowGrouping.tsx index bba3ae30797..910ec29bd7d 100644 --- a/packages/ag-grid-theme/stories/examples/RowGrouping.tsx +++ b/packages/ag-grid-theme/src/examples/RowGrouping.tsx @@ -1,29 +1,27 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import dataGridExampleRowGrouping from "../dependencies/dataGridExampleRowGrouping"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; const RowGrouping = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers({ compact: true }); return (
); }; -RowGrouping.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default RowGrouping; diff --git a/packages/ag-grid-theme/stories/examples/SortAndFilter.tsx b/packages/ag-grid-theme/src/examples/SortAndFilter.tsx similarity index 59% rename from packages/ag-grid-theme/stories/examples/SortAndFilter.tsx rename to packages/ag-grid-theme/src/examples/SortAndFilter.tsx index 085d4285858..687ff731c45 100644 --- a/packages/ag-grid-theme/stories/examples/SortAndFilter.tsx +++ b/packages/ag-grid-theme/src/examples/SortAndFilter.tsx @@ -1,6 +1,5 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import { useEffect } from "react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import rowData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -28,28 +27,28 @@ const colDef = [ ]; const SortAndFilter = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps, isGridReady, api } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps, isGridReady, api } = useAgGridHelpers(); useEffect(() => { - if (isGridReady) { - // set filter model and update + async function setFilter() { + if (isGridReady) { + // set filter model and update - api?.getFilterInstance("name")?.setModel({ - values: ["Alabama", "Alaska", "Arizona"], - }); + await api?.setColumnFilterModel("name", { + values: ["Alabama", "Alaska", "Arizona"], + }); + await api?.setColumnFilterModel("rating", { + type: "lessThan", + filter: 50, + }); - api?.getFilterInstance("rating")?.setModel({ - type: "lessThan", - filter: 50, - }); - - // refresh rows based on the filter (not automatic to allow for batching multiple filters) - api?.onFilterChanged(); + // refresh rows based on the filter (not automatic to allow for batching multiple filters) + api?.onFilterChanged(); + } } - }, [api, isGridReady]); + + void setFilter(); + }, [isGridReady]); return (
@@ -63,8 +62,4 @@ const SortAndFilter = (props: AgGridReactProps) => { ); }; -SortAndFilter.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default SortAndFilter; diff --git a/packages/ag-grid-theme/stories/examples/StatusBar.tsx b/packages/ag-grid-theme/src/examples/StatusBar.tsx similarity index 58% rename from packages/ag-grid-theme/stories/examples/StatusBar.tsx rename to packages/ag-grid-theme/src/examples/StatusBar.tsx index 4e850d6b95d..e27b98096c8 100644 --- a/packages/ag-grid-theme/stories/examples/StatusBar.tsx +++ b/packages/ag-grid-theme/src/examples/StatusBar.tsx @@ -1,10 +1,35 @@ import { StackLayout, Text } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; +const CustomDivider = () => { + return ( +
+ ); +}; +const CustomClickableStatusBar = () => { + return ( + + + {/* In status bar, line height being size base keeps text in the middle */} + + Custom Component + + + ); +}; + const statusBar = { statusPanels: [ { @@ -14,27 +39,34 @@ const statusBar = { { statusPanel: "agFilteredRowCountComponent" }, { statusPanel: "agSelectedRowCountComponent" }, { statusPanel: "agAggregationComponent" }, + { + statusPanel: CustomClickableStatusBar, + }, ], }; const StatusBar = (props: AgGridReactProps) => { - const { themeName } = useAgGridThemeSwitcher(); - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); + const { agGridProps, containerProps } = useAgGridHelpers(); return ( Select rows to enable status bar display -
+
{ params.api.forEachNode((node, index) => { // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access @@ -50,8 +82,4 @@ const StatusBar = (props: AgGridReactProps) => { ); }; -StatusBar.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default StatusBar; diff --git a/packages/ag-grid-theme/src/examples/ToolPanel.tsx b/packages/ag-grid-theme/src/examples/ToolPanel.tsx new file mode 100644 index 00000000000..d25d4aebb58 --- /dev/null +++ b/packages/ag-grid-theme/src/examples/ToolPanel.tsx @@ -0,0 +1,87 @@ +import { FlexLayout, Text } from "@salt-ds/core"; +import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +import dataGridExampleData from "../dependencies/dataGridExampleData"; +import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; + +const CustomPanel = () => { + return ( + + Custom panel + Width should auto fit + + ); +}; + +const sideBar = { + toolPanels: [ + { + id: "columns", + labelDefault: "Columns", + labelKey: "columns", + iconKey: "columns", + toolPanel: "agColumnsToolPanel", + }, + { + id: "filters", + labelDefault: "Filters", + labelKey: "filters", + iconKey: "filter", + toolPanel: "agFiltersToolPanel", + }, + { + id: "customStats", + labelDefault: "Custom Stats", + labelKey: "customStats", + iconKey: "save", + toolPanel: CustomPanel, + }, + ], + defaultToolPanel: "customStats", +}; + +const ToolPanel = (props: AgGridReactProps) => { + const { agGridProps, containerProps } = useAgGridHelpers(); + + return ( +
+ +
+ ); +}; + +export default ToolPanel; diff --git a/packages/ag-grid-theme/src/examples/VariantSecondary.tsx b/packages/ag-grid-theme/src/examples/VariantSecondary.tsx new file mode 100644 index 00000000000..87d69aee162 --- /dev/null +++ b/packages/ag-grid-theme/src/examples/VariantSecondary.tsx @@ -0,0 +1,27 @@ +import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +import { clsx } from "clsx"; +import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; +import dataGridExampleData from "../dependencies/dataGridExampleData"; +import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; + +const VariantSecondary = (props: AgGridReactProps) => { + const { agGridProps, containerProps } = useAgGridHelpers(); + const { className } = containerProps; + + return ( +
+ +
+ ); +}; + +export default VariantSecondary; diff --git a/packages/ag-grid-theme/src/examples/VariantZebra.tsx b/packages/ag-grid-theme/src/examples/VariantZebra.tsx new file mode 100644 index 00000000000..36a14d15d43 --- /dev/null +++ b/packages/ag-grid-theme/src/examples/VariantZebra.tsx @@ -0,0 +1,27 @@ +import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +import { clsx } from "clsx"; +import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; +import dataGridExampleData from "../dependencies/dataGridExampleData"; +import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; + +const VariantZebra = (props: AgGridReactProps) => { + const { agGridProps, containerProps } = useAgGridHelpers({}); + const { className } = containerProps; + + return ( +
+ +
+ ); +}; + +export default VariantZebra; diff --git a/packages/ag-grid-theme/stories/examples/WrappedCell.tsx b/packages/ag-grid-theme/src/examples/WrappedCell.tsx similarity index 74% rename from packages/ag-grid-theme/stories/examples/WrappedCell.tsx rename to packages/ag-grid-theme/src/examples/WrappedCell.tsx index 33e6d12ae93..0c05c911d0b 100644 --- a/packages/ag-grid-theme/stories/examples/WrappedCell.tsx +++ b/packages/ag-grid-theme/src/examples/WrappedCell.tsx @@ -1,7 +1,6 @@ import { Checkbox, FlexItem, StackLayout, useDensity } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { ChangeEvent, useEffect, useState } from "react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; +import { ChangeEvent, useState } from "react"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -12,19 +11,11 @@ const longNamesData = dataGridExampleData.map((d) => ({ const WrappedCell = (props: AgGridReactProps) => { const [compact, setCompact] = useState(false); - const { themeName } = useAgGridThemeSwitcher(); - const { api, agGridProps, containerProps, isGridReady } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, + const { agGridProps, containerProps } = useAgGridHelpers({ compact, }); const { defaultColDef: propsColDefs, ...restAgGridProps } = agGridProps; - useEffect(() => { - if (isGridReady) { - api?.sizeColumnsToFit(); - } - }, [api, isGridReady]); - const density = useDensity(); const handleCompactChange = (event: ChangeEvent) => { @@ -41,8 +32,10 @@ const WrappedCell = (props: AgGridReactProps) => { disabled={density !== "high"} /> -
+
{ ]} rowData={longNamesData} defaultColDef={propsColDefs} - {...restAgGridProps} - {...props} />
); }; -WrappedCell.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default WrappedCell; diff --git a/packages/ag-grid-theme/stories/examples/WrappedHeader.tsx b/packages/ag-grid-theme/src/examples/WrappedHeader.tsx similarity index 61% rename from packages/ag-grid-theme/stories/examples/WrappedHeader.tsx rename to packages/ag-grid-theme/src/examples/WrappedHeader.tsx index b1d31f2777f..bdec9737bda 100644 --- a/packages/ag-grid-theme/stories/examples/WrappedHeader.tsx +++ b/packages/ag-grid-theme/src/examples/WrappedHeader.tsx @@ -1,7 +1,6 @@ -import { Checkbox, FlexItem, StackLayout, useDensity } from "@salt-ds/core"; +import { Checkbox, StackLayout, useDensity } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { ChangeEvent, useEffect, useState } from "react"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; +import { ChangeEvent, useState } from "react"; import dataGridExampleColumnsWrap from "../dependencies/dataGridExampleColumnsWrap"; import dataGridExampleData from "../dependencies/dataGridExampleData"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; @@ -20,19 +19,11 @@ const statusBar = { const WrappedHeader = (props: AgGridReactProps) => { const [compact, setCompact] = useState(false); - const { themeName } = useAgGridThemeSwitcher(); - const { api, agGridProps, containerProps, isGridReady } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, + const { agGridProps, containerProps } = useAgGridHelpers({ compact, }); const { defaultColDef: propsColDefs, ...restAgGridProps } = agGridProps; - useEffect(() => { - if (isGridReady) { - api?.sizeColumnsToFit(); - } - }, [api, isGridReady]); - const density = useDensity(); const handleCompactChange = (event: ChangeEvent) => { @@ -41,16 +32,16 @@ const WrappedHeader = (props: AgGridReactProps) => { return ( - - - -
+ +
{ autoHeaderHeight: true, wrapHeaderText: true, }} - {...restAgGridProps} - {...props} />
); }; -WrappedHeader.parameters = { - chromatic: { disableSnapshot: false }, -}; - export default WrappedHeader; diff --git a/packages/ag-grid-theme/stories/examples/index.ts b/packages/ag-grid-theme/src/examples/index.ts similarity index 93% rename from packages/ag-grid-theme/stories/examples/index.ts rename to packages/ag-grid-theme/src/examples/index.ts index 912ea63ffaa..6ac43b0a8a0 100644 --- a/packages/ag-grid-theme/stories/examples/index.ts +++ b/packages/ag-grid-theme/src/examples/index.ts @@ -14,12 +14,14 @@ export { default as MasterDetail } from "./MasterDetail"; export { default as NoDataOverlay } from "./NoDataOverlay"; export { default as InfiniteScroll } from "./InfiniteScroll"; export { default as PinnedRows } from "./PinnedRows"; +export { RangeSelection } from "./RangeSelection"; export { default as Pagination } from "./Pagination"; export { default as ParentChildRows } from "./ParentChildRows"; export { default as RowGrouping } from "./RowGrouping"; export { default as RowGroupPanel } from "./RowGroupPanel"; export { default as SortAndFilter } from "./SortAndFilter"; export { default as StatusBar } from "./StatusBar"; +export { default as ToolPanel } from "./ToolPanel"; export { default as VariantSecondary } from "./VariantSecondary"; export { default as VariantZebra } from "./VariantZebra"; export { default as WrappedCell } from "./WrappedCell"; diff --git a/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx b/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx new file mode 100644 index 00000000000..1eb976a758b --- /dev/null +++ b/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx @@ -0,0 +1,287 @@ +import type { StoryObj } from "@storybook/react"; +import { expect, userEvent, within } from "@storybook/test"; +import { AgGridReact } from "ag-grid-react"; +import { + Default, + ToolPanel, + ColumnGroup, + ContextMenu as ContextMenuGrid, + CustomFilter, +} from "../src/examples"; + +import "ag-grid-community/styles/ag-grid.css"; +import "../salt-ag-theme.css"; + +export default { + title: "Ag Grid/Ag Grid Theme/Ag Grid Theme QA", + component: AgGridReact, + parameters: { + // Make all ag grid examples go through chromatic + chromatic: { + disableSnapshot: false, + delay: 200, + modes: { + // Only 1 menu will appear on screen, so not using side-by-side mode + dual: { mode: "dark", viewport: { width: 800 + 24 * 2 } }, + }, + }, + }, +}; + +export const SingleCellFocusWithRangeSelection: StoryObj< + typeof AgGridReact +> = () => { + return ; +}; +SingleCellFocusWithRangeSelection.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const azCells = await canvas.findAllByText("AZ"); + + for (const cell of azCells) { + await userEvent.click(cell); + + // classname has focus ring, which we want to snapshot, #3290 + await expect(cell).toHaveClass("ag-cell-range-single-cell"); + } +}; + +export const HeaderTooltip: StoryObj = () => { + // hover tirgger doesn't work in Chromatic, use focus trigger here + return ( + + ); +}; +HeaderTooltip.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const headerCells = await canvas.findAllByText("Capital"); + + console.log(headerCells); + + for (const cell of headerCells) { + const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!; + + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unnecessary-type-assertion + (cell.closest(".ag-header-cell")! as HTMLElement).focus(); + + // Snapshot the tooltip, mainly ensuring bg color match + await expect( + await within(gridRoot).findByRole("dialog", { name: "Tooltip" }) + ).toBeInTheDocument(); + } +}; + +export const ColumnMenuGeneral: StoryObj = () => { + return ; +}; +ColumnMenuGeneral.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const nameHeaderCells = await canvas.findAllByText("Name"); + + for (const cell of nameHeaderCells) { + const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!; + + await userEvent.click( + cell + .closest(".ag-header-cell-comp-wrapper")! + .querySelector(".ag-icon.ag-icon-menu")! + ); + + const dialog = within(gridRoot).getByRole("dialog", { + name: "Column Menu", + }); + + await userEvent.hover( + within(dialog).getByRole("treeitem", { name: /Pin Column/i }) + ); + + // snapshot the menu + await expect(dialog).toBeInTheDocument(); + } +}; + +export const ColumnMenuFilter: StoryObj = () => { + return ; +}; +ColumnMenuFilter.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const nameHeaderCells = await canvas.findAllByText("Name"); + + for (const cell of nameHeaderCells) { + const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!; + + await userEvent.click( + cell + .closest(".ag-header-cell-comp-wrapper")! + .querySelector(".ag-icon.ag-icon-menu")! + ); + + const dialog = within(gridRoot).getByRole("dialog", { + name: "Column Menu", + }); + + await userEvent.click(within(dialog).getByRole("tab", { name: /filter/i })); + + const searchInput = within(dialog).getByRole("textbox", { + name: "Search filter values", + }); + await expect(searchInput).toBeInTheDocument(); + // Hide the caret color so snapshot will be consistant + searchInput.style.caretColor = "transparent"; + + // snapshot the menu + await expect(dialog).toBeInTheDocument(); + } +}; + +export const ColumnMenuColumns: StoryObj = () => { + return ; +}; +ColumnMenuColumns.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const nameHeaderCells = await canvas.findAllByText("Name"); + + for (const cell of nameHeaderCells) { + const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!; + + await userEvent.click( + cell + .closest(".ag-header-cell-comp-wrapper")! + .querySelector(".ag-icon.ag-icon-menu")! + ); + + const dialog = within(gridRoot).getByRole("dialog", { + name: "Column Menu", + }); + + await userEvent.click( + within(dialog).getByRole("tab", { name: /columns/i }) + ); + + // snapshot the menu + await expect(dialog).toBeInTheDocument(); + } +}; + +export const ColumnMenuNumberFilter: StoryObj = () => { + return ; +}; +ColumnMenuNumberFilter.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const nameHeaderCells = await canvas.findAllByText("Population"); + + for (const cell of nameHeaderCells) { + const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!; + + await userEvent.click( + cell + .closest(".ag-header-cell-comp-wrapper")! + .querySelector(".ag-icon.ag-icon-menu")! + ); + + const dialog = within(gridRoot).getByRole("dialog", { + name: "Column Menu", + }); + + await userEvent.click(within(dialog).getByRole("tab", { name: /filter/i })); + + await userEvent.click( + await within(dialog).findByRole("combobox", { + name: "Filtering operator", + }) + ); + + const dropDown = within(gridRoot).getByRole("listbox", { + name: "Select Field", + }); + await userEvent.click( + within(dropDown).getByRole("option", { name: "Not blank" }) + ); + + // Snapshot radio buttons, which comes from icon in v31 + await expect(within(dialog).getByText("AND")).toBeInTheDocument(); + await expect(within(dialog).getByText("OR")).toBeInTheDocument(); + } +}; + +export const ToolPanelColumns: StoryObj = () => { + return ; +}; +ToolPanelColumns.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const columnsTabs = await canvas.findAllByRole("tab", { name: "Columns" }); + + for (const tab of columnsTabs) { + await userEvent.click(tab); + + await expect(tab).toHaveAttribute("aria-expanded", "true"); + } +}; + +export const EditableCellFocus: StoryObj = () => { + return ; +}; +EditableCellFocus.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const alaskaPopulationCells = await canvas.findAllByText("5492139"); + + for (const cell of alaskaPopulationCells) { + await userEvent.click(cell); + + await expect(cell).toHaveClass("ag-cell-focus", "editable-cell"); + } +}; + +export const ContextMenu: StoryObj = () => { + return ; +}; +ContextMenu.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // Do findAll here so this will also work in `side-by-side` mode + const azCells = await canvas.findAllByText("AZ"); + + for (const cell of azCells) { + await userEvent.pointer({ keys: "[MouseRight>]", target: cell }); + + const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!; + await expect( + within(gridRoot).getByRole("presentation", { name: "Context Menu" }) + ).toBeInTheDocument(); + } +}; + +export const FloatingFilterFocus: StoryObj = () => { + return ; +}; +FloatingFilterFocus.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const codeFloatingFilterInputs = await canvas.findAllByRole("textbox", { + name: "Code Filter Input", + }); + for (const input of codeFloatingFilterInputs) { + await userEvent.click(input); + + // Snapshot floating input focus ring + } +}; + +// Regression of #3351, icon should match Default +export const WithExtraContainerClass = () => { + return ; +}; diff --git a/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx b/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx new file mode 100644 index 00000000000..87d59cc7aaa --- /dev/null +++ b/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx @@ -0,0 +1,51 @@ +import { AgGridReact } from "ag-grid-react"; + +import "ag-grid-community/styles/ag-grid.css"; +import "../salt-ag-theme.css"; + +export default { + title: "Ag Grid/Ag Grid Theme", + component: AgGridReact, + parameters: { + // Make all ag grid examples go through chromatic + chromatic: { + disableSnapshot: false, + delay: 200, + // double default width from `useAgGridHelpers` given we're using side-by-side mode, + panel wrapper padding + modes: { + dual: { mode: "side-by-side", viewport: { width: 800 * 2 + 24 * 4 } }, + }, + }, + }, +}; + +export { + CheckboxSelection, + Coloration, + ColumnGroup, + ColumnSpanning, + ContextMenu, + CustomFilter, + Default, + DragRowOrder, + FloatingFilter, + HDCompact, + Icons, + InfiniteScroll, + LoadingOverlay, + MasterDetail, + NoDataOverlay, + Pagination, + ParentChildRows, + PinnedRows, + RangeSelection, + RowGroupPanel, + RowGrouping, + SortAndFilter, + StatusBar, + ToolPanel, + VariantSecondary, + VariantZebra, + WrappedCell, + WrappedHeader, +} from "../src/examples"; diff --git a/packages/ag-grid-theme/stories/ag-grid.stories.tsx b/packages/ag-grid-theme/stories/ag-grid.stories.tsx deleted file mode 100644 index c8665dbe8ff..00000000000 --- a/packages/ag-grid-theme/stories/ag-grid.stories.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { AgGridReact } from "ag-grid-react"; -import { userEvent, within, expect } from "@storybook/test"; -import type { StoryObj } from "@storybook/react"; -import { Default } from "./examples"; - -import "ag-grid-community/dist/styles/ag-grid.css"; -import "ag-grid-community/dist/styles/ag-theme-material.css"; -import "../uitk-ag-theme.css"; -import "../salt-ag-theme.css"; - -export default { - title: "Ag Grid/Ag Grid Theme", - component: AgGridReact, - parameters: { - // Make all ag grid examples go through chromatic - chromatic: { - disableSnapshot: false, - delay: 200, - // double default width from `useAgGridHelpers` given we're using side-by-side mode, + panel wrapper padding - modes: { - dual: { mode: "side-by-side", viewport: { width: 800 * 2 + 24 * 4 } }, - }, - }, - }, -}; - -export const BasicGrid: StoryObj = () => { - return ; -}; -BasicGrid.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - - // Do findAll here so this will also work in `side-by-side` mode - const azCells = await canvas.findAllByText("AZ"); - - for (const cell of azCells) { - await userEvent.click(cell); - - // classname has focus ring, which we want to snapshot, #3290 - await expect(cell).toHaveClass("ag-cell-range-single-cell"); - } -}; - -export { - CheckboxSelection, - Coloration, - ColumnGroup, - ColumnSpanning, - ContextMenu, - CustomFilter, - DragRowOrder, - Icons, - FloatingFilter, - HDCompact, - InfiniteScroll, - LoadingOverlay, - MasterDetail, - NoDataOverlay, - Pagination, - ParentChildRows, - RowGrouping, - RowGroupPanel, - PinnedRows, - SortAndFilter, - StatusBar, - VariantSecondary, - VariantZebra, - WrappedCell, - WrappedHeader, -} from "./examples"; - -// Regression of #3351, icon should match Default -export const WithExtraContainerClass = () => { - return ; -}; diff --git a/packages/ag-grid-theme/stories/dependencies/ThemeSwitcher.tsx b/packages/ag-grid-theme/stories/dependencies/ThemeSwitcher.tsx deleted file mode 100644 index b10689e0f95..00000000000 --- a/packages/ag-grid-theme/stories/dependencies/ThemeSwitcher.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { SyntheticEvent, useState } from "react"; -import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core"; - -export const useAgGridThemeSwitcher = () => { - const [themeName, setThemeName] = useState("salt"); - - return { - switcher: , - themeName, - }; -}; - -export const AgGridThemeSwitcher = ({ - onThemeSelect, -}: { - onThemeSelect: (themeName: string) => void; -}) => { - const [theme, setTheme] = useState("salt"); - - const onChange = (event: SyntheticEvent) => { - setTheme(event.currentTarget.value); - onThemeSelect(event.currentTarget.value); - }; - - return ( -
- - Salt - UITK - -
- ); -}; diff --git a/packages/ag-grid-theme/stories/examples/Icons.css b/packages/ag-grid-theme/stories/examples/Icons.css deleted file mode 100644 index e6212e2bfa9..00000000000 --- a/packages/ag-grid-theme/stories/examples/Icons.css +++ /dev/null @@ -1,23 +0,0 @@ -div[class^="ag-theme-salt"]:before { - font-family: "salt-icons"; -} - -div[class^="ag-theme-uitk"]:before { - font-family: "uitk-icons"; -} - -div[class^="ag-theme-salt"]:before, -div[class^="ag-theme-uitk"]:before { - content: var(--icon-content); - margin-right: var(--salt-spacing-100); -} - -@font-face { - font-family: "salt-icons"; - src: url(../../fonts/salt-icons.woff) format("woff"); -} - -@font-face { - font-family: "uitk-icons"; - src: url(../../fonts/jpmuitk-icons.woff) format("woff"); -} diff --git a/packages/ag-grid-theme/stories/examples/Icons.tsx b/packages/ag-grid-theme/stories/examples/Icons.tsx deleted file mode 100644 index 1288c8016e3..00000000000 --- a/packages/ag-grid-theme/stories/examples/Icons.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { useComponentCssInjection } from "@salt-ds/styles"; -import { useWindow } from "@salt-ds/window"; -import saltStyles from "../../css/_export-salt-icons.module.scss"; -import uitkStyles from "../../css/_export-uitk-icons.module.scss"; -import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; -import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; - -import { CSSProperties } from "react"; -import iconCss from "./Icons.css"; - -const Icons = () => { - const targetWindow = useWindow(); - useComponentCssInjection({ - testId: "salt-ag-grid-icons", - css: iconCss, - window: targetWindow, - }); - const { themeName } = useAgGridThemeSwitcher(); - - const { containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-${themeName}`, - }); - const styles = themeName === "salt" ? saltStyles : uitkStyles; - - return ( - <> - {Object.keys(styles).map((key) => { - if (styles[key].startsWith('"')) { - return ( -
- {key} -
- ); - } - })} - - ); -}; - -Icons.parameters = { - chromatic: { disableSnapshot: false }, -}; - -export default Icons; diff --git a/packages/ag-grid-theme/stories/examples/VariantSecondary.tsx b/packages/ag-grid-theme/stories/examples/VariantSecondary.tsx deleted file mode 100644 index 39570a1766e..00000000000 --- a/packages/ag-grid-theme/stories/examples/VariantSecondary.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Banner, BannerContent, FlexLayout } from "@salt-ds/core"; -import { clsx } from "clsx"; -import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import dataGridExampleData from "../dependencies/dataGridExampleData"; -import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; -import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; - -const VariantSecondary = (props: AgGridReactProps) => { - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-salt`, - }); - const { className } = containerProps; - - return ( - - - Variants are available in Salt theme only - -
- -
- - ); -}; - -VariantSecondary.parameters = { - chromatic: { disableSnapshot: false }, -}; - -export default VariantSecondary; diff --git a/packages/ag-grid-theme/stories/examples/VariantZebra.tsx b/packages/ag-grid-theme/stories/examples/VariantZebra.tsx deleted file mode 100644 index 4b4fc38cff5..00000000000 --- a/packages/ag-grid-theme/stories/examples/VariantZebra.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Banner, BannerContent, FlexLayout } from "@salt-ds/core"; -import { clsx } from "clsx"; -import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import dataGridExampleData from "../dependencies/dataGridExampleData"; -import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; -import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; - -const VariantZebra = (props: AgGridReactProps) => { - const { agGridProps, containerProps } = useAgGridHelpers({ - agThemeName: `ag-theme-salt`, - }); - const { className } = containerProps; - - return ( - - - Variants are available in Salt theme only - -
- -
- - ); -}; - -VariantZebra.parameters = { - chromatic: { disableSnapshot: false }, -}; - -export default VariantZebra; diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index 85bb8fe7d79..652ea62fd8d 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -73,12 +73,11 @@ import { Icon as PillIcon, } from "../../../core/stories/pill/pill.stories"; import { Default as OverlayDefault } from "../../../core/stories/overlay/overlay.stories"; -import AgGridThemeDefault from "../../../ag-grid-theme/stories/examples/Default"; -import AgGridThemeZebra from "../../../ag-grid-theme/stories/examples/VariantZebra"; -import AgGridThemeHDCompact from "../../../ag-grid-theme/stories/examples/HDCompact"; +import AgGridThemeDefault from "../../../ag-grid-theme/src/examples/Default"; +import AgGridThemeZebra from "../../../ag-grid-theme/src/examples/VariantZebra"; +import AgGridThemeHDCompact from "../../../ag-grid-theme/src/examples/HDCompact"; -import "ag-grid-community/dist/styles/ag-grid.css"; -import "ag-grid-community/dist/styles/ag-theme-material.css"; +import "ag-grid-community/styles/ag-grid.css"; import "../../../../dist/salt-ds-ag-grid-theme/salt-ag-theme.css"; export default { diff --git a/packages/theme/css/characteristics/overlayable.css b/packages/theme/css/characteristics/overlayable.css index cd580d81f7e..e81e1484472 100644 --- a/packages/theme/css/characteristics/overlayable.css +++ b/packages/theme/css/characteristics/overlayable.css @@ -8,4 +8,5 @@ --salt-overlayable-shadow-modal: var(--salt-shadow-500); --salt-overlayable-background: var(--salt-palette-neutral-backdrop); + --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection); } diff --git a/packages/theme/css/foundations/fade.css b/packages/theme/css/foundations/fade.css index ed2797dffad..c40a30e6421 100644 --- a/packages/theme/css/foundations/fade.css +++ b/packages/theme/css/foundations/fade.css @@ -64,5 +64,7 @@ --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border)); --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8)); + --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15)); --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8)); + --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15)); } diff --git a/packages/theme/css/palette/neutral.css b/packages/theme/css/palette/neutral.css index f986cb81e36..a73f2990267 100644 --- a/packages/theme/css/palette/neutral.css +++ b/packages/theme/css/palette/neutral.css @@ -17,6 +17,7 @@ --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop); --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary); --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary); + --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection); } .salt-theme[data-mode="dark"] { @@ -38,4 +39,5 @@ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop); --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary); --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary); + --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection); } diff --git a/site/docs/components/ag-grid-theme/examples.mdx b/site/docs/components/ag-grid-theme/examples.mdx index 9c22c5dd822..df25a6cb756 100644 --- a/site/docs/components/ag-grid-theme/examples.mdx +++ b/site/docs/components/ag-grid-theme/examples.mdx @@ -107,7 +107,8 @@ The page continues to load as the user scrolls down the table. ## Loading overlay -This feature communicates to the user that the page is loading. +This feature communicates to the user that the page is loading. Use `loadingOverlayComponent` +from ag grid to provide a custom overlay component. diff --git a/site/docs/components/ag-grid-theme/index.mdx b/site/docs/components/ag-grid-theme/index.mdx index b7761727643..e73e7f05151 100644 --- a/site/docs/components/ag-grid-theme/index.mdx +++ b/site/docs/components/ag-grid-theme/index.mdx @@ -1,7 +1,7 @@ --- title: AG Grid theme data: - description: "AG Grid theme is a package that adds Salt theme styles to AG Grid. The package contains CSS files only, and works with AG Grid versions 25-28." + description: AG Grid Theme is a package that adds Salt theme styles to AG Grid. The package contains CSS files only, and works with AG Grid from version 28 upwards which has CSS variable support. sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/ag-grid-theme" package: name: "@salt-ds/ag-grid-theme" diff --git a/site/docs/components/ag-grid-theme/usage.mdx b/site/docs/components/ag-grid-theme/usage.mdx index c6c4031d5ee..d9e4378c289 100644 --- a/site/docs/components/ag-grid-theme/usage.mdx +++ b/site/docs/components/ag-grid-theme/usage.mdx @@ -16,7 +16,7 @@ When you want to use the Salt theme with AG Grid. ### When not to use -When you want to use a component that is not related to AG Grid. Instead, use Grid. +When you want to use a component that is not related to AG Grid. ## Import @@ -37,7 +37,7 @@ npm install @salt-ds/ag-grid-theme To import the Salt AG Grid theme, use: ```js -import "ag-grid-community/dist/styles/ag-grid.css"; +import "ag-grid-community/styles/ag-grid.css"; import "@salt-ds/ag-grid-theme/salt-ag-theme.css"; ``` @@ -52,29 +52,20 @@ Then wrap your AG Grid with the corresponding class names shown below:
``` -For light [mode](/salt/foundations/modes), use these CSS class names for each [density](/salt/foundations/density): +For light mode, use these CSS class name `.ag-theme-salt-light`. -```js -.ag-theme-salt-high-compact-light -.ag-theme-salt-high-light -.ag-theme-salt-medium-light -.ag-theme-salt-low-light -.ag-theme-salt-touch-light -``` +For dark mode, use these CSS class name `.ag-theme-salt-dark`. -For dark [mode](/salt/foundations/modes), use these CSS class names for each [density](/salt/foundations/density): +For `compact` version, use these CSS class names: -```js -.ag-theme-salt-high-compact-dark -.ag-theme-salt-high-dark -.ag-theme-salt-medium-dark -.ag-theme-salt-low-dark -.ag-theme-salt-touch-dark +``` +.ag-theme-salt-compact-light +.ag-theme-salt-compact-dark ``` -For variants, use these CSS class names: +For variants add additional CSS class names: -```js +``` .ag-theme-salt-variant-secondary .ag-theme-salt-variant-zebra ``` diff --git a/site/src/components/components/AGThemeProvider.tsx b/site/src/components/components/AGThemeProvider.tsx index ab897d42826..a1f6286c1c7 100644 --- a/site/src/components/components/AGThemeProvider.tsx +++ b/site/src/components/components/AGThemeProvider.tsx @@ -1,7 +1,6 @@ import { FC, ReactNode } from "react"; -import "ag-grid-community/dist/styles/ag-grid.css"; -import "ag-grid-community/dist/styles/ag-theme-material.css"; +import "ag-grid-community/styles/ag-grid.css"; import "@salt-ds/ag-grid-theme/salt-ag-theme.css"; interface AGThemeProviderProps { diff --git a/site/src/examples/ag-grid-theme/CheckboxSelection.tsx b/site/src/examples/ag-grid-theme/CheckboxSelection.tsx index 2fb641b6369..f8e1fc680b3 100644 --- a/site/src/examples/ag-grid-theme/CheckboxSelection.tsx +++ b/site/src/examples/ag-grid-theme/CheckboxSelection.tsx @@ -1,8 +1,11 @@ import { AgGridReact } from "ag-grid-react"; import { useAgGridHelpers } from "./useAgGridHelpers"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultColumns, defaultData } from "./data"; export const CheckboxSelection = () => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/Coloration.tsx b/site/src/examples/ag-grid-theme/Coloration.tsx index a95dbc21811..f3b91d32c24 100644 --- a/site/src/examples/ag-grid-theme/Coloration.tsx +++ b/site/src/examples/ag-grid-theme/Coloration.tsx @@ -1,8 +1,11 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridHelpers } from "./useAgGridHelpers"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { coloredColumns, defaultData } from "./data"; +import { useAgGridHelpers } from "./useAgGridHelpers"; export const Coloration = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { containerProps, agGridProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/ColumnGroup.tsx b/site/src/examples/ag-grid-theme/ColumnGroup.tsx index 9106b278c38..21b1373ccbf 100644 --- a/site/src/examples/ag-grid-theme/ColumnGroup.tsx +++ b/site/src/examples/ag-grid-theme/ColumnGroup.tsx @@ -1,8 +1,11 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultData, groupedColumns } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const ColumnGroup = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { containerProps, agGridProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/ColumnSpanning.tsx b/site/src/examples/ag-grid-theme/ColumnSpanning.tsx index 03c6c18baa3..d1d5b5e0039 100644 --- a/site/src/examples/ag-grid-theme/ColumnSpanning.tsx +++ b/site/src/examples/ag-grid-theme/ColumnSpanning.tsx @@ -1,8 +1,11 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultData, spannedColumns } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const ColumnSpanning = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { containerProps, agGridProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/ContextMenu.tsx b/site/src/examples/ag-grid-theme/ContextMenu.tsx index f0af914573b..164fc7249d6 100644 --- a/site/src/examples/ag-grid-theme/ContextMenu.tsx +++ b/site/src/examples/ag-grid-theme/ContextMenu.tsx @@ -1,149 +1,152 @@ import { GetContextMenuItemsParams } from "ag-grid-community"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { defaultData, defaultColumns } from "./data"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data +import { defaultColumns, defaultData } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const ContextMenu = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { containerProps, agGridProps } = useAgGridHelpers(); - const getContextMenuItems = (params: GetContextMenuItemsParams) => { - const result = [ - { - name: `Alert ${params.value}`, - action() { - window.alert(`Alerting about ${params.value}`); - }, - cssClasses: ["redFont", "bold"], - }, - { - name: "Always Disabled", - disabled: true, - tooltip: - "Very long tooltip, did I mention that I am very long, well I am! Long! Very Long!", + return ( +
+ +
+ ); +}; + +function getContextMenuItems(params: GetContextMenuItemsParams) { + const result = [ + { + name: `Alert ${params.value}`, + action() { + window.alert(`Alerting about ${params.value}`); }, - { - name: "Country", - subMenu: [ - { - name: "Ireland", - action() { - console.log("Ireland was pressed"); - }, + cssClasses: ["redFont", "bold"], + }, + { + name: "Always Disabled", + disabled: true, + tooltip: + "Very long tooltip, did I mention that I am very long, well I am! Long! Very Long!", + }, + { + name: "Country", + subMenu: [ + { + name: "Ireland", + action() { + console.log("Ireland was pressed"); }, - { - name: "UK", - action() { - console.log("UK was pressed"); - }, + }, + { + name: "UK", + action() { + console.log("UK was pressed"); }, - { - name: "France", - action() { - console.log("France was pressed"); - }, + }, + { + name: "France", + action() { + console.log("France was pressed"); }, - ], - }, - { - name: "Person", - subMenu: [ - { - name: "Niall", - action() { - console.log("Niall was pressed"); - }, + }, + ], + }, + { + name: "Person", + subMenu: [ + { + name: "Niall", + action() { + console.log("Niall was pressed"); }, - { - name: "Sean", - action() { - console.log("Sean was pressed"); - }, + }, + { + name: "Sean", + action() { + console.log("Sean was pressed"); }, - { - name: "John", - action() { - console.log("John was pressed"); - }, + }, + { + name: "John", + action() { + console.log("John was pressed"); }, - { - name: "Alberto", - action() { - console.log("Alberto was pressed"); - }, + }, + { + name: "Alberto", + action() { + console.log("Alberto was pressed"); }, - { - name: "Tony", - action() { - console.log("Tony was pressed"); - }, + }, + { + name: "Tony", + action() { + console.log("Tony was pressed"); }, - { - name: "Andrew", - action() { - console.log("Andrew was pressed"); - }, + }, + { + name: "Andrew", + action() { + console.log("Andrew was pressed"); }, - { - name: "Kev", - action() { - console.log("Kev was pressed"); - }, + }, + { + name: "Kev", + action() { + console.log("Kev was pressed"); }, - { - name: "Will", - action() { - console.log("Will was pressed"); - }, + }, + { + name: "Will", + action() { + console.log("Will was pressed"); }, - { - name: "Armaan", - action() { - console.log("Armaan was pressed"); - }, + }, + { + name: "Armaan", + action() { + console.log("Armaan was pressed"); }, - ], - }, - "separator", - { - name: "Windows", - shortcut: "Alt + W", - action() { - console.log("Windows Item Selected"); }, - icon: 'windows logo', + ], + }, + "separator", + { + name: "Windows", + shortcut: "Alt + W", + action() { + console.log("Windows Item Selected"); }, - { - name: "Mac", - shortcut: "Alt + M", - action() { - console.log("Mac Item Selected"); - }, - icon: 'mac logo', + icon: 'windows logo', + }, + { + name: "Mac", + shortcut: "Alt + M", + action() { + console.log("Mac Item Selected"); }, - "separator", - { - name: "Checked", - checked: true, - action() { - console.log("Checked Selected"); - }, - icon: 'windows logo', + icon: 'mac logo', + }, + "separator", + { + name: "Checked", + checked: true, + action() { + console.log("Checked Selected"); }, - "copy", - ]; - return result; - }; - - return ( -
- -
- ); -}; + icon: 'windows logo', + }, + "copy", + ]; + return result; +} diff --git a/site/src/examples/ag-grid-theme/CustomFilter.tsx b/site/src/examples/ag-grid-theme/CustomFilter.tsx index be843380048..c76fc21c905 100644 --- a/site/src/examples/ag-grid-theme/CustomFilter.tsx +++ b/site/src/examples/ag-grid-theme/CustomFilter.tsx @@ -1,65 +1,57 @@ -import { AgGridReact } from "ag-grid-react"; -import React, { useEffect, useState } from "react"; import { Button, FlowLayout, StackLayout } from "@salt-ds/core"; -import { defaultData, customFilterColumns } from "./data"; +import { AgGridReact } from "ag-grid-react"; +import { useState } from "react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data +import { customFilterColumns, defaultData } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const CustomFilter = () => { const [hasSavedState, setHasSavedState] = useState(true); - const { api, isGridReady, agGridProps, containerProps } = useAgGridHelpers(); - - useEffect(() => { - if (isGridReady) { - api?.sizeColumnsToFit(); - } - }, [isGridReady]); - - const handlePopMt100kClick = () => { - const popMt100kComponent = api!.getFilterInstance("population")!; - api!.setFilterModel(null); + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts + const { api, agGridProps, containerProps } = useAgGridHelpers(); - popMt100kComponent.setModel({ + const handlePopMt100kClick = async () => { + await api?.setColumnFilterModel("population", { type: "greaterThan", filter: 100000, filterTo: null, }); - api!.onFilterChanged(); + api?.onFilterChanged(); setHasSavedState(false); }; - const handlePopLt100kClick = () => { - const popLt100kComponent = api!.getFilterInstance("population")!; - api!.setFilterModel(null); - - popLt100kComponent.setModel({ + const handlePopLt100kClick = async () => { + await api?.setColumnFilterModel("population", { type: "lessThan", filter: 100000, filterTo: null, }); - api!.onFilterChanged(); + api?.onFilterChanged(); setHasSavedState(false); }; - const filterNewYork = () => { - const filterNewYork = api!.getFilterInstance("name")!; - api!.setFilterModel(null); - filterNewYork.setModel({ + const filterNewYork = async () => { + await api?.setColumnFilterModel("name", { type: "equals", filter: "New York", filterTo: null, }); - api!.onFilterChanged(); + + api?.onFilterChanged(); setHasSavedState(false); }; const saveState = () => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any (window as any).filterState = api!.getFilterModel(); setHasSavedState(false); }; const restoreState = () => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument api!.setFilterModel((window as any).filterState); setHasSavedState(true); }; diff --git a/site/src/examples/ag-grid-theme/Default.tsx b/site/src/examples/ag-grid-theme/Default.tsx index ccd1ba51ad5..fbef45a3cd1 100644 --- a/site/src/examples/ag-grid-theme/Default.tsx +++ b/site/src/examples/ag-grid-theme/Default.tsx @@ -1,35 +1,64 @@ +import { useDensity, useTheme } from "@salt-ds/core"; +import { GridReadyEvent } from "ag-grid-community"; import { AgGridReact } from "ag-grid-react"; -import { ReactElement } from "react"; +import { ReactElement, useMemo } from "react"; import { defaultData } from "./data"; -import { useAgGridHelpers } from "./useAgGridHelpers"; + +const columnDefs = [ + { + headerName: "Name", + field: "name", + filterParams: { + buttons: ["reset", "apply"], + }, + editable: false, + autoHeight: true, + }, + { + headerName: "Code", + field: "code", + }, + { + headerName: "Capital", + field: "capital", + }, +]; export const Default = (): ReactElement => { - const { containerProps, agGridProps } = useAgGridHelpers(); + const { mode } = useTheme(); + const density = useDensity(); + + const onGridReady = ({ api }: GridReadyEvent) => { + api.sizeColumnsToFit(); + }; + + const rowHeight = useMemo(() => { + switch (density) { + case "high": + return 24; + case "medium": + return 36; + case "low": + return 48; + case "touch": + return 60; + default: + return 20; + } + }, [density]); return ( -
+
); diff --git a/site/src/examples/ag-grid-theme/DragRowOrder.tsx b/site/src/examples/ag-grid-theme/DragRowOrder.tsx index 63367c214b3..ffd1293e995 100644 --- a/site/src/examples/ag-grid-theme/DragRowOrder.tsx +++ b/site/src/examples/ag-grid-theme/DragRowOrder.tsx @@ -1,8 +1,11 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultData, rowDragColumns } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const DragRowOrder = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/FloatingFilter.tsx b/site/src/examples/ag-grid-theme/FloatingFilter.tsx index 7a60fa5fdb2..9d057a46d9f 100644 --- a/site/src/examples/ag-grid-theme/FloatingFilter.tsx +++ b/site/src/examples/ag-grid-theme/FloatingFilter.tsx @@ -1,8 +1,11 @@ import { AgGridReact } from "ag-grid-react"; -import { useAgGridHelpers } from "./useAgGridHelpers"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { customFilterColumns, defaultData } from "./data"; +import { useAgGridHelpers } from "./useAgGridHelpers"; export const FloatingFilter = () => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/HDCompact.tsx b/site/src/examples/ag-grid-theme/HDCompact.tsx index ae4bb9283d2..2c64d3bb502 100644 --- a/site/src/examples/ag-grid-theme/HDCompact.tsx +++ b/site/src/examples/ag-grid-theme/HDCompact.tsx @@ -1,16 +1,14 @@ -import { ChangeEvent, useEffect, useState } from "react"; -import { AgGridReact } from "ag-grid-react"; import { - StackLayout, - Checkbox, - useDensity, - useTheme, - SaltProvider, Banner, BannerContent, + SaltProvider, + StackLayout, + useTheme, } from "@salt-ds/core"; -import { useAgGridHelpers } from "./useAgGridHelpers"; +import { AgGridReact } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultColumns, defaultData } from "./data"; +import { useAgGridHelpers } from "./useAgGridHelpers"; const statusBar = { statusPanels: [ @@ -26,6 +24,8 @@ const statusBar = { const HDCompactGrid = () => { const { mode } = useTheme(); + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { containerProps, agGridProps } = useAgGridHelpers(true); const className = `ag-theme-salt-high-compact-${mode}`; diff --git a/site/src/examples/ag-grid-theme/InfiniteScroll.tsx b/site/src/examples/ag-grid-theme/InfiniteScroll.tsx index 58962e35295..bafe9f2746d 100644 --- a/site/src/examples/ag-grid-theme/InfiniteScroll.tsx +++ b/site/src/examples/ag-grid-theme/InfiniteScroll.tsx @@ -1,7 +1,8 @@ -import { useEffect } from "react"; -import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import { Spinner } from "@salt-ds/core"; -import { infiniteScrollColumns, defaultData } from "./data"; +import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +import { useEffect } from "react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data +import { defaultData, infiniteScrollColumns } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; const generateData = function generateData( @@ -21,13 +22,13 @@ const generateData = function generateData( const dataSourceRows = generateData(defaultData); export const InfiniteScroll = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { isGridReady, agGridProps, containerProps, api } = useAgGridHelpers(); useEffect(() => { if (isGridReady) { - api!.sizeColumnsToFit(); - - api!.setDatasource({ + api!.setGridOption("datasource", { getRows: ({ startRow, endRow, successCallback }) => { setTimeout(() => { successCallback( @@ -38,7 +39,7 @@ export const InfiniteScroll = (props: AgGridReactProps) => { }, }); } - }, [isGridReady]); + }, [api, isGridReady]); return (
@@ -55,8 +56,11 @@ export const InfiniteScroll = (props: AgGridReactProps) => { }; const infiniteScrollComponents = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any loadingRenderer(params: any) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access if (params.value !== undefined) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access return params.value; } else { return ; diff --git a/site/src/examples/ag-grid-theme/LoadingOverlay.tsx b/site/src/examples/ag-grid-theme/LoadingOverlay.tsx index db9680212c5..3a97080b0c7 100644 --- a/site/src/examples/ag-grid-theme/LoadingOverlay.tsx +++ b/site/src/examples/ag-grid-theme/LoadingOverlay.tsx @@ -1,5 +1,6 @@ import { Card, Spinner, StackLayout, Text } from "@salt-ds/core"; import { AgGridReact } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultColumns } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; @@ -15,6 +16,8 @@ const CustomOverlay = () => ( ); export const LoadingOverlay = () => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/MasterDetail.tsx b/site/src/examples/ag-grid-theme/MasterDetail.tsx index 209eebd0224..55b48d5485b 100644 --- a/site/src/examples/ag-grid-theme/MasterDetail.tsx +++ b/site/src/examples/ag-grid-theme/MasterDetail.tsx @@ -1,14 +1,44 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridHelpers } from "./useAgGridHelpers"; +import { useCallback, useRef } from "react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultData, masterDetailColumns } from "./data"; +import { useAgGridHelpers } from "./useAgGridHelpers"; export const MasterDetail = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); + const gridRef = useRef(null); + + const onFirstDataRendered = useCallback(() => { + requestAnimationFrame(function () { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const node = gridRef.current?.api.getDisplayedRowAtIndex(0); + // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access + node?.setExpanded(true); + }); + }, []); + + const detailCellRenderer = () => ( +
+ +
+ ); + return (
{ rowData={defaultData} {...agGridProps} {...props} + onFirstDataRendered={onFirstDataRendered} />
); diff --git a/site/src/examples/ag-grid-theme/NoDataOverlay.tsx b/site/src/examples/ag-grid-theme/NoDataOverlay.tsx index 474127502de..8c1c7700771 100644 --- a/site/src/examples/ag-grid-theme/NoDataOverlay.tsx +++ b/site/src/examples/ag-grid-theme/NoDataOverlay.tsx @@ -5,6 +5,7 @@ import { DialogHeader, } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultColumns } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; @@ -19,7 +20,7 @@ const CustomDialog = () => { > - You don't have permission to move or delete this file. + You don't have permission to move or delete this file. @@ -30,6 +31,8 @@ const CustomDialog = () => { }; export const NoDataOverlay = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/Pagination.tsx b/site/src/examples/ag-grid-theme/Pagination.tsx index 30d98d7b12a..d2fcba564c7 100644 --- a/site/src/examples/ag-grid-theme/Pagination.tsx +++ b/site/src/examples/ag-grid-theme/Pagination.tsx @@ -1,6 +1,7 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { useAgGridHelpers } from "./useAgGridHelpers"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultColumns, defaultData } from "./data"; +import { useAgGridHelpers } from "./useAgGridHelpers"; const generateData = (states: typeof defaultData) => states.reduce((result, row) => { @@ -12,7 +13,9 @@ const generateData = (states: typeof defaultData) => return [...result, ...data]; }, [] as typeof defaultData); -const PagedGrid = (props: AgGridReactProps) => { +export const Pagination = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( @@ -28,17 +31,3 @@ const PagedGrid = (props: AgGridReactProps) => {
); }; - -export const Pagination = () => ( -
- -
-); diff --git a/site/src/examples/ag-grid-theme/ParentChildRows.tsx b/site/src/examples/ag-grid-theme/ParentChildRows.tsx index 25e9460909b..f228fd2b324 100644 --- a/site/src/examples/ag-grid-theme/ParentChildRows.tsx +++ b/site/src/examples/ag-grid-theme/ParentChildRows.tsx @@ -1,8 +1,11 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { parentChildColumns, parentChildData } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const ParentChildRows = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( @@ -13,7 +16,9 @@ export const ParentChildRows = (props: AgGridReactProps) => { {...agGridProps} {...props} columnDefs={parentChildColumns} + // eslint-disable-next-line @typescript-eslint/no-explicit-any getDataPath={(data: any) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return return data.orgHierarchy; }} groupDefaultExpanded={-1} diff --git a/site/src/examples/ag-grid-theme/PinnedRows.tsx b/site/src/examples/ag-grid-theme/PinnedRows.tsx index f58b5af9cac..b5755a0c025 100644 --- a/site/src/examples/ag-grid-theme/PinnedRows.tsx +++ b/site/src/examples/ag-grid-theme/PinnedRows.tsx @@ -1,4 +1,5 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultColumns, defaultData } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; @@ -25,7 +26,7 @@ const headerRow = [ name: "Top", code: "Top", capital: "Top", - population: "Top", + population: 0, }, ]; @@ -49,6 +50,8 @@ export const PinnedRows = function PinnedRowsExample({ showHeader = true, ...rest }: PinnedRowsExampleProps) { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); const getColumnData = () => { diff --git a/site/src/examples/ag-grid-theme/RowGroupPanel.tsx b/site/src/examples/ag-grid-theme/RowGroupPanel.tsx index 945f52fc92b..a5f7920aa1d 100644 --- a/site/src/examples/ag-grid-theme/RowGroupPanel.tsx +++ b/site/src/examples/ag-grid-theme/RowGroupPanel.tsx @@ -1,8 +1,11 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultData, rowGroupPanelColumns } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const RowGroupPanel = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/RowGrouping.tsx b/site/src/examples/ag-grid-theme/RowGrouping.tsx index 9918196122b..fc564bcc870 100644 --- a/site/src/examples/ag-grid-theme/RowGrouping.tsx +++ b/site/src/examples/ag-grid-theme/RowGrouping.tsx @@ -1,8 +1,11 @@ import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultData, rowGroupColumns } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const RowGrouping = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/StatusBar.tsx b/site/src/examples/ag-grid-theme/StatusBar.tsx index 3f78a6c1621..c115bf5b504 100644 --- a/site/src/examples/ag-grid-theme/StatusBar.tsx +++ b/site/src/examples/ag-grid-theme/StatusBar.tsx @@ -1,5 +1,6 @@ import { Text } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultColumns, defaultData } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; @@ -16,6 +17,8 @@ const statusBar = { }; export const StatusBar = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/Variants.tsx b/site/src/examples/ag-grid-theme/Variants.tsx index a7e32655cf2..816a8d1399f 100644 --- a/site/src/examples/ag-grid-theme/Variants.tsx +++ b/site/src/examples/ag-grid-theme/Variants.tsx @@ -1,18 +1,15 @@ -import { - FlexItem, - FlexLayout, - StackLayout, - ToggleButton, - ToggleButtonGroup, -} from "@salt-ds/core"; +import { StackLayout, ToggleButton, ToggleButtonGroup } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import { clsx } from "clsx"; import { SyntheticEvent, useState } from "react"; +// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/ag-grid-theme/data import { defaultColumns, defaultData } from "./data"; import { useAgGridHelpers } from "./useAgGridHelpers"; export const Variants = (props: AgGridReactProps) => { const [selected, setSelected] = useState("primary"); + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { agGridProps, containerProps } = useAgGridHelpers(); const onChange = (event: SyntheticEvent) => { @@ -21,19 +18,12 @@ export const Variants = (props: AgGridReactProps) => { return ( - - - - - Primary - Secondary - Zebra - - - - + + Primary + Secondary + Zebra +
{ + // We've created a local custom hook to set the rows and column sizes. + // refer to https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts const { api, agGridProps, containerProps, isGridReady } = useAgGridHelpers(); const { defaultColDef: propsColDefs, ...restAgGridProps } = agGridProps; @@ -24,10 +27,10 @@ export const WrappedHeader = (props: AgGridReactProps) => { if (isGridReady) { api?.sizeColumnsToFit(); } - }, [isGridReady]); + }, [api, isGridReady]); return ( -
+
{ defaultColDef={{ ...propsColDefs, autoHeaderHeight: true, + wrapHeaderText: true, }} {...restAgGridProps} {...props} diff --git a/site/src/examples/ag-grid-theme/data/customFilterColumns.ts b/site/src/examples/ag-grid-theme/data/customFilterColumns.ts index 7ade21c9623..08aafd6f232 100644 --- a/site/src/examples/ag-grid-theme/data/customFilterColumns.ts +++ b/site/src/examples/ag-grid-theme/data/customFilterColumns.ts @@ -5,7 +5,7 @@ export const customFilterColumns: ColDef[] = [ headerName: "Name", field: "name", filter: "agTextColumnFilter", - suppressMenu: true, + suppressHeaderMenuButton: true, pinned: "right", floatingFilter: true, width: 100, @@ -16,21 +16,21 @@ export const customFilterColumns: ColDef[] = [ field: "code", filter: "agTextColumnFilter", minWidth: 120, - suppressMenu: true, + suppressHeaderMenuButton: true, floatingFilter: true, }, { headerName: "Capital", field: "capital", filter: "agSetColumnFilter", - suppressMenu: true, + suppressHeaderMenuButton: true, floatingFilter: true, }, { headerName: "Population", field: "population", filter: "agNumberColumnFilter", - suppressMenu: true, + suppressHeaderMenuButton: true, floatingFilter: true, cellClass: ["numeric-cell"], }, diff --git a/site/src/examples/ag-grid-theme/data/defaultColumns.ts b/site/src/examples/ag-grid-theme/data/defaultColumns.ts index 7e67cad33a6..388bcb812fe 100644 --- a/site/src/examples/ag-grid-theme/data/defaultColumns.ts +++ b/site/src/examples/ag-grid-theme/data/defaultColumns.ts @@ -5,10 +5,11 @@ export const defaultColumns: ColDef[] = [ headerName: "", field: "on", width: 70, + flex: 1, checkboxSelection: true, headerCheckboxSelection: true, pinned: "left", - suppressMenu: true, + suppressHeaderMenuButton: true, resizable: false, suppressColumnsToolPanel: true, }, @@ -55,7 +56,6 @@ export const defaultColumns: ColDef[] = [ }, { headerName: "Date", - type: "dateColumn", field: "date", filter: "agDateColumnFilter", }, diff --git a/site/src/examples/ag-grid-theme/data/groupedColumns.ts b/site/src/examples/ag-grid-theme/data/groupedColumns.ts index 44078f5d31f..bd5d3371129 100644 --- a/site/src/examples/ag-grid-theme/data/groupedColumns.ts +++ b/site/src/examples/ag-grid-theme/data/groupedColumns.ts @@ -10,7 +10,7 @@ export const groupedColumns = ( headerCheckboxSelection: true, width: 38, pinned: "left", - suppressMenu: true, + suppressHeaderMenuButton: true, }, { headerName: groupName, diff --git a/site/src/examples/ag-grid-theme/data/wrappedColumns.ts b/site/src/examples/ag-grid-theme/data/wrappedColumns.ts index a102e18caeb..d6cb2a0c835 100644 --- a/site/src/examples/ag-grid-theme/data/wrappedColumns.ts +++ b/site/src/examples/ag-grid-theme/data/wrappedColumns.ts @@ -8,7 +8,7 @@ export const wrappedColumns: ColDef[] = [ checkboxSelection: true, headerCheckboxSelection: true, pinned: "right", - suppressMenu: true, + suppressHeaderMenuButton: true, }, { headerName: "Name of State", @@ -19,7 +19,7 @@ export const wrappedColumns: ColDef[] = [ }, editable: false, pinned: "left", - suppressMenu: true, + suppressHeaderMenuButton: true, }, { headerName: "State code", @@ -42,7 +42,6 @@ export const wrappedColumns: ColDef[] = [ }, { headerName: "Date", - type: "dateColumn", field: "date", filter: "agDateColumnFilter", width: 160, diff --git a/site/src/examples/ag-grid-theme/useAgGridHelpers.ts b/site/src/examples/ag-grid-theme/useAgGridHelpers.ts index bcdc86c1d5d..7838d231fba 100644 --- a/site/src/examples/ag-grid-theme/useAgGridHelpers.ts +++ b/site/src/examples/ag-grid-theme/useAgGridHelpers.ts @@ -1,8 +1,8 @@ -import { HTMLAttributes, useEffect, useMemo, useRef, useState } from "react"; -import { AgGridReactProps } from "ag-grid-react"; -import { ColumnApi, GridApi, GridReadyEvent } from "ag-grid-community"; import { useDensity, useTheme } from "@salt-ds/core"; +import { ColumnApi, GridApi, GridReadyEvent } from "ag-grid-community"; import { LicenseManager } from "ag-grid-enterprise"; +import { AgGridReactProps } from "ag-grid-react"; +import { HTMLAttributes, useMemo, useRef, useState } from "react"; LicenseManager.setLicenseKey("your license key"); @@ -12,6 +12,9 @@ export function useAgGridHelpers(compact = false): { agGridProps: AgGridReactProps; isGridReady: boolean; api?: GridApi; + /** + * @deprecated — Use methods via the grid api instead. + */ columnApi?: ColumnApi; compact?: boolean; } { @@ -21,23 +24,23 @@ export function useAgGridHelpers(compact = false): { const { mode } = useTheme(); const [rowHeight, listItemHeight] = useMemo(() => { - switch (["ag-theme-salt", density].join("-")) { - case compact && "ag-theme-salt-high": + switch (density) { + case compact && "high": return [20, 20]; - case "ag-theme-salt-high": + case "high": return [24, 24]; - case "ag-theme-salt-medium": + case "medium": return [36, 36]; - case "ag-theme-salt-low": + case "low": return [48, 48]; - case "ag-theme-salt-touch": + case "touch": return [60, 60]; default: return [20, 24]; } }, [density, compact]); - const className = `ag-theme-salt-${density}${ + const className = `ag-theme-salt${ compact && density === "high" ? `-compact` : `` }-${mode}`; @@ -47,18 +50,6 @@ export function useAgGridHelpers(compact = false): { setGridReady(true); }; - useEffect(() => { - // setHeaderHeight doesn't work if not in setTimeout - setTimeout(() => { - if (isGridReady) { - apiRef.current!.api.resetRowHeights(); - apiRef.current!.api.setHeaderHeight(rowHeight); - apiRef.current!.api.setFloatingFiltersHeight(rowHeight); - // TODO how to set listItemHeight as the "ag-filter-virtual-list-item" height? Issue 2479 - } - }, 0); - }, [rowHeight, isGridReady, listItemHeight]); - return { containerProps: { className, diff --git a/site/src/examples/drawer/BottomDrawer.tsx b/site/src/examples/drawer/BottomDrawer.tsx index 641cdba95cb..3439e67fae9 100644 --- a/site/src/examples/drawer/BottomDrawer.tsx +++ b/site/src/examples/drawer/BottomDrawer.tsx @@ -19,21 +19,21 @@ const columns = [ { headerName: "Market Type", field: "market", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, }, { headerName: "AUC", field: "auc", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, }, { headerName: "Price 1", field: "price1", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, editable: true, cellClass: ["editable-cell", "numeric-cell"], @@ -42,7 +42,7 @@ const columns = [ headerName: "Threshold 1", field: "threshold1", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, editable: true, cellClass: ["editable-cell", "numeric-cell"], @@ -51,7 +51,7 @@ const columns = [ headerName: "Price 2", field: "price2", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, editable: true, cellClass: ["editable-cell", "numeric-cell"], @@ -60,7 +60,7 @@ const columns = [ headerName: "Threshold 2", field: "threshold2", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, editable: true, cellClass: ["editable-cell", "numeric-cell"], @@ -69,7 +69,7 @@ const columns = [ headerName: "Price 3", field: "price3", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, editable: true, cellClass: ["editable-cell", "numeric-cell"], @@ -78,7 +78,7 @@ const columns = [ headerName: "Threshold 3", field: "threshold3", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, editable: true, cellClass: ["editable-cell", "numeric-cell"], @@ -87,7 +87,7 @@ const columns = [ headerName: "Price 4", field: "price4", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, editable: true, cellClass: ["editable-cell", "numeric-cell"], @@ -96,7 +96,7 @@ const columns = [ headerName: "Threshold 4", field: "threshold4", type: "rightAligned", - suppressMenu: true, + suppressHeaderMenuButton: true, width: 120, editable: true, cellClass: ["editable-cell", "numeric-cell"], diff --git a/yarn.lock b/yarn.lock index 1fa41758236..8b85ce20ece 100644 --- a/yarn.lock +++ b/yarn.lock @@ -752,7 +752,45 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.17.6, @babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6": +"@babel/helper-create-class-features-plugin@npm:^7.17.6, @babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.15": + version: 7.22.15 + resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.5" + "@babel/helper-function-name": "npm:^7.22.5" + "@babel/helper-member-expression-to-functions": "npm:^7.22.15" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + "@babel/helper-replace-supers": "npm:^7.22.9" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/000d29f1df397b7fdcb97ad0e9a442781787e5cb0456a9b8da690d13e03549a716bf74348029d3bd3fa4837b35d143a535cad1006f9d552063799ecdd96df672 + languageName: node + linkType: hard + +"@babel/helper-create-class-features-plugin@npm:^7.21.0": + version: 7.23.9 + resolution: "@babel/helper-create-class-features-plugin@npm:7.23.9" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/91c8aa8888780bd90aa50f511917cb0953ccd61b2ea4abf61915c1d68d99bb14b472969a8ae5b391d7890759dfc22be79104297be07919c38351714a4ce2fe74 + languageName: node + linkType: hard + +"@babel/helper-create-class-features-plugin@npm:^7.23.6": version: 7.24.0 resolution: "@babel/helper-create-class-features-plugin@npm:7.24.0" dependencies: @@ -830,7 +868,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-environment-visitor@npm:^7.22.20": +"@babel/helper-environment-visitor@npm:^7.22.20, @babel/helper-environment-visitor@npm:^7.22.5": version: 7.22.20 resolution: "@babel/helper-environment-visitor@npm:7.22.20" checksum: 10/d80ee98ff66f41e233f36ca1921774c37e88a803b2f7dca3db7c057a5fea0473804db9fb6729e5dbfd07f4bed722d60f7852035c2c739382e84c335661590b69 @@ -898,7 +936,14 @@ __metadata: languageName: node linkType: hard -"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.19.0, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": +"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.19.0, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": + version: 7.22.5 + resolution: "@babel/helper-plugin-utils@npm:7.22.5" + checksum: 10/ab220db218089a2aadd0582f5833fd17fa300245999f5f8784b10f5a75267c4e808592284a29438a0da365e702f05acb369f99e1c915c02f9f9210ec60eab8ea + languageName: node + linkType: hard + +"@babel/helper-plugin-utils@npm:^7.24.0": version: 7.24.0 resolution: "@babel/helper-plugin-utils@npm:7.24.0" checksum: 10/dc8c7af321baf7653d93315beffee1790eb2c464b4f529273a24c8743a3f3095bf3f2d11828cb2c52d56282ef43a4bdc67a79c9ab8dd845e35d01871f3f28a0e @@ -918,7 +963,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-replace-supers@npm:^7.16.7, @babel/helper-replace-supers@npm:^7.22.20": +"@babel/helper-replace-supers@npm:^7.16.7, @babel/helper-replace-supers@npm:^7.22.20, @babel/helper-replace-supers@npm:^7.22.9": version: 7.22.20 resolution: "@babel/helper-replace-supers@npm:7.22.20" dependencies: @@ -958,6 +1003,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-string-parser@npm:^7.22.5": + version: 7.22.5 + resolution: "@babel/helper-string-parser@npm:7.22.5" + checksum: 10/7f275a7f1a9504da06afc33441e219796352a4a3d0288a961bc14d1e30e06833a71621b33c3e60ee3ac1ff3c502d55e392bcbc0665f6f9d2629809696fab7cdd + languageName: node + linkType: hard + "@babel/helper-string-parser@npm:^7.23.4": version: 7.23.4 resolution: "@babel/helper-string-parser@npm:7.23.4" @@ -1012,7 +1064,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0": +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0": version: 7.24.0 resolution: "@babel/parser@npm:7.24.0" bin: @@ -1021,6 +1073,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.23.0": + version: 7.23.0 + resolution: "@babel/parser@npm:7.23.0" + bin: + parser: ./bin/babel-parser.js + checksum: 10/201641e068f8cca1ff12b141fcba32d7ccbabc586961bd1b85ae89d9695867f84d57fc2e1176dc4981fd28e5e97ca0e7c32cd688bd5eabb641a302abc0cb5040 + languageName: node + linkType: hard + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": version: 7.23.3 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" @@ -2331,7 +2392,18 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.4, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.4, @babel/types@npm:^7.19.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": + version: 7.23.0 + resolution: "@babel/types@npm:7.23.0" + dependencies: + "@babel/helper-string-parser": "npm:^7.22.5" + "@babel/helper-validator-identifier": "npm:^7.22.20" + to-fast-properties: "npm:^2.0.0" + checksum: 10/ca5b896a26c91c5672254725c4c892a35567d2122afc47bd5331d1611a7f9230c19fc9ef591a5a6f80bf0d80737e104a9ac205c96447c74bee01d4319db58001 + languageName: node + linkType: hard + +"@babel/types@npm:^7.18.9, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.0": version: 7.24.0 resolution: "@babel/types@npm:7.24.0" dependencies: @@ -5594,13 +5666,9 @@ __metadata: version: 0.0.0-use.local resolution: "@salt-ds/ag-grid-theme@workspace:packages/ag-grid-theme" dependencies: - chokidar: "npm:^3.5.3" - cssnano: "npm:^5.1.13" del: "npm:^7.0.0" - fs-extra: "npm:^11.1.0" - postcss: "npm:^8.4.14" - postcss-url: "npm:^10.1.3" - sass: "npm:^1.51.0" + peerDependencies: + "@salt-ds/theme": ^1.15.0 languageName: unknown linkType: soft @@ -5739,9 +5807,9 @@ __metadata: "@typescript-eslint/eslint-plugin": "npm:^6.6.0" "@typescript-eslint/parser": "npm:^6.6.0" "@vitejs/plugin-react": "npm:^4.1.0" - ag-grid-community: "npm:^28.2.1" - ag-grid-enterprise: "npm:^28.2.1" - ag-grid-react: "npm:^28.2.1" + ag-grid-community: "npm:^31.3.0" + ag-grid-enterprise: "npm:^31.3.0" + ag-grid-react: "npm:^31.3.0" axe-core: "npm:^4.9.0" chromatic: "npm:^11.3.2" ci-info: "npm:^3.3.1" @@ -8000,7 +8068,20 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.7, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.2": +"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.7, @types/babel__core@npm:^7.20.2": + version: 7.20.2 + resolution: "@types/babel__core@npm:7.20.2" + dependencies: + "@babel/parser": "npm:^7.20.7" + "@babel/types": "npm:^7.20.7" + "@types/babel__generator": "npm:*" + "@types/babel__template": "npm:*" + "@types/babel__traverse": "npm:*" + checksum: 10/78aede009117ff6c95ef36db19e27ad15ecdcb5cfc9ad57d43caa5d2f44127105691a3e6e8d1806fd305484db8a74fdec5640e88da452c511f6351353f7ac0c8 + languageName: node + linkType: hard + +"@types/babel__core@npm:^7.18.0": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -8207,10 +8288,10 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:*, @types/estree@npm:1.0.5, @types/estree@npm:^1.0.0": - version: 1.0.5 - resolution: "@types/estree@npm:1.0.5" - checksum: 10/7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408 +"@types/estree@npm:*, @types/estree@npm:^1.0.0": + version: 1.0.0 + resolution: "@types/estree@npm:1.0.0" + checksum: 10/9ec366ea3b94db26a45262d7161456c9ee25fd04f3a0da482f6e97dbf90c0c8603053c311391a877027cc4ee648340f988cd04f11287886cdf8bc23366291ef9 languageName: node linkType: hard @@ -8221,6 +8302,13 @@ __metadata: languageName: node linkType: hard +"@types/estree@npm:1.0.5": + version: 1.0.5 + resolution: "@types/estree@npm:1.0.5" + checksum: 10/7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408 + languageName: node + linkType: hard + "@types/estree@npm:^0.0.51": version: 0.0.51 resolution: "@types/estree@npm:0.0.51" @@ -8707,13 +8795,13 @@ __metadata: linkType: hard "@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.0.0, @types/react@npm:^18.0.26": - version: 18.2.66 - resolution: "@types/react@npm:18.2.66" + version: 18.0.28 + resolution: "@types/react@npm:18.0.28" dependencies: "@types/prop-types": "npm:*" "@types/scheduler": "npm:*" csstype: "npm:^3.0.2" - checksum: 10/8a82bda6c254681536fa8348dc15d52345d8203d5d322406feef865f74ebfe2475ebde0be4e2f9a18ffbb587dac946dfb5d0974b598779ff282259aff7e8209a + checksum: 10/7a752e6c5e76139f258bc14827d2c574bb76d6e7eb1b240f24f79b269153cb88668c34ba7078d3de99ec1973b7022e1f788e71117bd52a287f382d24bb80be40 languageName: node linkType: hard @@ -9680,7 +9768,16 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.3, acorn@npm:^8.2.4, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.9.0": +"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.2.4, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.9.0": + version: 8.10.0 + resolution: "acorn@npm:8.10.0" + bin: + acorn: bin/acorn + checksum: 10/522310c20fdc3c271caed3caf0f06c51d61cb42267279566edd1d58e83dbc12eebdafaab666a0f0be1b7ad04af9c6bc2a6f478690a9e6391c3c8b165ada917dd + languageName: node + linkType: hard + +"acorn@npm:^8.11.3": version: 8.11.3 resolution: "acorn@npm:8.11.3" bin: @@ -9706,30 +9803,40 @@ __metadata: languageName: node linkType: hard -"ag-grid-community@npm:^28.2.1": - version: 28.2.1 - resolution: "ag-grid-community@npm:28.2.1" - checksum: 10/32de9e6cb547b57d2fa89d9fffed70d445e0542c70ace5a3b6fc92f9547b2d5a97caeaab3ae1c21f2f5a58c0669857427a79ea1a0bd97a8273a0f571f56c20bf +"ag-charts-community@npm:9.3.1": + version: 9.3.1 + resolution: "ag-charts-community@npm:9.3.1" + checksum: 10/b946ecf5b995c11eac77135fa1695cf239dd7d6b588dbed62a6d64fccbb7ee06c27a119b09cd11a9f3fe71900491129aa5d7c576e751b629f8fd003a22ce5944 + languageName: node + linkType: hard + +"ag-grid-community@npm:31.3.2, ag-grid-community@npm:^31.3.0": + version: 31.3.2 + resolution: "ag-grid-community@npm:31.3.2" + checksum: 10/4d47d8ca08c80988e30643933c8e333b62322909db79a02f9aeb75ced7689827228c616be82085d6111823139796f30ee1086b2f1af555dcb7843cbd68578126 languageName: node linkType: hard -"ag-grid-enterprise@npm:^28.2.1": - version: 28.2.1 - resolution: "ag-grid-enterprise@npm:28.2.1" - checksum: 10/6bb113eca7cc86f7d603f6f7ed9e26cb01f1af85c3bf37747fa86e903d77f231ca4ed5df1126efe283a9dc7dab26bd7e58e0a63176aabae3e955ec36a734dabc +"ag-grid-enterprise@npm:^31.3.0": + version: 31.3.2 + resolution: "ag-grid-enterprise@npm:31.3.2" + dependencies: + ag-charts-community: "npm:9.3.1" + ag-grid-community: "npm:31.3.2" + checksum: 10/be380e2b0d720a66fde45936878965ed7f645e7d87fe7116ed0e8ef14714d69f4385ec07a6214b3fb54db00e19a263f29d6d68593f56b51a2de85013a0fb9337 languageName: node linkType: hard -"ag-grid-react@npm:^28.2.1": - version: 28.2.1 - resolution: "ag-grid-react@npm:28.2.1" +"ag-grid-react@npm:^31.3.0": + version: 31.3.2 + resolution: "ag-grid-react@npm:31.3.2" dependencies: + ag-grid-community: "npm:31.3.2" prop-types: "npm:^15.8.1" peerDependencies: - ag-grid-community: ~28.2.1 react: ^16.3.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.3.0 || ^17.0.0 || ^18.0.0 - checksum: 10/5f494d1c7032c50b91020cb3b3e5ea6c34651ff01ff6e52009c729f96c83615013eb00930af02af8696420bca75626fcd0f36a5a8b0fca7c1f5d45634e7bf52c + checksum: 10/8d5e46b2e5cb5a61a338ea00f27877cceee689768457dfcd8b903f81cfffa538aca0e839b57e4a5e4d731dbbe02aa6e7671a8d3d384d10899e30dd01f0645e47 languageName: node linkType: hard @@ -9826,7 +9933,19 @@ __metadata: languageName: node linkType: hard -"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.10.0, ajv@npm:^8.11.0, ajv@npm:^8.8.0": +"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.8.0": + version: 8.10.0 + resolution: "ajv@npm:8.10.0" + dependencies: + fast-deep-equal: "npm:^3.1.1" + json-schema-traverse: "npm:^1.0.0" + require-from-string: "npm:^2.0.2" + uri-js: "npm:^4.2.2" + checksum: 10/19f265a0895d1156cb13cb22a973cfce5587718b56c7e0141d8d60c1e7a016eb698aecffca158e06d2bac6d199d86c803a7ad686ba61a38e50a9e2e93894209b + languageName: node + linkType: hard + +"ajv@npm:^8.10.0, ajv@npm:^8.11.0": version: 8.12.0 resolution: "ajv@npm:8.12.0" dependencies: @@ -12664,7 +12783,7 @@ __metadata: languageName: node linkType: hard -"cssnano@npm:^5.0.1, cssnano@npm:^5.0.6, cssnano@npm:^5.1.13": +"cssnano@npm:^5.0.1, cssnano@npm:^5.0.6": version: 5.1.14 resolution: "cssnano@npm:5.1.14" dependencies: @@ -12758,13 +12877,6 @@ __metadata: languageName: node linkType: hard -"cuint@npm:^0.2.2": - version: 0.2.2 - resolution: "cuint@npm:0.2.2" - checksum: 10/c1b98971f4a1b32ce71ec82eac87df87b54ee85d982e3967a6dd89f19ffd3ebbbdb82e3738e489f475611b6ed126c0deba05ed9ecffea0a721a4d43773ce0670 - languageName: node - linkType: hard - "cypress-axe@npm:^1.5.0": version: 1.5.0 resolution: "cypress-axe@npm:1.5.0" @@ -13205,13 +13317,20 @@ __metadata: languageName: node linkType: hard -"dayjs@npm:1.11.10, dayjs@npm:^1.10.4": +"dayjs@npm:1.11.10": version: 1.11.10 resolution: "dayjs@npm:1.11.10" checksum: 10/27e8f5bc01c0a76f36c656e62ab7f08c2e7b040b09e613cd4844abf03fb258e0350f0a83b02c887b84d771c1f11e092deda0beef8c6df2a1afbc3f6c1fade279 languageName: node linkType: hard +"dayjs@npm:^1.10.4": + version: 1.11.5 + resolution: "dayjs@npm:1.11.5" + checksum: 10/cee1c2ed5f74ba31eb30ea985e36eb8f0e10c2afedb8d480a316776bd6655c731aa9d21766c44d64c3e04eb30983b40fec9566902af832768e94335306da9485 + languageName: node + linkType: hard + "debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.0": version: 2.6.9 resolution: "debug@npm:2.6.9" @@ -20352,7 +20471,7 @@ __metadata: languageName: node linkType: hard -"make-dir@npm:^3.0.0, make-dir@npm:^3.0.2, make-dir@npm:~3.1.0": +"make-dir@npm:^3.0.0, make-dir@npm:^3.0.2": version: 3.1.0 resolution: "make-dir@npm:3.1.0" dependencies: @@ -21976,15 +22095,6 @@ __metadata: languageName: node linkType: hard -"mime@npm:~2.5.2": - version: 2.5.2 - resolution: "mime@npm:2.5.2" - bin: - mime: cli.js - checksum: 10/904b4b5927451a9f0a4f4d838a9fb5ab658dec0caef0f750ec73c41df2eb4a7c34e35dd2e2378e04c129e18b779c1205278cb6d1f94b5728adfd91de51808138 - languageName: node - linkType: hard - "mimic-fn@npm:^2.1.0": version: 2.1.0 resolution: "mimic-fn@npm:2.1.0" @@ -22090,15 +22200,6 @@ __metadata: languageName: node linkType: hard -"minimatch@npm:~3.0.4": - version: 3.0.8 - resolution: "minimatch@npm:3.0.8" - dependencies: - brace-expansion: "npm:^1.1.7" - checksum: 10/6df5373cb1ea79020beb6887ff5576c58cfabcfd32c5a65c2cf58f326e4ee8eae84f129e5fa50b8a4347fa1d1e583f931285c9fb3040d984bdfb5109ef6607ec - languageName: node - linkType: hard - "minimist-options@npm:^4.0.2": version: 4.1.0 resolution: "minimist-options@npm:4.1.0" @@ -25154,20 +25255,6 @@ __metadata: languageName: node linkType: hard -"postcss-url@npm:^10.1.3": - version: 10.1.3 - resolution: "postcss-url@npm:10.1.3" - dependencies: - make-dir: "npm:~3.1.0" - mime: "npm:~2.5.2" - minimatch: "npm:~3.0.4" - xxhashjs: "npm:~0.2.2" - peerDependencies: - postcss: ^8.0.0 - checksum: 10/7cfd287a9f754099191fc78b68153b35b9cdb6e9db3f06234543c0545656eb11ba61a7c6f4f02cd6de3d82d9dfec47ff1f5cd2879b030b821b580822054b8387 - languageName: node - linkType: hard - "postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.1.0, postcss-value-parser@npm:^4.2.0": version: 4.2.0 resolution: "postcss-value-parser@npm:4.2.0" @@ -25207,7 +25294,29 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.1.0, postcss@npm:^8.2.14, postcss@npm:^8.3.5, postcss@npm:^8.4.14, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.38, postcss@npm:^8.4.7": +"postcss@npm:^8.1.0, postcss@npm:^8.2.14, postcss@npm:^8.3.5, postcss@npm:^8.4.27, postcss@npm:^8.4.7": + version: 8.4.29 + resolution: "postcss@npm:8.4.29" + dependencies: + nanoid: "npm:^3.3.6" + picocolors: "npm:^1.0.0" + source-map-js: "npm:^1.0.2" + checksum: 10/cfde0096125a9d962d7acc4380922b4cf6af87b98cca78e89fdaa8da92d687b34344c6410d42723bcc154b5c66cc496aed8005c3884cea55a773a1cbc4774e70 + languageName: node + linkType: hard + +"postcss@npm:^8.4.32": + version: 8.4.32 + resolution: "postcss@npm:8.4.32" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.0.0" + source-map-js: "npm:^1.0.2" + checksum: 10/28084864122f29148e1f632261c408444f5ead0e0b9ea9bd9729d0468818ebe73fe5dc0075acd50c1365dbe639b46a79cba27d355ec857723a24bc9af0f18525 + languageName: node + linkType: hard + +"postcss@npm:^8.4.38": version: 8.4.38 resolution: "postcss@npm:8.4.38" dependencies: @@ -26337,7 +26446,7 @@ __metadata: languageName: node linkType: hard -"readable-stream@npm:^4.0.0, readable-stream@npm:^4.1.0": +"readable-stream@npm:^4.0.0": version: 4.4.2 resolution: "readable-stream@npm:4.4.2" dependencies: @@ -26350,6 +26459,18 @@ __metadata: languageName: node linkType: hard +"readable-stream@npm:^4.1.0": + version: 4.2.0 + resolution: "readable-stream@npm:4.2.0" + dependencies: + abort-controller: "npm:^3.0.0" + buffer: "npm:^6.0.3" + events: "npm:^3.3.0" + process: "npm:^0.11.10" + checksum: 10/59c59e6b652e4fb2828da1bbbafdbbb2d7bebe0e8104cf696f6fd9bda40e9e9da5e743595b2a0084e1fee9a4c35c784673fd37487dfb7aae2dabcd445a6256c2 + languageName: node + linkType: hard + "readdirp@npm:~3.6.0": version: 3.6.0 resolution: "readdirp@npm:3.6.0" @@ -27487,7 +27608,7 @@ __metadata: languageName: node linkType: hard -"sass@npm:^1.51.0, sass@npm:^1.52.3": +"sass@npm:^1.52.3": version: 1.54.4 resolution: "sass@npm:1.54.4" dependencies: @@ -31631,15 +31752,6 @@ __metadata: languageName: node linkType: hard -"xxhashjs@npm:~0.2.2": - version: 0.2.2 - resolution: "xxhashjs@npm:0.2.2" - dependencies: - cuint: "npm:^0.2.2" - checksum: 10/974dba1b7dd10f550714456366135fc70ba809e6e4db26e18a760a1f57e18dbc7fa6732738abc3f8fee27bb6a28d185240356ff4a57d7ce54282049e1da99886 - languageName: node - linkType: hard - "y18n@npm:^4.0.0": version: 4.0.3 resolution: "y18n@npm:4.0.3"