From f108b7d4b2eb5a65b6dbb04147c9c8b0ea0b8200 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Sun, 28 Apr 2024 02:03:01 -0400
Subject: [PATCH] chore(styling): add CSS variable for .slick-cell optional
 flex

---
 .../src/examples/example07.scss               | 26 ++++++++++++-------
 .../src/examples/example07.ts                 |  3 ++-
 .../src/examples/example12.ts                 |  3 ++-
 .../src/examples/example14.ts                 |  3 ++-
 .../src/examples/example16.ts                 |  3 ++-
 .../vite-demo-vanilla-bundle/src/styles.scss  |  9 +++++++
 packages/common/src/styles/_variables.scss    |  1 +
 packages/common/src/styles/slick-grid.scss    |  4 ++-
 8 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.scss b/examples/vite-demo-vanilla-bundle/src/examples/example07.scss
index 169574547..60f69adac 100644
--- a/examples/vite-demo-vanilla-bundle/src/examples/example07.scss
+++ b/examples/vite-demo-vanilla-bundle/src/examples/example07.scss
@@ -1,11 +1,17 @@
-#modal-allFilter-table {
-  display: table;
-}
-#modal-allFilter-table .row {
-    display: table-row;
-}
-#modal-allFilter-table .column {
-    display: table-cell;
-    vertical-align: top;
-    width: 40%;
+:root {
+  .grid7 {
+    --slick-cell-display: flex;
+  }
+
+  #modal-allFilter-table {
+    display: table;
+  }
+  #modal-allFilter-table .row {
+      display: table-row;
+  }
+  #modal-allFilter-table .column {
+      display: table-cell;
+      vertical-align: top;
+      width: 40%;
+  }
 }
\ No newline at end of file
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
index b5342c067..a43c42bbd 100644
--- a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
+++ b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
@@ -78,7 +78,8 @@ export default class Example07 {
       {
         id: 'action', name: 'Action', field: 'action', minWidth: 60, maxWidth: 60,
         excludeFromExport: true, excludeFromHeaderMenu: true,
-        formatter: () => `<div class="button-style margin-auto action-btn"><span class="mdi mdi-chevron-down mdi-22px text-color-primary"></span></div>`,
+        cssClass: 'justify-center',
+        formatter: () => `<div class="button-style action-btn"><span class="mdi mdi-chevron-down mdi-22px text-color-primary"></span></div>`,
         cellMenu: {
           hideCloseButton: false,
           subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts
index f70b3ddf0..ad44b1a59 100644
--- a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts
+++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts
@@ -365,7 +365,8 @@ export default class Example12 {
       {
         id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70,
         excludeFromExport: true,
-        formatter: () => `<div class="button-style margin-auto action-btn"><span class="mdi mdi-dots-vertical mdi-22px text-color-primary"></span></div>`,
+        cssClass: 'justify-center flex',
+        formatter: () => `<div class="button-style action-btn"><span class="mdi mdi-dots-vertical mdi-22px text-color-primary"></span></div>`,
         cellMenu: {
           hideCloseButton: false,
           commandTitle: 'Commands',
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts
index ab24afb01..33343a206 100644
--- a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts
+++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts
@@ -326,7 +326,8 @@ export default class Example14 {
       {
         id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70,
         excludeFromExport: true,
-        formatter: () => `<div class="button-style margin-auto action-btn"><span class="mdi mdi-chevron-down mdi-22px text-color-primary"></span></div>`,
+        cssClass: 'justify-center flex',
+        formatter: () => `<div class="button-style action-btn"><span class="mdi mdi-chevron-down mdi-22px text-color-primary"></span></div>`,
         cellMenu: {
           hideCloseButton: false,
           commandTitle: 'Commands',
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
index 69df5a31c..a5a7c6969 100644
--- a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
+++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
@@ -281,7 +281,8 @@ export default class Example16 {
       },
       {
         id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70,
-        formatter: () => `<div class="button-style margin-auto action-btn"><span class="mdi mdi-chevron-down mdi-22px text-color-primary"></span></div>`,
+        cssClass: 'justify-center flex',
+        formatter: () => `<div class="button-style action-btn"><span class="mdi mdi-chevron-down mdi-22px text-color-primary"></span></div>`,
         excludeFromExport: true,
         // customTooltip: {
         //   formatter: () => `Click to open Cell Menu`, // return empty so it won't show any pre-tooltip
diff --git a/examples/vite-demo-vanilla-bundle/src/styles.scss b/examples/vite-demo-vanilla-bundle/src/styles.scss
index f66f8e553..9bcd3c4e1 100644
--- a/examples/vite-demo-vanilla-bundle/src/styles.scss
+++ b/examples/vite-demo-vanilla-bundle/src/styles.scss
@@ -115,3 +115,12 @@ input.is-narrow {
 .text-red {
   color: red;
 }
+.flex {
+  display: flex !important;
+}
+.align-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index 09ef71935..3733a3924 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -73,6 +73,7 @@ $slick-cell-active-border:                                  none !default;
 $slick-cell-active-box-shadow:                              inset 0 0 0 1px #aaaaaa !default;
 $slick-cell-active-z-index:                                 6 !default;
 $slick-cell-box-shadow:                                     none !default;
+$slick-cell-display:                                        block !default;
 $slick-cell-text-color:                                     #333 !default;
 $slick-cell-font-family:                                    $slick-font-family !default;
 $slick-cell-font-weight:                                    normal !default;
diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
index be669d349..d142d45a8 100644
--- a/packages/common/src/styles/slick-grid.scss
+++ b/packages/common/src/styles/slick-grid.scss
@@ -283,7 +283,9 @@
   .slick-cell {
     box-sizing: border-box;
     border-style: var(--slick-grid-border-style, $slick-grid-border-style);
-    padding: 1px 2px 1px 2px;
+    display: var(--slick-cell-display, $slick-cell-display);
+    padding: 1px 2px;
+    align-items: center;
   }
 
   .slick-header-column {