feat(styling)!: delete checkmarkFormatter and any Font-Awesome rela…

…ted (#1484)

* feat(styling)!: delete `checkmarkFormatter` and any Font-Awesome related
- fix some more Dark Mode issues when using both styling themes in the same project

docs/column-functionalities/Formatters.md

@@ -13,7 +13,7 @@
 ### Definition
 `Formatters` are functions that can be used to change and format certain column(s) in the grid. Please note that it does not alter the input data, it simply changes the styling by formatting the data differently to the screen (what the user visually see).
 
-A good example of a `Formatter` could be a column name `isActive` which is a `boolean` field with input data as `True` or `False`. User would prefer to simply see a checkbox as a visual indication representing the `True` flag, for this behavior you can use `Formatters.checkmark` which will use [Font-Awesome](http://fontawesome.io/icons/) icon of `fa-check` when `True` or an empty string when `False`.
+A good example of a `Formatter` could be a column name `isActive` which is a `boolean` field with input data as `True` or `False`. User would prefer to simply see a checkbox as a visual indication representing the `True` flag, for this behavior you can use `Formatters.checkmarkMaterial` which will use optional SVG icons of `mdi-check` when `True` or an empty string when `False`.
 
 For a [UI sample](#ui-sample), scroll down below.
 
@@ -25,7 +25,6 @@ For a [UI sample](#ui-sample), scroll down below.
 #### List of provided `Formatters`
 - `arrayObjectToCsv`: Takes an array of complex objects converts it to a comma delimited string.
 - `arrayToCsv` : takes an array of text and returns it as CSV string
-- `checkmark` : uses Font-Awesome [(fa-check)](http://fontawesome.io/icon/check/)
 - `checkmarkMaterial` use Material Design to display a checkmark icon
 - `collection`: Looks up values from the columnDefinition.params.collection property and displays the label in CSV or string format
 - `complexObject`: takes a complex object (with a `field` that has a `.` notation) and pull correct value, there are multiple ways to use it
@@ -97,7 +96,7 @@ export class Example {
       { id: '%', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentComplete },
       { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso },
       { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark }
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmarkMaterial }
     ];
   }
 }
@@ -129,7 +128,7 @@ export class Example {
       { id: '%', name: '% Complete', field: 'percentComplete', formatter: Slicker.Formatters.percentComplete },
       { id: 'start', name: 'Start', field: 'start', formatter: Slicker.Formatters.dateIso },
       { id: 'finish', name: 'Finish', field: 'finish', formatter: Slicker.Formatters.dateIso },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Slicker.Formatters.checkmark }
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Slicker.Formatters.checkmarkMaterial }
     ];
   }
 }
@@ -191,7 +190,7 @@ export interface FormatterResultObject {
 ```
 
 ### Example of a Custom Formatter with HTML string
-For example, we will use `Font-Awesome` with a `boolean` as input data, and display a (fire) icon when `True` or a (snowflake) when `False`. This custom formatter is actually display in the [UI sample](#ui-sample) shown below.
+For example, we will use our optional SVG icons `.mdi` with a `boolean` as input data, and display a (fire) icon when `True` or a (snowflake) when `False`. This custom formatter is actually display in the [UI sample](#ui-sample) shown below.
 ```ts
 // create a custom Formatter with the Formatter type
 const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) =>

docs/migrations/migration-to-5.x.md

