From 1cfc8844f7dcf768821477f56fe24cfdc16d4eb8 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 24 Nov 2025 13:07:35 +0100 Subject: [PATCH 1/3] fix(ObjectPage): update section spacing to latest specs --- .../ObjectPageSection/ObjectPageSection.module.css | 9 +++++---- .../ObjectPageSubSection/ObjectPageSubSection.module.css | 2 +- packages/main/src/themes/base.css | 1 + packages/main/src/themes/sap_horizon.css | 2 +- packages/main/src/themes/sap_horizon_dark.css | 2 +- 5 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css b/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css index aba75b68273..79179ccac5a 100644 --- a/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css +++ b/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css @@ -4,10 +4,11 @@ &:first-of-type { margin-block-start: 1px; } + margin-block-end: 1rem; } .section [data-component-name='ObjectPageSubSection']:not(:first-child) { - padding-block-start: 0.5rem; + padding-block-start: 1rem; } .section:focus { @@ -28,8 +29,8 @@ } .title { - height: var(--_ui5wcr_ObjectPage_SectionTitleHeight); - line-height: var(--_ui5wcr_ObjectPage_SectionTitleLineHeight); + height: 2.25rem; + line-height: 2.25rem; color: var(--sapGroup_TitleTextColor); font-size: var(--sapFontHeader4Size); display: inline-block; @@ -62,7 +63,7 @@ } .sectionContentInner { - padding-block: 0.5rem; + padding-block-start: 1rem; font-family: var(--sapFontFamily); height: 100%; box-sizing: border-box; diff --git a/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css b/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css index dd8aebe2ec5..f8bb32d3d5d 100644 --- a/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css +++ b/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css @@ -27,7 +27,7 @@ .subSectionContent { background-color: var(--_ui5wcr_ObjectPage_SubSectionBackgroundColor); border-radius: var(--_ui5wcr_ObjectPage_SubSectionBorderRadius); - padding-block: 1rem; + padding-block: 0.5rem; } .spacer { diff --git a/packages/main/src/themes/base.css b/packages/main/src/themes/base.css index 8c9d7060c66..b9f26715359 100644 --- a/packages/main/src/themes/base.css +++ b/packages/main/src/themes/base.css @@ -20,6 +20,7 @@ --_ui5wcr_ActionSheet_MobileHeaderBoxShadow: none; --_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapContent_ContrastTextColor); --_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontFamily); + /*ToDo: no used anymore - remove in next major version */ --_ui5wcr_ObjectPage_SectionTitleLineHeight: 2.25rem; --_ui5wcr_ObjectPage_SubSectionBorderRadius: 0; --_ui5wcr_Splitter_BarBorderHighContrastFix: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor); diff --git a/packages/main/src/themes/sap_horizon.css b/packages/main/src/themes/sap_horizon.css index d9cc2519cca..a01d4a9373e 100644 --- a/packages/main/src/themes/sap_horizon.css +++ b/packages/main/src/themes/sap_horizon.css @@ -13,7 +13,7 @@ --_ui5wcr_ActionSheet_MobileHeaderBoxShadow: var(--sapContent_Shadow2); --_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapPageHeader_TextColor); --_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontBoldFamily); - --_ui5wcr_ObjectPage_SectionTitleLineHeight: 4rem; + --_ui5wcr_ObjectPage_SectionTitleLineHeight: 2.25rem; --_ui5wcr_ObjectPage_SubSectionBorderRadius: var(--sapElement_BorderCornerRadius); --_ui5wcr_ActionSheet_MobileHeaderBackground: var(--sapPageHeader_Background); --_ui5wcr_ActionSheet_MobileHeaderBorderRadius: var(--sapPopover_BorderCornerRadius); diff --git a/packages/main/src/themes/sap_horizon_dark.css b/packages/main/src/themes/sap_horizon_dark.css index 2847653385e..96dc7ca5e70 100644 --- a/packages/main/src/themes/sap_horizon_dark.css +++ b/packages/main/src/themes/sap_horizon_dark.css @@ -13,7 +13,7 @@ --_ui5wcr_ActionSheet_MobileHeaderBoxShadow: var(--sapContent_Shadow2); --_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapPageHeader_TextColor); --_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontBoldFamily); - --_ui5wcr_ObjectPage_SectionTitleLineHeight: 4rem; + --_ui5wcr_ObjectPage_SectionTitleLineHeight: 2.25rem; --_ui5wcr_ObjectPage_SubSectionBorderRadius: var(--sapElement_BorderCornerRadius); --_ui5wcr_ActionSheet_MobileHeaderBackground: var(--sapPageHeader_Background); --_ui5wcr_ActionSheet_MobileHeaderBorderRadius: var(--sapPopover_BorderCornerRadius); From 91baff33a05127f858ec45ee7341e59a87e14b10 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 24 Nov 2025 13:09:37 +0100 Subject: [PATCH 2/3] remove redundant css var deltas --- packages/main/src/themes/sap_horizon.css | 1 - packages/main/src/themes/sap_horizon_dark.css | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/main/src/themes/sap_horizon.css b/packages/main/src/themes/sap_horizon.css index a01d4a9373e..fff490d74d3 100644 --- a/packages/main/src/themes/sap_horizon.css +++ b/packages/main/src/themes/sap_horizon.css @@ -13,7 +13,6 @@ --_ui5wcr_ActionSheet_MobileHeaderBoxShadow: var(--sapContent_Shadow2); --_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapPageHeader_TextColor); --_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontBoldFamily); - --_ui5wcr_ObjectPage_SectionTitleLineHeight: 2.25rem; --_ui5wcr_ObjectPage_SubSectionBorderRadius: var(--sapElement_BorderCornerRadius); --_ui5wcr_ActionSheet_MobileHeaderBackground: var(--sapPageHeader_Background); --_ui5wcr_ActionSheet_MobileHeaderBorderRadius: var(--sapPopover_BorderCornerRadius); diff --git a/packages/main/src/themes/sap_horizon_dark.css b/packages/main/src/themes/sap_horizon_dark.css index 96dc7ca5e70..16ef8bed203 100644 --- a/packages/main/src/themes/sap_horizon_dark.css +++ b/packages/main/src/themes/sap_horizon_dark.css @@ -13,7 +13,6 @@ --_ui5wcr_ActionSheet_MobileHeaderBoxShadow: var(--sapContent_Shadow2); --_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapPageHeader_TextColor); --_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontBoldFamily); - --_ui5wcr_ObjectPage_SectionTitleLineHeight: 2.25rem; --_ui5wcr_ObjectPage_SubSectionBorderRadius: var(--sapElement_BorderCornerRadius); --_ui5wcr_ActionSheet_MobileHeaderBackground: var(--sapPageHeader_Background); --_ui5wcr_ActionSheet_MobileHeaderBorderRadius: var(--sapPopover_BorderCornerRadius); From 231e44c20578434c572afa6fb131af70a5708843 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 24 Nov 2025 15:01:13 +0100 Subject: [PATCH 3/3] fix tests --- .../components/ObjectPage/ObjectPage.cy.tsx | 20 +++++++++---------- .../ThemeProvider/ThemeProvider.cy.tsx | 4 ++-- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx index a457dfa2cca..0ac7d1137aa 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.cy.tsx @@ -114,7 +114,7 @@ describe('ObjectPage', () => { cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 15').should('have.attr', 'aria-selected', 'true'); if (mode === ObjectPageMode.Default) { - cy.findByTestId('op').scrollTo(0, 4660); + cy.findByTestId('op').scrollTo(0, 4750); cy.findByText('Content 7').should('be.visible'); cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true'); @@ -124,7 +124,7 @@ describe('ObjectPage', () => { for (let i = 0; i < 15; i++) { cy.findByText('Add').click(); } - cy.findByTestId('op').scrollTo(0, 4660); + cy.findByTestId('op').scrollTo(0, 4750); cy.findByText('Content 7').should('be.visible'); cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true'); @@ -712,19 +712,19 @@ describe('ObjectPage', () => { }; cy.mount(); cy.findByText('Update Heights').click(); - cy.findByText('{"offset":1080,"scroll":2270}').should('exist'); + cy.findByText('{"offset":1080,"scroll":2290}').should('exist'); cy.findByTestId('op').scrollTo('bottom'); cy.findByText('Update Heights').click({ force: true }); - cy.findByText('{"offset":1080,"scroll":2270}').should('exist'); + cy.findByText('{"offset":1080,"scroll":2290}').should('exist'); cy.mount(); cy.findByText('Update Heights').click(); - cy.findByText('{"offset":1080,"scroll":2320}').should('exist'); + cy.findByText('{"offset":1080,"scroll":2330}').should('exist'); cy.findByTestId('op').scrollTo('bottom'); cy.findByText('Update Heights').click({ force: true }); - cy.findByText('{"offset":1080,"scroll":2320}').should('exist'); + cy.findByText('{"offset":1080,"scroll":2330}').should('exist'); cy.mount(); cy.findByText('Update Heights').click(); @@ -809,19 +809,19 @@ describe('ObjectPage', () => { }; cy.mount(); cy.findByText('Update Heights').click(); - cy.findByText('{"offset":1080,"scroll":2270}').should('exist'); + cy.findByText('{"offset":1080,"scroll":2290}').should('exist'); cy.findByTestId('op').scrollTo('bottom'); cy.findByText('Update Heights').click({ force: true }); - cy.findByText('{"offset":1080,"scroll":2270}').should('exist'); + cy.findByText('{"offset":1080,"scroll":2290}').should('exist'); cy.mount(); cy.findByText('Update Heights').click(); - cy.findByText('{"offset":1080,"scroll":2330}').should('exist'); + cy.findByText('{"offset":1080,"scroll":2350}').should('exist'); cy.findByTestId('op').scrollTo('bottom'); cy.findByText('Update Heights').click({ force: true }); - cy.findByText('{"offset":1080,"scroll":2330}').should('exist'); + cy.findByText('{"offset":1080,"scroll":2350}').should('exist'); cy.mount(); cy.findByText('Update Heights').click(); diff --git a/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx b/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx index e5a16a4811e..98118363232 100644 --- a/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx +++ b/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx @@ -23,11 +23,11 @@ describe('ThemeProvider', () => { it('injects css via JS', () => { cy.mount(Hello World); - cy.get('html').should('have.css', '--_ui5wcr_ObjectPage_SectionTitleLineHeight', '4rem'); + cy.get('html').should('have.css', '--_ui5wcr_Scrollbar_Border', 'none'); }); it('does not inject CSS when staticCssInjected is true', () => { cy.mount(Hello World, { themeProviderProps: { staticCssInjected: true } }); - cy.get('html').should('not.have.css', '--_ui5wcr_ObjectPage_SectionTitleLineHeight'); + cy.get('html').should('not.have.css', '--_ui5wcr_Scrollbar_Border'); }); });