Skip to content

Commit aa53dde

Browse files
cspruiellcspruiell
committed
Merge remote-tracking branch 'origin/MC-4112-Tab-Item-Children' into cms-team-1-delivery
2 parents e3cf6c3 + dc536f6 commit aa53dde

File tree

3 files changed

+80
-13
lines changed

3 files changed

+80
-13
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTabsSection.xml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
<element name="tabsNavAligned" type="button" selector="(//div[@data-role='tabs']//descendant::*[@role='tablist'][contains(@style, 'text-align: {{arg1}};')])" parameterized="true"/>
3333
<element name="tabsContentAdvancedStyles" type="button" selector="//div[@class='tabs-content'][contains(@style, 'border-style: solid;')][contains(@style, 'border-color: rgb(0, 0, 0);')][contains(@style, 'border-width: 10px;')][contains(@style, 'border-radius: 12px;')][contains(@style, 'min-height: 300px;')]"/>
3434
<element name="tabsAlignment" type="text" selector="//div[@class='tabs-content'and contains(@style,'text-align: {{arg1}}')]" parameterized="true"/>
35+
<element name="tabsContentHeightJS" type="button" selector="document.querySelectorAll('[class=tabs-content]')[{{arg1}}].clientHeight" parameterized="true"/>
3536
</section>
3637
<section name="TabOnStage">
3738
<element name="base" type="button" selector="(//div[@data-role='tab-item'])[{{arg1}}]" parameterized="true"/>
@@ -61,6 +62,7 @@
6162
<element name="tabContentBackgroundRepeat" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'background-repeat: {{arg2}}')]" parameterized="true"/>
6263
<element name="tabContentBorderWidth" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'border-width: {{arg2}}')]" parameterized="true"/>
6364
<element name="tabContentBorderRadius" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'border-radius: {{arg2}}')]" parameterized="true"/>
65+
<element name="tabContentHeightJS" type="button" selector="document.querySelectorAll('[data-role=tab-item]')[{{arg1}}].clientHeight" parameterized="true"/>
6466
<element name="tabContentMargin" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'margin: {{arg2}}')]" parameterized="true"/>
6567
<element name="tabContentPadding" type="button" selector="//*[@role='tabpanel'][{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')][contains(@style, 'padding: {{arg2}}')]" parameterized="true"/>
6668
<element name="container" type="button" selector="(//*[@role='tabpanel'])[{{arg1}}]//div[contains(@class, 'pagebuilder-tab-item')]//div[contains(@class, 'tab-item-container')]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTabItemContentTests.xml

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -971,4 +971,78 @@
971971
<argument name="containerTargetIndex" value="1"/>
972972
</actionGroup>
973973
</test>
974+
<test name="TabMaintainsDefaultMinimumHeightWithContent">
975+
<annotations>
976+
<features value="PageBuilder"/>
977+
<stories value="Tabs"/>
978+
<title value="Tabs Content - Add Heading to Tabs container and verify minimum height on Admin and Storefront"/>
979+
<description value="As a Content Manager I want tab to be a container so that I can add any content inside the Tab, not only text"/>
980+
<severity value="MAJOR"/>
981+
<useCaseId value="MC-4112"/>
982+
<testCaseId value="MC-4209"/>
983+
<group value="pagebuilder"/>
984+
<group value="pagebuilder-tabs-content"/>
985+
</annotations>
986+
<before>
987+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
988+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
989+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
990+
</before>
991+
<after>
992+
<actionGroup ref="logout" stepKey="logout"/>
993+
</after>
994+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
995+
<argument name="contentType" value="PageBuilderTabsContentType"/>
996+
</actionGroup>
997+
<!-- Add Tabs to Stage -->
998+
<comment userInput="Add Tabs to Stage" stepKey="addTabsToStage"/>
999+
<actionGroup ref="dragContentTypeToStage" stepKey="dragTabsIntoStage">
1000+
<argument name="contentType" value="PageBuilderTabsContentType"/>
1001+
</actionGroup>
1002+
<!-- Add Heading to Tab -->
1003+
<comment userInput="Add Heading to Tab" stepKey="addHeadingToTab"/>
1004+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
1005+
<argument name="group" value="PageBuilderHeadingContentType"/>
1006+
</actionGroup>
1007+
<actionGroup ref="dragContentTypeToContainer" stepKey="dragHeadingOntoTab">
1008+
<argument name="contentType" value="PageBuilderHeadingContentType"/>
1009+
<argument name="containerTargetType" value="PageBuilderTabContentType"/>
1010+
<argument name="containerTargetIndex" value="1" />
1011+
</actionGroup>
1012+
<actionGroup ref="enterHeadingOnStage" stepKey="enterHeadingOnStage">
1013+
<argument name="index" value="1"/>
1014+
<argument name="headingText" value="PageBuilderHeadingTextProperty"/>
1015+
<argument name="headingType" value="PageBuilderHeadingTypeProperty_H1"/>
1016+
<argument name="headingAlignment" value="PageBuilderHeadingAlignmentProperty_center"/>
1017+
</actionGroup>
1018+
<actionGroup ref="clickOutsideLiveEditHeading" stepKey="clickOutsideLiveEditHeading">
1019+
<argument name="index" value="1"/>
1020+
</actionGroup>
1021+
<!-- Add Button to Tab -->
1022+
<actionGroup ref="dragContentTypeToContainer" stepKey="dragButtonOntoTab">
1023+
<argument name="contentType" value="PageBuilderButtonsContentType"/>
1024+
<argument name="containerTargetType" value="PageBuilderTabContentType"/>
1025+
<argument name="containerTargetIndex" value="1" />
1026+
</actionGroup>
1027+
<!-- Verify Tab height on stage -->
1028+
<comment userInput="Verify Tab height on stage" stepKey="verifyTabOnStage"/>
1029+
<executeJS function="return {{TabOnStage.tabContentHeightJS('0')}}" stepKey="tabContentHeightStage"/>
1030+
<executeJS function="return {{PageBuilderTabMinimumHeightDefaultProperty.value}} + {{PageBuilderPaddingProperty40.paddingTop}} + {{PageBuilderPaddingProperty40.paddingBottom}}" stepKey="tabExpectedHeight"/>
1031+
<assertEquals stepKey="assertTabHeightStage">
1032+
<expectedResult type="variable">tabExpectedHeight</expectedResult>
1033+
<actualResult type="variable">tabContentHeightStage</actualResult>
1034+
</assertEquals>
1035+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
1036+
<!-- Verify Tab height on storefront -->
1037+
<comment userInput="Verify Tab height on storefront" stepKey="viewTabOnStorefront"/>
1038+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
1039+
<argument name="contentType" value="PageBuilderTabsContentType"/>
1040+
</actionGroup>
1041+
<waitForElementVisible selector="{{TabOnStorefront.tabContent('1')}}" stepKey="waitForTabContentVisible"/>
1042+
<executeJS function="return {{TabsOnFrontend.tabsContentHeightJS('0')}}" stepKey="tabContentHeightStorefront"/>
1043+
<assertEquals stepKey="assertTabHeightStorefrontEqualsStage">
1044+
<expectedResult type="variable">tabContentHeightStage</expectedResult>
1045+
<actualResult type="variable">tabContentHeightStorefront</actualResult>
1046+
</assertEquals>
1047+
</test>
9741048
</tests>

