Fixed #6588 - Table sort icon not aligned properly

primefaces · Oct 16, 2024 · 0a3430c · 0a3430c
1 parent 8eed1fd
commit 0a3430c
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 8 deletions.
diff --git a/packages/primevue/src/datatable/style/DataTableStyle.js b/packages/primevue/src/datatable/style/DataTableStyle.js
@@ -373,6 +373,9 @@ const theme = ({ dt }) => `
 
 .p-datatable-sort-icon {
     color: ${dt('datatable.sort.icon.color')};
+    font-size: ${dt('datatable.sort.icon.size')};
+    width: ${dt('datatable.sort.icon.size')};
+    height: ${dt('datatable.sort.icon.size')};
     transition: color ${dt('datatable.transition.duration')};
 }
 

diff --git a/packages/primevue/src/treetable/style/TreeTableStyle.js b/packages/primevue/src/treetable/style/TreeTableStyle.js
@@ -231,6 +231,9 @@ const theme = ({ dt }) => `
 
 .p-treetable-sort-icon {
     color: ${dt('treetable.sort.icon.color')};
+    font-size: ${dt('treetable.sort.icon.size')};
+    width: ${dt('treetable.sort.icon.size')};
+    height: ${dt('treetable.sort.icon.size')};
     transition: color ${dt('treetable.transition.duration')};
 }
 

diff --git a/packages/themes/src/presets/aura/datatable/index.js b/packages/themes/src/presets/aura/datatable/index.js
@@ -75,7 +75,8 @@ export default {
     },
     sortIcon: {
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        size: '0.875rem'
     },
     loadingIcon: {
         size: '2rem'

diff --git a/packages/themes/src/presets/aura/treetable/index.js b/packages/themes/src/presets/aura/treetable/index.js
@@ -73,7 +73,8 @@ export default {
     },
     sortIcon: {
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        size: '0.875rem'
     },
     loadingIcon: {
         size: '2rem'

diff --git a/packages/themes/src/presets/lara/datatable/index.js b/packages/themes/src/presets/lara/datatable/index.js
@@ -66,7 +66,8 @@ export default {
     },
     sortIcon: {
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        size: '0.875rem'
     },
     loadingIcon: {
         size: '2rem'

diff --git a/packages/themes/src/presets/lara/treetable/index.js b/packages/themes/src/presets/lara/treetable/index.js
@@ -64,7 +64,8 @@ export default {
     },
     sortIcon: {
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        size: '0.875rem'
     },
     loadingIcon: {
         size: '2rem'

diff --git a/packages/themes/src/presets/material/datatable/index.js b/packages/themes/src/presets/material/datatable/index.js
@@ -75,7 +75,8 @@ export default {
     },
     sortIcon: {
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        size: '0.875rem'
     },
     loadingIcon: {
         size: '2rem'

diff --git a/packages/themes/src/presets/material/treetable/index.js b/packages/themes/src/presets/material/treetable/index.js
@@ -73,7 +73,8 @@ export default {
     },
     sortIcon: {
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        size: '0.875rem'
     },
     loadingIcon: {
         size: '2rem'

diff --git a/packages/themes/src/presets/nora/datatable/index.js b/packages/themes/src/presets/nora/datatable/index.js
@@ -75,7 +75,8 @@ export default {
     },
     sortIcon: {
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        size: '0.875rem'
     },
     loadingIcon: {
         size: '2rem'

diff --git a/packages/themes/src/presets/nora/treetable/index.js b/packages/themes/src/presets/nora/treetable/index.js
@@ -73,7 +73,8 @@ export default {
     },
     sortIcon: {
         color: '{text.muted.color}',
-        hoverColor: '{text.hover.muted.color}'
+        hoverColor: '{text.hover.muted.color}',
+        size: '0.875rem'
     },
     loadingIcon: {
         size: '2rem'