Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Vertical tabs border #1140

Merged
merged 11 commits into from
Oct 3, 2017
Merged

Vertical tabs border #1140

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
64e1fa4
Add border to right.
Blackbaud-AdamHickey Sep 22, 2017
b9cd29f
Make vertical tab to take full height of parent div.
Blackbaud-AdamHickey Sep 28, 2017
0f35c3d
Merge branch 'master' of https://github.com/blackbaud/skyux2 into ver…
Blackbaud-AdamHickey Sep 28, 2017
bbc4239
Remove max height.
Blackbaud-AdamHickey Sep 28, 2017
82f36ff
Update demo.
Blackbaud-AdamHickey Sep 28, 2017
dbc5042
Fix warning in visual test.
Blackbaud-AdamHickey Sep 29, 2017
556141b
Merge branch 'master' of https://github.com/blackbaud/skyux2 into ver…
Blackbaud-AdamHickey Sep 29, 2017
113c7fe
Merge branch 'master' into vertical-tabs-border
Blackbaud-SteveBrush Sep 29, 2017
4ca29c2
Merge branch 'master' into vertical-tabs-border
Blackbaud-SteveBrush Oct 2, 2017
9772506
Remove border on mobile.
Blackbaud-AdamHickey Oct 2, 2017
a62464c
Merge branch 'vertical-tabs-border' of https://github.com/blackbaud/s…
Blackbaud-AdamHickey Oct 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs.visual-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ describe('Vertical tabSet', () => {
return SkyVisualTest.setupTest('vertical-tabs', 480)
.then(() => {

const showTabsButton = element(by.css('.sky-vertical-tabset-show-tabs-btn'));
const showTabsButton =
element(by.css('#screenshot-vertical-tabset .sky-vertical-tabset-show-tabs-btn'));
browser.wait(function() { return browser.isElementPresent(showTabsButton); }, 8000);

// show tabs
Expand All @@ -66,7 +67,8 @@ describe('Vertical tabSet', () => {
return SkyVisualTest.setupTest('vertical-tabs', 480)
.then(() => {

const showTabsButton = element(by.css('.sky-vertical-tabset-show-tabs-btn'));
const showTabsButton =
element(by.css('#screenshot-vertical-tabset .sky-vertical-tabset-show-tabs-btn'));
browser.wait(function() { return browser.isElementPresent(showTabsButton); }, 8000);

// show tabs
Expand Down
40 changes: 21 additions & 19 deletions src/app/components/vertical-tabs/vertical-tabs-demo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
<sky-vertical-tabset
showTabsText="Tab list"
(activeChange)="tabChanged($event)"
>
<sky-vertical-tabset-group
*ngFor="let group of groups"
[groupHeading]="group.heading"
[open]="group.isOpen"
[disabled]="group.isDisabled"
<div style="height: 40vh">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you provide more information around this inline style?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was trying to show it would take up the full height of the parent div.

<sky-vertical-tabset
showTabsText="Tab list"
(activeChange)="tabChanged($event)"
>
<sky-vertical-tab
*ngFor="let tab of group.subTabs"
[active]="tab.active"
[tabHeading]="tab.tabHeading"
[tabHeaderCount]="tab.tabHeaderCount"
[disabled]="tab.disabled"
<sky-vertical-tabset-group
*ngFor="let group of groups"
[groupHeading]="group.heading"
[open]="group.isOpen"
[disabled]="group.isDisabled"
>
{{ tab.content }}
</sky-vertical-tab>
</sky-vertical-tabset-group>
</sky-vertical-tabset>
<sky-vertical-tab
*ngFor="let tab of group.subTabs"
[active]="tab.active"
[tabHeading]="tab.tabHeading"
[tabHeaderCount]="tab.tabHeaderCount"
[disabled]="tab.disabled"
>
{{ tab.content }}
</sky-vertical-tab>
</sky-vertical-tabset-group>
</sky-vertical-tabset>
</div>

<h3>Without groups</h3>
<sky-vertical-tabset (activeChange)="tabChanged($event)">
Expand Down
3 changes: 2 additions & 1 deletion src/modules/vertical-tabset/vertical-tabset.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@media (min-width: $sky-screen-sm-min) {
.sky-vertical-tabset {
display: flex;
max-height: 98vh;
height: 100%;
}
}

Expand All @@ -20,4 +20,5 @@
.sky-vertical-tabset-group-container {
flex-basis: 25%;
overflow-y: auto;
@include sky-border(dark, right);
}