@@ -1,5 +1,5 @@
-## Version 5 - Better Dark Mode with Pure CSS SVG icons 
-This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the `color` CSS property (which helps a lot for the Dark Mode Theme). 
+## Version 5 - Better Dark Mode with Pure CSS SVG icons
+This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the `color` CSS property (which helps a lot for the Dark Mode Theme).
 
 Another noticeable UI change is the migration from [Flatpickr](https://flatpickr.js.org/) to [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (which is in fact a fork of [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/) and maybe one day we'll drop the fork if possible), there are multiple reasons to migrate our date picker to another library:
 - Flatpickr cons:
@@ -14,11 +14,11 @@ Another noticeable UI change is the migration from [Flatpickr](https://flatpickr
   - much smaller size (a decrease of 2.9% (17Kb) was observed, expect even more decrease with gzip)
 - Vanilla-Calendar cons:
   - settings are named differently and are not using flat config (complex object settings)
-    - for example Flatpickr `minDate: 'today'` is instead `range: { min: 'today' }` 
-  - some settings were missing, like the `'today'` shortcut which is why I forked the project 
+    - for example Flatpickr `minDate: 'today'` is instead `range: { min: 'today' }`
+  - some settings were missing, like the `'today'` shortcut which is why I forked the project
     - I did open a few PRs on the main project, so the hope is to drop the fork in the future while being a totally transparent change to the user (you)
 
-Similar to previous releases, I managed to decrease the project build size even more (about 5%). At this point, the project has a similar size to what it was in v2.x that is when we were using jQuery/jQueryUI separately. However, since we're no longer using jQuery in the project, our project build size is in fact much smaller than it was 2 years ago. This is really nice to see especially since we keep adding features (like Dark Mode and others), we still size managed to decrease the project size yet again :)
+Similar to previous releases, I managed to decrease the project build size even more (about 5%). At this point, the project has a smaller size to what it was in v2.x (that is when we were using jQuery/jQueryUI separately). Considering that we're no longer using jQuery/jQueryUI in the project, and also consider that these 2 dependencies were well over 200Kb combined, then our project build size is in fact a lot smaller than it was 2 years ago in v2.x. This is really nice to see especially since we keep adding features (like Dark Mode and others) while still decreasing its size :)
 
 #### Major Changes - Quick Summary
 - minimum requirements bump
@@ -57,7 +57,7 @@ or move the class to the parent container and have both the icon and the text in
 ### Deprecated code removed/renamed
 
 ##### SASS variables
-A lot of SASS variables changed, we recommend you take a look at the [_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) file to compare with yours SASS overrides and fix any SASS build issues. 
+A lot of SASS variables changed, we recommend you take a look at the [_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) file to compare with yours SASS overrides and fix any SASS build issues.
 
 ##### SASS `math` polyfills are removed
 When Dart-SASS released their version 1.33, it caused a lot of console warnings (and lot of unhappy users) in projects that were using `/` (for math division) instead of their new `math.div` function. To avoid seeing all these warnings, I had created a temporary polyfill (that piece of code was actually copied from Bootstrap project). This change happened 3 years ago, so I'm assuming that most users have already upgraded their SASS and fix these warnings and I think it's time to remove this polyfill since it was always meant to be a temp patch. If you see these warnings coming back, you can use the SASS option `--quiet-upstream`.
@@ -81,6 +81,33 @@ There were a few `.ui-state-default` and other jQueryUI CSS classes leftovers in
 }
 ```
 
+### Formatters Cleanup & Removals
+
+Since we now only use SVG and we got rid of any Font usage (no more Font-Awesome code anywhere), the `checkmark` Formatter no longer has any reason to exist and was removed. If you were using and still use Font-Awesome in your project, you'll have to either recreate the Formatter yourself or use alternatives. You could use the `Formatters.icon` or `Formatters.iconBoolean` which require the CSS classes to be provided via `params`. As a last alternative, and if you are importing the optional SVG icons `.mdi`, then we recommend you simply use the `checkmarkMaterial` Formatter.
+
+```diff
+this.columnDefinitions = [
+  {
+    id: 'isActive', name: 'Active', field: 'isActive',
+-   formatter: Formatters.checkmark
++   formatter: Formatters.checkmarkMaterial
+  },
+];
+```
+or create a Custom Formatter
+
+```ts
+// create a custom Formatter and returning a string and/or an object of type FormatterResultObject
+const myCheckmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
+  const iconElm = document.createElement('i');
+  iconElm.className = value ? 'mdi mdi-check' : '';
+  return iconElm;
+
+  // simple HTML string
+  return value ? '<i class="mdi mdi-check"></i>' : '';
+}
+```
+
 ## Grid Functionalities
 ### Date Editor/Filter
 We migrated from Flatpicker to Vanilla-Calendar and this require some changes since the option names are different. The changes are the same for both the Filter and the Editor.

examples/vite-demo-vanilla-bundle/src/main.ts

@@ -1,10 +1,9 @@
-import './styles.scss';
-
 import { Renderer } from './renderer';
 import * as SlickerModule from '@slickgrid-universal/vanilla-bundle';
 import { App } from './app';
 import AppView from './app.html?raw';
 import { TranslateService } from './translate.service';
+import './styles.scss';
 
 class Main {
   app!: App;

examples/vite-demo-vanilla-bundle/src/material-styles.scss

@@ -125,8 +125,9 @@
     .ms-dark-mode .icon-checkbox-container,
     .slick-dark-mode {
       --slick-base-dark-menu-bg-color: #212121;
-      --slick-primary-color: #66bb6a !important;
+      --slick-primary-color: #66bb6a;
       --slick-button-primary-bg-color:#66bb6a;
+      --slick-cell-active-box-shadow: inset 0 0 0 1px #aaaaaa;
       --slick-cell-box-shadow: none;
       --slick-checkbox-icon-color: #66bb6a;
       --slick-checkbox-icon-height: 22px;
@@ -144,6 +145,7 @@
       --slick-filled-filter-color: #66bb6a;
       --slick-highlight-color: #49a54e;
       --slick-icon-sort-color: #66bb6a;
+      --slick-grid-menu-icon-btn-color: #bbb;
       --slick-pagination-icon-color: #66bb6a;
       --slick-row-mouse-hover-box-shadow: none;
       --slick-row-mouse-hover-color: #505050;
@@ -167,4 +169,12 @@
       }
     }
   }
+
+  body.material-theme .ms-dark-mode,
+  body.material-theme .ms-drop.ms-dark-mode,
+  body.material-theme .slick-dark-mode .ms-dark-mode,
+  body.material-theme .slick-dark-mode,
+  body.material-theme .dark-mode .text-color-primary {
+    --slick-primary-color: #66bb6a;
+  }
 }

examples/vite-demo-vanilla-bundle/src/styles.scss

@@ -9,6 +9,17 @@ $slick-link-color: #006DCC;
 
 @import './bulma.scss';
 
+:root {
+  .ms-dark-mode,
+  .ms-drop.ms-dark-mode,
+  .slick-dark-mode .ms-dark-mode,
+  .slick-dark-mode,
+  .dark-mode .text-color-primary {
+    --slick-primary-color: #66b8ff;
+    --text-color-primary: #66b8ff;
+  }
+}
+
 $navbar-height: 52px;
 body {
   height: calc(100vh - $navbar-height);
@@ -103,4 +114,4 @@ input.is-narrow {
 }
 .text-red {
   color: red;
-}
+}

packages/common/src/formatters/formatters.index.ts

@@ -2,7 +2,6 @@ import { FieldType } from '../enums/index';
 import { getAssociatedDateFormatter } from './formatterUtilities';
 import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter';
 import { arrayToCsvFormatter } from './arrayToCsvFormatter';
-import { checkmarkFormatter } from './checkmarkFormatter';
 import { checkmarkMaterialFormatter } from './checkmarkMaterialFormatter';
 import { currencyFormatter } from './currencyFormatter';
 import { collectionFormatter } from './collectionFormatter';
@@ -42,14 +41,6 @@ export const Formatters = {
   /** Takes an array of string and converts it to a comma delimited string */
   arrayToCsv: arrayToCsvFormatter,
 
-  /**
-   * When value is filled, or if the value is a number and is bigger than 0, it will display a Font-Awesome icon (fa-check).
-   * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined)
-   * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not.
-   * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important
-   */
-  checkmark: checkmarkFormatter,
-
   /**
    * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (mdi-check).
    * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined)
@@ -197,11 +188,11 @@ export const Formatters = {
    */
   hyperlink: hyperlinkFormatter,
 
-  /** Display whichever icon you want (library agnostic, it could be Font-Awesome or any other) */
+  /** Display whichever icon you want (library agnostic, it could be Font-Awesome, Material or any other icons set) */
   icon: iconFormatter,
 
   /**
-   * Display whichever icon but only for boolean truthy values (library agnostic, it could be Font-Awesome or any other)
+   * Display whichever icon but only for boolean truthy values (library agnostic, it could be Font-Awesome, Material or any other icons set)
    * Note: a value of "false", null, undefined, "1" or any number below 0 are all considered falsy and will not display the icon
    */
   iconBoolean: iconBooleanFormatter,