@salt-ds/ag-grid-theme 2.9.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md ADDED
@@ -0,0 +1,618 @@
1
+ # @salt-ds/ag-grid-theme
2
+
3
+ ## 2.10.1
4
+
5
+ ### Patch Changes
6
+
7
+ - d578674: Applied typography letter spacing tokens consistently to text-owning components and inherited typography roots, and applied the display text transform token to display text.
8
+ - Updated dependencies [d578674]
9
+ - Updated dependencies [e990c46]
10
+ - Updated dependencies [8e59c5d]
11
+ - Updated dependencies [e990c46]
12
+ - Updated dependencies [d578674]
13
+ - Updated dependencies [8e59c5d]
14
+ - Updated dependencies [8e59c5d]
15
+ - Updated dependencies [8e59c5d]
16
+ - Updated dependencies [d578674]
17
+ - Updated dependencies [8e59c5d]
18
+ - Updated dependencies [550c4c1]
19
+ - @salt-ds/theme@1.47.0
20
+
21
+ ## 2.10.0
22
+
23
+ ### Minor Changes
24
+
25
+ - 487e75d: Upgraded support to AG-Grid v36.
26
+
27
+ Added Salt `SortAscend` and `SortDescend` glyphs for AG Grid Absolute Sorting (`aasc` / `adesc` icon names).
28
+
29
+ ### Patch Changes
30
+
31
+ - Updated dependencies [2e1da8e]
32
+ - Updated dependencies [be5eb93]
33
+ - Updated dependencies [0f92b84]
34
+ - Updated dependencies [be5eb93]
35
+ - @salt-ds/theme@1.46.0
36
+
37
+ ## 2.9.0
38
+
39
+ ### Minor Changes
40
+
41
+ - a5d12be: Added header background modifier classes on the grid wrapper to align AG Grid headers with the Salt `Table` `<THead variant />` API.
42
+
43
+ - `ag-theme-salt-header-primary` (default), `ag-theme-salt-header-secondary`, `ag-theme-salt-header-tertiary` — swap the header background between Salt's primary, secondary and tertiary container tokens.
44
+
45
+ Add them alongside the mode class on the grid wrapper:
46
+
47
+ ```jsx
48
+ <div className="ag-theme-salt-light ag-theme-salt-header-secondary">
49
+ <AgGridReact rowData={rowData} columnDefs={columnDefs} />
50
+ </div>
51
+ ```
52
+
53
+ ### Patch Changes
54
+
55
+ - a5d12be: Fixed several AG Grid theme styling issues:
56
+
57
+ - Row Group Panel pill text and icon now use `--salt-actionable-bold-foreground` (with `-hover` and `-active` variants), and the chip background uses `--salt-actionable-bold-background`, matching the Salt `Pill` component. Previously the pill text inherited `--salt-content-primary-foreground` and the background used `--salt-actionable-primary-background`.
58
+ - Replaced remaining references to legacy actionable token aliases. The theme was still referencing `--salt-actionable-secondary-*` (renamed to `--salt-actionable-subtle-*`) and `--salt-actionable-cta-*` (renamed to `--salt-actionable-accented-bold-*`). Both old names exist only in the legacy theme's deprecated aliases file and are not defined in `themeNext`, so the theme would silently render with undefined values when used with `SaltProviderNext`. No visual change for users of the legacy theme—the aliases resolve to the same values.
59
+ - Scoped helper classes to the Salt theme wrapper. `.error-row`, `.warning-row`, `.success-row`, `.ag-column-drop-cell*` and `.ag-toggle-button-input-wrapper*` rules were previously declared as bare class selectors. They are now scoped to `[class*="ag-theme-salt"]` so they only match elements inside a Salt-themed grid and can no longer collide with consumer classes of the same name elsewhere on the page.
60
+
61
+ ## 2.8.0
62
+
63
+ ### Minor Changes
64
+
65
+ - feffe8d: - Added tertiary support to the ag grid theme.
66
+ - Added secondary zebra support to the ag grid theme.
67
+ - Added tertiary zebra support to the ag grid theme.
68
+
69
+ ### Patch Changes
70
+
71
+ - Updated dependencies [23b5f53]
72
+ - Updated dependencies [40cdcb4]
73
+ - Updated dependencies [fdb9cfc]
74
+ - Updated dependencies [23b5f53]
75
+ - @salt-ds/theme@1.41.0
76
+
77
+ ## 2.7.0
78
+
79
+ ### Minor Changes
80
+
81
+ - 972e37e: Added mobile density tokens.
82
+
83
+ ### Patch Changes
84
+
85
+ - Updated dependencies [972e37e]
86
+ - Updated dependencies [972e37e]
87
+ - @salt-ds/theme@1.39.0
88
+
89
+ ## 2.6.1
90
+
91
+ ### Patch Changes
92
+
93
+ - ce18830: Fixed the background color of inputs in the header of a zebra striped grid being incorrect.
94
+ - Updated dependencies [df46ef9]
95
+ - Updated dependencies [afe9104]
96
+ - @salt-ds/theme@1.38.0
97
+
98
+ ## 2.6.0
99
+
100
+ ### Minor Changes
101
+
102
+ - 58d81ac: - Added row validation status support via classes: `.error-row`, `.warning-row` and `.success-row`.
103
+ - Added cell validation status support via classes: `.error-cell`, `.warning-cell` and `.success-cell`, when used together with `.editable-cell`.
104
+ - Refactored secondary and zebra variant to better align with ag grid CSS variables. This fixes row selection border color for zebra variant.
105
+
106
+ ### Patch Changes
107
+
108
+ - Updated dependencies [e9838b5]
109
+ - Updated dependencies [e9838b5]
110
+ - Updated dependencies [e9838b5]
111
+ - @salt-ds/theme@1.34.0
112
+
113
+ ## 2.5.1
114
+
115
+ ### Patch Changes
116
+
117
+ - 3db3703: Fixed menus showing up as secondary using secondary and zebra variants.
118
+ - Updated dependencies [9c74ceb]
119
+ - @salt-ds/theme@1.33.0
120
+
121
+ ## 2.5.0
122
+
123
+ ### Minor Changes
124
+
125
+ - d2055e1: Added date filter support.
126
+
127
+ ```js
128
+ const dateColumnDef = {
129
+ // ...
130
+ filter: "agDateColumnFilter",
131
+ };
132
+ ```
133
+
134
+ ### Patch Changes
135
+
136
+ - Updated dependencies [9277313]
137
+ - Updated dependencies [512b0e7]
138
+ - Updated dependencies [64ef723]
139
+ - Updated dependencies [9277313]
140
+ - Updated dependencies [9277313]
141
+ - Updated dependencies [9277313]
142
+ - Updated dependencies [8538730]
143
+ - Updated dependencies [9277313]
144
+ - @salt-ds/theme@1.32.0
145
+
146
+ ## 2.4.4
147
+
148
+ ### Patch Changes
149
+
150
+ - Updated dependencies [665c306]
151
+ - Updated dependencies [9a4ff31]
152
+ - Updated dependencies [5edb00f]
153
+ - Updated dependencies [c86ee15]
154
+ - Updated dependencies [1a8898f]
155
+ - Updated dependencies [5edb00f]
156
+ - Updated dependencies [1a8898f]
157
+ - Updated dependencies [9a4ff31]
158
+ - Updated dependencies [1a8898f]
159
+ - Updated dependencies [91f0e09]
160
+ - Updated dependencies [efb4fbc]
161
+ - Updated dependencies [efb4fbc]
162
+ - @salt-ds/theme@1.31.0
163
+
164
+ ## 2.4.3
165
+
166
+ ### Patch Changes
167
+
168
+ - 621253b: Refactored components and themes to use the new fixed tokens.
169
+ - Updated dependencies [621253b]
170
+ - Updated dependencies [621253b]
171
+ - Updated dependencies [621253b]
172
+ - Updated dependencies [2d58071]
173
+ - Updated dependencies [7adcf27]
174
+ - @salt-ds/theme@1.30.0
175
+
176
+ ## 2.4.2
177
+
178
+ ### Patch Changes
179
+
180
+ - be1b086: - Fixed [zebra variant](https://www.saltdesignsystem.com/salt/components/ag-grid-theme/examples#variants) row selection border color.
181
+ - Fixed row selection border hover color, if `ag-grid.css` is loaded after `salt-ag-theme.css`.
182
+ - Updated code for [HD compact example](https://www.saltdesignsystem.com/salt/components/ag-grid-theme/examples#hd-compact), which caused some styling not correctly applied (#5056).
183
+
184
+ ## 2.4.1
185
+
186
+ ### Patch Changes
187
+
188
+ - Updated dependencies [4fc024c]
189
+ - @salt-ds/theme@1.29.0
190
+
191
+ ## 2.4.0
192
+
193
+ ### Minor Changes
194
+
195
+ - 949ffef: Improve overall CSS performance, specially around speed around context menu interaction.
196
+
197
+ - Replaced most `div[class*="ag-theme-salt"` wildcard attribute selector to spelled out class selector `"ag-theme-salt-light", "ag-theme-salt-dark", "ag-theme-salt-compact-light", "ag-theme-salt-compact-dark"`
198
+ - Improved selectors around cell focus ring and input placeholder within filter and column select menu.
199
+
200
+ ## 2.3.5
201
+
202
+ ### Patch Changes
203
+
204
+ - Updated dependencies [faa0334]
205
+ - Updated dependencies [aed941a]
206
+ - @salt-ds/theme@1.28.1
207
+
208
+ ## 2.3.4
209
+
210
+ ### Patch Changes
211
+
212
+ - Updated dependencies [ea8b4e3]
213
+ - @salt-ds/theme@1.28.0
214
+
215
+ ## 2.3.3
216
+
217
+ ### Patch Changes
218
+
219
+ - Updated dependencies [afd7ae1]
220
+ - Updated dependencies [d078641]
221
+ - Updated dependencies [aac1500]
222
+ - Updated dependencies [09f5144]
223
+ - Updated dependencies [803d0c0]
224
+ - Updated dependencies [09f5144]
225
+ - Updated dependencies [38da566]
226
+ - @salt-ds/theme@1.27.0
227
+
228
+ ## 2.3.2
229
+
230
+ ### Patch Changes
231
+
232
+ - Updated dependencies [90b85d4]
233
+ - Updated dependencies [8ca3b2f]
234
+ - Updated dependencies [8ca3b2f]
235
+ - Updated dependencies [3764d72]
236
+ - Updated dependencies [d22534b]
237
+ - Updated dependencies [90b85d4]
238
+ - Updated dependencies [8ca3b2f]
239
+ - @salt-ds/theme@1.26.0
240
+
241
+ ## 2.3.1
242
+
243
+ ### Patch Changes
244
+
245
+ - Updated dependencies [3e474a0]
246
+ - Updated dependencies [926316f]
247
+ - Updated dependencies [926316f]
248
+ - Updated dependencies [926316f]
249
+ - Updated dependencies [926316f]
250
+ - Updated dependencies [1203a3f]
251
+ - Updated dependencies [3e474a0]
252
+ - Updated dependencies [926316f]
253
+ - @salt-ds/theme@1.25.0
254
+
255
+ ## 2.3.0
256
+
257
+ ### Minor Changes
258
+
259
+ - 2719afb: - Added theme support for several built-in ag grid provided editors
260
+
261
+ - `agLargeTextCellEditor`
262
+ - `agSelectCellEditor`
263
+ - `agRichSelectCellEditor`
264
+ - `agNumberCellEditor`
265
+ - `agDateStringCellEditor`
266
+ - Fixed `input` padding within `.editable-cell` during editing
267
+ - Fixed long text overflow within `.editable-cell` when focused
268
+
269
+ Closes #4144
270
+
271
+ ### Patch Changes
272
+
273
+ - 0a5b68b: Marked CSS files as having side effects. This fixes Webpack tree-shaking CSS files when `sideEffects: true` is not set on style-loader rules.
274
+ - Updated dependencies [a2fc9cf]
275
+ - Updated dependencies [0a5b68b]
276
+ - Updated dependencies [06ad53b]
277
+ - Updated dependencies [06ad53b]
278
+ - @salt-ds/theme@1.24.0
279
+
280
+ ## 2.2.0
281
+
282
+ ### Minor Changes
283
+
284
+ - b4a7888: Extended support to ag grid v32
285
+
286
+ - Added support for new active button in floating filter, with adjusted floating filter focus style. Updated `--ag-icon-font-code-filter` to use outline version of filter icon to accommodate active state using filled version.
287
+ - Fixed apply / reset panel buttons due to attribute change
288
+ - Added "ag-grid-community" as `peerDependencies` to enforce minimum v28 support
289
+
290
+ ### Patch Changes
291
+
292
+ - Updated dependencies [131dd9a]
293
+ - Updated dependencies [f6848dd]
294
+ - Updated dependencies [5af2978]
295
+ - @salt-ds/theme@1.23.3
296
+
297
+ ## 2.1.2
298
+
299
+ ### Patch Changes
300
+
301
+ - c486b75: Refactor ag grid theme CSS into smaller files
302
+ - Updated dependencies [2f027e9]
303
+ - @salt-ds/theme@1.23.2
304
+
305
+ ## 2.1.1
306
+
307
+ ### Patch Changes
308
+
309
+ - 4f3bec9: Fixed `.editable-cell` incorrectly setting text-align. For numeric columns, use both `.edtiable-cell` and `.numeric-cell` for `cellClass`. Fixes #4141.
310
+ - Updated dependencies [4ccc245]
311
+ - @salt-ds/theme@1.23.0
312
+
313
+ ## 2.1.0
314
+
315
+ ### Minor Changes
316
+
317
+ - 285a257: Added support for [range selection](https://www.ag-grid.com/react-data-grid/global-style-customisation-selections/#range-selections) highlight color, mapped to `--salt-overlayable-background-highlight`. Closes #3922.
318
+
319
+ ### Patch Changes
320
+
321
+ - Updated dependencies [1098fc1]
322
+ - Updated dependencies [2263a98]
323
+ - Updated dependencies [285a257]
324
+ - @salt-ds/theme@1.22.0
325
+
326
+ ## 2.0.2
327
+
328
+ ### Patch Changes
329
+
330
+ - ab0215d: Fixed header text and icon color when column menu is open
331
+
332
+ ## 2.0.1
333
+
334
+ ### Patch Changes
335
+
336
+ - d92fe9e: - Fixed background color for custom editor component.
337
+
338
+ - Fixed header text being cropped in HD compact. Closes #3675.
339
+ - Fixed Country Symbol taller than expected in HD compact. This alters `--salt-size-base` token so Salt Button, form controls (Input, Dropdown, Combo Box) will be impacted as well. Closes #3775.
340
+ - Fixed group value not center aligned vertically.
341
+ - Updated ag grid menu styling to match closer to Salt Menu component.
342
+ - Updated floating filter column chooser item styles. Closes #3671.
343
+
344
+ Note: We previously made a mistake on `rowHeight` recommendation when configurating AG Grid, which should be 1px more to account for border between row.
345
+ `useAgGridHelpers` example hook is updated to reflect this.
346
+
347
+ | Density | Row height ([`rowHeight`](https://www.ag-grid.com/javascript-data-grid/row-height/)) | Header height ([`headerHeight`](https://www.ag-grid.com/javascript-data-grid/column-headers/#header-height)) |
348
+ | ------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
349
+ | HD (Compact) | 21 | 20 |
350
+ | HD | 25 | 24 |
351
+ | MD | 37 | 36 |
352
+ | LD | 49 | 48 |
353
+ | TD | 61 | 60 |
354
+
355
+ ## 2.0.0
356
+
357
+ ### Major Changes
358
+
359
+ - 5ed8ed88: Ag grid theme is updated to support ag grid version v31, and it's now driven by [AG grid variables](https://ag-grid.com/react-data-grid/global-style-customisation/) with a big reduction in bundle size. Follow below for upgrade instructions:
360
+
361
+ 1. Update stylesheet import
362
+
363
+ ```diff
364
+ - import "ag-grid-community/dist/styles/ag-grid.css";
365
+ + import "ag-grid-community/styles/ag-grid.css";
366
+ ```
367
+
368
+ UITK theme is removed, migrate to Salt theme
369
+
370
+ ```diff
371
+ - import "@salt-ds/ag-grid-theme/uitk-ag-theme.css";
372
+ + import "@salt-ds/ag-grid-theme/salt-ag-theme.css";
373
+ ```
374
+
375
+ 2. Update classnames used on the container around `AgGridReact`, which no longer has density portion. If you previously copied `useAgGridHelpers`, you'll need to copy a new version from [here](https://github.com/jpmorganchase/salt-ds/blob/main/site/src/examples/ag-grid-theme/useAgGridHelpers.ts).
376
+
377
+ In light mode:
378
+
379
+ ```diff
380
+ - .ag-theme-salt-high-light
381
+ - .ag-theme-salt-medium-light
382
+ - .ag-theme-salt-low-light
383
+ - .ag-theme-salt-touch-light
384
+ + .ag-theme-salt-light
385
+ ```
386
+
387
+ ```diff
388
+ - .ag-theme-salt-high-compact-light
389
+ + .ag-theme-salt-compact-light
390
+ ```
391
+
392
+ In dark mode:
393
+
394
+ ```diff
395
+ - .ag-theme-salt-high-dark
396
+ - .ag-theme-salt-medium-dark
397
+ - .ag-theme-salt-low-dark
398
+ - .ag-theme-salt-touch-dark
399
+ + .ag-theme-salt-dark
400
+ ```
401
+
402
+ ```diff
403
+ - .ag-theme-salt-high-compact-dark
404
+ + .ag-theme-salt-compact-dark
405
+ ```
406
+
407
+ Closes #2972
408
+
409
+ ### Patch Changes
410
+
411
+ - Updated dependencies [25e38e48]
412
+ - Updated dependencies [eaab9d89]
413
+ - Updated dependencies [5ed8ed88]
414
+ - Updated dependencies [e1d4aab8]
415
+ - @salt-ds/theme@1.16.0
416
+
417
+ ## 1.4.2
418
+
419
+ ### Patch Changes
420
+
421
+ - 98d1a03f: Fixed icon not displayed correctly when salt theme class is not applied first on a container (fixes #3351)
422
+ - 318515c5: Fixed header background incorrectly referencing palette color (`--salt-container-primary-background`) instead of characterstics (`--salt-container-primary-background`)
423
+
424
+ ## 1.4.1
425
+
426
+ ### Patch Changes
427
+
428
+ - 0ca29531: Fixed single cell focus ring not visible in range selection mode (Fixed #3290)
429
+
430
+ ## 1.4.0
431
+
432
+ ### Minor Changes
433
+
434
+ - e53138c2: Updated column header active state to actionable secondary style, to better associate relevant column header with the open menu.
435
+ Aligned menu to selected selectable border color and popout overlayable shadow.
436
+ Fixed filter icon not aligned to secondary content color in the last update.
437
+ Fixed sort indicator position to be next to the menu icon, and its spacing between filter and menu icon.
438
+
439
+ ## 1.3.9
440
+
441
+ ### Patch Changes
442
+
443
+ - 7bbbab98: Fixed header text color not using correct color token: `--salt-content-secondary-foreground`
444
+ - 09080b27: Fixed columns not displaying correctly with `wrapText` and `autoHeight` turned on.
445
+
446
+ ## 1.3.8
447
+
448
+ ### Patch Changes
449
+
450
+ - f167c14e: Fixed missing padding and focus ring on focused editable cell.
451
+ Fixed wrong background and missing corner flag when editable cell loses focus.
452
+
453
+ ## 1.3.7
454
+
455
+ ### Patch Changes
456
+
457
+ - 13279948: Update header icon alignment. Adding space between the text and the icon, so the icon will be aligned opposite the text.
458
+
459
+ ## 1.3.6
460
+
461
+ ### Patch Changes
462
+
463
+ - cdf44770: Fixed border misalignment in range selection on a single column or a single row.
464
+
465
+ ## 1.3.5
466
+
467
+ ### Patch Changes
468
+
469
+ - 86508404: Cell text from a pinned column no longer overlaps the cell next to it.
470
+ - b083861b: Removed a style override for column headers so that header alignment is consistent with column alignment.
471
+
472
+ ## 1.3.4
473
+
474
+ ### Patch Changes
475
+
476
+ - d200218f: Removed custom CSS styling for wrapping text in header cells when `autoHeaderHeight` is enabled. If you want to wrap text you should use `wrapHeaderText`.
477
+ - 6da4d09c: Fixed Tooltip missing a background color.
478
+
479
+ ## 1.3.3
480
+
481
+ ### Patch Changes
482
+
483
+ - dbea358f: Replaced cell borders with outlines
484
+
485
+ ## 1.3.2
486
+
487
+ ### Patch Changes
488
+
489
+ - d5fba9c0: Fixes alignment of input text in floating filter
490
+ - d0d7db8d: Fixes
491
+
492
+ - Status bar value font weight and color
493
+ - Status bar font size
494
+ - Cell range selection improvements
495
+ - Alignment of custom filters in floating filter
496
+ - Scrollbar showing in header cells on wrap
497
+ - Indentation on row groups
498
+
499
+ ## 1.3.1
500
+
501
+ ### Patch Changes
502
+
503
+ - 7e3a6053: Fixed bugs:
504
+
505
+ - Filter icon incorrect color in HD compact theme
506
+ - Vertical alignment of cells
507
+ - Column group cell
508
+ - Alignment of header cell separators with column group cell separators
509
+ - Status bar style enhancements
510
+ - Clipping of sort arrow in header row
511
+ - New floating filter design
512
+ - Pinned right columns styling
513
+
514
+ - 0d0bdeb4: Fixed invalid CSS being generated for heights
515
+ - 0d0bdeb4: Removed extra CSS from the theme.
516
+ - 402e13f7: Browser compatibility CSS changes.
517
+
518
+ Added missing prefix to `appearance` and revert `padding-inline`, `padding-block` and `margin-block` to improve browser compatibility with Chrome 79
519
+
520
+ ## 1.3.0
521
+
522
+ ### Minor Changes
523
+
524
+ - 6cc395d0: Use Salt icons in Salt ag-grid theme
525
+ - ce2b6d4c: Add color-scheme to Salt AG grid theme to ensure native light and dark mode
526
+
527
+ ### Patch Changes
528
+
529
+ - c2348ac2: Reduced spacing in context menu styles
530
+ - a453cec8: Fixed status bar and floating filter styles
531
+
532
+ Added HD compact density styling
533
+
534
+ - dcd83052: Fixed column separator height and floating filter height
535
+
536
+ ## 1.2.0
537
+
538
+ ### Minor Changes
539
+
540
+ - 1013b554: Fix button styles in ag grid theme currently showing default HTML buttons by adding salt styles to `.ag-standard-button`.
541
+
542
+ ## 1.1.6
543
+
544
+ ### Patch Changes
545
+
546
+ - 4bd87710: Fix cell text not truncating in salt ag-grid-theme
547
+
548
+ ## 1.1.5
549
+
550
+ ### Patch Changes
551
+
552
+ - 123daf60: Fix inconsistent uitk ag-grid theme menu padding across densities
553
+
554
+ ## 1.1.4
555
+
556
+ ### Patch Changes
557
+
558
+ - f0f5f8e3: Update the icon font
559
+ - 1e9ef1a2: Fix duplicate Salt libraries being installed when multiple libraries are installed
560
+
561
+ ## 1.1.3
562
+
563
+ ### Patch Changes
564
+
565
+ - fb92ab4b: Update the icon mappings
566
+ - 09cc1177: Fix broken reference to font
567
+
568
+ ## 1.1.2
569
+
570
+ ### Patch Changes
571
+
572
+ - 0c478a6b: Fix fonts not being published in the ag-grid-theme
573
+
574
+ ## 1.1.1
575
+
576
+ ### Patch Changes
577
+
578
+ - 50370dec: Fixed some icons that were overridden incorrectly
579
+ - 982da8e2: Fix ag-grid uitk theme floating filter input height in High density
580
+
581
+ ## 1.1.0
582
+
583
+ ### Minor Changes
584
+
585
+ - f13b23b7: Add two new cell class names in salt ag-grid theme. These can be used instead of `.editable-numeric-cell`
586
+
587
+ - `.numeric-cell` used on static cells that contain numeric values
588
+ - `.editable-cell` used on editable cells
589
+
590
+ ### Patch Changes
591
+
592
+ - 1acc0b03: Fix header focus outline in salt and uitk ag-grid themes
593
+ - 4cca8720: Fixed selected row's border color on row hover in salt ag-grid theme.
594
+
595
+ ## 1.0.0
596
+
597
+ ### Major Changes
598
+
599
+ - c1bc7479: Salt is the J.P. Morgan design system, an open-source solution for building exceptional products and digital experiences in financial services and other industries. It offers you well-documented, accessible components as well as comprehensive design templates, style libraries and assets.
600
+
601
+ With this initial release we're providing:
602
+
603
+ - AG Grid Theme
604
+ - Border Layout
605
+ - Button
606
+ - Data Grid
607
+ - Flex Layout
608
+ - Flow Layout
609
+ - Grid Layout
610
+ - Icon
611
+ - Link
612
+ - Salt Provider
613
+ - Stack Layout
614
+ - Status Indicator
615
+ - Text
616
+ - Theme
617
+
618
+ And a number of other lab components.
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/ag-grid-theme",
3
- "version": "2.9.0",
3
+ "version": "2.10.1",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -21,14 +21,13 @@
21
21
  "build-watch": "yarn node ./scripts/build.mjs --watch"
22
22
  },
23
23
  "publishConfig": {
24
- "directory": "../../dist/salt-ds-ag-grid-theme",
25
24
  "provenance": true
26
25
  },
27
26
  "devDependencies": {
28
27
  "del": "^8.0.0"
29
28
  },
30
29
  "peerDependencies": {
31
- "@salt-ds/theme": "^1.43.0",
30
+ "@salt-ds/theme": "^1.47.0",
32
31
  "ag-grid-community": ">=28.0.0"
33
32
  }
34
- }
33
+ }
package/salt-ag-theme.css CHANGED
@@ -12,6 +12,12 @@
12
12
  background-color: var(--ag-selected-row-background-color);
13
13
  border-color: var(--ag-selected-row-border-color);
14
14
  }
15
+ .ag-theme-salt-light .ag-row.ag-row-selected,
16
+ .ag-theme-salt-dark .ag-row.ag-row-selected,
17
+ .ag-theme-salt-compact-light .ag-row.ag-row-selected,
18
+ .ag-theme-salt-compact-dark .ag-row.ag-row-selected {
19
+ --ag-row-border-color: var(--ag-selected-row-border-color);
20
+ }
15
21
  .ag-theme-salt-light .ag-row-selected::before,
16
22
  .ag-theme-salt-dark .ag-row-selected::before,
17
23
  .ag-theme-salt-compact-light .ag-row-selected::before,
@@ -25,6 +31,25 @@
25
31
  height: var(--salt-size-fixed-100);
26
32
  top: -1px;
27
33
  }
34
+ [class*=ag-theme-salt] .ag-grid-scrolling-container .ag-row-selected.ag-full-width-row::before {
35
+ pointer-events: none;
36
+ z-index: 3;
37
+ }
38
+ [class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-pinned-left-cells,
39
+ [class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-scrolling-cells,
40
+ [class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-pinned-right-cells {
41
+ box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--ag-selected-row-border-color);
42
+ }
43
+ [class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-scrolling-cells {
44
+ z-index: 1;
45
+ }
46
+ [class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-pinned-left-cells,
47
+ [class*=ag-theme-salt] .ag-row.ag-row-selected > .ag-grid-pinned-right-cells {
48
+ z-index: 3;
49
+ }
50
+ [class*=ag-theme-salt] .ag-grid-scrolling-container .ag-row.ag-row-selected:not(.ag-full-width-row) {
51
+ background-color: var(--ag-data-background-color);
52
+ }
28
53
  .ag-theme-salt-light .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
29
54
  .ag-theme-salt-dark .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
30
55
  .ag-theme-salt-compact-light .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
@@ -542,7 +567,7 @@
542
567
  .ag-theme-salt-compact-light .ag-status-bar,
543
568
  .ag-theme-salt-compact-dark .ag-status-bar {
544
569
  border: none;
545
- border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
570
+ border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
546
571
  color: var(--salt-content-secondary-foreground);
547
572
  font-size: var(--salt-text-fontSize);
548
573
  font-weight: var(--salt-text-label-fontWeight);
@@ -570,17 +595,54 @@
570
595
  .ag-theme-salt-compact-dark .ag-paging-panel {
571
596
  border-color: var(--salt-separable-secondary-borderColor);
572
597
  }
573
- .ag-theme-salt-light .ag-floating-bottom,
574
- .ag-theme-salt-dark .ag-floating-bottom,
575
- .ag-theme-salt-compact-light .ag-floating-bottom,
576
- .ag-theme-salt-compact-dark .ag-floating-bottom {
577
- border-color: var(--salt-container-primary-borderColor);
598
+ .ag-theme-salt-light .ag-floating-top:not(.ag-invisible),
599
+ .ag-theme-salt-dark .ag-floating-top:not(.ag-invisible),
600
+ .ag-theme-salt-compact-light .ag-floating-top:not(.ag-invisible),
601
+ .ag-theme-salt-compact-dark .ag-floating-top:not(.ag-invisible) {
602
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
603
+ }
604
+ .ag-theme-salt-light .ag-floating-bottom:not(.ag-invisible),
605
+ .ag-theme-salt-dark .ag-floating-bottom:not(.ag-invisible),
606
+ .ag-theme-salt-compact-light .ag-floating-bottom:not(.ag-invisible),
607
+ .ag-theme-salt-compact-dark .ag-floating-bottom:not(.ag-invisible) {
608
+ border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
609
+ }
610
+ .ag-theme-salt-light .ag-grid-scrollable-area.ag-has-bottom-pinned-rows .ag-grid-pinned-bottom-rows-container::before,
611
+ .ag-theme-salt-dark .ag-grid-scrollable-area.ag-has-bottom-pinned-rows .ag-grid-pinned-bottom-rows-container::before,
612
+ .ag-theme-salt-compact-light .ag-grid-scrollable-area.ag-has-bottom-pinned-rows .ag-grid-pinned-bottom-rows-container::before,
613
+ .ag-theme-salt-compact-dark .ag-grid-scrollable-area.ag-has-bottom-pinned-rows .ag-grid-pinned-bottom-rows-container::before {
614
+ border-top-color: var(--salt-container-bold-borderColor);
615
+ }
616
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned > .ag-grid-pinned-left-cells,
617
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned > .ag-grid-scrolling-cells,
618
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned > .ag-grid-pinned-right-cells {
619
+ border-bottom: none;
620
+ }
621
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned.ag-row-first > .ag-grid-pinned-left-cells,
622
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned.ag-row-first > .ag-grid-scrolling-cells,
623
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned.ag-row-first > .ag-grid-pinned-right-cells {
624
+ border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
625
+ }
626
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned:not(.ag-row-first) > .ag-grid-pinned-left-cells,
627
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned:not(.ag-row-first) > .ag-grid-scrolling-cells,
628
+ [class*=ag-theme-salt] .ag-grid-pinned-bottom-rows-container > .ag-row-pinned:not(.ag-row-first) > .ag-grid-pinned-right-cells {
629
+ border-top: var(--ag-row-border-style) var(--ag-row-border-color) var(--ag-row-border-width);
630
+ }
631
+ [class*=ag-theme-salt] .ag-body-vertical-content-no-gap .ag-has-bottom-pinned-rows .ag-grid-scrolling-container .ag-row-last > .ag-grid-pinned-left-cells,
632
+ [class*=ag-theme-salt] .ag-body-vertical-content-no-gap .ag-has-bottom-pinned-rows .ag-grid-scrolling-container .ag-row-last > .ag-grid-scrolling-cells,
633
+ [class*=ag-theme-salt] .ag-body-vertical-content-no-gap .ag-has-bottom-pinned-rows .ag-grid-scrolling-container .ag-row-last > .ag-grid-pinned-right-cells {
634
+ border-bottom: var(--ag-row-border-style) var(--ag-row-border-color) var(--ag-row-border-width);
635
+ }
636
+ [class*=ag-theme-salt] .ag-grid-pinned-top-rows-container > .ag-row-pinned.ag-row-last > .ag-grid-pinned-left-cells,
637
+ [class*=ag-theme-salt] .ag-grid-pinned-top-rows-container > .ag-row-pinned.ag-row-last > .ag-grid-scrolling-cells,
638
+ [class*=ag-theme-salt] .ag-grid-pinned-top-rows-container > .ag-row-pinned.ag-row-last > .ag-grid-pinned-right-cells {
639
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
578
640
  }
579
641
  .ag-theme-salt-light .ag-column-drop-horizontal,
580
642
  .ag-theme-salt-dark .ag-column-drop-horizontal,
581
643
  .ag-theme-salt-compact-light .ag-column-drop-horizontal,
582
644
  .ag-theme-salt-compact-dark .ag-column-drop-horizontal {
583
- border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
645
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
584
646
  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
585
647
  }
586
648
  .ag-theme-salt-light .ag-column-drop-cell,
@@ -600,6 +662,10 @@
600
662
  font-size: var(--salt-size-selectable);
601
663
  line-height: var(--salt-size-selectable);
602
664
  }
665
+ [class*=ag-theme-salt] .ag-cell-wrapper > .ag-selection-checkbox,
666
+ [class*=ag-theme-salt] .ag-cell-wrapper.ag-checkbox-cell > .ag-labeled.ag-checkbox {
667
+ height: min(var(--ag-line-height, calc(var(--ag-row-height) - var(--ag-row-border-width))), calc(var(--ag-row-height) - var(--ag-row-border-width)));
668
+ }
603
669
 
604
670
  /* css/parts/ag-column-drop-list.css */
605
671
  [class*=ag-theme-salt] .ag-column-drop-cell-drag-handle {
@@ -636,6 +702,7 @@ div[class*=ag-theme-salt] .ag-column-drop-cell[aria-expanded=true] {
636
702
  .ag-theme-salt-compact-light .ag-header,
637
703
  .ag-theme-salt-compact-dark .ag-header {
638
704
  --ag-icon-font-color: var(--ag-header-foreground-color);
705
+ background-color: var(--ag-header-background-color);
639
706
  }
640
707
  .ag-theme-salt-light .ag-advanced-filter-header,
641
708
  .ag-theme-salt-dark .ag-advanced-filter-header,
@@ -671,20 +738,54 @@ div[class*=ag-theme-salt] .ag-column-drop-cell[aria-expanded=true] {
671
738
  .ag-theme-salt-light .ag-pinned-left-header,
672
739
  .ag-theme-salt-dark .ag-pinned-left-header,
673
740
  .ag-theme-salt-compact-light .ag-pinned-left-header,
674
- .ag-theme-salt-compact-dark .ag-pinned-left-header {
741
+ .ag-theme-salt-compact-dark .ag-pinned-left-header,
742
+ .ag-theme-salt-light .ag-header-row .ag-grid-pinned-left-cells .ag-grid-container-wrapper,
743
+ .ag-theme-salt-dark .ag-header-row .ag-grid-pinned-left-cells .ag-grid-container-wrapper,
744
+ .ag-theme-salt-compact-light .ag-header-row .ag-grid-pinned-left-cells .ag-grid-container-wrapper,
745
+ .ag-theme-salt-compact-dark .ag-header-row .ag-grid-pinned-left-cells .ag-grid-container-wrapper {
675
746
  border-right-color: var(--salt-separable-secondary-borderColor);
676
747
  }
748
+ [class*=ag-theme-salt] .ag-ltr .ag-header-row .ag-grid-pinned-left-cells .ag-header-cell.ag-header-cell-last-left-pinned {
749
+ --ag-header-column-separator-display: none;
750
+ }
751
+ [class*=ag-theme-salt] .ag-ltr .ag-header-row .ag-grid-pinned-left-cells .ag-header-cell.ag-header-cell-last-left-pinned:hover,
752
+ [class*=ag-theme-salt] .ag-ltr .ag-header-row .ag-grid-pinned-left-cells .ag-header-cell.ag-header-cell-last-left-pinned.ag-column-resizing {
753
+ background-color: transparent;
754
+ }
677
755
  .ag-theme-salt-light .ag-pinned-right-header,
678
756
  .ag-theme-salt-dark .ag-pinned-right-header,
679
757
  .ag-theme-salt-compact-light .ag-pinned-right-header,
680
758
  .ag-theme-salt-compact-dark .ag-pinned-right-header {
681
759
  border-left-color: var(--salt-separable-secondary-borderColor);
682
760
  }
761
+ .ag-theme-salt-light .ag-header-row .ag-grid-pinned-right-cells,
762
+ .ag-theme-salt-dark .ag-header-row .ag-grid-pinned-right-cells,
763
+ .ag-theme-salt-compact-light .ag-header-row .ag-grid-pinned-right-cells,
764
+ .ag-theme-salt-compact-dark .ag-header-row .ag-grid-pinned-right-cells {
765
+ border-left-color: var(--salt-separable-secondary-borderColor);
766
+ border-left-style: var(--salt-borderStyle-solid);
767
+ border-left-width: var(--salt-size-fixed-100);
768
+ }
769
+ .ag-theme-salt-light .ag-header-row .ag-grid-pinned-right-cells .ag-grid-container-wrapper,
770
+ .ag-theme-salt-dark .ag-header-row .ag-grid-pinned-right-cells .ag-grid-container-wrapper,
771
+ .ag-theme-salt-compact-light .ag-header-row .ag-grid-pinned-right-cells .ag-grid-container-wrapper,
772
+ .ag-theme-salt-compact-dark .ag-header-row .ag-grid-pinned-right-cells .ag-grid-container-wrapper {
773
+ border-left-width: 0;
774
+ position: relative;
775
+ width: calc(100% + var(--salt-size-fixed-100));
776
+ }
777
+ .ag-theme-salt-light .ag-ltr .ag-has-right-pinned-cols .ag-body-vertical-scroll-start-spacer,
778
+ .ag-theme-salt-dark .ag-ltr .ag-has-right-pinned-cols .ag-body-vertical-scroll-start-spacer,
779
+ .ag-theme-salt-compact-light .ag-ltr .ag-has-right-pinned-cols .ag-body-vertical-scroll-start-spacer,
780
+ .ag-theme-salt-compact-dark .ag-ltr .ag-has-right-pinned-cols .ag-body-vertical-scroll-start-spacer {
781
+ background-color: transparent;
782
+ background-image: none;
783
+ }
683
784
  .ag-theme-salt-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
684
785
  .ag-theme-salt-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
685
786
  .ag-theme-salt-compact-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
686
787
  .ag-theme-salt-compact-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total) {
687
- border-top-color: var(--salt-container-primary-borderColor);
788
+ border-top-color: var(--salt-container-bold-borderColor);
688
789
  }
689
790
  .ag-theme-salt-light .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
690
791
  .ag-theme-salt-dark .ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total):focus,
@@ -1082,7 +1183,7 @@ div[class*=ag-theme-salt] .ag-column-drop-cell[aria-expanded=true] {
1082
1183
  .ag-theme-salt-dark .ag-menu-header,
1083
1184
  .ag-theme-salt-compact-light .ag-menu-header,
1084
1185
  .ag-theme-salt-compact-dark .ag-menu-header {
1085
- border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
1186
+ border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
1086
1187
  background-color: var(--salt-container-primary-background);
1087
1188
  }
1088
1189
  .ag-theme-salt-light .ag-menu-body,
@@ -1142,6 +1243,7 @@ div[class*=ag-theme-salt] {
1142
1243
  --ag-menu-background-color: var(--salt-container-primary-background);
1143
1244
  --ag-border-color: var(--salt-separable-secondary-borderColor);
1144
1245
  --ag-borders-secondary: var(--salt-size-fixed-100) var(--salt-borderStyle-solid);
1246
+ --ag-pinned-row-border: none;
1145
1247
  --ag-card-radius: var(--salt-palette-corner);
1146
1248
  --ag-cell-horizontal-padding: var(--salt-spacing-100);
1147
1249
  --ag-checkbox-border-radius: 0;
@@ -1194,6 +1296,10 @@ div[class*=ag-theme-salt] {
1194
1296
  --ag-value-change-delta-down-color: var(--salt-sentiment-negative-foreground-decorative);
1195
1297
  --ag-value-change-delta-up-color: var(--salt-sentiment-positive-foreground-decorative);
1196
1298
  --ag-widget-container-horizontal-padding: var(--salt-spacing-100);
1299
+ letter-spacing: var(--salt-text-letterSpacing);
1300
+ }
1301
+ [class*=ag-theme-salt] .ag-measurement-container {
1302
+ --ag-pinned-row-border: none;
1197
1303
  }
1198
1304
  div[class*=ag-theme-salt-compact] {
1199
1305
  --salt-size-base: 16px;
@@ -1240,6 +1346,7 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
1240
1346
  --ag-selected-row-background-color: var(--salt-status-error-background-selected);
1241
1347
  --ag-selected-row-border-color: var(--salt-status-error-borderColor);
1242
1348
  --ag-odd-row-background-color: var(--ag-background-color);
1349
+ --ag-data-background-color: var(--ag-background-color);
1243
1350
  --ag-row-hover-color: var(--salt-overlayable-background-hover);
1244
1351
  }
1245
1352
  [class*=ag-theme-salt] .warning-row {
@@ -1247,6 +1354,7 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
1247
1354
  --ag-selected-row-background-color: var(--salt-status-warning-background-selected);
1248
1355
  --ag-selected-row-border-color: var(--salt-status-warning-borderColor);
1249
1356
  --ag-odd-row-background-color: var(--ag-background-color);
1357
+ --ag-data-background-color: var(--ag-background-color);
1250
1358
  --ag-row-hover-color: var(--salt-overlayable-background-hover);
1251
1359
  }
1252
1360
  [class*=ag-theme-salt] .success-row {
@@ -1254,8 +1362,12 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
1254
1362
  --ag-selected-row-background-color: var(--salt-status-success-background-selected);
1255
1363
  --ag-selected-row-border-color: var(--salt-status-success-borderColor);
1256
1364
  --ag-odd-row-background-color: var(--ag-background-color);
1365
+ --ag-data-background-color: var(--ag-background-color);
1257
1366
  --ag-row-hover-color: var(--salt-overlayable-background-hover);
1258
1367
  }
1368
+ [class*=ag-theme-salt] .ag-row-odd {
1369
+ --ag-data-background-color: var(--ag-odd-row-background-color);
1370
+ }
1259
1371
 
1260
1372
  /* css/parts/ag-toggle-button.css */
1261
1373
  [class*=ag-theme-salt] .ag-toggle-button-input-wrapper::before {
@@ -1277,6 +1389,12 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-z
1277
1389
  .ag-theme-salt-compact-dark .ag-tool-panel-wrapper > .ag-react-container {
1278
1390
  width: inherit;
1279
1391
  }
1392
+ .ag-theme-salt-light .ag-tool-panel-wrapper > .ag-tool-panel-content > .ag-react-container,
1393
+ .ag-theme-salt-dark .ag-tool-panel-wrapper > .ag-tool-panel-content > .ag-react-container,
1394
+ .ag-theme-salt-compact-light .ag-tool-panel-wrapper > .ag-tool-panel-content > .ag-react-container,
1395
+ .ag-theme-salt-compact-dark .ag-tool-panel-wrapper > .ag-tool-panel-content > .ag-react-container {
1396
+ width: 100%;
1397
+ }
1280
1398
  .ag-theme-salt-light .ag-side-buttons,
1281
1399
  .ag-theme-salt-dark .ag-side-buttons,
1282
1400
  .ag-theme-salt-compact-light .ag-side-buttons,
@@ -1384,6 +1502,8 @@ div[class*=ag-theme-salt].ag-theme-salt-header-tertiary.ag-theme-salt-variant-ze
1384
1502
  --ag-icon-font-code-tree-open: "\e936";
1385
1503
  --ag-icon-font-code-unlinked: "\e937";
1386
1504
  --ag-icon-font-code-up: "\e938";
1505
+ --ag-icon-font-code-aasc: "\e939";
1506
+ --ag-icon-font-code-adesc: "\e93a";
1387
1507
  }
1388
1508
 
1389
1509
  /* salt-ag-theme.css */