Skip to content

Commit 2630fa9

Browse files
brandyscarneybrandyscarney
committed
feat(accordion): add disabled state and test
1 parent 738733f commit 2630fa9

File tree

3 files changed

+154
-3
lines changed

3 files changed

+154
-3
lines changed

‎core/src/components/accordion/accordion.ionic.scss‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
// --------------------------------------------------
66

77
:host {
8-
position: relative;
8+
@include globals.border-radius(globals.$ionic-border-radius-400);
99

10-
background-color: globals.$ionic-color-base-white;
10+
position: relative;
1111
}
1212

1313
// The border is added to the ::after element
@@ -27,7 +27,7 @@
2727

2828
content: "";
2929

30-
z-index: 1;
30+
z-index: 3;
3131
}
3232

3333
:host(.accordion-animated) {
@@ -66,3 +66,13 @@
6666

6767
color: globals.$ionic-color-neutral-1000;
6868
}
69+
70+
// Disabled Accordion
71+
// --------------------------------------------------
72+
73+
:host(.accordion-disabled)::before {
74+
@include globals.border-radius(inherit);
75+
@include globals.disabled-state();
76+
77+
z-index: 2;
78+
}

‎core/src/components/accordion/test/states/index.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Accordion - States</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
7+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
8+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
9+
<script src="../../../../../scripts/testing/scripts.js"></script>
10+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
11+
<style>
12+
.grid {
13+
display: grid;
14+
grid-template-columns: repeat(3, 1fr);
15+
grid-row-gap: 20px;
16+
grid-column-gap: 20px;
17+
}
18+
h2 {
19+
font-size: 12px;
20+
font-weight: normal;
21+
22+
color: #6f7378;
23+
24+
margin-top: 10px;
25+
margin-left: 5px;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<ion-app>
32+
<ion-header translucent="true">
33+
<ion-toolbar>
34+
<ion-title>Accordion - States</ion-title>
35+
</ion-toolbar>
36+
</ion-header>
37+
<ion-content fullscreen="true" color="light">
38+
<div class="grid ion-padding">
39+
<div class="grid-item">
40+
<h2>Disabled</h2>
41+
<ion-accordion value="first" disabled="true">
42+
<ion-item slot="header">
43+
<ion-label>Accordion title</ion-label>
44+
</ion-item>
45+
<div slot="content">This is the body of the accordion.</div>
46+
</ion-accordion>
47+
</div>
48+
<div class="grid-item">
49+
<h2>Pressed</h2>
50+
<ion-accordion value="first">
51+
<ion-item slot="header" class="ion-activated">
52+
<ion-label>Accordion title</ion-label>
53+
</ion-item>
54+
<div slot="content">This is the body of the accordion.</div>
55+
</ion-accordion>
56+
</div>
57+
<div class="grid-item">
58+
<h2>Focused</h2>
59+
<ion-accordion value="first">
60+
<ion-item slot="header" class="ion-focused">
61+
<ion-label>Accordion title</ion-label>
62+
</ion-item>
63+
<div slot="content">This is the body of the accordion.</div>
64+
</ion-accordion>
65+
</div>
66+
67+
<div class="grid-item">
68+
<h2>Disabled</h2>
69+
<ion-accordion-group value="first">
70+
<ion-accordion value="first" disabled="true">
71+
<ion-item slot="header">
72+
<ion-label>Accordion title</ion-label>
73+
</ion-item>
74+
<div slot="content">This is the body of the accordion.</div>
75+
</ion-accordion>
76+
<ion-accordion value="second">
77+
<ion-item slot="header">
78+
<ion-label>Accordion title</ion-label>
79+
</ion-item>
80+
<div slot="content">This is the body of the accordion.</div>
81+
</ion-accordion>
82+
<ion-accordion value="third">
83+
<ion-item slot="header">
84+
<ion-label>Accordion title</ion-label>
85+
</ion-item>
86+
<div slot="content">This is the body of the accordion.</div>
87+
</ion-accordion>
88+
</ion-accordion-group>
89+
</div>
90+
<div class="grid-item">
91+
<h2>Pressed</h2>
92+
<ion-accordion-group value="first">
93+
<ion-accordion value="first">
94+
<ion-item slot="header" class="ion-activated">
95+
<ion-label>Accordion title</ion-label>
96+
</ion-item>
97+
<div slot="content">This is the body of the accordion.</div>
98+
</ion-accordion>
99+
<ion-accordion value="second">
100+
<ion-item slot="header">
101+
<ion-label>Accordion title</ion-label>
102+
</ion-item>
103+
<div slot="content">This is the body of the accordion.</div>
104+
</ion-accordion>
105+
<ion-accordion value="third">
106+
<ion-item slot="header">
107+
<ion-label>Accordion title</ion-label>
108+
</ion-item>
109+
<div slot="content">This is the body of the accordion.</div>
110+
</ion-accordion>
111+
</ion-accordion-group>
112+
</div>
113+
<div class="grid-item">
114+
<h2>Focused</h2>
115+
<ion-accordion-group value="first">
116+
<ion-accordion value="first">
117+
<ion-item slot="header" class="ion-focused">
118+
<ion-label>Accordion title</ion-label>
119+
</ion-item>
120+
<div slot="content">This is the body of the accordion.</div>
121+
</ion-accordion>
122+
<ion-accordion value="second">
123+
<ion-item slot="header">
124+
<ion-label>Accordion title</ion-label>
125+
</ion-item>
126+
<div slot="content">This is the body of the accordion.</div>
127+
</ion-accordion>
128+
<ion-accordion value="third">
129+
<ion-item slot="header">
130+
<ion-label>Accordion title</ion-label>
131+
</ion-item>
132+
<div slot="content">This is the body of the accordion.</div>
133+
</ion-accordion>
134+
</ion-accordion-group>
135+
</div>
136+
</div>
137+
</ion-content>
138+
</ion-app>
139+
</body>
140+
</html>

‎core/src/components/item/item.ionic.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ slot[name="end"]::slotted(*) {
8484
}
8585

8686
:host(.ion-focused) .item-native::after {
87+
@include globals.border-radius(inherit);
8788
@include globals.position(0, 0, 0, 0);
8889

8990
position: absolute;

0 commit comments

Comments
 (0)