Skip to content

Commit 0c058c1

Browse files
Lukas742Lukas742
authored
fix(ObjectPage): update section spacings to latest specs (#7977)
Fixes #7917
1 parent 8054eaf commit 0c058c1

File tree

7 files changed

+19
-19
lines changed

7 files changed

+19
-19
lines changed

‎packages/main/src/components/ObjectPage/ObjectPage.cy.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('ObjectPage', () => {
114114
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 15').should('have.attr', 'aria-selected', 'true');
115115

116116
if (mode === ObjectPageMode.Default) {
117-
cy.findByTestId('op').scrollTo(0, 4660);
117+
cy.findByTestId('op').scrollTo(0, 4750);
118118

119119
cy.findByText('Content 7').should('be.visible');
120120
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
@@ -124,7 +124,7 @@ describe('ObjectPage', () => {
124124
for (let i = 0; i < 15; i++) {
125125
cy.findByText('Add').click();
126126
}
127-
cy.findByTestId('op').scrollTo(0, 4660);
127+
cy.findByTestId('op').scrollTo(0, 4750);
128128

129129
cy.findByText('Content 7').should('be.visible');
130130
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
@@ -712,19 +712,19 @@ describe('ObjectPage', () => {
712712
};
713713
cy.mount(<TestComp height="2000px" mode={ObjectPageMode.Default} />);
714714
cy.findByText('Update Heights').click();
715-
cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
715+
cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
716716

717717
cy.findByTestId('op').scrollTo('bottom');
718718
cy.findByText('Update Heights').click({ force: true });
719-
cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
719+
cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
720720

721721
cy.mount(<TestComp height="2000px" withFooter mode={ObjectPageMode.Default} />);
722722
cy.findByText('Update Heights').click();
723-
cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
723+
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
724724

725725
cy.findByTestId('op').scrollTo('bottom');
726726
cy.findByText('Update Heights').click({ force: true });
727-
cy.findByText('{"offset":1080,"scroll":2320}').should('exist');
727+
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
728728

729729
cy.mount(<TestComp height="400px" mode={ObjectPageMode.Default} />);
730730
cy.findByText('Update Heights').click();
@@ -809,19 +809,19 @@ describe('ObjectPage', () => {
809809
};
810810
cy.mount(<TestComp height="2000px" mode={ObjectPageMode.IconTabBar} />);
811811
cy.findByText('Update Heights').click();
812-
cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
812+
cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
813813

814814
cy.findByTestId('op').scrollTo('bottom');
815815
cy.findByText('Update Heights').click({ force: true });
816-
cy.findByText('{"offset":1080,"scroll":2270}').should('exist');
816+
cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
817817

818818
cy.mount(<TestComp height="2000px" withFooter mode={ObjectPageMode.IconTabBar} />);
819819
cy.findByText('Update Heights').click();
820-
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
820+
cy.findByText('{"offset":1080,"scroll":2350}').should('exist');
821821

822822
cy.findByTestId('op').scrollTo('bottom');
823823
cy.findByText('Update Heights').click({ force: true });
824-
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
824+
cy.findByText('{"offset":1080,"scroll":2350}').should('exist');
825825

826826
cy.mount(<TestComp height="400px" mode={ObjectPageMode.IconTabBar} />);
827827
cy.findByText('Update Heights').click();

‎packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
&:first-of-type {
55
margin-block-start: 1px;
66
}
7+
margin-block-end: 1rem;
78
}
89

910
.section [data-component-name='ObjectPageSubSection']:not(:first-child) {
10-
padding-block-start: 0.5rem;
11+
padding-block-start: 1rem;
1112
}
1213

1314
.section:focus {
@@ -28,8 +29,8 @@
2829
}
2930

3031
.title {
31-
height: var(--_ui5wcr_ObjectPage_SectionTitleHeight);
32-
line-height: var(--_ui5wcr_ObjectPage_SectionTitleLineHeight);
32+
height: 2.25rem;
33+
line-height: 2.25rem;
3334
color: var(--sapGroup_TitleTextColor);
3435
font-size: var(--sapFontHeader4Size);
3536
display: inline-block;
@@ -62,7 +63,7 @@
6263
}
6364

6465
.sectionContentInner {
65-
padding-block: 0.5rem;
66+
padding-block-start: 1rem;
6667
font-family: var(--sapFontFamily);
6768
height: 100%;
6869
box-sizing: border-box;

‎packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
.subSectionContent {
2828
background-color: var(--_ui5wcr_ObjectPage_SubSectionBackgroundColor);
2929
border-radius: var(--_ui5wcr_ObjectPage_SubSectionBorderRadius);
30-
padding-block: 1rem;
30+
padding-block: 0.5rem;
3131
}
3232

3333
.spacer {

‎packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ describe('ThemeProvider', () => {
2323

2424
it('injects css via JS', () => {
2525
cy.mount(<span>Hello World</span>);
26-
cy.get('html').should('have.css', '--_ui5wcr_ObjectPage_SectionTitleLineHeight', '4rem');
26+
cy.get('html').should('have.css', '--_ui5wcr_Scrollbar_Border', 'none');
2727
});
2828

2929
it('does not inject CSS when staticCssInjected is true', () => {
3030
cy.mount(<span>Hello World</span>, { themeProviderProps: { staticCssInjected: true } });
31-
cy.get('html').should('not.have.css', '--_ui5wcr_ObjectPage_SectionTitleLineHeight');
31+
cy.get('html').should('not.have.css', '--_ui5wcr_Scrollbar_Border');
3232
});
3333
});

‎packages/main/src/themes/base.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--_ui5wcr_ActionSheet_MobileHeaderBoxShadow: none;
2121
--_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapContent_ContrastTextColor);
2222
--_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontFamily);
23+
/*ToDo: no used anymore - remove in next major version */
2324
--_ui5wcr_ObjectPage_SectionTitleLineHeight: 2.25rem;
2425
--_ui5wcr_ObjectPage_SubSectionBorderRadius: 0;
2526
--_ui5wcr_Splitter_BarBorderHighContrastFix: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);

‎packages/main/src/themes/sap_horizon.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
--_ui5wcr_ActionSheet_MobileHeaderBoxShadow: var(--sapContent_Shadow2);
1414
--_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapPageHeader_TextColor);
1515
--_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontBoldFamily);
16-
--_ui5wcr_ObjectPage_SectionTitleLineHeight: 4rem;
1716
--_ui5wcr_ObjectPage_SubSectionBorderRadius: var(--sapElement_BorderCornerRadius);
1817
--_ui5wcr_ActionSheet_MobileHeaderBackground: var(--sapPageHeader_Background);
1918
--_ui5wcr_ActionSheet_MobileHeaderBorderRadius: var(--sapPopover_BorderCornerRadius);

‎packages/main/src/themes/sap_horizon_dark.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
--_ui5wcr_ActionSheet_MobileHeaderBoxShadow: var(--sapContent_Shadow2);
1414
--_ui5wcr_ActionSheet_MobileHeaderTextColor: var(--sapPageHeader_TextColor);
1515
--_ui5wcr_ObjectPage_SectionTitleFontFamily: var(--sapFontBoldFamily);
16-
--_ui5wcr_ObjectPage_SectionTitleLineHeight: 4rem;
1716
--_ui5wcr_ObjectPage_SubSectionBorderRadius: var(--sapElement_BorderCornerRadius);
1817
--_ui5wcr_ActionSheet_MobileHeaderBackground: var(--sapPageHeader_Background);
1918
--_ui5wcr_ActionSheet_MobileHeaderBorderRadius: var(--sapPopover_BorderCornerRadius);

0 commit comments

Comments
 (0)