From 9027b573ad59f85d885b0aa7a73e0a94ae019603 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 26 Mar 2024 11:49:12 +0300
Subject: [PATCH] Add missing styles for column filters

---
 .../themes/primeone/base/datatable/index.js   | 83 +++++++++++++++----
 .../primeone/presets/aura/datatable/index.js  | 24 +++++-
 2 files changed, 91 insertions(+), 16 deletions(-)

diff --git a/components/lib/themes/primeone/base/datatable/index.js b/components/lib/themes/primeone/base/datatable/index.js
index e2667a8df..213256fdf 100644
--- a/components/lib/themes/primeone/base/datatable/index.js
+++ b/components/lib/themes/primeone/base/datatable/index.js
@@ -251,7 +251,7 @@ export default {
     position: relative;
     width: 1.75rem;
     height: 1.75rem;
-    color: ${dt('datatable.fiter.menu.button.color')};
+    color: ${dt('datatable.filter.menu.button.color')};
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -260,20 +260,20 @@ export default {
 }
 
 .p-column-filter-menu-button:hover {
-    background: ${dt('datatable.fiter.menu.button.hover.background')};
-    color: ${dt('datatable.fiter.menu.button.hover.color')};
+    background: ${dt('datatable.filter.menu.button.hover.background')};
+    color: ${dt('datatable.filter.menu.button.hover.color')};
 }
 
 .p-column-filter-menu-button.p-column-filter-menu-button-open,
 .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
-    background: ${dt('datatable.fiter.menu.button.open.background')};
-    color: ${dt('datatable.fiter.menu.button.open.color')};
+    background: ${dt('datatable.filter.menu.button.open.background')};
+    color: ${dt('datatable.filter.menu.button.open.color')};
 }
 
 .p-column-filter-menu-button.p-column-filter-menu-button-active,
 .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
-    background: ${dt('datatable.fiter.menu.button.active.background')};
-    color: ${dt('datatable.fiter.menu.button.active.color')};
+    background: ${dt('datatable.filter.menu.button.active.background')};
+    color: ${dt('datatable.filter.menu.button.active.color')};
 }
 
 .p-column-filter-menu-button:focus-visible {
@@ -291,7 +291,7 @@ export default {
     position: relative;
     width: 1.75rem;
     height: 1.75rem;
-    color: ${dt('datatable.fiter.clear.button.color')};
+    color: ${dt('datatable.filter.clear.button.color')};
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -300,8 +300,8 @@ export default {
 }
 
 .p-column-filter-clear-button:hover {
-    background: ${dt('datatable.fiter.clear.button.hover.background')};
-    color: ${dt('datatable.fiter.clear.button.hover.color')};
+    background: ${dt('datatable.filter.clear.button.hover.background')};
+    color: ${dt('datatable.filter.clear.button.hover.color')};
 }
 
 .p-column-filter-clear-button:focus-visible {
@@ -309,6 +309,61 @@ export default {
     outline-offset: ${dt('focus.ring.offset')};
 }
 
+.p-column-filter-overlay {
+    background: ${dt('datatable.filter.overlay.background')};
+    color: ${dt('datatable.filter.overlay.color')};
+    border: 1px solid ${dt('datatable.filter.overlay.border.color')};
+    border-radius: ${dt('rounded.base')};
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+}
+
+.p-column-filter-row-items {
+    margin: 0;
+    list-style: none;
+    padding: 0.25rem 0.25rem;
+}
+
+.p-column-filter-row-item {
+    margin: 2px 0;
+    padding: 0.5rem 0.75rem;
+    border: 0 none;
+    color: ${dt('datatable.filter.matchmode.item.color')};
+    background: transparent;
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')},;
+    border-radius: ${dt('rounded.sm')};
+    cursor: pointer;
+}
+
+.p-column-filter-row-item:first-child {
+    margin-top: 0;
+}
+
+.p-column-filter-row-item:last-child {
+    margin-bottom: 0;
+}
+
+.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    background: ${dt('datatable.filter.matchmode.item.selected.background')};
+    color: ${dt('datatable.filter.matchmode.item.selected.color')};
+}
+
+.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    background: ${dt('datatable.filter.matchmode.item.focus.background')};
+    color: ${dt('datatable.filter.matchmode.item.focus.color')};
+}
+
+.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 1px solid var(--p-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: 0 none;
+}
+
+.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid ${dt('datatable.filter.matchmode.item.separator.border.color')};
+    margin: 2px 0;
+}
+
 .p-column-filter-menu {
     display: inline-flex;
     margin-left: auto;
@@ -326,7 +381,7 @@ export default {
 
 .p-column-filter-constraint {
     padding: 0;
-    border-bottom: 1px solid ${dt('datatable.fiter.contstraint.border.color')};
+    border-bottom: 1px solid ${dt('datatable.filter.constraint.border.color')};
 }
 
 .p-column-filter-constraint:last-child {
@@ -346,9 +401,9 @@ export default {
 }
 
 .p-column-filter-overlay-menu {
-    background: ${dt('datatable.fiter.overlay.background')};
-    color: ${dt('datatable.fiter.overlay.color')};
-    border: 1px solid ${dt('datatable.fiter.overlay.border.color')};
+    background: ${dt('datatable.filter.overlay.background')};
+    color: ${dt('datatable.filter.overlay.color')};
+    border: 1px solid ${dt('datatable.filter.overlay.border.color')};
     border-radius: ${dt('rounded.base')};
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     min-width: 12.5rem;
diff --git a/components/lib/themes/primeone/presets/aura/datatable/index.js b/components/lib/themes/primeone/presets/aura/datatable/index.js
index 3f8be9157..45a466a91 100644
--- a/components/lib/themes/primeone/presets/aura/datatable/index.js
+++ b/components/lib/themes/primeone/presets/aura/datatable/index.js
@@ -54,7 +54,7 @@ export default {
                     color: '{surface.500}',
                     openColor: '{surface.500}',
                     hoverColor: '{surface.600}',
-                    colorActive: '{highlight.color}'
+                    activeColor: '{highlight.color}'
                 },
                 clearButton: {
                     hoverBackground: '{surface.100}',
@@ -68,6 +68,16 @@ export default {
                 },
                 constraint: {
                     borderColor: '{surface.200}'
+                },
+                matchmodeItem: {
+                    focusBackground: '{surface.100}',
+                    selectedBackground: '{highlight.background}',
+                    color: '{surface.700}',
+                    focusColor: '{surface.800}',
+                    selectedColor: '{highlight.color}',
+                    separator: {
+                        borderColor: '{surface.200}'
+                    }
                 }
             }
         },
@@ -125,7 +135,7 @@ export default {
                     color: '{surface.400}',
                     openColor: '{surface.300}',
                     hoverColor: '{surface.300}',
-                    colorActive: '{highlight.color}'
+                    activeColor: '{highlight.color}'
                 },
                 clearButton: {
                     hoverBackground: '{surface.800}',
@@ -139,6 +149,16 @@ export default {
                 },
                 constraint: {
                     borderColor: '{surface.700}'
+                },
+                matchmodeItem: {
+                    focusBackground: '{surface.800}',
+                    selectedBackground: '{highlight.background}',
+                    color: '{surface.0}',
+                    focusColor: '{surface.0}',
+                    selectedColor: '{highlight.color}',
+                    separator: {
+                        borderColor: '{surface.700}'
+                    }
                 }
             }
         }