feat(styling)!: delete "bare" Themes but keep "lite" & add to Bootstr…

…ap (#1493)

* feat(styling)!: delete "bare" Themes but keep "lite" & add to Bootstrap

docs/styling/styling.md

@@ -65,7 +65,7 @@ For example, if we take the following 3 SASS variables (`$slick-header-menu-disp
 > **Note:** you could use `:host` to only change current grid styling, **however** there are many DOM elements that are appended to the DOM `body` (Grid Menu, Column Picker, Select Filter/Editor, Context Menu, ...) and the styles **will not** be applied when simply using `:host` and so in most cases you would want to use `:root` (if possible) to make a global change which will also work with elements appended to the `body`. Also note that `:root` is not available in Salesforce LWC and so you unfortunately won't be able to style everything in Salesforce.
 
 ### Using Custom SVGs with SASS
-You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Slickgrid-Universal has an associated SASS variables ending with the suffix `"icon-svg-path"` which allow you to override any of the SVG path. All grid of the icons are generated by following AntFu's [icons in pure CSS](https://antfu.me/posts/icons-in-pure-css) approach. 
+You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Slickgrid-Universal has an associated SASS variables ending with the suffix `"icon-svg-path"` which allow you to override any of the SVG vector path. All SVG icons are generated by following AntFu's [icons in pure CSS](https://antfu.me/posts/icons-in-pure-css) approach. If you want create your own SVGs in pure CSS, you can use the `generateSvgStyle()` function from our [`sass-utilities.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/sass-utilities.scss) (take a look at the [`slickgrid-icons.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slickgrid-icons.scss) on its usage)
 
 ##### with SVG
 ```scss
@@ -91,6 +91,37 @@ the SASS equivalent is a lot easier to override
 $slick-checkbox-icon-checked-svg-path: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"
 ```
 
+### SVG icons
+The project has a few built-in icons (sort, grouping, row detail, row move, row selection) and you can change them via SASS (or CSS with a bit more work). For that reason, all Styling Themes  Since this release now has pure CSS SVG icons, I decided to delete any Font-Awesome references (mostly in the Bootstrap Theme) because all the built-in icons are now all SVG icons (sort, grouping, row detail, row move) (you can change them using SASS). However, there are a few plugins that use external icons via CSS classes (mostly all menu plugins like Header Menu, Grid Menu, Content Menu, ...) and for that reason **all Styling Themes now include default SVG icons** (even the Bootstrap Theme). 
+
+What if you want to use your own font/SVG library? 
+This can be answered in 2 parts:
+1. the built-in icons can only be changed via SASS (or CSS with extra work), see above on how to change them.
+2. for all other area using icons via CSS classes (e.g. all menu plugins), you can use the "lite" Themes and then make sure to update all the menu plugins with the correct CSS classes, for example the global grid options of the Grid Menu is configured with the following CSS classes and you'll want to remap them with the correct CSS classes to fit your need:
+
+```ts
+// default global grid options
+export const GlobalGridOptions = {
+  gridMenu: {
+    iconCssClass: 'mdi mdi-menu',
+    iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
+    iconClearAllSortingCommand: 'mdi mdi-sort-variant-off',
+    iconClearFrozenColumnsCommand: 'mdi mdi-pin-off-outline',
+    iconExportCsvCommand: 'mdi mdi-download',
+    iconExportExcelCommand: 'mdi mdi-file-excel-outline',
+    iconExportTextDelimitedCommand: 'mdi mdi-download',
+    iconRefreshDatasetCommand: 'mdi mdi-sync',
+    iconToggleDarkModeCommand: 'mdi mdi-brightness-4',
+    iconToggleFilterCommand: 'mdi mdi-flip-vertical',
+    iconTogglePreHeaderCommand: 'mdi mdi-flip-vertical',
+  }
+}
+```
+
+and here's the file size difference with the "lite" version
+
+![image](https://github.com/ghiscoding/slickgrid-universal/assets/643976/0edc9962-d881-49d2-bc47-1f698213ad5e)
+
 ### How to change SVG color?
 #### The following works for both CSS and SASS
 The new version 5.x of this project is now creating SVG icons as pure CSS, this mean that you can colorize the icons the same way that you would change a text color. We also provide a few different color CSS classes which start with the prefixes `$color-` or `$text-color-` (e.g. `$color-primary`).

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

@@ -47,7 +47,7 @@
   display: inline-block;
 }
 
-// font-5px up to font-50px
+// create a few 15px indentation multiplied by level number
 @for $i from 1 through 6 {
   .width-#{$i*15}px { width: #{$i * 15}px; }
 }

packages/common/package.json

@@ -46,11 +46,10 @@
     "bundle:esm": "tsc --project tsconfig.bundle.json --outDir dist/esm --module esnext --target es2021",
     "bundle:types": "tsc --emitDeclarationOnly --declarationMap --outDir dist/types",
     "sass-build-task:scss-compile:bootstrap": "sass src/styles/slickgrid-theme-bootstrap.scss dist/styles/css/slickgrid-theme-bootstrap.css --style=compressed --quiet-deps --no-source-map --load-path=node_modules",
+    "sass-build-task:scss-compile:bootstrap-lite": "sass src/styles/slickgrid-theme-bootstrap.lite.scss dist/styles/css/slickgrid-theme-bootstrap.lite.css --style=compressed --quiet-deps --no-source-map --load-path=node_modules",
     "sass-build-task:scss-compile:material": "sass src/styles/slickgrid-theme-material.scss dist/styles/css/slickgrid-theme-material.css --style=compressed --quiet-deps --no-source-map --load-path=node_modules",
-    "sass-build-task:scss-compile:material-bare": "sass src/styles/slickgrid-theme-material.bare.scss dist/styles/css/slickgrid-theme-material.bare.css --style=compressed --quiet-deps --no-source-map --load-path=node_modules",
     "sass-build-task:scss-compile:material-lite": "sass src/styles/slickgrid-theme-material.lite.scss dist/styles/css/slickgrid-theme-material.lite.css --style=compressed --quiet-deps --no-source-map --load-path=node_modules",
     "sass-build-task:scss-compile:salesforce": "sass src/styles/slickgrid-theme-salesforce.scss dist/styles/css/slickgrid-theme-salesforce.css --style=compressed --quiet-deps --no-source-map --load-path=node_modules",
-    "sass-build-task:scss-compile:salesforce-bare": "sass src/styles/slickgrid-theme-salesforce.bare.scss dist/styles/css/slickgrid-theme-salesforce.bare.css --style=compressed --quiet-deps --no-source-map --load-path=node_modules",
     "sass-build-task:scss-compile:salesforce-lite": "sass src/styles/slickgrid-theme-salesforce.lite.scss dist/styles/css/slickgrid-theme-salesforce.lite.css --style=compressed --quiet-deps --no-source-map --load-path=node_modules",
     "sass:build": "run-p sass-build-task:scss-compile:*",
     "postsass:build": "postcss --no-map --use cssnano --use autoprefixer --dir dist/styles/css dist/styles/css --style=compressed --quiet-deps --no-source-map",

packages/common/src/styles/_variables-theme-material.scss

@@ -1,5 +1,3 @@
-@import './sass-utilities';
-
 /**
  * This is a bare version of "slickgrid-theme-material.scss",
  * A few files were removed and aren't included in this styling theme (while they are in original theme)
@@ -11,7 +9,7 @@ $slick-highlight-color:                                     #48c774 !default;
 $slick-font-family:                                         Roboto, "Helvetica Neue", sans-serif !default;
 $slick-font-size-base-value:                                14 !default;
 $slick-icon-color:                                          inherit !default;
-$slick-icon-width:                                          18px !default;
+$slick-icon-font-size:                                      18px !default;
 $slick-group-totals-formatter-color:                        #666666 !default;
 $slick-cell-border-top:                                     none !default;
 $slick-cell-font-weight:                                    400 !default;

packages/common/src/styles/_variables-theme-salesforce.scss

@@ -1,6 +1,3 @@
-/** Salesforce Theme (includes all external lib styling) */
-@import './sass-utilities';
-
 /**
  * This is a bare version of "slickgrid-theme-salesforce.scss",
  * A few files were removed and aren't included in this styling theme (while they are in original theme)
@@ -15,14 +12,14 @@ $slick-button-primary-color:                                  $slick-primary-col
 $slick-bare-color:                                            #b5b5b5 !default;
 $slick-icon-color:                                            inherit !default;
 $slick-font-family:                                           var(--lwc-fontFamily,'Salesforce Sans', 'SalesforceSans-Regular', Arial, sans-serif) !default;
+$slick-icon-font-size:                                        18px !default;
 $slick-cell-active-box-shadow:                                inset 0 0 0 1px #{$slick-highlight-color} !default;
 $slick-cell-border-top:                                       none !default;
 $slick-cell-border-bottom:                                    none !default;
 $slick-cell-box-shadow:                                       0px 1px 0px #dddbda, 0px -1px 0px #dddbda !default;
 $slick-cell-font-weight:                                      400 !default;
 $slick-cell-odd-background-color:                             #f3f2f2 !default;
 $slick-cell-text-color:                                       #333 !default;
-$slick-icon-width:                                            18px !default;
 $slick-frozen-border-bottom:                                  1px solid #{$slick-highlight-color} !default;
 $slick-frozen-border-right:                                   1px solid #{$slick-highlight-color} !default;
 $slick-group-totals-formatter-color:                          #666666 !default;

packages/common/src/styles/_variables.scss

@@ -1,6 +1,9 @@
 // import external lib CSS files (without the .css extension)
 @import 'vanilla-calendar-picker/build/vanilla-calendar.min';
 
+// SASS utils to generate SVGs
+@import './sass-utilities';
+
 /*
  * SlickGrid-Universal theming variables, used by all Themes
  * Lib Website (https://github.com/ghiscoding/slickgrid-universal)

packages/common/src/styles/slickgrid-icons.scss

@@ -1,5 +1,3 @@
-$slick-icon-font-size: $slick-icon-width;
-
 /* SlickGrid Material icons (which all came from Material Design Icons) */
 @include generateSvgClass(
   "mdi-account",
@@ -301,6 +299,11 @@ $slick-icon-font-size: $slick-icon-width;
   "M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M6,10L12,16L18,10L16.6,8.6L12,13.2L7.4,8.6L6,10Z"
 );
 
+@include generateSvgClass(
+  "mdi-circle",
+  "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+);
+
 @include generateSvgClass(
   "mdi-clipboard-check",
   "M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z"
@@ -971,6 +974,11 @@ $slick-icon-font-size: $slick-icon-width;
   "M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z"
 );
 
+@include generateSvgClass(
+  "mdi-translate",
+  "M12.87,15.07L10.33,12.56L10.36,12.53C12.1,10.59 13.34,8.36 14.07,6H17V4H10V2H8V4H1V6H12.17C11.5,7.92 10.44,9.75 9,11.35C8.07,10.32 7.3,9.19 6.69,8H4.69C5.42,9.63 6.42,11.17 7.67,12.56L2.58,17.58L4,19L9,14L12.11,17.11L12.87,15.07M18.5,10H16.5L12,22H14L15.12,19H19.87L21,22H23L18.5,10M15.88,17L17.5,12.67L19.12,17H15.88Z"
+);
+
 @include generateSvgClass(
   "mdi-trash-can",
   "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z"

packages/common/src/styles/slickgrid-theme-bootstrap.lite.scss

@@ -0,0 +1,19 @@
+/*!
+ * SlickGrid custom styling for Bootstrap (https://github.com/ghiscoding/slickgrid-universal)
+ * Licensed under MIT (https://github.com/ghiscoding/slickgrid-universal/blob/master/LICENSE)
+ * @author: Ghislain B. (ghiscoding)
+ */
+
+/**
+ * SlickGrid Bootstrap Theme (lite)
+ * sames as `slickgrid-theme-bootstrap.scss` but without: 
+ *   colors, extra-styling, slickgrid-icons and slickgrid-icons-svg-utils
+ */
+
+@import './slick-grid';
+@import './slick-editors';
+@import './slick-plugins';
+@import './slick-component';
+@import './slickgrid-examples';
+@import './slick-bootstrap';
+@import './slick-autocomplete';

packages/common/src/styles/slickgrid-theme-bootstrap.scss

@@ -12,3 +12,5 @@
 @import './slickgrid-examples';
 @import './slick-bootstrap';
 @import './slick-autocomplete';
+@import './slickgrid-icons-svg-utils';
+@import './slickgrid-icons';

packages/common/src/styles/slickgrid-theme-material.lite.scss

@@ -4,10 +4,10 @@
  * @author: Ghislain B. (ghiscoding)
  */
 
- /**
- * SlickGrid Material Theme
- * (sames as `slickgrid-theme-material.scss` but without Vanilla-Calendar & Multiple-Select styling)
- * We also removed `slick-without-bootstrap-min-styling.scss` since that is causing issues with Bootstrap 4
+/**
+ * SlickGrid Material Theme (lite)
+ * sames as `slickgrid-theme-material.scss` but without: 
+ *   `slick-without-bootstrap-min-styling.scss`, colors, extra-styling, slickgrid-icons and slickgrid-icons-svg-utils
  */
 
 /** SlickGrid Material Theme */
@@ -19,10 +19,4 @@
 @import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
-@import './slick-autocomplete';
-@import './slickgrid-icons';
-@import './slickgrid-icons-svg-utils';
-
-$link-color: var(--slick-primary-color, $slick-primary-color) !default;
-@import './colors.scss';
-@import './extra-styling.scss';
+@import './slick-autocomplete';

packages/common/src/styles/slickgrid-theme-material.scss

@@ -20,6 +20,7 @@
 @import './slick-bootstrap';
 @import './slick-autocomplete';
 @import './slickgrid-icons-svg-utils';
+@import './slickgrid-icons';
 
 $link-color: var(--slick-primary-color, $slick-primary-color) !default;
 @import './colors.scss';

packages/common/src/styles/slickgrid-theme-salesforce.lite.scss

@@ -5,23 +5,16 @@
  */
 
 /**
- * SlickGrid Salesforce Theme
- * (sames as `slickgrid-theme-salesforce.scss` but without Vanilla-Calendar & Multiple-Select styling)
- * We also removed `slick-without-bootstrap-min-styling.scss` since that is causing issues with Bootstrap 4
+ * SlickGrid Salesforce Theme (lite)
+ * sames as `slickgrid-theme-salesforce.scss` but without: 
+ *   `slick-without-bootstrap-min-styling.scss`, colors, extra-styling, slick-filters, slickgrid-icons and slickgrid-icons-svg-utils
  */
 
-@import './sass-utilities';
 @import './variables-theme-salesforce';
 @import './slick-grid';
 @import './slick-editors';
 @import './slick-plugins';
 @import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
-@import './slick-autocomplete';
-@import './slickgrid-icons';
-@import './slickgrid-icons-svg-utils';
-
-$link-color: var(--slick-primary-color, $slick-primary-color) !default;
-@import './colors.scss';
-@import './extra-styling';
+@import './slick-autocomplete';

packages/common/src/styles/slickgrid-theme-salesforce.scss

@@ -9,7 +9,6 @@
  * (sames as `slickgrid-theme-salesforce.lite.scss` but includes all external 3rd party lib styling)
  */
 
-@import './sass-utilities';
 @import './variables-theme-salesforce';
 @import './slick-without-bootstrap-min-styling';
 @import './slick-grid';
@@ -20,8 +19,8 @@
 @import './slick-bootstrap';
 @import './slick-filters';
 @import './slick-autocomplete';
-@import './slickgrid-icons';
 @import './slickgrid-icons-svg-utils';
+@import './slickgrid-icons';
 
 $slick-editing-field-bg-color: #fff !default;
 $slick-editing-field-border: 1px solid #dddbda !default;

test/cypress/e2e/example01.cy.ts

@@ -258,10 +258,10 @@ describe('Example 01 - Basic Grids', () => {
         cy.get(`.slick-grid-menu.${gridUid}`)
           .find('.slick-column-picker-list')
           .children('li')
-          .each(($li, index) => {
+          .each(($child, index) => {
             if (index <= 5) {
-              const $input = $li.find('input');
-              const $label = $li.find('span.checkbox-label');
+              const $input = $child.find('input');
+              const $label = $child.find('span.checkbox-label');
               expect($input.prop('checked')).to.eq(true);
               expect($label.text()).to.eq(fullTitles[index]);
             }