Skip to content

Commit 8a497c4

Browse files
brandyscarneybrandyscarney
committed
fix(accordion): update styles based on feedback from design
1 parent a9cf63f commit 8a497c4

File tree

3 files changed

+82
-4
lines changed

3 files changed

+82
-4
lines changed

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

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

77
:host {
8-
@include globals.border-radius(globals.$ionic-border-radius-400);
9-
108
position: relative;
9+
10+
min-width: 272px;
1111
}
1212

1313
// The border is added to the ::after element
@@ -44,7 +44,7 @@
4444
// The border is removed from the item in the header because
4545
// we are adding a border to the ::after element of the accordion.
4646
::slotted(ion-item[slot="header"]) {
47-
--border-radius: #{globals.$ionic-border-radius-400};
47+
--border-radius: #{globals.$ionic-border-radius-0};
4848
--color: #{globals.$ionic-color-neutral-1200};
4949
--border-width: 0;
5050
--inner-border-width: 0;
@@ -57,6 +57,11 @@
5757
@include globals.typography(globals.$ionic-heading-h6-medium);
5858
}
5959

60+
// Shape only applies when inside an inset accordion group
61+
:host(.in-accordion-group-expand-inset) ::slotted(ion-item[slot="header"]) {
62+
--border-radius: #{globals.$ionic-border-radius-400};
63+
}
64+
6065
// Accordion Content
6166
// --------------------------------------------------
6267

‎core/src/components/accordion/accordion.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg
22
import type { ComponentInterface } from '@stencil/core';
33
import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
44
import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
5+
import { hostContext } from '@utils/theme';
56
import { chevronDown } from 'ionicons/icons';
67

78
import { config } from '../../global/config';
@@ -48,7 +49,7 @@ export class Accordion implements ComponentInterface {
4849

4950
private currentRaf: number | undefined;
5051

51-
@Element() el?: HTMLElement;
52+
@Element() el!: HTMLElement;
5253

5354
@State() state: AccordionState = AccordionState.Collapsed;
5455
@State() isNext = false;
@@ -449,6 +450,8 @@ export class Accordion implements ComponentInterface {
449450
'accordion-readonly': readonly,
450451

451452
'accordion-animated': this.shouldAnimate(),
453+
454+
'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
452455
}}
453456
>
454457
<div

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,76 @@ <h2>Focused</h2>
133133
</ion-accordion>
134134
</ion-accordion-group>
135135
</div>
136+
137+
<div class="grid-item">
138+
<h2>Inset: Disabled</h2>
139+
<ion-accordion-group value="first" expand="inset">
140+
<ion-accordion value="first" disabled="true">
141+
<ion-item slot="header">
142+
<ion-label>Accordion title</ion-label>
143+
</ion-item>
144+
<div slot="content">This is the body of the accordion.</div>
145+
</ion-accordion>
146+
<ion-accordion value="second">
147+
<ion-item slot="header">
148+
<ion-label>Accordion title</ion-label>
149+
</ion-item>
150+
<div slot="content">This is the body of the accordion.</div>
151+
</ion-accordion>
152+
<ion-accordion value="third">
153+
<ion-item slot="header">
154+
<ion-label>Accordion title</ion-label>
155+
</ion-item>
156+
<div slot="content">This is the body of the accordion.</div>
157+
</ion-accordion>
158+
</ion-accordion-group>
159+
</div>
160+
<div class="grid-item">
161+
<h2>Inset: Pressed</h2>
162+
<ion-accordion-group value="first" expand="inset">
163+
<ion-accordion value="first">
164+
<ion-item slot="header" class="ion-activated">
165+
<ion-label>Accordion title</ion-label>
166+
</ion-item>
167+
<div slot="content">This is the body of the accordion.</div>
168+
</ion-accordion>
169+
<ion-accordion value="second">
170+
<ion-item slot="header">
171+
<ion-label>Accordion title</ion-label>
172+
</ion-item>
173+
<div slot="content">This is the body of the accordion.</div>
174+
</ion-accordion>
175+
<ion-accordion value="third">
176+
<ion-item slot="header">
177+
<ion-label>Accordion title</ion-label>
178+
</ion-item>
179+
<div slot="content">This is the body of the accordion.</div>
180+
</ion-accordion>
181+
</ion-accordion-group>
182+
</div>
183+
<div class="grid-item">
184+
<h2>Inset: Focused</h2>
185+
<ion-accordion-group value="first" expand="inset">
186+
<ion-accordion value="first">
187+
<ion-item slot="header" class="ion-focused">
188+
<ion-label>Accordion title</ion-label>
189+
</ion-item>
190+
<div slot="content">This is the body of the accordion.</div>
191+
</ion-accordion>
192+
<ion-accordion value="second">
193+
<ion-item slot="header">
194+
<ion-label>Accordion title</ion-label>
195+
</ion-item>
196+
<div slot="content">This is the body of the accordion.</div>
197+
</ion-accordion>
198+
<ion-accordion value="third">
199+
<ion-item slot="header">
200+
<ion-label>Accordion title</ion-label>
201+
</ion-item>
202+
<div slot="content">This is the body of the accordion.</div>
203+
</ion-accordion>
204+
</ion-accordion-group>
205+
</div>
136206
</div>
137207
</ion-content>
138208
</ion-app>

0 commit comments

Comments
 (0)