Skip to content

Commit 5401e8d

Browse files
brandyscarneybrandyscarney
committed
test(segment-view): split out disabled segment view / content test
1 parent faa7065 commit 5401e8d

File tree

2 files changed

+96
-25
lines changed

2 files changed

+96
-25
lines changed

‎core/src/components/segment-view/test/basic/index.html‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -96,32 +96,9 @@
9696
<ion-segment-content id="top">Top</ion-segment-content>
9797
</ion-segment-view>
9898

99-
<ion-toolbar>
100-
<ion-segment disabled value="reading-list">
101-
<ion-segment-button content-id="bookmarks" value="bookmarks">
102-
<ion-label>Bookmarks</ion-label>
103-
</ion-segment-button>
104-
<ion-segment-button content-id="reading-list" value="reading-list">
105-
<ion-label>Reading List</ion-label>
106-
</ion-segment-button>
107-
<ion-segment-button content-id="shared-links" value="shared-links">
108-
<ion-label>Shared Links</ion-label>
109-
</ion-segment-button>
110-
</ion-segment>
111-
</ion-toolbar>
112-
<ion-segment-view disabled>
113-
<ion-segment-content id="bookmarks">Bookmarks</ion-segment-content>
114-
<ion-segment-content id="reading-list">Reading List</ion-segment-content>
115-
<ion-segment-content id="shared-links">Shared Links</ion-segment-content>
116-
</ion-segment-view>
117-
118-
<button class="expand" onClick="changeSegmentContent()">
119-
Change Segment Content
120-
</button>
99+
<button class="expand" onClick="changeSegmentContent()">Change Segment Content</button>
121100

122-
<button class="expand" onClick="clearSegmentValue()">
123-
Clear Segment Value
124-
</button>
101+
<button class="expand" onClick="clearSegmentValue()">Clear Segment Value</button>
125102
</ion-content>
126103

127104
<ion-footer>

‎core/src/components/segment-view/test/disabled/index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Segment View - Disabled</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
16+
<style>
17+
ion-segment-view {
18+
height: 100px;
19+
}
20+
21+
/**
22+
* TODO the :not is required otherwise it
23+
* overrides the disabled styles
24+
*/
25+
ion-segment-content:not([disabled]) {
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
}
30+
31+
ion-segment-content:nth-of-type(1) {
32+
background: lightpink;
33+
}
34+
35+
ion-segment-content:nth-of-type(2) {
36+
background: lightblue;
37+
}
38+
39+
ion-segment-content:nth-of-type(3) {
40+
background: lightgreen;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<ion-app>
47+
<ion-header>
48+
<ion-toolbar>
49+
<ion-title>Segment View - Disabled</ion-title>
50+
</ion-toolbar>
51+
</ion-header>
52+
53+
<ion-content>
54+
<ion-toolbar>
55+
<ion-segment value="paid">
56+
<ion-segment-button content-id="paid" value="paid">
57+
<ion-label>Paid</ion-label>
58+
</ion-segment-button>
59+
<ion-segment-button disabled content-id="free" value="free">
60+
<ion-label>Free</ion-label>
61+
</ion-segment-button>
62+
<ion-segment-button content-id="top" value="top">
63+
<ion-label>Top</ion-label>
64+
</ion-segment-button>
65+
</ion-segment>
66+
</ion-toolbar>
67+
<ion-segment-view>
68+
<ion-segment-content id="paid">Paid</ion-segment-content>
69+
<ion-segment-content disabled id="free">Free</ion-segment-content>
70+
<ion-segment-content id="top">Top</ion-segment-content>
71+
</ion-segment-view>
72+
73+
<ion-toolbar>
74+
<ion-segment disabled value="reading-list">
75+
<ion-segment-button content-id="bookmarks" value="bookmarks">
76+
<ion-label>Bookmarks</ion-label>
77+
</ion-segment-button>
78+
<ion-segment-button content-id="reading-list" value="reading-list">
79+
<ion-label>Reading List</ion-label>
80+
</ion-segment-button>
81+
<ion-segment-button content-id="shared-links" value="shared-links">
82+
<ion-label>Shared Links</ion-label>
83+
</ion-segment-button>
84+
</ion-segment>
85+
</ion-toolbar>
86+
<ion-segment-view disabled>
87+
<ion-segment-content id="bookmarks">Bookmarks</ion-segment-content>
88+
<ion-segment-content id="reading-list">Reading List</ion-segment-content>
89+
<ion-segment-content id="shared-links">Shared Links</ion-segment-content>
90+
</ion-segment-view>
91+
</ion-content>
92+
</ion-app>
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)