From d656a61ce5076101a25b4f552ee79c62bf85b653 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Tue, 5 Nov 2024 16:05:39 +0100
Subject: [PATCH 1/2] Fix(AnalyticalTable): update column header icons to align
 with latest spec

---
 .../ColumnHeader/ColumnHeader.module.css      |  5 ++++
 .../AnalyticalTable/ColumnHeader/index.tsx    | 24 +++++++++++++------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
index 5e8bfdd17cd..a479e6f8539 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
@@ -62,3 +62,8 @@
   display: flex;
   justify-content: center;
 }
+
+.icon {
+  height: 0.8rem;
+  width: 0.8rem;
+}
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index 0bbceff6f71..a41ec88ddbc 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -1,4 +1,5 @@
 import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import IconDesign from '@ui5/webcomponents/dist/types/IconDesign.js';
 import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
 import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
 import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
@@ -108,16 +109,16 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
       style.textAlign = column.hAlign.toLowerCase();
     }
 
-    if (column.isSorted) margin++;
-    if (column.isGrouped) margin++;
-    if (isFiltered) margin++;
+    if (column.isSorted) margin += 0.8;
+    if (column.isGrouped) margin += 0.8;
+    if (isFiltered) margin += 0.8;
 
     if (margin === 0) {
       return style;
     }
 
     if (margin > 0) {
-      margin += 0.625;
+      margin += 0.75;
     }
 
     style.marginInlineEnd = `${margin}rem`;
@@ -234,11 +235,20 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
             className={classNames.iconContainer}
             data-component-name={`AnalyticalTableHeaderIconsContainer-${columnId}`}
           >
-            {isFiltered && <Icon name={iconFilter} aria-hidden />}
+            {isFiltered && (
+              <Icon design={IconDesign.NonInteractive} name={iconFilter} aria-hidden className={classNames.icon} />
+            )}
             {column.isSorted && (
-              <Icon name={column.isSortedDesc ? iconSortDescending : iconSortAscending} aria-hidden />
+              <Icon
+                design={IconDesign.NonInteractive}
+                name={column.isSortedDesc ? iconSortDescending : iconSortAscending}
+                aria-hidden
+                className={classNames.icon}
+              />
+            )}
+            {column.isGrouped && (
+              <Icon design={IconDesign.NonInteractive} name={iconGroup} aria-hidden className={classNames.icon} />
             )}
-            {column.isGrouped && <Icon name={iconGroup} aria-hidden />}
           </div>
         </div>
         {hasPopover &&

From a0ddacd15ee467809019c61fb7cb056bf14d2fbf Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Mon, 18 Nov 2024 15:44:57 +0100
Subject: [PATCH 2/2] use `0.825rem` icon size

---
 .../AnalyticalTable/ColumnHeader/ColumnHeader.module.css    | 4 ++--
 .../src/components/AnalyticalTable/ColumnHeader/index.tsx   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
index a479e6f8539..f5623b79dd4 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
@@ -64,6 +64,6 @@
 }
 
 .icon {
-  height: 0.8rem;
-  width: 0.8rem;
+  height: 0.8125rem;
+  width: 0.8125rem;
 }
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index a41ec88ddbc..9ae20f7931c 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -109,9 +109,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
       style.textAlign = column.hAlign.toLowerCase();
     }
 
-    if (column.isSorted) margin += 0.8;
-    if (column.isGrouped) margin += 0.8;
-    if (isFiltered) margin += 0.8;
+    if (column.isSorted) margin += 0.8125;
+    if (column.isGrouped) margin += 0.8125;
+    if (isFiltered) margin += 0.8125;
 
     if (margin === 0) {
       return style;