diff --git a/.changeset/plenty-hotels-obey.md b/.changeset/plenty-hotels-obey.md new file mode 100644 index 00000000000..2ef112de4d0 --- /dev/null +++ b/.changeset/plenty-hotels-obey.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/core": patch +--- + +Fixed Tooltip breaking when used inside a Form Field with an invalid value passed to the `validationStatus` prop. diff --git a/.changeset/tasty-trains-cover.md b/.changeset/tasty-trains-cover.md new file mode 100644 index 00000000000..dce22f3d6dd --- /dev/null +++ b/.changeset/tasty-trains-cover.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/ag-grid-theme": patch +--- + +AG Grid Theme is now supporting AG Grid v29 and v30. diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 702d5aa83db..ba65bf89de2 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -23,8 +23,6 @@ jobs: cache: "yarn" - name: Install dependencies run: yarn - - name: Build ag grid theme - run: yarn build:ag-grid-theme - name: Bundle css run: yarn bundle:css # 👇 Adds Chromatic as a step in the workflow diff --git a/cypress.config.ts b/cypress.config.ts index 08603f2aa77..c1cfe7c05f7 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -9,6 +9,7 @@ import { version as reactVersion } from "react"; // @ts-ignore import installCoverageTask from "@cypress/code-coverage/task"; import { cssInline } from "css-inline-plugin"; +import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins"; let viteConfig: UserConfig = { plugins: [react(), tsconfigPaths(), IstanbulPlugin(), cssInline()], @@ -59,8 +60,13 @@ export default defineConfig({ viewportWidth: 1280, viewportHeight: 1024, video: false, + env: { + pluginVisualRegressionMaxDiffConfig: { threshold: 0.1 }, + pluginVisualRegressionDiffConfig: { threshold: 0.1 }, + }, component: { setupNodeEvents(on, config) { + initPlugin(on, config); installCoverageTask(on, config); //Setting up a log task to allow logging to the console during an axe test because console.log() does not work directly in a test on("task", { @@ -70,6 +76,7 @@ export default defineConfig({ return null; }, }); + return config; }, devServer: { diff --git a/cypress/support/commands.tsx b/cypress/support/commands.tsx index 7d42a491ece..8641106e842 100644 --- a/cypress/support/commands.tsx +++ b/cypress/support/commands.tsx @@ -7,6 +7,7 @@ import { PerformanceResult, PerformanceTester } from "./PerformanceTester"; import { ReactNode } from "react"; import { SaltProvider } from "@salt-ds/core"; import { AnnouncementListener } from "./AnnouncementListener"; +import "@frsource/cypress-plugin-visual-regression-diff"; const SupportedThemeModeValues = ["light", "dark"] as const; type SupportedThemeMode = (typeof SupportedThemeModeValues)[number]; @@ -153,6 +154,20 @@ Cypress.Commands.add("paste", { prevSubject: "element" }, (input, value) => { } }); +Cypress.Screenshot.defaults({ + onBeforeScreenshot($el) { + // turn off pointer events for everything in the body element + // @ts-ignore + document.querySelector("body").style.pointerEvents = "none"; + }, + + onAfterScreenshot($el, props) { + // restore default pointer event behavior + // @ts-ignore + document.querySelector("body").style.pointerEvents = "initial"; + }, +}); + // Workaround for an issue in Cypress, where ResizeObserver fails with the message // ResizeObserver loop limit exceeded // Seems to occur for us in Cypress but never in browser in normal use diff --git a/package.json b/package.json index 8a3be89dc46..ff2331ad017 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@faker-js/faker": "^8.0.0", "@fontsource/open-sans": "^4.5.13", "@fontsource/pt-mono": "^5.0.12", + "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10", "@mswjs/data": "^0.14.0", "@storybook/addon-a11y": "^7.4.5", "@storybook/addon-actions": "^7.4.5", @@ -81,9 +82,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": "^30.2.0", + "ag-grid-enterprise": "^30.2.0", + "ag-grid-react": "^30.2.0", "axe-core": "^4.9.0", "chromatic": "^10.2.0", "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 26d6151c26e..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-palette-neutral-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 a2c02a10ddb..00000000000 --- a/packages/ag-grid-theme/css/_salt-ag-theme-icon-font.scss +++ /dev/null @@ -1,115 +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} { - font-family: "salt-icons"; - } - - [class^="ag-theme-salt"] .ag-icon-#{$name}::before { - content: $glyph; - } -} - -[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 { - content: "\ea2e"; -} - -[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 530af077f28..00000000000 --- a/packages/ag-grid-theme/css/_uitk-ag-theme-icon-font.scss +++ /dev/null @@ -1,70 +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} { - font-family: "jpmuitk-icons"; - } - - [class^="ag-theme-uitk"] .ag-icon-#{$name}::before { - content: $glyph; - } -} - -[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 { - content: "\e95b"; -} - -[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..335074ef965 --- /dev/null +++ b/packages/ag-grid-theme/css/salt-ag-grid-theme.css @@ -0,0 +1,411 @@ +div[class*="ag-theme-salt"] { + --ag-background-color: var(--salt-palette-neutral-primary-background); + --ag-borders-secondary: var(--salt-size-border) var(--salt-separable-borderStyle); + --ag-cell-horizontal-padding: var(--salt-spacing-100); + --ag-checkbox-checked-color: var(--salt-selectable-primary-foreground-selected); + --ag-checkbox-border-radius: 0; + --ag-checkbox-indeterminate-color: var(--salt-content-primary-foreground); + --ag-chip-background-color: var(--salt-taggable-background); + --ag-data-color: var(--salt-content-primary-foreground); + --ag-font-size: var(--salt-text-fontSize); + --ag-font-family: var(--salt-typography-fontFamily); + --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-palette-neutral-secondary-separator); + --ag-header-column-separator-display: block; + --ag-header-column-separator-height: var(--salt-text-fontSize); + --ag-header-column-separator-width: var(--salt-size-border); + --ag-header-foreground-color: var(--salt-content-primary-foreground); + --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + --ag-icon-size: var(--salt-icon-size-base); + --ag-input-focus-border-color: var(--salt-editable-borderColor-hover); + --ag-input-focus-box-shadow: none; + --ag-list-item-height: var(--salt-size-base); + --ag-material-primary-color: var(--salt-editable-borderColor); + --ag-range-selection-border-style: var(--salt-focused-outlineStyle); + --ag-range-selection-border-width: var(--salt-focused-outlineWidth); + --ag-row-group-indent-size: calc(var(--ag-grid-size) * 3 + var(--salt-spacing-100)); + --ag-row-hover-color: var(--salt-selectable-background-hover); + --ag-secondary-border-color: var(--salt-palette-neutral-tertiary-separator); + --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: 2px; + --ag-subheader-background-color: var(--salt-palette-neutral-primary-background); + --ag-tooltip-background-color: var(--salt-container-primary-background); + --ag-widget-container-horizontal-padding: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-root-wrapper { + border: none; +} + +/* HEADER */ + +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-typography-fontWeight-semiBold); +} + +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-palette-neutral-primary-border); +} + +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); +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon { + margin-left: auto; +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon { + margin-right: auto; +} + +/* MENU */ + +div[class*="ag-theme-salt"] .ag-menu { + padding: var(--salt-spacing-100); + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-palette-neutral-primary-border); +} + +div[class*="ag-theme-salt"] .ag-menu-header { + border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-palette-neutral-primary-border); + 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: var(--salt-size-stackable); + 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-ltr .ag-cell { + border: none; + line-height: calc(var(--ag-line-height) - 1px); + padding-left: var(--salt-spacing-100); + padding-right: var(--salt-spacing-100); + display: flex; + align-items: center; +} + +div[class*="ag-theme-salt"] .ag-cell.editable-cell, +div[class*="ag-theme-salt"] .ag-cell.editable-numeric-cell { + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-editable-borderColor); + justify-content: flex-end; +} +div[class*="ag-theme-salt"] .ag-cell.numeric-cell { + justify-content: flex-end; +} +div[class*="ag-theme-salt"] .ag-has-focus .ag-cell.editable-cell:focus, +div[class*="ag-theme-salt"] .ag-has-focus .editable-numeric-cell:focus { + border: var(--salt-size-border) var(--salt-container-borderStyle) transparent; +} +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: var(--salt-size-border) var(--salt-container-borderStyle) transparent !important; +} + +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; + transform: translate(-1px, -1px); +} + +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; +} + +/* 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: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor); + height: var(--salt-size-selectable); + width: var(--salt-size-selectable); +} + +div[class*="ag-theme-salt"] .ag-checkbox-input-wrapper.ag-checked { + background: var(--salt-selectable-borderColor-selected); + border-color: var(--salt-selectable-borderColor-selected); +} + +/* 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); +} + +div[class*="ag-theme-salt"] .ag-ltr .ag-filter-apply-panel-button { + margin-left: 8px; +} + +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-floating-filter-button-button .ag-icon-filter:before { + color: var(--salt-content-secondary-foreground); + content: "\e973"; +} + +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-palette-neutral-primary-border); + 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-palette-neutral-primary-border); + color: var(--salt-content-secondary-foreground); + font-size: var(--salt-text-fontSize); + font-weight: var(--salt-text-label-fontWeight); + line-height: var(--salt-text-label-lineHeight); + height: var(--salt-size-base); + padding: 0 var(--salt-spacing-100); +} +div[class*="ag-theme-salt"] .ag-status-name-value { + padding: var(--salt-spacing-100) 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-palette-neutral-primary-border); +} + +div[class*="ag-theme-salt"] .ag-column-drop-horizontal { + border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-palette-neutral-primary-border); + 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-palette-neutral-tertiary-separator); +} + +.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-palette-neutral-tertiary-separator); +} 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..20687913b5d --- /dev/null +++ b/packages/ag-grid-theme/css/salt-icons.css @@ -0,0 +1,240 @@ +@font-face { + font-family: "salt-icons"; + src: url(../fonts/salt-icons.woff) format("woff"); +} + +/* sum-solid */ +[class*="ag-theme-salt"] .ag-icon-aggregation:before { + font-family: "salt-icons"; + content: "\ea25"; +} +/* move-all */ +[class*="ag-theme-salt"] .ag-icon-arrows:before { + font-family: "salt-icons"; + content: "\e9c3"; +} +/* arrow-up */ +[class*="ag-theme-salt"] .ag-icon-asc:before { + font-family: "salt-icons"; + content: "\e90b"; +} +/* close */ +[class*="ag-theme-salt"] .ag-icon-cancel:before { + font-family: "salt-icons"; + content: "\e934"; +} +/* bar-chart */ +[class*="ag-theme-salt"] .ag-icon-chart:before { + font-family: "salt-icons"; + content: "\e911"; +} +/* column-chooser */ +[class*="ag-theme-salt"] .ag-icon-columns:before { + font-family: "salt-icons"; + content: "\e941"; +} +/* chevron-down */ +[class*="ag-theme-salt"] .ag-icon-contracted:before { + font-family: "salt-icons"; + content: "\e92c"; +} +/* clone */ +[class*="ag-theme-salt"] .ag-icon-copy:before { + font-family: "salt-icons"; + content: "\e932"; +} +/* close */ +[class*="ag-theme-salt"] .ag-icon-cross:before { + font-family: "salt-icons"; + content: "\e934"; +} + +[class*="ag-theme-salt"] .ag-icon-cut:before { + font-family: "salt-icons"; + content: "\e950"; +} + +[class*="ag-theme-salt"] .ag-icon-csv:before { + font-family: "salt-icons"; + content: "\e94f"; +} +/* arrow-down */ +[class*="ag-theme-salt"] .ag-icon-desc:before { + font-family: "salt-icons"; + content: "\e908"; +} +/* xls */ +[class*="ag-theme-salt"] .ag-icon-excel:before { + font-family: "salt-icons"; + content: "\ea68"; +} +/* chevron-right */ +[class*="ag-theme-salt"] .ag-icon-expanded:before { + font-family: "salt-icons"; + content: "\e92e"; +} +/* hidden */ +[class*="ag-theme-salt"] .ag-icon-eye-slash:before { + font-family: "salt-icons"; + content: "\e98b"; +} +/* visible */ +[class*="ag-theme-salt"] .ag-icon-eye:before { + font-family: "salt-icons"; + content: "\ea59"; +} +/* filter */ +[class*="ag-theme-salt"] .ag-icon-filter:before { + font-family: "salt-icons"; + content: "\e972"; +} +/* filter-solid */ +[class*="ag-theme-salt"] .ag-icon-filter-solid:before { + font-family: "salt-icons"; + content: "\e972"; +} +/* filter */ +[class*="ag-theme-salt"] .ag-icon-filter-clear:before { + font-family: "salt-icons"; + content: "\e973"; +} +/* double-chevron-left */ +[class*="ag-theme-salt"] .ag-icon-first:before { + font-family: "salt-icons"; + content: "\e961"; +} +/* drag-row */ +[class*="ag-theme-salt"] .ag-icon-grip:before { + font-family: "salt-icons"; + content: "\e900"; +} + +[class*="ag-theme-salt"] .ag-icon-group:before { + font-family: "salt-icons"; + content: "\e984"; +} +/* double-chevron-right */ +[class*="ag-theme-salt"] .ag-icon-last:before { + font-family: "salt-icons"; + content: "\e962"; +} +/* chevron-left */ +[class*="ag-theme-salt"] .ag-icon-left:before { + font-family: "salt-icons"; + content: "\e92d"; +} + +[class*="ag-theme-salt"] .ag-icon-linked:before { + font-family: "salt-icons"; + content: "\e9a8"; +} +/* loader */ +[class*="ag-theme-salt"] .ag-icon-loading:before { + font-family: "salt-icons"; + content: "\e9aa"; +} +/* micro-menu */ +[class*="ag-theme-salt"] .ag-icon-menu:before { + font-family: "salt-icons"; + content: "\e9bd"; +} +/* chevron-right */ +[class*="ag-theme-salt"] .ag-icon-next:before { + font-family: "salt-icons"; + content: "\e92e"; +} +/* move-vertical */ +[class*="ag-theme-salt"] .ag-icon-none:before { + font-family: "salt-icons"; + content: "\e9c5"; +} +/* close */ +[class*="ag-theme-salt"] .ag-icon-not-allowed:before { + font-family: "salt-icons"; + content: "\e934"; +} +/* place-in */ +[class*="ag-theme-salt"] .ag-icon-paste:before { + font-family: "salt-icons"; + content: "\e9d9"; +} +/* pin-solid */ +[class*="ag-theme-salt"] .ag-icon-pin:before { + font-family: "salt-icons"; + content: "\e9d5"; +} + +[class*="ag-theme-salt"] .ag-icon-pivot:before { + font-family: "salt-icons"; + content: "\e9d8"; +} +/* chevron-left */ +[class*="ag-theme-salt"] .ag-icon-previous:before { + font-family: "salt-icons"; + content: "\e92d"; +} +/* chevron-right */ +[class*="ag-theme-salt"] .ag-icon-right:before { + font-family: "salt-icons"; + content: "\e92e"; +} + +[class*="ag-theme-salt"] .ag-icon-save:before { + font-family: "salt-icons"; + content: "\e9ff"; +} +/* triangle-down */ +[class*="ag-theme-salt"] .ag-icon-small-down:before { + font-family: "salt-icons"; + content: "\ea39"; +} +/* triangle-left */ +[class*="ag-theme-salt"] .ag-icon-small-left:before { + font-family: "salt-icons"; + content: "\ea3a"; +} +/* triangle-right */ +[class*="ag-theme-salt"] .ag-icon-small-right:before { + font-family: "salt-icons"; + content: "\ea3c"; +} +/* triangle-up */ +[class*="ag-theme-salt"] .ag-icon-small-up:before { + font-family: "salt-icons"; + content: "\ea3d"; +} +/* success-tick */ +[class*="ag-theme-salt"] .ag-icon-tick:before { + font-family: "salt-icons"; + content: "\ea23"; +} +/* chevron-right */ +[class*="ag-theme-salt"] .ag-icon-tree-closed:before { + font-family: "salt-icons"; + content: "\e92e"; +} +/* chevron-down */ +[class*="ag-theme-salt"] .ag-icon-tree-open:before { + font-family: "salt-icons"; + content: "\e92c"; +} + +[class*="ag-theme-salt"] .ag-icon-unlinked:before { + font-family: "salt-icons"; + content: "\ea43"; +} + +[class*="ag-theme-salt"] .ag-checkbox-input-wrapper:after { + content: ""; + font-family: "salt-icons"; +} +/* success-tick */ +[class*="ag-theme-salt"] .ag-checkbox-input-wrapper.ag-checked:after { + content: "\ea23"; + font-family: "salt-icons"; +} +/* remove */ +[class*="ag-theme-salt"] .ag-checkbox-input-wrapper.ag-indeterminate:after { + content: "\e9f4"; + font-family: "salt-icons"; +} diff --git a/packages/ag-grid-theme/css/uitk-ag-grid-theme.css b/packages/ag-grid-theme/css/uitk-ag-grid-theme.css new file mode 100644 index 00000000000..63493769176 --- /dev/null +++ b/packages/ag-grid-theme/css/uitk-ag-grid-theme.css @@ -0,0 +1,400 @@ +div[class*="ag-theme-uitk"] { + --ag-background-color: var(--salt-palette-neutral-primary-background); + --ag-control-panel-background-color: var(--salt-container-primary-background); + --ag-border-color: #e2e2e2; + --ag-borders-secondary: var(--salt-size-border) var(--salt-separable-borderStyle); + --ag-cell-horizontal-padding: var(--salt-spacing-50); + --ag-checkbox-border-radius: 0; + --ag-checkbox-indeterminate-color: var(--salt-color-blue-500); + --ag-chip-background-color: var(--salt-taggable-background); + --ag-data-color: var(--salt-content-primary-foreground); + --ag-font-size: var(--salt-text-fontSize); + --ag-font-family: var(--salt-typography-fontFamily); + --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-palette-neutral-secondary-separator); + --ag-header-column-separator-display: block; + --ag-header-column-separator-height: var(--salt-text-fontSize); + --ag-header-column-separator-width: var(--salt-size-border); + --ag-header-foreground-color: var(--salt-content-primary-foreground); + --ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + --ag-icon-size: var(--salt-icon-size-base); + --ag-input-focus-box-shadow: none; + --ag-list-item-height: var(--salt-size-base); + --ag-material-primary-color: var(--salt-editable-borderColor); + --ag-range-selection-border-style: var(--salt-focused-outlineStyle); + --ag-range-selection-border-width: var(--salt-focused-outlineWidth); + --ag-row-group-indent-size: calc(var(--ag-grid-size) * 3 + var(--salt-spacing-100)); + --ag-secondary-border-color: var(--salt-palette-neutral-tertiary-separator); + --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: 2px; + --ag-subheader-background-color: var(--salt-palette-neutral-primary-background); + --ag-tab-min-width: 260px; + --ag-widget-container-horizontal-padding: var(--salt-spacing-100); +} + +div[class*="ag-theme-uitk"][class*="light"] { + --ag-checkbox-checked-color: var(--salt-color-white); +} + +div[class*="ag-theme-uitk"][class*="dark"] { + --ag-checkbox-checked-color: var(--salt-color-blue-600); + --ag-row-border-color: #e2e2e2; +} + +div[class*="ag-theme-uitk"][class*="light"] .ag-icon { + color: #61656e; +} +div[class*="ag-theme-uitk"][class*="dark"] .ag-icon { + color: var(--salt-color-white); +} + +div[class*="ag-theme-uitk"] .ag-root-wrapper { + border: none; +} + +/* HEADER */ + +div[class*="ag-theme-uitk"] .ag-header-row { + font-weight: var(--salt-typography-fontWeight-semiBold); +} + +div[class*="ag-theme-uitk"] .ag-header-cell .ag-header-cell-label .ag-header-cell-text { + margin-right: auto; + margin-left: 2px; +} + +div[class*="ag-theme-uitk"] .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total) { + border-top-color: var(--salt-palette-neutral-primary-border); +} + +div[class*="ag-theme-uitk"] .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus, +div[class*="ag-theme-uitk"] .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); +} + +/* MENU */ + +div[class*="ag-theme-uitk"] .ag-menu { + padding: 20px 20px 0 20px; + border: none; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); +} +div[class*="ag-theme-uitk"][class*="light"] .ag-menu { + color: var(--salt-palette-interact-foreground); +} +div[class*="ag-theme-uitk"][class*="dark"] .ag-menu { + color: var(--salt-color-white); +} + +div[class*="ag-theme-uitk"] .ag-menu-header { + background-color: var(--salt-container-primary-background); +} + +div[class*="ag-theme-uitk"] .ag-menu-body { + padding: 4px 0; +} + +div[class*="ag-theme-uitk"] .ag-menu-separator { + height: calc(var(--salt-size-border) + var(--salt-spacing-100) * 2); +} + +div[class*="ag-theme-uitk"] .ag-menu-separator:after { + content: ""; + display: block; + border-top: 1px solid #e2e2e2; +} + +div[class*="ag-theme-uitk"] .ag-menu-list { + padding: 8px 0; +} + +div[class*="ag-theme-uitk"] .ag-menu-option { + font-size: 13px; + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); +} + +div[class*="ag-theme-uitk"] .ag-menu-option-active { + background: var(--salt-palette-navigate-secondary-background-hover); +} + +div[class*="ag-theme-uitk"] .ag-menu-option-icon { + padding-left: var(--salt-spacing-100); +} + +div[class*="ag-theme-uitk"] .ag-menu-option-text { + line-height: 18px; + padding: 10px 16px; +} + +div[class*="ag-theme-uitk"] .ag-tab { + height: var(--salt-size-stackable); + flex: 1 1 auto; +} + +div[class*="ag-theme-uitk"] .ag-column-select-header { + height: 56px; + border-color: #e2e2e2; +} + +div[class*="ag-theme-uitk"] .ag-set-filter-list { + height: 192px; +} + +div[class*="ag-theme-uitk"][class*="light"] .ag-virtual-list-viewport { + border-top: 1px solid #eaedef; + border-bottom: 1px solid #eaedef; +} +div[class*="ag-theme-uitk"][class*="dark"] .ag-virtual-list-viewport { + border-top: 1px solid #44484f; + border-bottom: 1px solid #44484f; +} + +/* ROW */ + +div[class*="ag-theme-uitk"] .ag-row { + font-size: var(--salt-text-fontSize); + background: var(--ag-background-color); +} + +div[class*="ag-theme-uitk"][class*="light"] .ag-row-selected { + background-color: var(--salt-color-blue-20); + border: 0; +} +div[class*="ag-theme-uitk"][class*="dark"] .ag-row-selected { + background-color: var(--salt-color-blue-600); + border: 0; + border-color: var(--salt-color-blue-400); +} + +div[class*="ag-theme-uitk"] .ag-row-hover { + box-shadow: 0 2px 5px 0 rgba(36, 37, 38, 0.2), 0 -1px 0 0 #b4b7be; + z-index: 3; +} +div[class*="ag-theme-uitk"][class*="dark"] .ag-row-hover { + background-color: #2f3136; +} + +/* CELL */ + +div[class*="ag-theme-uitk"] .ag-ltr .ag-cell { + border: none; + line-height: calc(var(--ag-line-height) - 1px); + padding-left: var(--salt-spacing-50); + padding-right: var(--salt-spacing-50); + display: flex; + align-items: center; +} + +div[class*="ag-theme-uitk"] .ag-cell.editable-cell, +div[class*="ag-theme-uitk"] .ag-cell.editable-numeric-cell { + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-editable-borderColor); + justify-content: flex-end; +} + +div[class*="ag-theme-uitk"] .ag-has-focus .ag-cell.ag-cell-focus:not(.ag-cell-range-selected), +div[class*="ag-theme-uitk"] .ag-context-menu-open .ag-cell.ag-cell-focus:not(.ag-cell-range-selected), +div[class*="ag-theme-uitk"] .ag-cell-range-single-cell, +div[class*="ag-theme-uitk"] .ag-cell-range-single-cell.ag-cell-range-handle, +div[class*="ag-theme-uitk"] .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: none; +} + +div[class*="ag-theme-uitk"] .ag-cell-wrapper.ag-row-group { + align-items: center; +} + +div[class*="ag-theme-uitk"] .ag-cell.editable-cell.ag-cell-focus:focus, +div[class*="ag-theme-uitk"] .editable-numeric-cell.ag-cell-focus:focus { + clip-path: inset(0, 0); + overflow: visible; +} + +div[class*="ag-theme-uitk"] .editable-cell input, +div[class*="ag-theme-uitk"] .numeric-cell input, +div[class*="ag-theme-uitk"] .editable-numeric-cell input { + border: var(--salt-size-border) var(--salt-editable-borderStyle) transparent; + padding: 0; + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); +} +div[class*="ag-theme-uitk"] .editable-cell input:focus, +div[class*="ag-theme-uitk"] .numeric-cell input:focus, +div[class*="ag-theme-uitk"] .editable-numeric-cell input:focus, +div[class*="ag-theme-uitk"] input[class^="ag-"][type="number"]:focus { + border: none; +} + +/* INPUT */ + +div[class*="ag-theme-uitk"] .ag-filter input[class^="ag-"][type="text"], +div[class*="ag-theme-uitk"] .ag-filter input[class^="ag-"][type="number"], +div[class*="ag-theme-uitk"] .ag-column-select input[class^="ag-"][type="text"], +div[class*="ag-theme-uitk"] .ag-column-select input[class^="ag-"][type="number"] { + border: none; + height: calc(var(--salt-size-base)); + padding: 0; +} + +div[class*="ag-theme-uitk"] .ag-filter input[class^="ag-"][type="text"]::placeholder, +div[class*="ag-theme-uitk"] .ag-filter input[class^="ag-"][type="number"]::placeholder, +div[class*="ag-theme-uitk"] .ag-column-select input[class^="ag-"][type="text"]::placeholder, +div[class*="ag-theme-uitk"] .ag-column-select input[class^="ag-"][type="number"]::placeholder { + color: var(--salt-content-secondary-foreground); + opacity: 1; +} + +div[class*="ag-theme-uitk"] .ag-filter input[class^="ag-"][type="text"]:focus, +div[class*="ag-theme-uitk"] .ag-filter input[class^="ag-"][type="number"]:focus, +div[class*="ag-theme-uitk"] .ag-column-select input[class^="ag-"][type="text"]:focus, +div[class*="ag-theme-uitk"] .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-uitk"] .ag-floating-filter-input input[class^="ag-"][type="text"], +div[class*="ag-theme-uitk"] .ag-floating-filter-input input[class^="ag-"][type="number"] { + border: none; +} +div[class*="ag-theme-uitk"][class*="light"] .ag-floating-filter-input input[class^="ag-"][type="text"]:focus, +div[class*="ag-theme-uitk"][class*="light"] .ag-floating-filter-input input[class^="ag-"][type="number"]:focus { + border: 2px dotted #2d81bd; +} +div[class*="ag-theme-uitk"][class*="dark"] .ag-floating-filter-input input[class^="ag-"][type="text"]:focus, +div[class*="ag-theme-uitk"][class*="dark"] .ag-floating-filter-input input[class^="ag-"][type="number"]:focus { + border: 2px dotted #64b1e4; +} + +/* CHECKBOX */ + +div[class*="ag-theme-uitk"] .ag-checkbox-input-wrapper { + border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor); + height: var(--salt-size-selectable); + width: var(--salt-size-selectable); +} + +div[class*="ag-theme-uitk"][class*="light"] .ag-checkbox-input-wrapper.ag-checked { + background: var(--salt-color-black); + border-color: var(--salt-color-black); +} +div[class*="ag-theme-uitk"][class*="dark"] .ag-checkbox-input-wrapper.ag-checked { + background: var(--salt-color-white); + border-color: var(--salt-color-white); +} + +/* BUTTON */ + +div[class*="ag-theme-uitk"] .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-uitk"] .ag-standard-button:hover { + background-color: var(--salt-actionable-secondary-background-hover); +} + +div[class*="ag-theme-uitk"] .ag-ltr .ag-filter-apply-panel-button { + margin-left: 8px; +} + +div[class*="ag-theme-uitk"] .ag-floating-filter:after { + width: 0; +} + +div[class*="ag-theme-uitk"] .ag-keyboard-focus .ag-header-cell:focus:after { + border: 0; +} + +div[class*="ag-theme-uitk"] .ag-ltr .ag-floating-filter-button { + margin-left: var(--salt-spacing-100); +} + +div[class*="ag-theme-uitk"] button[class^="ag-"]:focus, +div[class*="ag-theme-uitk"] 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-uitk"] .ag-select .ag-picker-field-wrapper { + border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-palette-neutral-primary-border); + border-radius: 0; +} + +div[class*="ag-theme-uitk"] .ag-select .ag-picker-field-icon { + margin-right: var(--salt-spacing-100); +} + +div[class*="ag-theme-uitk"] .ag-menu .ag-filter-body-wrapper { + display: flex; + flex-direction: column; + gap: 0; + padding: 0; +} + +div[class*="ag-theme-uitk"] .ag-simple-filter-body-wrapper > * { + margin-bottom: var(--salt-spacing-100); +} + +div[class*="ag-theme-uitk"] .ag-mini-filter { + margin: var(--salt-spacing-200) var(--salt-spacing-150); +} + +div[class*="ag-theme-uitk"] .ag-set-filter-item { + margin: 0; + padding-left: var(--salt-spacing-100); + padding-right: var(--salt-spacing-100); +} + +div[class*="ag-theme-uitk"] .ag-status-bar { + border: none; + border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-palette-neutral-primary-border); + color: var(--salt-content-secondary-foreground); + font-size: var(--salt-text-fontSize); + font-weight: var(--salt-text-label-fontWeight); + line-height: var(--salt-text-label-lineHeight); + height: var(--salt-size-base); + padding: 0 var(--salt-spacing-100); +} +div[class*="ag-theme-uitk"] .ag-status-name-value { + padding: var(--salt-spacing-100) 0; + margin: 0 var(--salt-spacing-100); +} +div[class*="ag-theme-uitk"] .ag-status-name-value-value { + font-weight: var(--salt-text-fontWeight-strong); + color: var(--salt-content-primary-foreground); +} + +div[class*="ag-theme-uitk"] .ag-paging-panel { + border-color: var(--salt-separable-secondary-borderColor); +} + +div[class*="ag-theme-uitk"] .ag-floating-bottom { + border-color: var(--salt-palette-neutral-primary-border); +} + +div[class*="ag-theme-uitk"] .ag-column-drop-horizontal { + border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-palette-neutral-primary-border); + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); +} + +div[class*="ag-theme-uitk"] .ag-column-drop-cell { + border-radius: 0; +} + +/* HD Compact */ + +div[class*="ag-theme-uitk-compact-light"] .ag-row, +div[class*="ag-theme-uitk-compact-dark"] .ag-row { + font-size: 10px; +} 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 c0c225d51d6..00000000000 --- a/packages/ag-grid-theme/css/uitk-ag-theme.scss +++ /dev/null @@ -1,444 +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"] { - --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/css/uitk-icons.css b/packages/ag-grid-theme/css/uitk-icons.css new file mode 100644 index 00000000000..a09dd4d2fb2 --- /dev/null +++ b/packages/ag-grid-theme/css/uitk-icons.css @@ -0,0 +1,229 @@ +@font-face { + font-family: "uitk-icons"; + src: url(../fonts/jpmuitk-icons.woff) format("woff"); +} + +[class*="ag-theme-uitk"] .ag-icon-aggregation:before { + font-family: "uitk-icons"; + content: "\e974"; +} + +[class*="ag-theme-uitk"] .ag-icon-arrows:before { + font-family: "uitk-icons"; + content: "\e970"; +} + +[class*="ag-theme-uitk"] .ag-icon-asc:before { + font-family: "uitk-icons"; + content: "\e940"; +} + +[class*="ag-theme-uitk"] .ag-icon-cancel:before { + font-family: "uitk-icons"; + content: "\e90e"; +} + +[class*="ag-theme-uitk"] .ag-icon-chart:before { + font-family: "uitk-icons"; + content: "\e904"; +} + +[class*="ag-theme-uitk"] .ag-icon-columns:before { + font-family: "uitk-icons"; + content: "\e910"; +} + +[class*="ag-theme-uitk"] .ag-icon-contracted:before { + font-family: "uitk-icons"; + content: "\e91b"; +} + +[class*="ag-theme-uitk"] .ag-icon-copy:before { + font-family: "uitk-icons"; + content: "\e90d"; +} + +[class*="ag-theme-uitk"] .ag-icon-cross:before { + font-family: "uitk-icons"; + content: "\e90e"; +} + +[class*="ag-theme-uitk"] .ag-icon-cut:before { + font-family: "uitk-icons"; + content: "\e96d"; +} + +[class*="ag-theme-uitk"] .ag-icon-csv:before { + font-family: "uitk-icons"; + content: "\e915"; +} + +[class*="ag-theme-uitk"] .ag-icon-desc:before { + font-family: "uitk-icons"; + content: "\e93f"; +} + +[class*="ag-theme-uitk"] .ag-icon-excel:before { + font-family: "uitk-icons"; + content: "\e91a"; +} + +[class*="ag-theme-uitk"] .ag-icon-expanded:before { + font-family: "uitk-icons"; + content: "\e950"; +} + +[class*="ag-theme-uitk"] .ag-icon-eye-slash:before { + font-family: "uitk-icons"; + content: "\e966"; +} + +[class*="ag-theme-uitk"] .ag-icon-eye:before { + font-family: "uitk-icons"; + content: "\e965"; +} + +[class*="ag-theme-uitk"] .ag-icon-filter:before { + font-family: "uitk-icons"; + content: "\e922"; +} + +/* [class*="ag-theme-uitk"] .ag-icon-filter-clear:before { + font-family: "uitk-icons"; + content: "\e9ac"; +} */ + +[class*="ag-theme-uitk"] .ag-icon-first:before { + font-family: "uitk-icons"; + content: "\e934"; +} + +/* [class*="ag-theme-uitk"] .ag-icon-group:before { + font-family: "uitk-icons"; + content: "\ea68"; +} */ + +[class*="ag-theme-uitk"] .ag-icon-last:before { + font-family: "uitk-icons"; + content: "\e951"; +} + +[class*="ag-theme-uitk"] .ag-icon-left:before { + font-family: "uitk-icons"; + content: "\e933"; +} + +[class*="ag-theme-uitk"] .ag-icon-linked:before { + font-family: "uitk-icons"; + content: "\e935"; +} + +[class*="ag-theme-uitk"] .ag-icon-loading:before { + font-family: "uitk-icons"; + content: "\e96f"; +} + +[class*="ag-theme-uitk"] .ag-icon-menu:before { + font-family: "uitk-icons"; + content: "\e969"; +} + +[class*="ag-theme-uitk"] .ag-icon-next:before { + font-family: "uitk-icons"; + content: "\e950"; +} + +[class*="ag-theme-uitk"] .ag-icon-none:before { + font-family: "uitk-icons"; + content: "\e971"; +} + +[class*="ag-theme-uitk"] .ag-icon-not-allowed:before { + font-family: "uitk-icons"; + content: "\e90e"; +} + +[class*="ag-theme-uitk"] .ag-icon-paste:before { + font-family: "uitk-icons"; + content: "\e946"; +} + +[class*="ag-theme-uitk"] .ag-icon-pin:before { + font-family: "uitk-icons"; + content: "\e944"; +} + +[class*="ag-theme-uitk"] .ag-icon-pivot:before { + font-family: "uitk-icons"; + content: "\e979"; +} + +[class*="ag-theme-uitk"] .ag-icon-previous:before { + font-family: "uitk-icons"; + content: "\e933"; +} + +[class*="ag-theme-uitk"] .ag-icon-right:before { + font-family: "uitk-icons"; + content: "\e950"; +} + +[class*="ag-theme-uitk"] .ag-icon-save:before { + font-family: "uitk-icons"; + content: "\e953"; +} + +[class*="ag-theme-uitk"] .ag-icon-small-down:before { + font-family: "uitk-icons"; + content: "\e91b"; +} + +[class*="ag-theme-uitk"] .ag-icon-small-left:before { + font-family: "uitk-icons"; + content: "\e981"; +} + +[class*="ag-theme-uitk"] .ag-icon-small-right:before { + font-family: "uitk-icons"; + content: "\e980"; +} + +[class*="ag-theme-uitk"] .ag-icon-small-up:before { + font-family: "uitk-icons"; + content: "\e982"; +} + +[class*="ag-theme-uitk"] .ag-icon-tick:before { + font-family: "uitk-icons"; + content: "\e95b"; +} + +[class*="ag-theme-uitk"] .ag-icon-tree-closed:before { + font-family: "uitk-icons"; + content: "\e950"; +} + +[class*="ag-theme-uitk"] .ag-icon-tree-open:before { + font-family: "uitk-icons"; + content: "\e91b"; +} + +[class*="ag-theme-uitk"] .ag-icon-unlinked:before { + font-family: "uitk-icons"; + content: "\e95e"; +} + +[class*="ag-theme-uitk"] .ag-checkbox-input-wrapper:after { + content: ""; + font-family: "uitk-icons"; +} + +[class*="ag-theme-uitk"] .ag-checkbox-input-wrapper.ag-checked:after { + content: "\e95b"; + font-family: "uitk-icons"; +} + +[class*="ag-theme-uitk"] .ag-checkbox-input-wrapper.ag-indeterminate:after { + content: "\e94e"; + font-family: "uitk-icons"; +} diff --git a/packages/ag-grid-theme/fonts/salt-icons.woff b/packages/ag-grid-theme/fonts/salt-icons.woff index a7cd1c30362..b5052a3e28c 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 172434fcf7b..083bc236f0a 100644 --- a/packages/ag-grid-theme/package.json +++ b/packages/ag-grid-theme/package.json @@ -8,10 +8,11 @@ "directory": "packages/ag-grid-theme" }, "bugs": "https://github.com/jpmorganchase/salt-ds/issues", - "style": "uitk-ag-theme.css", + "style": "uitk.css", "files": [ - "/uitk-ag-theme.css", - "/salt-ag-theme.css" + "/fonts", + "/uitk.css", + "/salt.css" ], "scripts": { "build": "yarn node ./scripts/build.mjs", @@ -22,12 +23,6 @@ "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" } } diff --git a/packages/ag-grid-theme/salt.css b/packages/ag-grid-theme/salt.css new file mode 100644 index 00000000000..bb8a91c700e --- /dev/null +++ b/packages/ag-grid-theme/salt.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..63e7ddf512d 100644 --- a/packages/ag-grid-theme/scripts/build.mjs +++ b/packages/ag-grid-theme/scripts/build.mjs @@ -1,106 +1,43 @@ -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"; 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.css", "uitk.css"], + assetNames: "[dir]/[name]", + outdir: buildFolder, + loader: { + ".woff": "file", + }, + write: true, + bundle: true, + logLevel: "info", + }) + .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/src/__tests__/__e2e__/AgGridTheme-uitk.cy.tsx b/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme-uitk.cy.tsx new file mode 100644 index 00000000000..31f29a61c45 --- /dev/null +++ b/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme-uitk.cy.tsx @@ -0,0 +1,201 @@ +import { composeStories } from "@storybook/react"; +import * as agGridStories from "@stories/ag-grid-theme.stories"; + +const { + BasicGrid, + CheckboxSelection, + ContextMenu, + CustomFilter, + HDCompact, + HDCompactDark, +} = composeStories(agGridStories); + +describe("Given Ag Grid Theme - uitk", () => { + describe("WHEN the Default story is mounted", () => { + describe("WHEN column menu is open", () => { + describe("AND general tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND filter tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="filter"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND columns tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="columns"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + describe("WHEN range selection", () => { + it("AND selection vertical THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + + cy.get(".ag-cell") + .eq(0) + .realMouseDown({ scrollBehavior: false }) + .should("have.class", "ag-cell-range-selected") + .realMouseMove(0, 100, { scrollBehavior: false }); + + cy.get(".ag-cell") + .eq(6) + .realMouseUp({ scrollBehavior: false }) + .realMouseWheel({ deltaY: -100 }); + + cy.get(".ag-cell-range-selected").should("have.length", 3); + + cy.wait(500); + + cy.get(".ag-theme-salt-light").matchImage({ maxDiffThreshold: 0.1 }); + }); + + it("AND selection horizontal THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + + cy.get(".ag-cell") + .eq(0) + .realMouseDown({ scrollBehavior: false }) + .should("have.class", "ag-cell-range-selected") + .realMouseMove(600, 0, { scrollBehavior: false }); + + cy.get(".ag-cell").eq(3).realMouseUp({ scrollBehavior: false }); + + cy.get(".ag-cell-range-selected").should("have.length", 3); + + cy.wait(500); + + cy.get(".ag-theme-salt-light").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + describe("WHEN the CheckboxSelection story is mounted", () => { + describe("WHEN editable-cell is focused", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".editable-cell").realClick(); + cy.focused().parents(".ag-row").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("WHEN editable-cell is in edit mode", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".editable-cell").realClick({ clickCount: 2 }); + cy.focused().parents(".ag-row").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("WHEN number-cell column menu is open", () => { + describe("AND filter tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.contains("Population") + .parent() + .prev(".ag-header-cell-menu-button") + .realClick(); + cy.get('[aria-label="filter"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + }); + describe("WHEN the ContextMenu story is mounted", () => { + describe("WHEN cell context menu is open", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.findByText("Alabama").rightclick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + describe("WHEN the CustomFilter story is mounted", () => { + describe("WHEN custom filter is focused", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-floating-filter-input").realClick(); + cy.focused() + .parents(".ag-header-row") + .matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + describe("WHEN the HDCompact story is mounted", () => { + describe("WHEN column menu is open", () => { + describe("AND general tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND filter tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="filter"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND columns tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="columns"]').realClick(); + cy.wait(500); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + }); + describe("WHEN the HDCompactDark story is mounted", () => { + describe("WHEN column menu is open", () => { + describe("AND general tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND filter tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="filter"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND columns tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="columns"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + }); +}); diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme.cy.tsx b/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme.cy.tsx new file mode 100644 index 00000000000..6d7eb26f94f --- /dev/null +++ b/packages/ag-grid-theme/src/__tests__/__e2e__/AgGridTheme.cy.tsx @@ -0,0 +1,214 @@ +import { composeStories } from "@storybook/react"; +import * as agGridStories from "@stories/ag-grid-theme.stories"; + +const { + BasicGrid, + CheckboxSelection, + ContextMenu, + CustomFilter, + HDCompact, + HDCompactDark, +} = composeStories(agGridStories); + +describe("Given Ag Grid Theme", () => { + describe("WHEN the Default story is mounted", () => { + describe("WHEN column menu is open", () => { + describe("AND general tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND filter tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="filter"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND columns tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="columns"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + describe("AND cell is hovered", () => { + it("THEN should show tooltip", () => { + cy.mount(); + cy.wait(500); + cy.findByText("Capital").realHover(); + cy.findAllByText("Capital").should("have.length", 2); + cy.get(".ag-tooltip").should( + "have.css", + "background-color", + "rgb(255, 255, 255)" + ); + }); + }); + describe("WHEN range selection", () => { + it("AND selection vertical THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + + cy.get(".ag-cell") + .eq(0) + .realMouseDown({ scrollBehavior: false }) + .should("have.class", "ag-cell-range-selected") + .realMouseMove(0, 100, { scrollBehavior: false }); + + cy.get(".ag-cell") + .eq(6) + .realMouseUp({ scrollBehavior: false }) + .realMouseWheel({ deltaY: -100 }); + + cy.get(".ag-cell-range-selected").should("have.length", 3); + + cy.wait(500); + + cy.get(".ag-root-wrapper").matchImage({ maxDiffThreshold: 0.1 }); + }); + + it("AND selection horizontal THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + + cy.get(".ag-cell") + .eq(0) + .realMouseDown({ scrollBehavior: false }) + .should("have.class", "ag-cell-range-selected") + .realMouseMove(600, 0, { scrollBehavior: false }); + + cy.get(".ag-cell").eq(3).realMouseUp({ scrollBehavior: false }); + + cy.get(".ag-cell-range-selected").should("have.length", 3); + + cy.wait(500); + + cy.get(".ag-root-wrapper").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + describe("WHEN the CheckboxSelection story is mounted", () => { + describe("WHEN editable-cell is focused", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".editable-cell").realClick(); + cy.focused().parents(".ag-row").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("WHEN editable-cell is in edit mode", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".editable-cell").realClick({ clickCount: 2 }); + cy.focused().parents(".ag-row").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("WHEN number-cell column menu is open", () => { + describe("AND filter tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.contains("Population") + .parent() + .prev(".ag-header-cell-menu-button") + .realClick(); + cy.get('[aria-label="filter"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + }); + describe("WHEN the ContextMenu story is mounted", () => { + describe("WHEN cell context menu is open", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.findByText("Alabama").rightclick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + describe("WHEN the CustomFilter story is mounted", () => { + describe("WHEN custom filter is focused", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-floating-filter-input").realClick(); + cy.focused() + .parents(".ag-floating-filter") + .matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + describe("WHEN the HDCompact story is mounted", () => { + describe("WHEN column menu is open", () => { + describe("AND general tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND filter tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="filter"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND columns tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="columns"]').realClick(); + cy.wait(500); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + }); + describe("WHEN the HDCompactDark story is mounted", () => { + describe("WHEN column menu is open", () => { + describe("AND general tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND filter tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="filter"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + describe("AND columns tab is selected", () => { + it("THEN should match screenshot", () => { + cy.mount(); + cy.wait(500); + cy.get(".ag-header-cell-menu-button").realClick(); + cy.get('[aria-label="columns"]').realClick(); + cy.get(".ag-menu").matchImage({ maxDiffThreshold: 0.1 }); + }); + }); + }); + }); +}); diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png new file mode 100644 index 00000000000..c6899914802 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png new file mode 100644 index 00000000000..b5c70d3f299 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..3186e2dc9b6 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png new file mode 100644 index 00000000000..c8ca637b917 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png new file mode 100644 index 00000000000..f53a0eee705 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..c5892337621 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..f924e663387 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..4a277fe27c5 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png new file mode 100644 index 00000000000..8b802cb1462 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png new file mode 100644 index 00000000000..f364b302be4 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..6a23d2bc58b Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..c0b8436376b Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..749cc897dda Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..9406d06085b Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..cc0b18db2c1 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..ba070d54b13 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme - uitk WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png new file mode 100644 index 00000000000..df7d7a82e34 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is focused THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png new file mode 100644 index 00000000000..bd955ca0ff3 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN editable-cell is in edit mode THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..fdf2fb18f4d Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CheckboxSelection story is mounted WHEN number-cell column menu is open AND filter tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png new file mode 100644 index 00000000000..0696750e20c Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the ContextMenu story is mounted WHEN cell context menu is open THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png new file mode 100644 index 00000000000..d744eb5c43f Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the CustomFilter story is mounted WHEN custom filter is focused THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..50e6e69bfde Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..7f36d1c46cc Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..e8718fa5ea8 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png new file mode 100644 index 00000000000..8b802cb1462 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection horizontal THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png new file mode 100644 index 00000000000..f364b302be4 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the Default story is mounted WHEN range selection AND selection vertical THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..7f562c8db48 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..9ce1bc6a5c7 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..987a3c3cf04 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompact story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..ab5d7c3ca5f Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND columns tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..57bf9cb2fc7 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND filter tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png new file mode 100644 index 00000000000..8b5caa64373 Binary files /dev/null and b/packages/ag-grid-theme/src/__tests__/__e2e__/__image_snapshots__/Given Ag Grid Theme WHEN the HDCompactDark story is mounted WHEN column menu is open AND general tab is selected THEN should match screenshot #0.png differ diff --git a/packages/ag-grid-theme/stories/dependencies/ThemeSwitcher.tsx b/packages/ag-grid-theme/src/dependencies/ThemeSwitcher.tsx similarity index 69% rename from packages/ag-grid-theme/stories/dependencies/ThemeSwitcher.tsx rename to packages/ag-grid-theme/src/dependencies/ThemeSwitcher.tsx index b10689e0f95..7276bde74a4 100644 --- a/packages/ag-grid-theme/stories/dependencies/ThemeSwitcher.tsx +++ b/packages/ag-grid-theme/src/dependencies/ThemeSwitcher.tsx @@ -1,21 +1,25 @@ import { SyntheticEvent, useState } from "react"; import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core"; -export const useAgGridThemeSwitcher = () => { - const [themeName, setThemeName] = useState("salt"); +export const useAgGridThemeSwitcher = (defaultTheme: string) => { + const [themeName, setThemeName] = useState(defaultTheme); return { - switcher: , + switcher: ( + + ), themeName, }; }; export const AgGridThemeSwitcher = ({ onThemeSelect, + themeName, }: { onThemeSelect: (themeName: string) => void; + themeName: string; }) => { - const [theme, setTheme] = useState("salt"); + const [theme, setTheme] = useState(themeName); const onChange = (event: SyntheticEvent) => { setTheme(event.currentTarget.value); 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 100% rename from packages/ag-grid-theme/stories/dependencies/customFilterExampleColumns.ts rename to packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts diff --git a/packages/ag-grid-theme/stories/dependencies/dataGridExampleColumns.ts b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts similarity index 99% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleColumns.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts index ebeb66478b0..7543bed5d8c 100644 --- a/packages/ag-grid-theme/stories/dependencies/dataGridExampleColumns.ts +++ b/packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts @@ -5,6 +5,7 @@ const dataGridExampleColumns: ColDef[] = [ headerName: "", field: "on", width: 70, + flex: 1, checkboxSelection: true, headerCheckboxSelection: true, pinned: "left", 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 100% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleColumnsWrap.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts 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 100% rename from packages/ag-grid-theme/stories/dependencies/dataGridExampleRowGrouping.ts rename to packages/ag-grid-theme/src/dependencies/dataGridExampleRowGrouping.ts 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 96% rename from packages/ag-grid-theme/stories/dependencies/useAgGridHelpers.ts rename to packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts index 344359199c1..3669cfffae7 100644 --- a/packages/ag-grid-theme/stories/dependencies/useAgGridHelpers.ts +++ b/packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts @@ -67,7 +67,7 @@ export function useAgGridHelpers({ } }, [density, agThemeName, compact]); - const className = `${agThemeName}-${density}${ + const className = `${agThemeName}${ compact && density === "high" ? `-compact` : `` }-${mode}`; @@ -86,8 +86,8 @@ export function useAgGridHelpers({ 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]); + }); + }, [rowHeight, isGridReady, apiRef]); return { containerProps: { 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 94% rename from packages/ag-grid-theme/stories/examples/CheckboxSelection.tsx rename to packages/ag-grid-theme/src/examples/CheckboxSelection.tsx index fa3b36eaf6b..e4035dcabba 100644 --- a/packages/ag-grid-theme/stories/examples/CheckboxSelection.tsx +++ b/packages/ag-grid-theme/src/examples/CheckboxSelection.tsx @@ -24,7 +24,7 @@ const CheckboxSelection = (props: AgGridReactProps) => { }; CheckboxSelection.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 94% rename from packages/ag-grid-theme/stories/examples/Coloration.tsx rename to packages/ag-grid-theme/src/examples/Coloration.tsx index cd527021beb..4a2afbb74ed 100644 --- a/packages/ag-grid-theme/stories/examples/Coloration.tsx +++ b/packages/ag-grid-theme/src/examples/Coloration.tsx @@ -23,7 +23,7 @@ const Coloration = (props: AgGridReactProps) => { }; Coloration.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 96% rename from packages/ag-grid-theme/stories/examples/ColumnGroup.tsx rename to packages/ag-grid-theme/src/examples/ColumnGroup.tsx index cfb5a6b293c..e5cfe2e1b0a 100644 --- a/packages/ag-grid-theme/stories/examples/ColumnGroup.tsx +++ b/packages/ag-grid-theme/src/examples/ColumnGroup.tsx @@ -65,7 +65,7 @@ const columnsWithGrouping = (groupName: string): (ColGroupDef | ColDef)[] => [ ]; ColumnGroup.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 94% rename from packages/ag-grid-theme/stories/examples/ColumnSpanning.tsx rename to packages/ag-grid-theme/src/examples/ColumnSpanning.tsx index 58f1a1c306b..249cdd4bb95 100644 --- a/packages/ag-grid-theme/stories/examples/ColumnSpanning.tsx +++ b/packages/ag-grid-theme/src/examples/ColumnSpanning.tsx @@ -23,7 +23,7 @@ const ColumnSpanning = (props: AgGridReactProps) => { }; ColumnSpanning.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 98% rename from packages/ag-grid-theme/stories/examples/ContextMenu.tsx rename to packages/ag-grid-theme/src/examples/ContextMenu.tsx index 83a7caa3cc6..f5ac76e3ebb 100644 --- a/packages/ag-grid-theme/stories/examples/ContextMenu.tsx +++ b/packages/ag-grid-theme/src/examples/ContextMenu.tsx @@ -158,7 +158,7 @@ const ContextMenu = (props: AgGridReactProps) => { }; ContextMenu.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 95% rename from packages/ag-grid-theme/stories/examples/CustomFilter.tsx rename to packages/ag-grid-theme/src/examples/CustomFilter.tsx index c9c2b7542a4..19110b479f6 100644 --- a/packages/ag-grid-theme/stories/examples/CustomFilter.tsx +++ b/packages/ag-grid-theme/src/examples/CustomFilter.tsx @@ -2,8 +2,7 @@ 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 { AgGridReact } from "ag-grid-react"; import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; @@ -99,7 +98,6 @@ const CustomFilter = (props: AgGridReactProps) => { columnDefs={customFilterExampleColumns} rowData={dataGridExampleData} {...agGridProps} - {...props} /> @@ -107,7 +105,7 @@ const CustomFilter = (props: AgGridReactProps) => { }; CustomFilter.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 95% rename from packages/ag-grid-theme/stories/examples/Default.tsx rename to packages/ag-grid-theme/src/examples/Default.tsx index e03db538e97..440bac88b48 100644 --- a/packages/ag-grid-theme/stories/examples/Default.tsx +++ b/packages/ag-grid-theme/src/examples/Default.tsx @@ -41,7 +41,7 @@ const Default = (props: AgGridReactProps) => { }; Default.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 94% rename from packages/ag-grid-theme/stories/examples/DragRowOrder.tsx rename to packages/ag-grid-theme/src/examples/DragRowOrder.tsx index 860f7bb20ab..bda0ff55e48 100644 --- a/packages/ag-grid-theme/stories/examples/DragRowOrder.tsx +++ b/packages/ag-grid-theme/src/examples/DragRowOrder.tsx @@ -25,7 +25,7 @@ const DragRowOrder = (props: AgGridReactProps) => { }; DragRowOrder.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 94% rename from packages/ag-grid-theme/stories/examples/FloatingFilter.tsx rename to packages/ag-grid-theme/src/examples/FloatingFilter.tsx index e8a7e72cd24..721aed1fdcb 100644 --- a/packages/ag-grid-theme/stories/examples/FloatingFilter.tsx +++ b/packages/ag-grid-theme/src/examples/FloatingFilter.tsx @@ -24,7 +24,7 @@ const FloatingFilter = (props: AgGridReactProps) => { }; FloatingFilter.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 89% rename from packages/ag-grid-theme/stories/examples/HDCompact.tsx rename to packages/ag-grid-theme/src/examples/HDCompact.tsx index 65114be3586..0a3c4737699 100644 --- a/packages/ag-grid-theme/stories/examples/HDCompact.tsx +++ b/packages/ag-grid-theme/src/examples/HDCompact.tsx @@ -52,7 +52,13 @@ const HDCompact = (props: AgGridReactProps) => { }; HDCompact.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; export default HDCompact; + +export const HDCompactUITK = () => ; + +HDCompactUITK.parameters = { + chromatic: { disableSnapshot: false, delay: 200 }, +}; 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..0e3c331e595 --- /dev/null +++ b/packages/ag-grid-theme/src/examples/Icons.css @@ -0,0 +1,8 @@ +div[class^="ag-icon"]:before { + margin-right: var(--salt-spacing-100); +} + +div[class*="ag-theme-salt"] .ag-icon-loading, +div[class*="ag-theme-uitk"] .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..4fc8acd4e23 --- /dev/null +++ b/packages/ag-grid-theme/src/examples/Icons.tsx @@ -0,0 +1,79 @@ +import { useComponentCssInjection } from "@salt-ds/styles"; +import { useWindow } from "@salt-ds/window"; +import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; +import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; + +import iconCss from "./Icons.css"; + +const Icons = (props: { defaultTheme: string }) => { + const targetWindow = useWindow(); + useComponentCssInjection({ + testId: "salt-ag-grid-icons", + css: iconCss, + window: targetWindow, + }); + const { defaultTheme = "salt" } = props; + const { themeName, switcher } = useAgGridThemeSwitcher(defaultTheme); + + const { + containerProps: { className }, + } = useAgGridHelpers({ + agThemeName: `ag-theme-${themeName}`, + }); + + return ( + <> + {switcher} +
+
aggregation
+
arrows
+
asc
+
cancel
+
chart
+
columns
+
contracted
+
copy
+
cross
+
cut
+
csv
+
desc
+
excel
+
expanded
+
eye-slash
+
eye
+
filter
+
filter-clear
+
first
+
group
+
last
+
left
+
linked
+
loading
+
menu
+
next
+
none
+
not-allowed
+
paste
+
pin
+
pivot
+
previous
+
right
+
save
+
small-down
+
small-left
+
small-right
+
small-up
+
tick
+
tree-closed
+
tree-open
+
unlinked
+
+ + ); +}; + +Icons.parameters = { + chromatic: { disableSnapshot: false, delay: 200 }, +}; + +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 97% rename from packages/ag-grid-theme/stories/examples/InfiniteScroll.tsx rename to packages/ag-grid-theme/src/examples/InfiniteScroll.tsx index 9c4669276d9..f6d67a44b19 100644 --- a/packages/ag-grid-theme/stories/examples/InfiniteScroll.tsx +++ b/packages/ag-grid-theme/src/examples/InfiniteScroll.tsx @@ -73,7 +73,7 @@ const infiniteScrollComponents = { }; InfiniteScroll.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 95% rename from packages/ag-grid-theme/stories/examples/LoadingOverlay.tsx rename to packages/ag-grid-theme/src/examples/LoadingOverlay.tsx index b02be2bd1b9..4b01e3dbe95 100644 --- a/packages/ag-grid-theme/stories/examples/LoadingOverlay.tsx +++ b/packages/ag-grid-theme/src/examples/LoadingOverlay.tsx @@ -35,7 +35,7 @@ const LoadingOverlay = (props: AgGridReactProps) => { }; LoadingOverlay.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 75% rename from packages/ag-grid-theme/stories/examples/MasterDetail.tsx rename to packages/ag-grid-theme/src/examples/MasterDetail.tsx index a8219bb16ef..b3c71913bfe 100644 --- a/packages/ag-grid-theme/stories/examples/MasterDetail.tsx +++ b/packages/ag-grid-theme/src/examples/MasterDetail.tsx @@ -1,4 +1,4 @@ -import { AgGridReact, AgGridReactProps } from "ag-grid-react"; +import { AgGridReact } from "ag-grid-react"; import { useCallback, useRef } from "react"; import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import rowData from "../dependencies/dataGridExampleData"; @@ -22,6 +22,19 @@ const MasterDetail = (props: AgGridReactProps) => { }); }, []); + const detailCellRenderer = () => ( +
+ +
+ ); + return (
{ }; MasterDetail.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; export default MasterDetail; + +export const MasterDetailUITK = () => ; + +MasterDetailUITK.parameters = { + chromatic: { disableSnapshot: false, delay: 200 }, +}; diff --git a/packages/ag-grid-theme/stories/examples/NoDataOverlay.tsx b/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx similarity index 96% rename from packages/ag-grid-theme/stories/examples/NoDataOverlay.tsx rename to packages/ag-grid-theme/src/examples/NoDataOverlay.tsx index 5b6b8ccd31a..82c406ab68a 100644 --- a/packages/ag-grid-theme/stories/examples/NoDataOverlay.tsx +++ b/packages/ag-grid-theme/src/examples/NoDataOverlay.tsx @@ -50,7 +50,7 @@ const NoDataOverlay = (props: AgGridReactProps) => { }; NoDataOverlay.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 74% rename from packages/ag-grid-theme/stories/examples/Pagination.tsx rename to packages/ag-grid-theme/src/examples/Pagination.tsx index 6eb914da23e..18126cb07fc 100644 --- a/packages/ag-grid-theme/stories/examples/Pagination.tsx +++ b/packages/ag-grid-theme/src/examples/Pagination.tsx @@ -34,22 +34,25 @@ const PagedGrid = (props: AgGridReactProps) => { ); }; -const Pagination = () => ( -
- -
-); +const Pagination = (props: { defaultTheme: string }) => { + const { defaultTheme = "salt" } = props; + return ( +
+ +
+ ); +}; Pagination.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 95% rename from packages/ag-grid-theme/stories/examples/ParentChildRows.tsx rename to packages/ag-grid-theme/src/examples/ParentChildRows.tsx index e5648aed2e1..dc90f67f734 100644 --- a/packages/ag-grid-theme/stories/examples/ParentChildRows.tsx +++ b/packages/ag-grid-theme/src/examples/ParentChildRows.tsx @@ -31,7 +31,7 @@ const ParentChildRows = (props: AgGridReactProps) => { }; ParentChildRows.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 96% rename from packages/ag-grid-theme/stories/examples/PinnedRows.tsx rename to packages/ag-grid-theme/src/examples/PinnedRows.tsx index b54678afa4e..d4a8da293a9 100644 --- a/packages/ag-grid-theme/stories/examples/PinnedRows.tsx +++ b/packages/ag-grid-theme/src/examples/PinnedRows.tsx @@ -33,6 +33,7 @@ const headerRow: any[] = [ ]; type PinnedRowsExampleProps = AgGridReactProps & { + defaultTheme?: string; aggregateColumn: string; aggregate: "sum" | "min" | "max"; showFooter: boolean; @@ -40,6 +41,7 @@ type PinnedRowsExampleProps = AgGridReactProps & { }; const PinnedRowsExample = function PinnedRowsExample({ + defaultTheme = "salt", aggregate = "sum", aggregateColumn = "population", columnDefs = dataGridExampleColumns, @@ -98,5 +100,5 @@ export default function PinnedRows(props: PinnedRowsExampleProps) { } PinnedRows.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; diff --git a/packages/ag-grid-theme/stories/examples/RowGroupPanel.tsx b/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx similarity index 94% rename from packages/ag-grid-theme/stories/examples/RowGroupPanel.tsx rename to packages/ag-grid-theme/src/examples/RowGroupPanel.tsx index e3542b46257..33c76661e38 100644 --- a/packages/ag-grid-theme/stories/examples/RowGroupPanel.tsx +++ b/packages/ag-grid-theme/src/examples/RowGroupPanel.tsx @@ -27,7 +27,7 @@ const RowGroupPanel = (props: AgGridReactProps) => { }; RowGroupPanel.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 94% rename from packages/ag-grid-theme/stories/examples/RowGrouping.tsx rename to packages/ag-grid-theme/src/examples/RowGrouping.tsx index bba3ae30797..b64d2320d86 100644 --- a/packages/ag-grid-theme/stories/examples/RowGrouping.tsx +++ b/packages/ag-grid-theme/src/examples/RowGrouping.tsx @@ -23,7 +23,7 @@ const RowGrouping = (props: AgGridReactProps) => { }; RowGrouping.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 100% rename from packages/ag-grid-theme/stories/examples/SortAndFilter.tsx rename to packages/ag-grid-theme/src/examples/SortAndFilter.tsx diff --git a/packages/ag-grid-theme/stories/examples/StatusBar.tsx b/packages/ag-grid-theme/src/examples/StatusBar.tsx similarity index 97% rename from packages/ag-grid-theme/stories/examples/StatusBar.tsx rename to packages/ag-grid-theme/src/examples/StatusBar.tsx index 4e850d6b95d..21588ef1c4d 100644 --- a/packages/ag-grid-theme/stories/examples/StatusBar.tsx +++ b/packages/ag-grid-theme/src/examples/StatusBar.tsx @@ -51,7 +51,7 @@ const StatusBar = (props: AgGridReactProps) => { }; StatusBar.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; export default StatusBar; diff --git a/packages/ag-grid-theme/stories/examples/VariantSecondary.tsx b/packages/ag-grid-theme/src/examples/VariantSecondary.tsx similarity index 95% rename from packages/ag-grid-theme/stories/examples/VariantSecondary.tsx rename to packages/ag-grid-theme/src/examples/VariantSecondary.tsx index 39570a1766e..56ad57085ad 100644 --- a/packages/ag-grid-theme/stories/examples/VariantSecondary.tsx +++ b/packages/ag-grid-theme/src/examples/VariantSecondary.tsx @@ -34,7 +34,7 @@ const VariantSecondary = (props: AgGridReactProps) => { }; VariantSecondary.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; export default VariantSecondary; diff --git a/packages/ag-grid-theme/stories/examples/VariantZebra.tsx b/packages/ag-grid-theme/src/examples/VariantZebra.tsx similarity index 95% rename from packages/ag-grid-theme/stories/examples/VariantZebra.tsx rename to packages/ag-grid-theme/src/examples/VariantZebra.tsx index 4b4fc38cff5..a279c2dc0de 100644 --- a/packages/ag-grid-theme/stories/examples/VariantZebra.tsx +++ b/packages/ag-grid-theme/src/examples/VariantZebra.tsx @@ -34,7 +34,7 @@ const VariantZebra = (props: AgGridReactProps) => { }; VariantZebra.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 100% rename from packages/ag-grid-theme/stories/examples/WrappedCell.tsx rename to packages/ag-grid-theme/src/examples/WrappedCell.tsx diff --git a/packages/ag-grid-theme/stories/examples/WrappedHeader.tsx b/packages/ag-grid-theme/src/examples/WrappedHeader.tsx similarity index 94% rename from packages/ag-grid-theme/stories/examples/WrappedHeader.tsx rename to packages/ag-grid-theme/src/examples/WrappedHeader.tsx index b1d31f2777f..35096fce929 100644 --- a/packages/ag-grid-theme/stories/examples/WrappedHeader.tsx +++ b/packages/ag-grid-theme/src/examples/WrappedHeader.tsx @@ -18,7 +18,7 @@ const statusBar = { ], }; -const WrappedHeader = (props: AgGridReactProps) => { +const WrappedHeader = (props: { defaultTheme: string }) => { const [compact, setCompact] = useState(false); const { themeName } = useAgGridThemeSwitcher(); const { api, agGridProps, containerProps, isGridReady } = useAgGridHelpers({ @@ -61,7 +61,6 @@ const WrappedHeader = (props: AgGridReactProps) => { wrapHeaderText: true, }} {...restAgGridProps} - {...props} />
@@ -69,7 +68,7 @@ const WrappedHeader = (props: AgGridReactProps) => { }; WrappedHeader.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { disableSnapshot: false, delay: 200 }, }; 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 100% rename from packages/ag-grid-theme/stories/examples/index.ts rename to packages/ag-grid-theme/src/examples/index.ts diff --git a/packages/ag-grid-theme/stories/ag-grid.stories.tsx b/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx similarity index 88% rename from packages/ag-grid-theme/stories/ag-grid.stories.tsx rename to packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx index 1609ce27072..9f59568b8d5 100644 --- a/packages/ag-grid-theme/stories/ag-grid.stories.tsx +++ b/packages/ag-grid-theme/stories/ag-grid-theme.stories.tsx @@ -2,11 +2,9 @@ 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"; +import "ag-grid-community/styles/ag-grid.css"; +import "../salt.css"; +import "../uitk.css"; export default { title: "Ag Grid/Ag Grid Theme", @@ -67,4 +65,4 @@ export { VariantZebra, WrappedCell, WrappedHeader, -} from "./examples"; +} from "../src/examples"; 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/uitk.css b/packages/ag-grid-theme/uitk.css new file mode 100644 index 00000000000..6e16e2dbcb5 --- /dev/null +++ b/packages/ag-grid-theme/uitk.css @@ -0,0 +1,2 @@ +@import url(css/uitk-ag-grid-theme.css); +@import url(css/uitk-icons.css); diff --git a/packages/theme/scripts/build.mjs b/packages/theme/scripts/build.mjs index e848df40db2..751776c721a 100644 --- a/packages/theme/scripts/build.mjs +++ b/packages/theme/scripts/build.mjs @@ -5,7 +5,7 @@ import fs from "node:fs"; import { fileURLToPath } from "node:url"; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const buildFolder = path.join(__dirname, "../../../dist/salt-ds-theme"); +const buildFolder = path.join(__dirname, "../../../dist/salt-ds-ag-grid-theme"); deleteSync([buildFolder], { force: true }); diff --git a/site/docs/components/ag-grid-theme/index.mdx b/site/docs/components/ag-grid-theme/index.mdx index b7761727643..1bc4728701d 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 versions 29 and 30. 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..2fb1ddcf08e 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,8 +37,8 @@ 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 "@salt-ds/ag-grid-theme/salt-ag-theme.css"; +import "ag-grid-community/styles/ag-grid.css"; +import "@salt-ds/ag-grid-theme/salt.css"; ``` Then wrap your AG Grid with the corresponding class names shown below: @@ -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, which are available only on salt theme, use these CSS class names: -```js +``` .ag-theme-salt-variant-secondary .ag-theme-salt-variant-zebra ``` @@ -82,3 +73,24 @@ For variants, use these CSS class names: For editable fields, add the class name `.editable-cell` to the `cellClass` array in your column definition. For fields displaying numeric values, add the class name `.numeric-cell` to the `cellClass` array in your column definition. + +#### Import UITK AG Grid theme + +UITK AG Grid theme contains CSS files with a theme that resembles the Toolkit V1 Data Grid component; use this when you would like to keep the Toolkit V1 theme. + +To import the UITK AG Grid theme, use: + +```js +import "@salt-ds/ag-grid-theme/uitk.css"; +``` + +For light mode, use these CSS class name `.ag-theme-uitk-light`. + +For dark mode, use these CSS class name `.ag-theme-uitk-dark`. + +For `compact` version, use these CSS class names: + +```js +.ag-theme-uitk-compact-light +.ag-theme-uitk-compact-dark +``` diff --git a/site/src/components/components/AGThemeProvider.tsx b/site/src/components/components/AGThemeProvider.tsx index ab897d42826..3c56f7f6da5 100644 --- a/site/src/components/components/AGThemeProvider.tsx +++ b/site/src/components/components/AGThemeProvider.tsx @@ -1,8 +1,7 @@ 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 "@salt-ds/ag-grid-theme/salt-ag-theme.css"; +import "ag-grid-community/styles/ag-grid.css"; +import "@salt-ds/ag-grid-theme/salt.css"; interface AGThemeProviderProps { children: ReactNode; diff --git a/site/src/examples/ag-grid-theme/CheckboxSelection.tsx b/site/src/examples/ag-grid-theme/CheckboxSelection.tsx index 2fb641b6369..b32a3e1e494 100644 --- a/site/src/examples/ag-grid-theme/CheckboxSelection.tsx +++ b/site/src/examples/ag-grid-theme/CheckboxSelection.tsx @@ -3,6 +3,7 @@ import { useAgGridHelpers } from "./useAgGridHelpers"; import { defaultColumns, defaultData } from "./data"; export const CheckboxSelection = () => { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. 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..5ade214033a 100644 --- a/site/src/examples/ag-grid-theme/Coloration.tsx +++ b/site/src/examples/ag-grid-theme/Coloration.tsx @@ -3,6 +3,7 @@ import { useAgGridHelpers } from "./useAgGridHelpers"; import { coloredColumns, defaultData } from "./data"; export const Coloration = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. 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..5f70f146633 100644 --- a/site/src/examples/ag-grid-theme/ColumnGroup.tsx +++ b/site/src/examples/ag-grid-theme/ColumnGroup.tsx @@ -3,6 +3,7 @@ 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. For complete example check the `Default` example. 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..7aae846da4e 100644 --- a/site/src/examples/ag-grid-theme/ColumnSpanning.tsx +++ b/site/src/examples/ag-grid-theme/ColumnSpanning.tsx @@ -3,6 +3,7 @@ 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. For complete example check the `Default` example. 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..40ee0f1d9e4 100644 --- a/site/src/examples/ag-grid-theme/ContextMenu.tsx +++ b/site/src/examples/ag-grid-theme/ContextMenu.tsx @@ -4,6 +4,7 @@ import { defaultData, defaultColumns } 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. For complete example check the `Default` example. const { containerProps, agGridProps } = useAgGridHelpers(); const getContextMenuItems = (params: GetContextMenuItemsParams) => { diff --git a/site/src/examples/ag-grid-theme/CustomFilter.tsx b/site/src/examples/ag-grid-theme/CustomFilter.tsx index be843380048..cf4fd3b568a 100644 --- a/site/src/examples/ag-grid-theme/CustomFilter.tsx +++ b/site/src/examples/ag-grid-theme/CustomFilter.tsx @@ -6,13 +6,14 @@ import { useAgGridHelpers } from "./useAgGridHelpers"; export const CustomFilter = () => { const [hasSavedState, setHasSavedState] = useState(true); + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. const { api, isGridReady, agGridProps, containerProps } = useAgGridHelpers(); useEffect(() => { if (isGridReady) { api?.sizeColumnsToFit(); } - }, [isGridReady]); + }, [api, isGridReady]); const handlePopMt100kClick = () => { const popMt100kComponent = api!.getFilterInstance("population")!; @@ -55,11 +56,13 @@ export const CustomFilter = () => { }; 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 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..1d296bfbbe8 100644 --- a/site/src/examples/ag-grid-theme/Default.tsx +++ b/site/src/examples/ag-grid-theme/Default.tsx @@ -1,13 +1,55 @@ import { AgGridReact } from "ag-grid-react"; -import { ReactElement } from "react"; +import { ReactElement, useEffect, useMemo, useRef, useState } from "react"; +import { ColumnApi, GridApi, GridReadyEvent } from "ag-grid-community"; import { defaultData } from "./data"; -import { useAgGridHelpers } from "./useAgGridHelpers"; +import { useDensity, useTheme } from "@salt-ds/core"; + +import "ag-grid-community/styles/ag-grid.css"; +import "@salt-ds/ag-grid-theme/salt.css"; export const Default = (): ReactElement => { - const { containerProps, agGridProps } = useAgGridHelpers(); + const [isGridReady, setGridReady] = useState(false); + const { mode } = useTheme(); + const density = useDensity(); + + const apiRef = useRef<{ api: GridApi; columnApi: ColumnApi }>(); + const onGridReady = ({ api, columnApi }: GridReadyEvent) => { + apiRef.current = { api, columnApi }; + api.sizeColumnsToFit(); + setGridReady(true); + }; + + 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]); + + 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); + } + }, 0); + }, [density, isGridReady, rowHeight]); return ( -
+
{ buttons: ["reset", "apply"], }, editable: false, + autoHeight: true, }, { headerName: "Code", @@ -29,7 +72,9 @@ export const Default = (): ReactElement => { ]} rowData={defaultData} rowSelection="single" - {...agGridProps} + enableRangeSelection={true} + onGridReady={onGridReady} + rowHeight={rowHeight} />
); diff --git a/site/src/examples/ag-grid-theme/DragRowOrder.tsx b/site/src/examples/ag-grid-theme/DragRowOrder.tsx index 63367c214b3..90ade38b1ee 100644 --- a/site/src/examples/ag-grid-theme/DragRowOrder.tsx +++ b/site/src/examples/ag-grid-theme/DragRowOrder.tsx @@ -3,6 +3,7 @@ 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. For complete example check the `Default` example. 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..c7ad39609d2 100644 --- a/site/src/examples/ag-grid-theme/FloatingFilter.tsx +++ b/site/src/examples/ag-grid-theme/FloatingFilter.tsx @@ -3,6 +3,7 @@ import { useAgGridHelpers } from "./useAgGridHelpers"; import { customFilterColumns, defaultData } from "./data"; export const FloatingFilter = () => { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. 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..f8295da5334 100644 --- a/site/src/examples/ag-grid-theme/HDCompact.tsx +++ b/site/src/examples/ag-grid-theme/HDCompact.tsx @@ -1,9 +1,6 @@ -import { ChangeEvent, useEffect, useState } from "react"; import { AgGridReact } from "ag-grid-react"; import { StackLayout, - Checkbox, - useDensity, useTheme, SaltProvider, Banner, @@ -26,6 +23,7 @@ const statusBar = { const HDCompactGrid = () => { const { mode } = useTheme(); + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. 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..82c7ea90c6f 100644 --- a/site/src/examples/ag-grid-theme/InfiniteScroll.tsx +++ b/site/src/examples/ag-grid-theme/InfiniteScroll.tsx @@ -21,6 +21,7 @@ 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. For complete example check the `Default` example. const { isGridReady, agGridProps, containerProps, api } = useAgGridHelpers(); useEffect(() => { @@ -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..3f485325349 100644 --- a/site/src/examples/ag-grid-theme/LoadingOverlay.tsx +++ b/site/src/examples/ag-grid-theme/LoadingOverlay.tsx @@ -15,6 +15,7 @@ const CustomOverlay = () => ( ); export const LoadingOverlay = () => { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. 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..b4a949f5512 100644 --- a/site/src/examples/ag-grid-theme/MasterDetail.tsx +++ b/site/src/examples/ag-grid-theme/MasterDetail.tsx @@ -1,14 +1,42 @@ +import { useCallback, useRef } from "react"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import { useAgGridHelpers } from "./useAgGridHelpers"; import { defaultData, masterDetailColumns } from "./data"; export const MasterDetail = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. 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/Pagination.tsx b/site/src/examples/ag-grid-theme/Pagination.tsx index 30d98d7b12a..80714593dd6 100644 --- a/site/src/examples/ag-grid-theme/Pagination.tsx +++ b/site/src/examples/ag-grid-theme/Pagination.tsx @@ -13,6 +13,7 @@ const generateData = (states: typeof defaultData) => }, [] as typeof defaultData); const PagedGrid = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. const { agGridProps, containerProps } = useAgGridHelpers(); return ( diff --git a/site/src/examples/ag-grid-theme/ParentChildRows.tsx b/site/src/examples/ag-grid-theme/ParentChildRows.tsx index 25e9460909b..552d7122795 100644 --- a/site/src/examples/ag-grid-theme/ParentChildRows.tsx +++ b/site/src/examples/ag-grid-theme/ParentChildRows.tsx @@ -3,6 +3,7 @@ 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. For complete example check the `Default` example. const { agGridProps, containerProps } = useAgGridHelpers(); return ( @@ -13,7 +14,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..03c3d5f0858 100644 --- a/site/src/examples/ag-grid-theme/PinnedRows.tsx +++ b/site/src/examples/ag-grid-theme/PinnedRows.tsx @@ -49,6 +49,7 @@ export const PinnedRows = function PinnedRowsExample({ showHeader = true, ...rest }: PinnedRowsExampleProps) { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. 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..477d77a781a 100644 --- a/site/src/examples/ag-grid-theme/RowGroupPanel.tsx +++ b/site/src/examples/ag-grid-theme/RowGroupPanel.tsx @@ -3,6 +3,7 @@ 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. For complete example check the `Default` example. 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..85b4a9d5684 100644 --- a/site/src/examples/ag-grid-theme/RowGrouping.tsx +++ b/site/src/examples/ag-grid-theme/RowGrouping.tsx @@ -3,6 +3,7 @@ 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. For complete example check the `Default` example. 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..92fa3e280ac 100644 --- a/site/src/examples/ag-grid-theme/StatusBar.tsx +++ b/site/src/examples/ag-grid-theme/StatusBar.tsx @@ -16,6 +16,7 @@ const statusBar = { }; export const StatusBar = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. 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..ef93679d2ae 100644 --- a/site/src/examples/ag-grid-theme/Variants.tsx +++ b/site/src/examples/ag-grid-theme/Variants.tsx @@ -13,6 +13,7 @@ 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. For complete example check the `Default` example. const { agGridProps, containerProps } = useAgGridHelpers(); const onChange = (event: SyntheticEvent) => { diff --git a/site/src/examples/ag-grid-theme/WrappedHeader.tsx b/site/src/examples/ag-grid-theme/WrappedHeader.tsx index f99b214232e..932ab2c7113 100644 --- a/site/src/examples/ag-grid-theme/WrappedHeader.tsx +++ b/site/src/examples/ag-grid-theme/WrappedHeader.tsx @@ -17,6 +17,7 @@ const statusBar = { }; export const WrappedHeader = (props: AgGridReactProps) => { + // We've created a local custom hook to set the rows and column sizes. For complete example check the `Default` example. const { api, agGridProps, containerProps, isGridReady } = useAgGridHelpers(); const { defaultColDef: propsColDefs, ...restAgGridProps } = agGridProps; @@ -24,7 +25,7 @@ export const WrappedHeader = (props: AgGridReactProps) => { if (isGridReady) { api?.sizeColumnsToFit(); } - }, [isGridReady]); + }, [api, isGridReady]); return (
@@ -36,6 +37,7 @@ export const WrappedHeader = (props: AgGridReactProps) => { defaultColDef={{ ...propsColDefs, autoHeaderHeight: true, + wrapHeaderText: true, }} {...restAgGridProps} {...props} diff --git a/site/src/examples/ag-grid-theme/data/defaultColumns.ts b/site/src/examples/ag-grid-theme/data/defaultColumns.ts index 7e67cad33a6..deb53b792f8 100644 --- a/site/src/examples/ag-grid-theme/data/defaultColumns.ts +++ b/site/src/examples/ag-grid-theme/data/defaultColumns.ts @@ -5,6 +5,7 @@ export const defaultColumns: ColDef[] = [ headerName: "", field: "on", width: 70, + flex: 1, checkboxSelection: true, headerCheckboxSelection: true, pinned: "left", diff --git a/site/src/examples/ag-grid-theme/useAgGridHelpers.ts b/site/src/examples/ag-grid-theme/useAgGridHelpers.ts index bcdc86c1d5d..152b4679a0b 100644 --- a/site/src/examples/ag-grid-theme/useAgGridHelpers.ts +++ b/site/src/examples/ag-grid-theme/useAgGridHelpers.ts @@ -37,7 +37,7 @@ export function useAgGridHelpers(compact = false): { } }, [density, compact]); - const className = `ag-theme-salt-${density}${ + const className = `ag-theme-salt-${ compact && density === "high" ? `-compact` : `` }-${mode}`; diff --git a/yarn.lock b/yarn.lock index 3351f70a0b3..1437d9b76e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -679,6 +679,16 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.22.13": + version: 7.22.13 + resolution: "@babel/code-frame@npm:7.22.13" + dependencies: + "@babel/highlight": "npm:^7.22.13" + chalk: "npm:^2.4.2" + checksum: 10/bf6ae6ba3a510adfda6a211b4a89b0f1c98ca1352b745c077d113f3b568141e0d44ce750b9ac2a80143ba5c8c4080c50fcfc1aa11d86e194ea6785f62520eb5a + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.22.20, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9, @babel/compat-data@npm:^7.23.5": version: 7.23.5 resolution: "@babel/compat-data@npm:7.23.5" @@ -686,7 +696,30 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.1.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.15.5, @babel/core@npm:^7.16.0, @babel/core@npm:^7.18.5, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.20, @babel/core@npm:^7.22.9, @babel/core@npm:^7.23.9, @babel/core@npm:^7.7.5": +"@babel/core@npm:^7.1.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.15.5, @babel/core@npm:^7.16.0, @babel/core@npm:^7.18.5, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.20, @babel/core@npm:^7.22.9, @babel/core@npm:^7.7.5": + version: 7.23.0 + resolution: "@babel/core@npm:7.23.0" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.22.13" + "@babel/generator": "npm:^7.23.0" + "@babel/helper-compilation-targets": "npm:^7.22.15" + "@babel/helper-module-transforms": "npm:^7.23.0" + "@babel/helpers": "npm:^7.23.0" + "@babel/parser": "npm:^7.23.0" + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.0" + "@babel/types": "npm:^7.23.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/dd8f988e9ea82b449aaeb3f0c510e39839d9af61ca99391c7d7d06cd1005f21b93cc8d18ee1f3b929a2a37fbda1ee4b0d9304574f02cc365dc327edc6d0348ef + languageName: node + linkType: hard + +"@babel/core@npm:^7.23.9": version: 7.24.0 resolution: "@babel/core@npm:7.24.0" dependencies: @@ -721,6 +754,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.23.0": + version: 7.23.0 + resolution: "@babel/generator@npm:7.23.0" + dependencies: + "@babel/types": "npm:^7.23.0" + "@jridgewell/gen-mapping": "npm:^0.3.2" + "@jridgewell/trace-mapping": "npm:^0.3.17" + jsesc: "npm:^2.5.1" + checksum: 10/bd1598bd356756065d90ce26968dd464ac2b915c67623f6f071fb487da5f9eb454031a380e20e7c9a7ce5c4a49d23be6cb9efde404952b0b3f3c0c3a9b73d68a + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:^7.16.0, @babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -752,7 +797,26 @@ __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.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5": +"@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.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5": + 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: @@ -943,6 +1007,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" @@ -975,6 +1046,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.23.0": + version: 7.23.1 + resolution: "@babel/helpers@npm:7.23.1" + dependencies: + "@babel/template": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.0" + "@babel/types": "npm:^7.23.0" + checksum: 10/f0802d1bd88fe752c32e3f6f54c3873b926ab8ada22cf1df23ec0829f4836a65ad3625d4a29cefb59786060439c538de6be6a690e069a05c00c3802de8e52fea + languageName: node + linkType: hard + "@babel/helpers@npm:^7.24.0": version: 7.24.0 resolution: "@babel/helpers@npm:7.24.0" @@ -997,6 +1079,17 @@ __metadata: languageName: node linkType: hard +"@babel/highlight@npm:^7.22.13": + version: 7.22.20 + resolution: "@babel/highlight@npm:7.22.20" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.22.20" + chalk: "npm:^2.4.2" + js-tokens: "npm:^4.0.0" + checksum: 10/1aabc95b2cb7f67adc26c7049554306f1435bfedb76b9731c36ff3d7cdfcb32bd65a6dd06985644124eb2100bd911721d9e5c4f5ac40b7f0da2995a61bf8da92 + languageName: node + linkType: hard + "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0": version: 7.24.0 resolution: "@babel/parser@npm:7.24.0" @@ -1006,6 +1099,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.22.15, @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.22.15": version: 7.22.15 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.15" @@ -2275,7 +2377,18 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5, @babel/template@npm:^7.24.0, @babel/template@npm:^7.3.3": +"@babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3": + version: 7.22.15 + resolution: "@babel/template@npm:7.22.15" + dependencies: + "@babel/code-frame": "npm:^7.22.13" + "@babel/parser": "npm:^7.22.15" + "@babel/types": "npm:^7.22.15" + checksum: 10/21e768e4eed4d1da2ce5d30aa51db0f4d6d8700bc1821fec6292587df7bba2fe1a96451230de8c64b989740731888ebf1141138bfffb14cacccf4d05c66ad93f + languageName: node + linkType: hard + +"@babel/template@npm:^7.24.0": version: 7.24.0 resolution: "@babel/template@npm:7.24.0" dependencies: @@ -2304,7 +2417,36 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.4, @babel/types@npm:^7.19.0, @babel/types@npm:^7.2.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.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": +"@babel/traverse@npm:^7.23.0": + version: 7.23.0 + resolution: "@babel/traverse@npm:7.23.0" + dependencies: + "@babel/code-frame": "npm:^7.22.13" + "@babel/generator": "npm:^7.23.0" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.23.0" + "@babel/types": "npm:^7.23.0" + debug: "npm:^4.1.0" + globals: "npm:^11.1.0" + checksum: 10/dfa970f2e3dfc2d443f092f5a80752d44c6f38705162d1b5b69ebd8a6ff657351ff269a888556be5d921b3392c6c031c33d2bc52e2fba442f602a5a21d769ed4 + languageName: node + linkType: hard + +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.4, @babel/types@npm:^7.19.0, @babel/types@npm:^7.2.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.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.23.6, @babel/types@npm:^7.24.0": version: 7.24.0 resolution: "@babel/types@npm:7.24.0" dependencies: @@ -3636,6 +3778,30 @@ __metadata: languageName: node linkType: hard +"@frsource/base64@npm:1.0.17": + version: 1.0.17 + resolution: "@frsource/base64@npm:1.0.17" + checksum: 10/a01689ef785516ff0b7460f55792685fc782f8507518768396acb9283270d50a8149774f3acd5fa690ccd5a48b5ec4ace90a491458ffdd9e9f591c6b23eb5da5 + languageName: node + linkType: hard + +"@frsource/cypress-plugin-visual-regression-diff@npm:^3.3.10": + version: 3.3.10 + resolution: "@frsource/cypress-plugin-visual-regression-diff@npm:3.3.10" + dependencies: + "@frsource/base64": "npm:1.0.17" + glob: "npm:8.1.0" + meta-png: "npm:1.0.6" + move-file: "npm:2.1.0" + pixelmatch: "npm:5.3.0" + pngjs: "npm:7.0.0" + sharp: "npm:0.32.1" + peerDependencies: + cypress: ">=4.5.0" + checksum: 10/4b7f74f02505c34cad27808c08c77bf7f27ed52978743966f44ed4b2d2375d49aa1f00bd11041bb6752a5883993b12ec59597f16ad6820544df8bd1276782361 + languageName: node + linkType: hard + "@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3": version: 1.1.3 resolution: "@gar/promisify@npm:1.1.3" @@ -6136,13 +6302,7 @@ __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" languageName: unknown linkType: soft @@ -6253,6 +6413,7 @@ __metadata: "@faker-js/faker": "npm:^8.0.0" "@fontsource/open-sans": "npm:^4.5.13" "@fontsource/pt-mono": "npm:^5.0.12" + "@frsource/cypress-plugin-visual-regression-diff": "npm:^3.3.10" "@mswjs/data": "npm:^0.14.0" "@storybook/addon-a11y": "npm:^7.4.5" "@storybook/addon-actions": "npm:^7.4.5" @@ -6280,9 +6441,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:^30.2.0" + ag-grid-enterprise: "npm:^30.2.0" + ag-grid-react: "npm:^30.2.0" axe-core: "npm:^4.9.0" chromatic: "npm:^10.2.0" ci-info: "npm:^3.3.1" @@ -9147,10 +9308,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 @@ -9161,6 +9322,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" @@ -10584,7 +10752,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: @@ -10610,30 +10787,30 @@ __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-grid-community@npm:^30.2.0": + version: 30.2.0 + resolution: "ag-grid-community@npm:30.2.0" + checksum: 10/b2c4de8e9d2b563c22c6217b2650944573845686b5d32b48eab037ef4de24d1360f74a66753cc8db33642b6acae7088be4cc292bf21dd72b119d6c30c92795a9 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:^30.2.0": + version: 30.2.0 + resolution: "ag-grid-enterprise@npm:30.2.0" + checksum: 10/b786ce2e88746aefc10669359cc26c95c7d5126ee448b2c5da8951c30820015450de3b5d9ba05fd74bb846e33ef8b49e708947e7914c7f459288394b18597210 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:^30.2.0": + version: 30.2.0 + resolution: "ag-grid-react@npm:30.2.0" dependencies: prop-types: "npm:^15.8.1" peerDependencies: - ag-grid-community: ~28.2.1 + ag-grid-community: ~30.2.0 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/ef4c53a430eedca3c5dc65c76d4daf235508bf4019374bf0040a7e3fecd0ae3f4c95be55c4baead14d28bba9a8ee72410b3efd0c7ba6b12db395d6bc944b600a languageName: node linkType: hard @@ -10737,7 +10914,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: @@ -10931,7 +11120,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.1.3": +"aria-query@npm:5.1.3, aria-query@npm:^5.0.0, aria-query@npm:^5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" dependencies: @@ -10940,7 +11129,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.3.0, aria-query@npm:^5.0.0, aria-query@npm:^5.1.3": +"aria-query@npm:5.3.0": version: 5.3.0 resolution: "aria-query@npm:5.3.0" dependencies: @@ -12827,13 +13016,23 @@ __metadata: languageName: node linkType: hard -"color-name@npm:~1.1.4": +"color-name@npm:^1.0.0, color-name@npm:~1.1.4": version: 1.1.4 resolution: "color-name@npm:1.1.4" checksum: 10/b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610 languageName: node linkType: hard +"color-string@npm:^1.9.0": + version: 1.9.1 + resolution: "color-string@npm:1.9.1" + dependencies: + color-name: "npm:^1.0.0" + simple-swizzle: "npm:^0.2.2" + checksum: 10/72aa0b81ee71b3f4fb1ac9cd839cdbd7a011a7d318ef58e6cb13b3708dca75c7e45029697260488709f1b1c7ac4e35489a87e528156c1e365917d1c4ccb9b9cd + languageName: node + linkType: hard + "color-support@npm:^1.1.2, color-support@npm:^1.1.3": version: 1.1.3 resolution: "color-support@npm:1.1.3" @@ -12843,6 +13042,16 @@ __metadata: languageName: node linkType: hard +"color@npm:^4.2.3": + version: 4.2.3 + resolution: "color@npm:4.2.3" + dependencies: + color-convert: "npm:^2.0.1" + color-string: "npm:^1.9.0" + checksum: 10/b23f5e500a79ea22428db43d1a70642d983405c0dd1f95ef59dbdb9ba66afbb4773b334fa0b75bb10b0552fd7534c6b28d4db0a8b528f91975976e70973c0152 + languageName: node + linkType: hard + "colord@npm:^2.9.1, colord@npm:^2.9.3": version: 2.9.3 resolution: "colord@npm:2.9.3" @@ -13635,7 +13844,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: @@ -13729,13 +13938,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" @@ -14176,13 +14378,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, debug@npm:^2.6.9": version: 2.6.9 resolution: "debug@npm:2.6.9" @@ -14552,7 +14761,7 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^2.0.0": +"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.1": version: 2.0.2 resolution: "detect-libc@npm:2.0.2" checksum: 10/6118f30c0c425b1e56b9d2609f29bec50d35a6af0b762b6ad127271478f3bbfda7319ce869230cf1a351f2b219f39332cde290858553336d652c77b970f15de8 @@ -17848,6 +18057,19 @@ __metadata: languageName: node linkType: hard +"glob@npm:8.1.0, glob@npm:^8.0.0, glob@npm:^8.0.1": + version: 8.1.0 + resolution: "glob@npm:8.1.0" + dependencies: + fs.realpath: "npm:^1.0.0" + inflight: "npm:^1.0.4" + inherits: "npm:2" + minimatch: "npm:^5.0.1" + once: "npm:^1.3.0" + checksum: 10/9aab1c75eb087c35dbc41d1f742e51d0507aa2b14c910d96fb8287107a10a22f4bbdce26fc0a3da4c69a20f7b26d62f1640b346a4f6e6becfff47f335bb1dc5e + languageName: node + linkType: hard + "glob@npm:^10.0.0, glob@npm:^10.3.7": version: 10.3.10 resolution: "glob@npm:10.3.10" @@ -17877,19 +18099,6 @@ __metadata: languageName: node linkType: hard -"glob@npm:^8.0.0, glob@npm:^8.0.1": - version: 8.1.0 - resolution: "glob@npm:8.1.0" - dependencies: - fs.realpath: "npm:^1.0.0" - inflight: "npm:^1.0.4" - inherits: "npm:2" - minimatch: "npm:^5.0.1" - once: "npm:^1.3.0" - checksum: 10/9aab1c75eb087c35dbc41d1f742e51d0507aa2b14c910d96fb8287107a10a22f4bbdce26fc0a3da4c69a20f7b26d62f1640b346a4f6e6becfff47f335bb1dc5e - languageName: node - linkType: hard - "glob@npm:^9.2.0": version: 9.3.2 resolution: "glob@npm:9.3.2" @@ -19076,6 +19285,13 @@ __metadata: languageName: node linkType: hard +"is-arrayish@npm:^0.3.1": + version: 0.3.2 + resolution: "is-arrayish@npm:0.3.2" + checksum: 10/81a78d518ebd8b834523e25d102684ee0f7e98637136d3bdc93fd09636350fa06f1d8ca997ea28143d4d13cb1b69c0824f082db0ac13e1ab3311c10ffea60ade + languageName: node + linkType: hard + "is-async-function@npm:^2.0.0": version: 2.0.0 resolution: "is-async-function@npm:2.0.0" @@ -21423,7 +21639,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: @@ -22049,6 +22265,13 @@ __metadata: languageName: node linkType: hard +"meta-png@npm:1.0.6": + version: 1.0.6 + resolution: "meta-png@npm:1.0.6" + checksum: 10/aed14b3b53189c9d32002d76c40926bd93dd9d439bae3ad23ffb2645c375c9772c160879aa8af59ac85a2f43ae8bbe06b9648a53fe27815f4aeab238f4e9b79d + languageName: node + linkType: hard + "methods@npm:~1.1.2": version: 1.1.2 resolution: "methods@npm:1.1.2" @@ -22590,15 +22813,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" @@ -22704,15 +22918,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" @@ -23166,6 +23371,15 @@ __metadata: languageName: node linkType: hard +"move-file@npm:2.1.0": + version: 2.1.0 + resolution: "move-file@npm:2.1.0" + dependencies: + path-exists: "npm:^4.0.0" + checksum: 10/0bd9d7af82784344f742e14d369d806271275fa441a0e62b59dd4cf794497a7f3a1c3e2f70f75a2c7d0318340e7f22fa76aa626195840da4bedaac21285031b8 + languageName: node + linkType: hard + "mri@npm:^1.1.0, mri@npm:^1.1.5, mri@npm:^1.2.0": version: 1.2.0 resolution: "mri@npm:1.2.0" @@ -23488,6 +23702,15 @@ __metadata: languageName: node linkType: hard +"node-addon-api@npm:^6.1.0": + version: 6.1.0 + resolution: "node-addon-api@npm:6.1.0" + dependencies: + node-gyp: "npm:latest" + checksum: 10/8eea1d4d965930a177a0508695beb0d89b4c1d80bf330646a035357a1e8fc31e0d09686e2374996e96e757b947a7ece319f98ede3146683f162597c0bcb4df90 + languageName: node + linkType: hard + "node-cookie@npm:^2.1.2": version: 2.1.2 resolution: "node-cookie@npm:2.1.2" @@ -24886,6 +25109,17 @@ __metadata: languageName: node linkType: hard +"pixelmatch@npm:5.3.0": + version: 5.3.0 + resolution: "pixelmatch@npm:5.3.0" + dependencies: + pngjs: "npm:^6.0.0" + bin: + pixelmatch: bin/pixelmatch + checksum: 10/10778aaa432211253ab0ae9160233d8aa56769ab6312b6bf8375100b67aaa126821626a0c3b433fb2a977864a8d2d145d754d4afa9ac14b84fcb1a0bdf98a4ae + languageName: node + linkType: hard + "pkg-dir@npm:^3.0.0": version: 3.0.0 resolution: "pkg-dir@npm:3.0.0" @@ -24940,6 +25174,20 @@ __metadata: languageName: node linkType: hard +"pngjs@npm:7.0.0": + version: 7.0.0 + resolution: "pngjs@npm:7.0.0" + checksum: 10/e843ebbb0df092ee0f3a3e7dbd91ff87a239a4e4c4198fff202916bfb33b67622f4b83b3c29f3ccae94fcb97180c289df06068624554f61686fe6b9a4811f7db + languageName: node + linkType: hard + +"pngjs@npm:^6.0.0": + version: 6.0.0 + resolution: "pngjs@npm:6.0.0" + checksum: 10/692751ccd5e762623103900922caac982caa90258d9c6c04a6e2bc3397b1dedbaf9db826fc0fa068a29d607cad3df1d1eded0dec2ee35a0015c65cb5ef33ad18 + languageName: node + linkType: hard + "pnp-webpack-plugin@npm:1.7.0": version: 1.7.0 resolution: "pnp-webpack-plugin@npm:1.7.0" @@ -25777,20 +26025,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" @@ -25830,7 +26064,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: @@ -27035,7 +27291,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: @@ -27048,6 +27304,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" @@ -28157,7 +28425,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: @@ -28287,7 +28555,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4": +"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.0, semver@npm:^7.5.3, semver@npm:^7.5.4": version: 7.5.4 resolution: "semver@npm:7.5.4" dependencies: @@ -28470,6 +28738,23 @@ __metadata: languageName: node linkType: hard +"sharp@npm:0.32.1": + version: 0.32.1 + resolution: "sharp@npm:0.32.1" + dependencies: + color: "npm:^4.2.3" + detect-libc: "npm:^2.0.1" + node-addon-api: "npm:^6.1.0" + node-gyp: "npm:latest" + prebuild-install: "npm:^7.1.1" + semver: "npm:^7.5.0" + simple-get: "npm:^4.0.1" + tar-fs: "npm:^2.1.1" + tunnel-agent: "npm:^0.6.0" + checksum: 10/07df854f3d69b1ae95ab82ce5416abdea9b8d5c295965a96a9664767c7541a99cb3df7e56171e200425fd555a2853155817ffa9e945af41eef1762c72e7e1670 + languageName: node + linkType: hard + "shebang-command@npm:^1.2.0": version: 1.2.0 resolution: "shebang-command@npm:1.2.0" @@ -28601,7 +28886,7 @@ __metadata: languageName: node linkType: hard -"simple-get@npm:^4.0.0": +"simple-get@npm:^4.0.0, simple-get@npm:^4.0.1": version: 4.0.1 resolution: "simple-get@npm:4.0.1" dependencies: @@ -28612,6 +28897,15 @@ __metadata: languageName: node linkType: hard +"simple-swizzle@npm:^0.2.2": + version: 0.2.2 + resolution: "simple-swizzle@npm:0.2.2" + dependencies: + is-arrayish: "npm:^0.3.1" + checksum: 10/c6dffff17aaa383dae7e5c056fbf10cf9855a9f79949f20ee225c04f06ddde56323600e0f3d6797e82d08d006e93761122527438ee9531620031c08c9e0d73cc + languageName: node + linkType: hard + "simple-update-notifier@npm:^2.0.0": version: 2.0.0 resolution: "simple-update-notifier@npm:2.0.0" @@ -32295,15 +32589,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"