‎app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/tabs/_default.less

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@
33
// * See COPYING.txt for license details.
44
// */
55

6-
@f6: #f6f6f6;
7-
@ccc: #ccc;
8-
@color-black: #000;
9-
@color-white: #fff;
10-
116
//
127
// Default appearance styles
138
// _____________________________________________
@@ -24,8 +19,8 @@ div[data-role='tabs'] {
2419
}
2520

2621
li.tab-header {
27-
background: @f6;
28-
border: 1px solid @ccc;
22+
background: @color-gray-light0;
23+
border: 1px solid @color-gray80;
2924
border-bottom: 0;
3025
border-bottom-left-radius: 0 !important;
3126
border-bottom-right-radius: 0 !important;
@@ -62,7 +57,7 @@ div[data-role='tabs'] {
6257
}
6358

6459
&:last-child {
65-
border-right: 1px solid @ccc;
60+
border-right: 1px solid @color-gray80;
6661
}
6762

6863
&.ui-state-active {
@@ -78,7 +73,7 @@ div[data-role='tabs'] {
7873
}
7974

8075
.tabs-content {
81-
border: 1px solid @ccc;
76+
border: 1px solid @color-gray80;
8277
overflow: hidden;
8378
position: relative;
8479
z-index: 9;
@@ -90,10 +85,6 @@ div[data-role='tabs'] {
9085
&:not(:first-child) {
9186
display: none;
9287
}
93-
94-
> * {
95-
min-height: inherit;
96-
}
9788
}
9889
}
9990

0 commit comments

Comments
 (0)