fix: deprecate mdi-...px (icon size) and text-color-... (#2089)

Author: ghiscoding

demos/aurelia/src/examples/slickgrid/example18.ts

@@ -241,7 +241,7 @@ export class Example18 {
       draggableGrouping: {
         dropPlaceHolderText: 'Drop a column header here to group by the column',
         // groupIconCssClass: 'mdi mdi-drag-vertical',
-        deleteIconCssClass: 'mdi mdi-close text-color-danger',
+        deleteIconCssClass: 'mdi mdi-close color-danger',
         sortAscIconCssClass: 'mdi mdi-arrow-up',
         sortDescIconCssClass: 'mdi mdi-arrow-down',
         onGroupChanged: (_e, args) => this.onGroupChanged(args),

demos/aurelia/src/examples/slickgrid/example19-preload.ts

@@ -3,7 +3,7 @@ import { customElement } from 'aurelia';
 @customElement({
   name: 'example19-preload',
   template: `<div class="container-fluid d-flex align-items-center" style="margin-top: 10px">
-    <i class="mdi mdi-sync mdi-spin mdi-50px"></i>
+    <i class="mdi mdi-sync mdi-spin font-50px"></i>
     <h4>Loading...</h4>
   </div>`,
 })

demos/aurelia/src/examples/slickgrid/example27.html

@@ -2,7 +2,7 @@ <h2>
   <span>
     Example 27: Tree Data
     <small>
-      <span class="mdi mdi-file-tree mdi-27px"></span> (from a flat dataset with <code>parentId</code> references -
+      <span class="mdi mdi-file-tree font-27px"></span> (from a flat dataset with <code>parentId</code> references -
       <a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/tree-data-grid" target="_blank">Wiki</a>)</small
     >
   </span>

demos/aurelia/src/examples/slickgrid/example27.ts

@@ -265,7 +265,7 @@ export class Example27 {
 
   showSpinner() {
     if (this.isLargeDataset) {
-      this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px color-alt-success';
+      this.loadingClass = 'mdi mdi-load mdi-spin-1s font-24px color-alt-success';
     }
   }
 

demos/aurelia/src/examples/slickgrid/example28.html

@@ -2,7 +2,7 @@ <h2>
   <span>
     Example 28: Tree Data with Aggregators
     <small>
-      <span class="mdi mdi-file-tree mdi-27px"></span> (from a Hierarchical Dataset -
+      <span class="mdi mdi-file-tree font-27px"></span> (from a Hierarchical Dataset -
       <a href="https://ghiscoding.gitbook.io/aurelia-slickgrid/grid-functionalities/tree-data-grid" target="_blank">Wiki</a>)</small
     >
   </span>

demos/aurelia/src/examples/slickgrid/example34.ts

@@ -37,7 +37,7 @@ const priceFormatter: Formatter = (_cell, _row, value, _col, dataContext) => {
 };
 
 const transactionTypeFormatter: Formatter = (_row, _cell, value: string) =>
-  `<div class="d-inline-flex align-items-center"><span class="me-1 mdi mdi-16px mdi-${value === 'Buy' ? 'plus' : 'minus'}-circle ${value === 'Buy' ? 'text-info' : 'text-warning'}"></span> ${value}</div>`;
+  `<div class="d-inline-flex align-items-center"><span class="me-1 mdi font-16px mdi-${value === 'Buy' ? 'plus' : 'minus'}-circle ${value === 'Buy' ? 'text-info' : 'text-warning'}"></span> ${value}</div>`;
 
 const historicSparklineFormatter: Formatter = (_row, _cell, _value: string, _col, dataContext) => {
   if (dataContext.historic.length < 2) {
@@ -273,7 +273,7 @@ export class Example34 {
       },
       draggableGrouping: {
         dropPlaceHolderText: 'Drop a column header here to group by any of these available columns: Currency, Market or Type',
-        deleteIconCssClass: 'mdi mdi-close text-color-danger',
+        deleteIconCssClass: 'mdi mdi-close color-danger',
         sortAscIconCssClass: 'mdi mdi-arrow-up',
         sortDescIconCssClass: 'mdi mdi-arrow-down',
       },

demos/aurelia/src/examples/slickgrid/example42-pager.ts

@@ -34,10 +34,10 @@ import './example42-pager.scss';
 <nav aria-label="Page navigation">
   <ul class="custom-pagination-ul">
     <li class="li page-item seek-first" disabled.class="isLeftPaginationDisabled">
-      <a class="pagination-link mdi mdi-page-first icon-seek-first mdi-22px" aria-label="First Page" role="button" click.trigger="onFirstPageClicked($event)"></a>
+      <a class="pagination-link mdi mdi-page-first icon-seek-first font-22px" aria-label="First Page" role="button" click.trigger="onFirstPageClicked($event)"></a>
     </li>
     <li class="li page-item seek-prev" disabled.class="isLeftPaginationDisabled">
-      <a class="pagination-link icon-seek-prev mdi mdi-chevron-down mdi-22px mdi-rotate-90" aria-label="Previous Page" role="button" click.trigger="onPreviousPageClicked($event)"></a>
+      <a class="pagination-link icon-seek-prev mdi mdi-chevron-down font-22px mdi-rotate-90" aria-label="Previous Page" role="button" click.trigger="onPreviousPageClicked($event)"></a>
     </li>
   </ul>
 </nav>
@@ -50,10 +50,10 @@ import './example42-pager.scss';
 <nav aria-label="Page navigation">
   <ul class="custom-pagination-ul">
     <li class="li page-item seek-next" disabled.class="isRightPaginationDisabled" click.trigger="onNextPageClicked($event)">
-      <a class="pagination-link icon-seek-next mdi mdi-chevron-down mdi-22px mdi-rotate-270" aria-label="Next Page" role="button" ></a>
+      <a class="pagination-link icon-seek-next mdi mdi-chevron-down font-22px mdi-rotate-270" aria-label="Next Page" role="button" ></a>
     </li>
     <li class="li page-item seek-end"  disabled.class="isRightPaginationDisabled">
-      <a class="pagination-link icon-seek-end mdi mdi-page-last mdi-22px" aria-label="Last Page" role="button" click.trigger="onLastPageClicked($event)"></a>
+      <a class="pagination-link icon-seek-end mdi mdi-page-last font-22px" aria-label="Last Page" role="button" click.trigger="onLastPageClicked($event)"></a>
     </li>
   </ul>
 </nav>

demos/aurelia/src/examples/slickgrid/example45-preload.ts

@@ -3,7 +3,7 @@ import { customElement } from 'aurelia';
 @customElement({
   name: 'example45-preload',
   template: `<div class="container-fluid d-flex align-items-center" style="margin-top: 10px">
-    <i class="mdi mdi-sync mdi-spin mdi-50px"></i>
+    <i class="mdi mdi-sync mdi-spin font-50px"></i>
     <h4>Loading...</h4>
   </div>`,
 })

demos/aurelia/src/my-app.html

@@ -31,7 +31,7 @@
           <a class="nav-link" href="https://ghiscoding.gitbook.io/aurelia-slickgrid/" target="_blank"> Documentation </a>
         </li>
         <li class="loader" if.bind="router.isNavigating">
-          <i class="mdi mdi-sync mdi-spin mdi-20px"></i>
+          <i class="mdi mdi-sync mdi-spin font-20px"></i>
         </li>
       </ul>
     </div>

demos/react/src/examples/slickgrid/Example18.tsx

@@ -236,7 +236,7 @@ const Example18: React.FC = () => {
       draggableGrouping: {
         dropPlaceHolderText: 'Drop a column header here to group by the column',
         // groupIconCssClass: 'mdi mdi-drag-vertical',
-        deleteIconCssClass: 'mdi mdi-close text-color-danger',
+        deleteIconCssClass: 'mdi mdi-close color-danger',
         sortAscIconCssClass: 'mdi mdi-arrow-up',
         sortDescIconCssClass: 'mdi mdi-arrow-down',
         onGroupChanged: (_e, args) => onGroupChanged(args),