fix(AnalyticalTable): fix border styles for different themes (#7495)

Lukas742 · web-flow · commit cb4169e26661 · 2025-07-03T15:58:04.000+02:00
Fixes #7458
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
@@ -59,10 +59,6 @@
 
 .tableHeaderRow {
   height: var(--_ui5wcr-AnalyticalTableHeaderRowHeight);
-
-  div:first-child .th {
-    border-inline-start: 1px solid var(--sapList_BorderColor);
-  }
 }
 
 .hasNavigationIndicator {
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
@@ -1,5 +1,5 @@
 .thContainer {
-  &:first-child > [role='columnheader'] {
+  & > [role='columnheader'][data-column-index='0'] {
     border-inline-start: var(--_ui5wcr-AnalyticalTable-OuterCellBorder);
   }
 
diff --git a/packages/main/src/themes/sap_belize.css b/packages/main/src/themes/sap_belize.css
@@ -1,8 +1,10 @@
-
-[data-sap-theme="sap_belize"] {
+[data-sap-theme='sap_belize'] {
   --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
   --_ui5wcr_Scrollbar_BorderRadius: 0;
-  --_ui5wcr_Splitter_BarBorderFocus: .0625rem dotted var(--sapContent_FocusColor);
+  --_ui5wcr_Splitter_BarBorderFocus: 0.0625rem dotted var(--sapContent_FocusColor);
   --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
-  --_ui5wcr_Splitter_BarBorderHighContrastFix: .0625rem dotted var(--sapContent_FocusColor);
-}
+  --_ui5wcr_Splitter_BarBorderHighContrastFix: 0.0625rem dotted var(--sapContent_FocusColor);
+  --_ui5wcr-AnalyticalTable-OuterCellBorder: 1px solid transparent;
+  --_ui5wcr-AnalyticalTable-OuterBorderBlock: none;
+  --_ui5wcr-AnalyticalTable-OuterBorderInline: none;
+}
diff --git a/packages/main/src/themes/sap_belize_hcb.css b/packages/main/src/themes/sap_belize_hcb.css
@@ -3,4 +3,7 @@
   --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
   --_ui5wcr_Scrollbar_BorderRadius: 0;
   --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
+  --_ui5wcr-AnalyticalTable-OuterCellBorder: 1px solid transparent;
+  --_ui5wcr-AnalyticalTable-OuterBorderBlock: none;
+  --_ui5wcr-AnalyticalTable-OuterBorderInline: none;
 }
diff --git a/packages/main/src/themes/sap_belize_hcw.css b/packages/main/src/themes/sap_belize_hcw.css
@@ -1,6 +1,9 @@
-[data-sap-theme="sap_belize_hcw"] {
+[data-sap-theme='sap_belize_hcw'] {
   --_ui5wcr_Scrollbar_Border: 0.0625rem solid #585858;
   --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
   --_ui5wcr_Scrollbar_BorderRadius: 0;
   --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
-}
+  --_ui5wcr-AnalyticalTable-OuterCellBorder: 1px solid transparent;
+  --_ui5wcr-AnalyticalTable-OuterBorderBlock: none;
+  --_ui5wcr-AnalyticalTable-OuterBorderInline: none;
+}

Original file line number	Diff line number	Diff line change
`@@ -59,10 +59,6 @@`
`59`	`59`
`60`	`60`	`.tableHeaderRow {`
`61`	`61`	`height: var(--_ui5wcr-AnalyticalTableHeaderRowHeight);`
`62`		`-`
`63`		`- div:first-child .th {`
`64`		`- border-inline-start: 1px solid var(--sapList_BorderColor);`
`65`		`- }`
`66`	`62`	`}`
`67`	`63`
`68`	`64`	`.hasNavigationIndicator {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.thContainer {`
`2`		`- &:first-child > [role='columnheader'] {`
	`2`	`+ & > [role='columnheader'][data-column-index='0'] {`
`3`	`3`	`border-inline-start: var(--_ui5wcr-AnalyticalTable-OuterCellBorder);`
`4`	`4`	`}`
`5`	`5`
Original file line number	Diff line number	Diff line change
`@@ -3,4 +3,7 @@`
`3`	`3`	`--_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);`
`4`	`4`	`--_ui5wcr_Scrollbar_BorderRadius: 0;`
`5`	`5`	`--_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);`
	`6`	`+ --_ui5wcr-AnalyticalTable-OuterCellBorder: 1px solid transparent;`
	`7`	`+ --_ui5wcr-AnalyticalTable-OuterBorderBlock: none;`
	`8`	`+ --_ui5wcr-AnalyticalTable-OuterBorderInline: none;`
`6`	`9`	`}`