From f4a95c64371dfe4c36e30e2c3b26d2225fe74ea8 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 6 Nov 2024 08:47:41 +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 | 26 ++++++++++++++-----
2 files changed, 24 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 19ca479a8d8..5d651420b23 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
@@ -49,3 +49,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 55cc01c4ad5..825d4d6c56f 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';
@@ -112,15 +113,17 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
style.textAlign = column.hAlign.toLowerCase() as any;
}
- 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.5;
+ if (margin > 0) {
+ margin += 0.75;
+ }
style.marginInlineEnd = `${margin}rem`;
@@ -218,11 +221,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 && popoverOpen && (
From d84529dc3c1e27b49ca022cb739fae8203f7b291 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 5d651420b23..b50371f05f8 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
@@ -51,6 +51,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 825d4d6c56f..4643877d48a 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -113,9 +113,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
style.textAlign = column.hAlign.toLowerCase() as any;
}
- 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;